I have a video tag which I am using to show live preview before the recording with this code
initializeMediaDevices() {
const constraints = { video: true, audio: true };
navigator.mediaDevices.getUserMedia(constraints)
.then((mediaStream) => {
this.mediaStream = mediaStream;
this.videoElement.nativeElement.srcObject = this.mediaStream;
this.videoElement.nativeElement.muted = true;
})
.catch((error) => {
alert('Access for microphone and webcam not granted');
});
}
Afterwards I am recording the video
async startRecording() {
try {
this.recordRTC = RecordRTC(this.mediaStream, {type: 'video'});
this.recordRTC.startRecording();
this.videoElement.nativeElement.muted = true;
this.videoElement.nativeElement.volume = 0;
} catch (error) {
alert('Access for microphone and webcam not granted');
}
}
stopRecording() {
clearInterval(this.timerInterval);
this.recordRTC.stopRecording(() => {
const blob = this.recordRTC.getBlob();
this.videoURL = URL.createObjectURL(blob);
this.recordedVideoElement.nativeElement.src = this.videoURL;
this.recordedVideoElement.nativeElement.muted = false;
this.recordedVideoElement.nativeElement.volume = 1;
this.recordedVideoElement.nativeElement.controls = true;
this.recordedVideoElement.nativeElement.autoplay = false;
let stream = this.mediaStream;
stream.getAudioTracks().forEach(track => track.stop());
stream.getVideoTracks().forEach(track => track.stop());
this.mediaStream.getTracks().forEach( track => track.stop() );
});
However the videos are getting recorded fine in web ( tested in chrome,firefox ) however when I try to record the videos in my phone ( tested and worked perfectly on android ) , however when I try to test in on my iOS ( running iOS 16 ) , live preview is showing blank and after clicking on start recording it is not showing preview however the video is getting recorded and shows the recorded video afterwards. Is something wrong with the code or is recordRTC not compatible with safari browsers?