html - 在浏览器中获取用户媒体的最新技术是什么？

Question

来自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.

...那么我们到底如何才能在浏览器中访问用户媒体呢？我看到一些网络应用程序完全能够检测智能手机摄像头，那么解决方案是什么？

例如，这不再起作用 http://www.html5rocks.com/en/tutorials/getusermedia/intro/

Answer 1

目前最先进的技术是 navigator.mediaDevices.getUserMedia使用adapter.js polyfill，它是一个垫片而不是一个库，因为它的目标是消失一次 all browsers are up to spec .

以下内容适用于 Chrome、Chrome for Android、Firefox、Firefox for Android、Edge 和 Opera(在 Chrome 中使用 https fiddle):

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>

规范已经确定，所以 polyfill 的主要原因是 Chrome 正在迎头 catch (请参阅此 Google Developers post on choosing input devices )。区别在于 promise 的返回，以及 new constraints syntax .

• Chrome Canary (52) 原生支持 mediaDevices.getUserMedia 和 video.srcObject。
• Android 版 Chrome 仍然需要 polyfill。

旧的 navigator.webkitGetUserMedia (Chrome/Opera)、navigator.mozGetUserMedia (Firefox) 和 navigator.getUserMedia (Edge) 已经存在为了向后兼容(目前)。