【Web API】 Navigator.mediaDevices

浏览器兼容性

mediaDevices对象仅在支持的浏览器或安全上下文的环境中被访问， navigator.mediaDevices 返回 MediaDevices 单例对象

1. 浏览器版本

   

2. 安全上下文

   安全上下文环境有：https://，localhost，file://

   

   

   

   非安全上下文环境：http://

   

PS：笼统说，现代浏览器中，需要在https:// ，localhost，file:// 的环境下才能够访问到mediaDevices, 较低版本的部分浏览器，在http:// 中也能访问，古老版本的浏览器则不支持访问，因此，在使用mediaDevices前，最好判断下当前环境是否支持访问mediaDevices

if(!navigator.mediaDevices) {
  console.log('当前浏览器不支持访问mediaDevices')
} else {
  // 具体逻辑
}

MediaDevices

事件

• devicechange

  当媒体输入或输出设备连接到用户计算机或从用户计算机移除时触发，默认为null，需要用给其赋值

  navigator.mediaDevices.ondevicechange = () => {...}
  

实例方法

• enumerateDevices()

  请求一个可用的媒体输入和输出设备的列表，例如麦克风，摄像机，耳机设备等。返回的 Promise，Promise完成时，会返回带有一个描述设备的 MediaDeviceInfo 的数组

  

• getDisplayMedia()

  提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）在一个MediaStream 里。然后，这个媒体流可以通过使用 MediaStream Recording API 被记录或者作为WebRTC 会话的一部分被传输，常见于屏幕共享功能

• getSupportedConstraints()

  方法返回一个基于 MediaTrackSupportedConstraints 的对象，其成员字段都是客户端（user agent）所支持的约束属性（如帧率，窗口大小）

• getUserMedia()

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

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

  通常在getUserMedia完成后，再去访问MediaDevices

  可以通过传入constraints参数，对多媒体设备进行筛选，包括，限制音频，视频设备、优先选择某个分辨率的设备，移动端选择的前置/后置摄像头等

  const getVideo = await navigator.mediaDevices.getUserMedia({ audio: true, video: true }