2.4.4 查询媒体设备_WebRTC技术详解：从0到1构建多人视频会议系统-QQ阅读男生都市网

书名：WebRTC技术详解：从0到1构建多人视频会议系统
作者名：栗伟
本章字数：410字
更新时间：2021-04-20 11:41:31

2.4.4　查询媒体设备

为了让Web应用提供更好的使用体验，我们通常调用enumerateDevices()方法列出所有可用的媒体设备供用户选择。

const enumeratorPromise = navigator.mediaDevices.enumerateDevices();

参数：无。
返回值：enumeratorPromise，如果调用成功则得到一个包含成员MediaDevicesInfo的数组，该数组列出了所有可用的媒体设备；如果调用失败，则得到空值。

MediaDevicesInfo的定义如代码清单2-35所示。

代码清单2-35　MediaDevicesInfo的定义

interface MediaDeviceInfo {
  readonly attribute DOMString deviceId;
  readonly attribute MediaDeviceKind kind;
  readonly attribute DOMString label;
  readonly attribute DOMString groupId;
  [Default] object toJSON();
};

enum MediaDeviceKind {
  "audioinput",
  "audiooutput",
  "videoinput"
};

表2-10对MediaDevicesInfo的属性进行说明。

表2-10　MediaDevicesInfo属性说明

代码清单2-36枚举所有媒体设备，并打印MediaDevicesInfo的属性kind、label和deviceId。

代码清单2-36　enumerateDevices()方法示例

navigator.mediaDevices.enumerateDevices()
.then((devices) => {
  devices.forEach((device) => {
    console.log(device.kind + ": " + device.label + " id = " + device.deviceId);
  });
})
.catch((err) => {
  console.error(err.name + ": " + err.message);
});

在Chrome浏览器的开发者工具中运行代码清单2-36，输出如代码清单2-37所示。

代码清单2-37　enumerateDevices()输出

audioinput: 默认 - Internal Microphone (Built-in) id = default
audioinput: Internal Microphone (Built-in) id = 77ae20211ff909ae81072ce84853007161d3a4d9e19838946df3fe532b8ca5a3
videoinput: FaceTime 高清相机（内建） (05ac:8510) id = 1d510919cb6ddb949d6a7611b6387a83378c4246757cecf37719969eed064c7f
audiooutput: 默认 - Internal Speakers (Built-in) id = default
audiooutput: Internal Speakers (Built-in) id = a29e903d3c1e53b1a1842f21d0254ca70433f06e55abe50950229cbff959c8d8

代码清单2-38找出所有kind属性为videoinput的设备，即摄像头，如果找到则打印Cameras found信息。

代码清单2-38　找出所有摄像头

function getConnectedDevices(type, callback) {
  navigator.mediaDevices.enumerateDevices()
    .then(devices => {
      const filtered = devices.filter(device => device.kind === type);
      callback(filtered);
    });
}
getConnectedDevices('videoinput', cameras => console.log('Cameras found', cameras));