js获取当前设备的媒体相关设备并选择当前使用设备(摄像头、麦克风、扬声器)

我在很早之前就写过一个文章，是关于如何使用js来获取当前摄像头的权限的。最近公司正好需要到这方面的内容，我就把我写的给封装了一下，但是问题就来了——客户的电脑是笔记本并且他外接了一个单独的摄像头，这就导致当前设备有两个摄像头且没法选择。于是如何让用户去选择自己想要的摄像头这个需求就诞生了，在查阅资料后找到了解决方案，在这里以摄像头为例分享给大家。

---

1.获取所有设备

之前我提过，js操作媒体输入设备的能力来源于navigator对象下的getUserMedia方法，不清楚的可以移步这里查看如何通过navigtor对象来获取媒体设备并进行操作。

在按照之前发布的方法后，我们可以控制本机电脑上的摄像头的打开关闭并将其数据展示出来，但是如果电脑上有两个或多个设备呢？这里我测试过，在我的电脑上Google Chrome打开的是我笔记本自带的，而Edge打开的是外接的，当然不是绝对，只是大多数情况是这样，所以现在需要获取到摄像头并进行选择。在MDN上一顿查找后，我找到了navigator对象下的mediaDevices对象，该对象有一个enumerateDevices方法可让我们得到当前电脑上的媒体输入设备(视频和音频)，如下所示：

navigator.mediaDevices.enumerateDevices().then((devicesList) => {
console.log(devicesList)
}

enumerateDevices方法会返回一个promise，它的成功结果就是一个数组，一个包含当前设备所有的媒体设备数组，包括(摄像头，扬声器，麦克风)。数组的成员都是设备的相关信息对象，包括设备的设备ID、设备名等。

2.选择设备

既然我们已经获取了当前设备上的所有媒体设备，那按理来说也能根据拿到的设备来进行选择，不过很抱歉，通过enumerateDevices方法获取到的只有信息，不能进行相应的操作，所以得寻找新的方法。

在查询资料中我发现了之前使用的getUserMedia方法的参数相关解释：

虽然我是WEB端使用的，但是这也给了我希望，说明确实存在方法去更改当前使用的摄像头。于是我查看了getUserMedia方法的参数文档MediaStreamConstraints。其中关于video属性的解释如下：

Either a Boolean (which indicates whether or not a video track is requested) or a MediaTrackConstraints object providing the constraints which must be met by the video track included in the returned MediaStream. If constraints are specified, a video track is inherently requested.

所以我看了video属性接受的MediaTrackConstraints对象的相关属性，得到如下结果：

这说明我们可以通过传入deviceId或groupId来控制当前使用的视频媒体设备，而正好我们之前就已经获取到了设备ID，所以正好可以通过ID去打开相应的设备。

3.关闭设备

getUserMedia方法的成功返回值是一个stream，通过stream的getTracks方法我们可以得到一个当前流来源的数组，然后我们就可以取到一个媒体对象。通过这个对象下的sotp方法可以停止数据流的推送。一般来说如果是只是用一个摄像头去显示，该数组是只会有一个成员的，所以我们只需要去第一个就好。

stream.getTracks()[0].stop()