Navigator.mediaDevices.getUserMedia not working on iOS 12 Safari
Setting these three attributes before calling
getUserMedia solved the problem for me:
video.setAttribute('autoplay', ''); video.setAttribute('muted', ''); video.setAttribute('playsinline', '');
For some reason
video.setAttribute() works but trying to assign the value directly to the video object for example
video.muted = '' does not.
Also it appears that it's not necessary to call
Simply setting the
video.srcObject to the stream returned by
getUserMedia worked for me.
This medium post has a link to a working demo & source code.
There are two possible reasons for immediate
NotAllowedError at the moment:
1. getUserMedia requries https
Safari seems to require
https for camera and mic access, both in iOS and OSX.
Chrome has the same requirement. This is consistent with the direction of the specification, which recently has restricted
getUserMedia to secure contexts. Browsers who have yet to update, still expose
navigator.mediaDevices in http, but
getUserMedia always rejects with
In the future, expect browsers to remove
mediaDevices entirely in http, to comply with the spec.
2. getUserMedia requires feature policy in cross-origin iframes.
This appears new with Safari 12. In iframes,
getUserMedia's feature policy is off by default for cross-origin content.
This works for me:
<iframe allow="camera;microphone" src="https://webrtc.github.io/samples/src/content/getusermedia/gum/"></iframe>
...and in addition to failing with
NotAllowedError, Safari warns in web console:
The top-level frame has prevented a document with a different security origin tocall getUserMedia.
This is also a recent update to the spec.