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/

Answer 1

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).