Issues in safari browser running iOS 16 : RecordRTC

174 Views Asked by At

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?

0

There are 0 best solutions below