-1

I have a mobile website that takes a few pictures (environment cam) and records a short video (user cam). On desktop, everything works fine. On mobile, the camera feed is shown on both chrome and Safari. Taking pictures also works, but when I try to start recording, the page does not execute any javascript code after mediarecorder.start(1000). This means instructions are not shown and the vid never stops recording.

Code:

async function start() 
        {
          var constraints = { video: { width: { ideal: 4096 }, height: { ideal: 2160 }, facingMode: 'user'}};
            
            cameraStream = await navigator.mediaDevices.getUserMedia(constraints);
            video.srcObject = cameraStream;  video.play();
            mediaRecorder = new MediaRecorder(cameraStream,{ mimeType: 'video/webm' });
            mediaRecorder.addEventListener('dataavailable', function(e) {
                    chunks.push(e.data);
    
                });
        }
        function startRecording() 
        {
          console.log("starting recording")
            takePicture();
            console.log("Selfie taken")
            outline.style.display = 'none';
            button.style.display = 'none';
            text.innerText = "Volg de instructies op het scherm.";
            //WORKS FINE TILL HERE
            mediaRecorder.start(1000);
            //BELOW THIS IS NEVER EXECUTED
            console.log("setting timeout");
            setTimeout(step,2000);

        }

As said, it works on desktop, but not on iOS chrome or Safari.

Martijn Deleij
  • 91
  • 1
  • 16

1 Answers1

0

Chrome and Safari on iOS are unfortunately more or less the same. Apple only allows their own browser engine on iOS and Chrome plays by those rules.

The MediaRecorder in Safari doesn't support 'video/webm' which is why I guess there is already an error thrown when you construct the MediaRecorder. Consequently the mediaRecorder variable is undefined when you try to call start() later on.

It probably works if you let Safari (or Chrome on iOS) pick the mimeType itself by omitting the configuration.

mediaRecorder = new MediaRecorder(cameraStream);
chrisguttandin
  • 7,025
  • 15
  • 21