WebRTC音视频实时互动技术：原理、实战与源码分析
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

5.2　遍历音视频设备

正如第4章中所述，进行一对一通信之前，需要对设备进行检测，看看主机上都支持哪些设备。在浏览器上遍历音视频设备特别简单，调用enumerateDevices（）接口即可，其原型参见代码5.1。

代码5.1　enumerateDevices（）接口格式

navigater.mediaDevices.enumerateDevices ();

enumerateDevices（）接口执行成功后，会返回deviceInfo数组。数组中的每一项为一个deviceInfo对象，其结构参见代码5.2。

代码5.2　MediaDeviceInfo结构体

interface MediaDeviceInfo {
   readonly attribute DOMString deviceId;
   readonly attribute MediaDeviceKind kind;
   readonly attribute DOMString label;
   readonly attribute DOMString groupId;
};
enum MediaDeviceKind {
   "audioinput",
   "audiooutput",
   "videoinput"
};

下面详细介绍一下MediaDeviceInfo结构。从上面的代码中可以看到，MediaDeviceInfo包括4个属性，分别是deviceId、kind、label和groupId。

deviceId表示每个设备的唯一编号，通过该编号可以从WebRTC的音视频设备管理中找到该设备。

kind表示设备的种类。音视频设备包括三种类型：音频输入设备、音频输出设备以及视频输入设备。音频的输入设备和输出设备是两种不同类型的设备。而对于视频设备来说，它只有输入设备，视频的输出则是由显示器完成的。由于显示器是默认设备，所以不需要通过音视频设备管理器进行管理。

label是设备的名字。该名字是便于人们记忆的名字，不像deviceId那样是一串毫无规律的字符串。

groudId表示组Id。如果两个设备是在同一个硬件上，则它们属于同一组，因此它们的groupId是一致的，例如音频的输入与输出设备就是集成到一起的。

现在enumerateDevices（）接口的作用及其参数含义你已经清楚了，下面我们来了解一下如何调用enumerateDevices（）接口。在浏览器上使用JavaScript调用enumerate Devices（）时，与我们通常使用C/C++等语言调用接口的方式有些不同，JavaScript采用Promise 它是一种JavaScript异步处理机制。方式调用enumerateDevices（）接口。关于Promise的内容在这里就不做进一步讲解了，如果你对其不熟悉，可以自行在网上查找相关内容 例如，可参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise。。下面看一下使用enumerate Devices（）接口的具体例子，如代码5.3所示。

代码5.3　枚举音视频设备

1 // 如果遍历设备失败， 则回调该函数
2 function handleError(error) {
3   console.log('err:', error);
4 }
5
6 // 如果得到音视频设备， 则回调该函数
7 function gotDevices(deviceInfos) {
8    …
9 // 遍历所有设备信息
10 for (let i = 0; i !== deviceInfos.length; ++i) {
11    // 取每个设备信息
12    const deviceInfo = deviceInfos[i];
13    …
14  }
15  …
16 }
17
18 // 遍历所有音视频设备
19 navigator.mediaDevices.enumerateDevices ()
20 　　.then(gotDevices)
21 　　.catch(handleError);

当将上面的代码片段生成js文件放到浏览器下执行时，浏览器首先从第19行处的代码开始执行，即调用enumerateDevices（）接口获得主机上的所有音视频设备。如果enumerate Devices（）函数执行成功，则会回调gotDevices（）方法，该方法的输入参数deviceInfos中存放的就是通过enumerateDevices（）获得的所有音视频设备的信息。此时，可以通过一个for循环来遍历每一项设备信息。如果enumerateDevices（）函数执行失败，则回调handleEr ror（）函数，此时可以通过该函数将错误信息打印出来。

这里需要注意的是，基于安全方面的原因，浏览器有可能不允许调用enumerate Devices（）函数，此时需要手工将浏览器的安全访问设置为允许。另外，测试时最好使用Chrome浏览器，因为它对WebRTC的支持最全。

[1] 它是一种JavaScript异步处理机制。

[2] 例如，可参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise。

上一章目录下一章