Navigator.mediaDevices.getUserMedia not working on iOS 12 Safari
Getusermedia.
As of iOS 12, navigator.mediaDevices.getUserMedia() is returning an error in Safari.
To recreate this, open iPhone Web Inspector, then run this snippet in the console:
You'll see that this runs successfully in desktop browsers, and in iOS 11 Safari, but fails in iOS 12 Safari.
NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
Any idea why?
note: This is happening prior to the user being asked if their camera can be accessed, ruling out the possibility of it being because the user denied permission.
People also ask
Since iOS 11, getUserMedia is supposed to finally work on Apple devices. But in fact it does not work. The JavaScript sample code below works on all other OS: Blackberry, Android, etc...
getUserMedia is deprecated, and not supported in Safari browser. You can see the Compatibility table taken from the MDN Docs. Instead, you can use the navigator. mediaDevices.
The MediaDevices . getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.
Setting these three attributes before calling getUserMedia solved the problem for me:
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 video.play() .
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.
With an https link, iOS Safari 12 works for me; same link in http gets NotAllowedError .
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 NotAllowedError .
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:
This doesn't work:
...and in addition to failing with NotAllowedError , Safari warns in web console:
This is also a recent update to the spec.
Turns out my particular issue was a bug in 12.01. Every device with that version had the issue, and as soon as I updated them to a newer version it went away.
Related questions
Recent activity.
- Apple Pay - authorize.net returns error 153 only when live, sandbox works
- How to continue cursor loop even error occured in the loop
- python find all neighbours of a given node in a list of lists
- Fatal error: Call to a member function setColumn() on a non-object in Magento
- Count how many of each value from a field with MySQL and PHP
- Python 32-bit development on 64-bit Windows [closed]
Donate For Us
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Navigation Menu
Search code, repositories, users, issues, pull requests..., provide feedback.
We read every piece of feedback, and take your input very seriously.
Saved searches
Use saved searches to filter your results more quickly.
To see all available qualifiers, see our documentation .
- Notifications
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
getUserMedia() on iOS 11 Safari #2146
kylemcdonald commented Aug 29, 2017 • edited
lmccart commented Aug 29, 2017
- 🎉 1 reaction
- ❤️ 1 reaction
Sorry, something went wrong.
bwhitman commented Aug 29, 2017
usachatnow commented Sep 14, 2017
Bwhitman commented sep 14, 2017, lmccart commented sep 14, 2017, usachatnow commented sep 28, 2017, lmccart commented sep 28, 2017 • edited.
No branches or pull requests
getUserMedia/Stream API
Method of accessing external device data (such as a webcam video stream). Formerly this was envisioned as the <device> element.
- 4 - 20 : Not supported
- 21 - 52 : Partial support
- 53 - 123 : Supported
- 124 : Supported
- 125 - 127 : Supported
- 12 - 123 : Supported
- 3.1 - 10.1 : Not supported
- 11 - 17.3 : Supported
- 17.4 : Supported
- 17.5 - TP : Supported
- 2 - 16 : Not supported
- 17 - 35 : Partial support
- 36 - 41 : Supported
- 42 - 124 : Supported
- 125 : Supported
- 126 - 128 : Supported
- 9 - 11.6 : Not supported
- 12 - 12.1 : Partial support
- 15 - 17 : Not supported
- 18 - 39 : Partial support
- 40 - 108 : Supported
- 109 : Supported
- 5.5 - 10 : Not supported
- 11 : Not supported
Chrome for Android
Safari on ios.
- 3.2 - 10.3 : Not supported
- 11 - 13.3 : Supported
- 13.4 - 17.3 : Supported
- 17.5 : Supported
Samsung Internet
- 4 - 5.4 : Partial support
- 6.2 - 23 : Supported
- 24 : Supported
- all : Not supported
Opera Mobile
- 10 - 11.5 : Not supported
- 80 : Supported
UC Browser for Android
- 15.5 : Supported
Android Browser
- 2.1 - 4.4.4 : Not supported
Firefox for Android
- 14.9 : Supported
Baidu Browser
- 13.52 : Supported
KaiOS Browser
- 2.5 : Not supported
- 3 : Supported
As of Chrome 47, the getUserMedia API cannot be called from insecure origins.
- Skip to main content
- Select language
- Skip to search
Navigator.getUserMedia()
Width and height.
This is a legacy method. Please use the newer navigator.mediaDevices.getUserMedia() instead. While technically not deprecated, this old callback version is marked as such, since the specification strongly encourages using the newer promise returning version.
Deprecated This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
The Navigator.getUserMedia() method prompts the user for permission to use up to one video input device (such as a camera or shared screen) and up to one audio input device (such as a microphone). If permission is granted, a MediaStream whose video and/or audio tracks come from those devices is delivered to the specified success callback. If permission is denied, no compatible input devices exist, or any other error condition occurs, the error callback is executed with a MediaStreamError object describing what went wrong. If the user instead doesn't make a choice at all, neither callback is executed.
Return value
undefined .
Here's an example of using getUserMedia() , including code to cope with various browsers' prefixes. Note that this is the deprecated way of doing it: See the Examples section under the MediaDevices.getUserMedia() for modern examples.
Permissions
To use getUserMedia() in an installable app (for example, a Firefox OS app ), you need to specify one or both of the following fields inside your manifest file:
See permission: audio-capture and permission: video-capture for more information.
Specifications
Browser compatibility.
New code should use Navigator.mediaDevices.getUserMedia() instead.
[1] Later versions of Chrome support unprefixed MediaDevices.getUserMedia() , that replaced this deprecated method.
[2] Chrome and Opera still use an outdated constraint syntax, but the syntax described here is available through the adapter.js polyfill.
[3] The constraint syntax described here is available as of Firefox 38. Earlier versions (32-37) used an outdated constraint syntax, but the syntax described here is available there through the adapter.js polyfill.
[4] In Firefox OS 1.2 only audio was supported, 1.4 added support for video .
- MediaDevices.getUserMedia() that replaces this deprecated method.
- WebRTC - the introductory page to the API
- MediaStream API - the API for the media stream objects
- Taking webcam photos - a tutorial on using getUserMedia() for taking photos rather than video.
Document Tags and Contributors
- getusermedia
- Media Capture and Streams API
- Media Streams API
- Media Capture and Streams API (Media Streams)
- activeVRDisplays
- appCodeName
- cookieEnabled
- credentials
- geolocation
- maxTouchPoints
- mediaDevices
- mozBluetooth
- mozNotification
- permissions
- serviceWorker
- addIdleObserver()
- getBattery()
- getGamepads()
- getUserMedia()
- getVRDisplays()
- mozIsLocallyAvailable()
- registerContentHandler()
- registerProtocolHandler()
- requestMediaKeySystemAccess()
- requestWakeLock()
- sendBeacon()
- taintEnabled()
- overconstrained
- removetrack
- devicechange
- AudioStreamTrack
- CanvasCaptureMediaStream
- ConstrainBoolean
- ConstrainDOMString
- ConstrainDouble
- ConstrainLong
- DoubleRange
- HTMLCanvasElement.captureStream()
- MediaDevices
- MediaStream
- MediaStreamTrack
- MediaStreamTrackEvent
- MediaTrackCapabilities
- MediaTrackConstraints
- MediaTrackSettings
- MediaTrackSupportedConstraints
- NavigatorUserMedia
- NavigatorUserMediaError
- VideoStreamTrack
navigator.mediaDevices.getUserMedia doesn't work on macos catalyst
I've got the following error on Mac Catalyst:
TypeError: undefined is not an object (evaluating 'navigator.mediaDevices.getUserMedia')
macOS 13.5.1 (22G 90) Safari 17.0 (18616.1.24.11.5, 18616) UserAgent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15"
The same app works well on iOS.
- Mac Catalyst
COMMENTS
navigator.mediaDevices.getUserMedia() not working iOS 11 standalone apps 3 Trying to capture audio but navigator.mediaDevices.enumerateDevices() is NULL on Safari 12 even with microphone permissions granted
getusermedia working in iOS 11.3 in the safari browser but not working in chrome browser. if it is possible to make it work on chrome that would be great.anyone have any idea? Thanks, Dhanalakshmi. Posted by Dhana6795. Copy to clipboard. Share this post ...
javascript: How can i fix 'navigator.mediaDevices.getUserMedia' for Safari?Thanks for taking the time to learn more. In this video I'll go through yo...
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 video.play(). Simply setting the video.srcObject to the stream returned by getUserMedia worked for me. This medium post has a link to a working demo ...
I can confirm that it is working as intended in MacOs Ventura 13.1. All 3 devices are on the same version of webkit, i.e, 605.1.15. What browsers does this problem apply to, if applicable? Safari. What did you expect to see? Updated Compability chart. Did you test this? If so, how? Tested on 2 physical devices: Macbook Air: MacOs 13.1 iPhone XS ...
The getUserMedia() method of the MediaDevices interface prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.. That stream can include, for example, a video track (produced by either a hardware or virtual video source such as a camera, video recording device, screen sharing service, and so forth), an audio track ...
when i open it on firefox i get message "getUserMedia() not supported in your browser." on another hand when i open this HTML5-rocks-demo. ... To get this to work in IE and Safari, there are plugins, I haven't tried any of them, e.g. OpenWebRTC (sounds suboptimal but good for testing).
Now, GetUserMedia() works, and the browsers on both my iPhone and Mac work to request the camera and render the stream. However, the WebRTC connection still does not work for browsers, either Chrome or Safari, on my iPhone. The media stream track is connected, but no frames are sent from the iPhone to the other peer.
Handle clicks on the button. To capture a still photo each time the user clicks the startbutton, we need to add an event listener to the button, to be called when the click event is issued: js. startbutton.addEventListener( "click", (ev) => { takepicture(); ev.preventDefault(); }, false, );
I changed to iOS 15, the video is not presented. (new install on a new device) I updated a device from 14.8 to 15, the app already was installed on the 14.8 os version, but it worked after the update to ios 15 was installed as well. I've reinstalled it, and the problem os occurred on this phone as well. The codebase was untouched.
The deprecated Navigator.getUserMedia() method prompts the user for permission to use up to one video input device (such as a camera or shared screen) and up to one audio input device (such as a microphone) as the source for a MediaStream. If permission is granted, a MediaStream whose video and/or audio tracks come from those devices is ...
4. I'm having literally this issue but the OP's solution isn't working for me. To reiterate though, I'm using navigator.mediaDevices.getUserMedia() to capture video input in the browser and everything's working great on all incarnations of chrome, but the camera just doesn't start up on IOS safari. No error, no video feed, nothing.
Good news! getUserMedia () is a new feature on iOS 11 Safari, which means that some time next month you can start using the webcam and microphone input on iOS. But it looks like right now there is a bug with the way p5.js wraps getUserMedia (). A friend of mine who is running iOS 11 Safari tried three examples. First, this page:
See Chromium issue 387740. 2 Supports the older spec's navigator.getUserMedia API, not the newer navigator.mediaDevices.getUserMedia one. 3 Before iOS 14.3 getUserMedia returned no video input devices in UIWebView or WKWebView, but only directly in Safari. 4 Does not work in standalone running ("installed") PWAs. "Can I use" provides up-to-date ...
getUserMedia API Not working on Safari for iPads. getUserMedia API Not working on Safari for iPads, other browsers are completely ruled out. May i know which version's are compatible and which iPads are compatible? Image capture is working fine but not audio capture. iPad.
1. You definitely want navigator.mediaDevices.getUserMedia() method. It definitely works on iOS. The other one is deprecated. Apple is so late to the getUserMedia () party that they did not implement the deprecated API. You can read about viewing the iOS console. You need to connect your iOS device to a mac, then use the Safari on that mac, to ...
New code should use Navigator.mediaDevices.getUserMedia() instead. [1] Later versions of Chrome support unprefixed MediaDevices.getUserMedia(), that replaced this deprecated method. [2] Chrome and Opera still use an outdated constraint syntax, but the syntax described here is available through the adapter.js polyfill.
Alternatively, use the keyboard shortcut Shift+Cmd+N.; Try opening Facebook in the Private window. Clear Website Data. You can also try clearing your website data in Safari to see if this fixes ...
navigator.mediaDevices.getUserMedia doesn't work on macos catalyst . You're now watching this thread. If you've opted in to email or web notifications, you'll be notified when there's activity. ... (evaluating 'navigator.mediaDevices.getUserMedia') macOS 13.5.1 (22G 90) Safari 17.0 (18616.1.24.11.5, 18616) UserAgent "Mozilla/5.0 ...
2. I am currently developing an app using the flutter_webrtc package. It turns out that when I call WebRTC's getUserMedia method as blow, it does not prompt me to check for camera permission, and the whole app is just stuck. This situation happens with Mac Safari and both IOS Chrome and Safari. _peerConnection!.addTrack(element, stream);