navigator.getUserMedia - Web API 接口参考 编辑

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	Candidate Recommendation	Initial definition.

浏览器兼容性

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

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 添加了视频支持.

更多参见 

• MediaDevices.getUserMedia() 替代了当前废弃的版本。
• WebRTC - the introductory page to the API
• MediaStream API - the API for the media stream objects
• Taking webcam photos - a tutorial on using getUserMedia() for taking photos rather than video.