Day09 在浏览器上检查现有设备

前几篇介绍了 WebRTC 是如何连线的，今天我们要开始在浏览器上使用 WebRTC 的 API。

使用浏览器 + WebRTC 可以快速实现即时影音通讯，而且非常容易，下图可以看到在这十年的发展中，多数浏览器也都支援很成熟了。

https://caniuse.com/rtcpeerconnection

查看目前有哪些设备

我们要进行语音及视讯通话最基本的就是要有摄影机及麦克风，浏览器要如何查看目前有哪些设备呢？

使用 navigator.mediaDevices.enumerateDevices() 获取音视讯装置，我们可以再 Chrome 的consol中输入测试看看。

可以看到返回的是一个 Promise 里面有 DeviceInfo 阵列，阵列中有每个输入 / 输出设备的讯息，有四个属性:

1. deviceId: 设备的Id
2. kind: 设备的种类
3. label: 设备的名称
4. groupId: 若两个设备的id相同，代表是同一个物理设备

但是！如果没有授权访问设备的权限，我们会收到名称及deviceId都是空的，这也是非常合理的，如果任何网站随便都可以读取我们的麦克风摄影机，想想都觉得很可怕！

我们可以呼叫 getUserMedia 让浏览器来询问使用者是否给予权限，在consol中输入以下就可以看到要求权限！

navigator.mediaDevices.getUserMedia({ video: true, audio: true })

今天我们透过浏览器，测试了获取麦克风及相机的权限还有检查目前有哪些设备可以使用，明天我们来看看 getUserMedia 可以做哪些事吧！