navigator.getUserMedia

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

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它,但也许已从相关的 web 标准中移除,也许正准备移除或出于兼容性而保留。请尽量不要使用该特性,并更新现有的代码;参见本页面底部的兼容性表格以指导你作出决定。请注意,该特性随时可能无法正常工作。

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

语法

js
getUserMedia(constraints, successCallback, errorCallback)

参数

constraints

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

successCallback

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

js
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 对象构建。错误码描述见参见以下:

错误 描述
PermissionDeniedError 使用媒体设备请求被用户或者系统拒绝
NotFoundError 找不到 constraints 中指定媒体类型

示例

宽度和高度

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

js
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 文件中指定一个或者多个以下条目:

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

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
getUserMedia
Deprecated

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Has more compatibility info.

警告: 新代码应当使用 Navigator.mediaDevices.getUserMedia() 替代。

参见