Issue with WebRTC/getUserMedia in iOS 14 Safari and phone sleep/unlock

Question

I seem to have noticed a regression with getUserMedia in iOS 14 Safari. Here are steps to reproduce:

1. Go to https://webrtc.github.io/samples/src/content/getusermedia/gum/ on iOS 14 Safari
2. Click "Open camera" and accept camera permissions; you should see local camera video.
3. Click the power button and lock the phone; let the phone go to sleep
4. Unlock/wake the phone; the local camera video is gone.

This does not happen on devices running iOS 13.

My questions are:

1. Can anyone else confirm this on their devices? I have only tested on iPhone 11 so far.
2. Has anyone found a solution yet?

Answer 1

Yes, I am having the a similar strange issue with iOS 14.2 and getUserMedia I can only get navigator.mediaDevices.getUserMedia({video: true }) to work If I change it to: navigator.mediaDevices.getUserMedia({ audio: true, video: true }) it will fail. It's not an issue with code as I tested my project on safari MacOS, chrome for MacOS, linux Firefox.

As a temp fix so I could move on with my life for the moment I did this:

const constraints = navigator.userAgent.includes("iPhone") ? {video:true} : {
audio:true,
  video: {
      width: { ideal: 640 },
      height: {ideal: 400 }
      }    
};

Answer 2

Yes also here!

I check this behavior in Browserstack with iOS:

• 12.x: ✓
• 13.x: ✓
• 14.x: ✗

Try this:

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
 .then(stream => {
   const videoTracks = stream.getVideoTracks();
   console.log(videoTracks[0].enabled);
   document.querySelector('video').srcObject = stream;
 });

// Output
true <-- ?

Then if you try again get the camera, but replacing the video track on the previous MediaStream works.

Sometimes if you use video constraints with facingMode: 'user' also works, why? I don't know.

I still can't find a consistent solution.