MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这篇翻译不完整。请帮忙从英语翻译这篇文章

Note: 此API已更名为 MediaDevices.getUserMedia()。 请使用那个版本进行替代! 这个已废弃的API版本仅为了向后兼容而存在。

已废弃
该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

Navigator.getUserMedia()方法提醒用户需要使用音频(0或者1)和(0或者1)视频输入设备,比如相机,屏幕共享,或者麦克风。如果用户给予许可,successCallback回调就会被调用,MediaStream对象作为回调函数的参数。如果用户拒绝许可或者没有媒体可用,errorCallback就会被调用,类似的,PermissionDeniedError 或者NotFoundError对象作为它的参数。注意,有可能以上两个回调函数都不被调用,因为不要求用户一定作出选择(允许或者拒绝)。

语法

navigator.getUserMedia ( constraints, successCallback, errorCallback );

参数

constraints 

MediaStreamConstaints对象指定了请求使用媒体的类型,还有每个类型的所需要的参数。具体细节请参见MediaDevices.getUserMedia() 方法下面的constraints部分。

successCallback

当调用成功后,successCallback中指定的函数就被调用,包含了媒体流的MediaStream对象作为它的参数,你可以把媒体流对象赋值给合适的元素,然后使用它,就像下面的例子一样:

function(stream) {
   var video = document.querySelector('video');
   video.src = window.URL.createObjectURL(stream);
   video.onloadedmetadata = function(e) {
      // Do something with the video here.
   };
}

errorCallback

当调用失败,errorCallback中指定的函数就会被调用,MediaStreamError对象作为它唯一的参数;此对象基于DOMException对象构建。错误码描述见参见以下:

Error Description
PermissionDeniedError 使用媒体设备请求被用户或者系统拒绝
NotFoundError

找不到constraints中指定媒体类型

示例

宽度和高度

使用getUserMedia()的示例,包括了可以适用于多种浏览器前缀的代码。注意这种使用方式已经被废除,现代的使用方法请参见MediaDevices.getUserMedia() 下面的示例部分。

navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         video.src = window.URL.createObjectURL(stream);
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

权限

在一个可以安装的app(比如,Firefox OS app)中使用getUserMedia(),你需要在你的manifest文件中指定一个或者多个以下条目:

"permissions": {
  "audio-capture": {
    "description": "Required to capture audio using getUserMedia()"
  },
  "video-capture": {
    "description": "Required to capture video using getUserMedia()"
  }
}

参见 permission: audio-capture 和 permission: video-capture 以查看更多信息。

规格

Specification Status Comment
Media Capture and Streams
navigator.getUserMedia
Editor's Draft Initial definition.

浏览器兼容性

新代码应当使用 Navigator.mediaDevices.getUserMedia() 替代.

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 21webkit [1] 17moz [3] 未实现 12 [2]
18webkit
未实现
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic Support ? 40.0webkit [2] 24moz [3] 1.2moz [4]
1.4moz
未实现 12 [2] 未实现 未实现

[1] 新版的Chrome支持未带前缀的 MediaDevices.getUserMedia(), 用以取代此已废弃版本.

[2] Chrome 和 Opera 仍然在使用已经过期的 constraint 语法, 但是此描述中的语法可以通过 adapter.js polyfill来使用.

[3]  在此描述的constraint 语法自 Firefox 38后可用. 更早的版本 (32-37) 使用了已经过期的语法, 但是此描述中的语法可以通过 adapter.js polyfill来使用.

[4] 在 Firefox OS 1.2中, 只有音频的到支持, 1.4 添加了视频支持.

更多参见 

文档标签和贡献者

 此页面的贡献者: ice.HG, c1ngular, liuzeyafzy, fscholz, jtyjty99999
 最后编辑者: ice.HG,