What's the state of the art for getting user media in browsers?

Question

From MDN's page on Navigator.getUserMedia():

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. Do not use it in old or new projects. Pages or Web apps using it may break at any time.

... So how in heaven can we access user media in browsers? I see around some webapps that are perfectly capable to detect a smartphone camera so what is the solution?

For example this doesn't work anymore http://www.html5rocks.com/en/tutorials/getusermedia/intro/

[MDN: Navigator.getUserMedia()](https://developer.mozilla.org/en/docs/Web/API/Navigator/getUserMedia) tells you: `This is a legacy API for backwards compatibility. Please use:` [MediaDevices.getUserMedia()](https://developer.mozilla.org/en/docs/Web/API/MediaDevices/getUserMedia) — t.niese, May 21 '16 at 08:43
Did you check the link? MediaDevices has no support in mobile browsers at all and limited support on desktop browsers. — Chriz74, May 21 '16 at 08:46
Browser vendors wont adapt new features immediately and also wont kick out deprecated ones immediately there will always be a transition time. `MediaDevices.getUserMedia() ` is the new standard way you have to do it. To support as many browsers as possible while still staying up to date you would first test for the existence of `MediaDevices.getUserMedia` and use it if possible and otherwise fall back to `Navigator.getUserMedia()` — t.niese, May 21 '16 at 09:22
Please post a link to a demo that actually works and uses this technology. I can't find any. — Chriz74, May 21 '16 at 09:24
[MDN: Navigator.getUserMedia(): Examples](https://developer.mozilla.org/en/docs/Web/API/MediaDevices/getUserMedia#Examples) has an example that will use the new API or the old one as fallback, first asking for permission to access the camera (otherwise you won't be able to detect if there is a camera) and then streaming it to a ` — t.niese, May 21 '16 at 09:37
Is it such a problem to copy the code as is, place it e.g. in jsfiddle in the _javascript_ , add `` in the _html_ section and then click on _Run_? — t.niese, May 21 '16 at 09:43

score 2 · Answer 1 · edited May 23 '17 at 11:45

The state of the art at the moment is navigator.mediaDevices.getUserMedia using the adapter.js polyfill, which is a shim more than a library, in that its goal is to disappear once all browsers are up to spec.

The following works in Chrome, Chrome for Android, Firefox, Firefox for Android, Edge and Opera (use https fiddle in Chrome):

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => video.srcObject = stream)
  .catch(e => log(e.name + ": "+ e.message));
  
var log = msg => div.innerHTML += msg + "<br>";

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<video id="video" width="160" height="120" autoplay></video><br>
<div id="div"></div>

The spec has settled, so the main reason for the polyfill is that Chrome is catching up (see this Google Developers post on choosing input devices). The difference is the return of a promise, and the new constraints syntax.

Chrome Canary (52) supports mediaDevices.getUserMedia and video.srcObject natively.
Chrome for Android still needs the polyfill.

The old navigator.webkitGetUserMedia (Chrome/Opera), navigator.mozGetUserMedia (Firefox) and navigator.getUserMedia (Edge) are around for backwards compatibility (for now).

What's the state of the art for getting user media in browsers?

1 Answers1

Linked