getUserMedia

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。流里可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

getUserMedia API最初是navigator.getUserMedia，目前已被最新Web标准废除，变更为navigator.mediaDevices.getUserMedia()，但浏览器支持情况不如旧版API普及。

返回的promise对象可能既不会resolve也不会reject，因为用户不是必须选择允许或拒绝。

通常可以使用 navigator.mediaDevices 来获取 MediaDevices ，例如：

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理error */
});

也可以用

async function getMedia(pc) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
  }
}

如果当前的document存在安全性问题，也会导致getUserMedia返回undefined等情况，安全问题后面讨论。

兼容性

Sources

Previouslocalforage Nextintroduction

Last updated 6 years ago

Was this helpful?

getUserMedia

getUserMedia API最初是navigator.getUserMedia，目前已被最新Web标准废除，变更为navigator.mediaDevices.getUserMedia()，但浏览器支持情况不如旧版API普及。

返回的promise对象可能既不会resolve也不会reject，因为用户不是必须选择允许或拒绝。

通常可以使用 navigator.mediaDevices 来获取 MediaDevices ，例如：

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理error */
});

也可以用

async function getMedia(pc) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
  }
}

如果当前的document存在安全性问题，也会导致getUserMedia返回undefined等情况，安全问题后面讨论。

兼容性

下面我们开始实践一下，先看最新的API，最后在讨论兼容性的问题。

Sources

Previouslocalforage Nextintroduction

Last updated 6 years ago

Was this helpful?