navigator.getUserMedia

2 位贡献者:

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

提示用户需要权限去使用像摄像头或麦克风之类的媒体设备.如果用户提供了这个权限,successCallback函数会被调用,且接收一个LocalMediaStream 对象作为参数.

语法

navigator.getUserMedia ( constraints, successCallback, errorCallback );

示例

下面使用浏览器前缀来调用getUserMedia().

navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

navigator.getMedia (

   // constraints
   {
      video: true,
      audio: true
   },

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

   // errorCallback
   function(err) {
    console.log("The following error occured: " + err);
   }

);

参数

参数  是否必须  描述 
constraints 必须 successCallback中传入的 LocalMediaStream对象所支持的媒体类型。
successCallback  必须 当应用中传递LocalMediaStream对象时触发的函数。
errorCallback 可选 当调用媒体设备失败时触发的函数.

constraints

constraints参数是一个 MediaStreamConstraints 对象,包含两个值为布尔值的成员: video 及 audio. 这个参数描述了被 LocalMediaStream对象所支持的媒体类型,使用时,需要在constraints参数里指定某个类型或者两个类型.如果某特定类型不被浏览器所支持, getUserMedia 会调用errorCallback函数,并传入错误类型NOT_SUPPORTED_ERROR. 如果浏览器不能得到特定类型的音频或者视频流, getUserMedia 会调用 errorCallback 函数,并传入错误类型MANDATORY_UNSATISFIED_ERR.

若某种媒体类型未被指定,他的值默认为false。下面的例子描述了如何去设置constraints函数接收audio与video:

{ video: true, audio: true }

successCallback

getUserMedia 函数会调用successCallback 并传入LocalMediaStream 对象,这个对象包含媒体流。你可以将这个对象分配给适合的元素,之后处理,就像下面例子所做的一样。

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

errorCallback

getUserMedia 函数调用errorCallback 时会包含一个 code 参数,如下所示:

Error  Description 
PERMISSION_DENIED  用户拒绝了浏览器请求媒体的权限
NOT_SUPPORTED_ERROR  constraint中指定的媒体类型不被支持
MANDATORY_UNSATISFIED_ERROR  指定的媒体类型未接收到媒体流

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Stream API  21webkit  18moz  未实现  12 ? 
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Stream API  未实现  ? ?  12 未实现 

目前,Chrome, Opera 与Firefox Nightly 18支持使用WebRTC去接收摄影设备输入。为了在 Firefox Nightly中激活WebRTC,需要你做如下设置

  • 在地址栏中输入"about:config" ,确认你要更改设置
  • 找到 "media.navigator.enabled" 选项,然后设置为true

参考

文档标签和贡献者

向此页面作出贡献: fscholz, jtyjty99999
最后编辑者: fscholz,
隐藏侧边栏