媒体设备枚举

写作背景：

前几节我们都是使用的默认的音视频设备来进行媒体数据的输出，我们这一节就将系统中可以使用的音频输入、输出设备及视频输入设备列举出来并进行切换。

涉及 API：

枚举设备的 API 是 navigator.mediaDevices.enumerateDevices()，它将会异步回调给我们一个 MediaDeviceInfo 数组，每个 MediaDeviceInfo 将包含一个设备的 deviceId ，设备名称 label ，设备的类型 kind 。设备类型包括：audioinput（音频输入），audiooutput（音频输出），videoinput（视频输入）。

注：当用户选择完设备后最好支持保存配置，省去下次调整，因为用户的偏好和设备时候故障都会影响到用户的实际使用。

HTMLMediaElement.setSinkId()API 是一个实验功能，可以通过传入一个音频输出设备的 deviceId 来切换不同的音频输出设备：

注：实际开发时在 HTMLMediaElement 接口中没能找到 setSinkId 函数，但功能正常，这里先使用 @ts-ignore将下一行的错误忽略。

启动设备：

在这里我们要扩展约束条件，以支持使用默认选择的各设备：

注：

1. 强烈推荐使用 TypeScript 来开发，并指定真实的类型来得到优秀的代码提示；
2. 其他步骤同前几节的方式，也可以看文末的完整代码。

完整代码：Resolution.vue

结语：

我们通过 enumerateDevices 的到了系统中已存在的音频输入、输出设备及视频的输入设备，在视频会议等软件中也需要支持多种设备的切换来满足不同的场景。

明天继续~

现在关注【LIKE.TG出海指南频道】、【LIKE.TG大客户服务频道】,即可免费领取【WhatsApp、LINE、Telegram、Twitter、ZALO云控】等获客工具试用、【住宅IP、号段筛选】等免费资源，机会难得，快来解锁更多资源，助力您的业务飞速成长！点击【联系客服】