在浏览器中获取用户媒体的最新技术是什么? [英] What's the state of the art for getting user media in browsers?

查看:139
本文介绍了在浏览器中获取用户媒体的最新技术是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

来自 Navigator.getUserMedia()上的MDN页面


已弃用

此功能已从Web标准中删除。虽然有些浏览器可能仍然支持它,但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或网络应用程序可能随时中断。

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.

...那么在天堂我们如何在浏览器中访问用户媒体?我看到一些完全能够检测智能手机相机的webapps,那么解决方案是什么?

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

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

推荐答案

目前最先进的是 navigator .mediaDevices.getUserMedia 使用 adapter.js polyfill,这是一个垫片而不是图书馆,因为它的目标是在所有浏览器达到规格后消失。

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.

以下适用于Chrome,Chrome for Android,Firefox,Firefox for Android,Edge和Opera(使用 https小提琴

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>

规格已经确定,因此polyfill的主要原因是Chrome正在迎头赶上(请参阅 Google Developers发布选择输入设备的消息)。不同之处在于承诺的返回以及新约束语法

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)支持 mediaDevices.getUserMedia 视频。 srcObject 本地。

  • Chrome for Android仍然需要填充。

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

旧的 navigator.webkitGetUserMedia (Chrome / Opera), navigator.mozGetUserMedia (Firefox)和 navigator.getUserMedia (Edge)用于向后兼容(暂时)。

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

这篇关于在浏览器中获取用户媒体的最新技术是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆