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:

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

This does not happen on devices running iOS 13.

My questions are:

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

score 2 · Answer 1 · answered Dec 02 '20 at 01:50

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 }
      }    
};

score 1 · Answer 2 · answered Nov 19 '20 at 16:42

1

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.

answered Nov 19 '20 at 16:42

Matias L.

23
6

Is this code is for swift ? and How can I add this code in my code ? – rohit sankpal Dec 04 '20 at 05:49
@rohitsankpal this code is for the web, apparently, this only happens in Safari iOS, so I don't know if this behavior exists in a native app, except if you use WKWebView. – Matias L. Dec 07 '20 at 19:01
Thanks for this explanation. – rohit sankpal Dec 09 '20 at 12:18
I'm using a WKWEbview , I couldn't get the getUserMedia working , it throws Type Error. Can you help me out some how – JalilIrfan Jul 18 '21 at 05:20

score 0 · Answer 3 · answered Sep 08 '22 at 10:56

Having the same issue on iPad pro 2nd generation with iOS 14.7.1 and iPhone 7 iOS 14.6.x. The only solution I found that seems to constantly work is to call getUserMedia separated by audio and video constraints. As an example:

async function getMedia(constraints) {
  let videoStream = null;
  let audioStream = null;

  try {
    videoStream = await navigator.mediaDevices.getUserMedia({video: true});
    audioStream = await navigator.mediaDevices.getUserMedia({audio: true});
    /* use the stream */
  } catch (err) {
    /* handle the error */
  }
}

You can replace {video: true} or {audio: true} with your desired constraints. Then you can either work with the separate MediaStream objects or to construct your own MediaStream object from the audio and video tracks of your streams.

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

3 Answers3