媒体设备枚举

诺亚

2025年01月16日📖 4 分钟

LIKE.TG | 发现全球营销软件&服务汇聚顶尖互联网营销和AI营销产品，提供一站式出海营销解决方案。唯一官网：www.like.tg

写作背景：

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

涉及 API：

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

// 获取当前计算机可列举的音频输入|输出|视频输入设备 navigator.mediaDevices .enumerateDevices() .then((devices) => { for (const device of devices) { if (device.kind === "audioinput") { audioInputDevices.push(device); } else if (device.kind === "audiooutput") { audioOutputDevices.push(device); } else if (device.kind === "videoinput") { videoDevices.push(device); } } }) .then(() => { resolve({ audioInputDevices, audioOutputDevices, videoDevices }); });

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

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

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

启动设备：

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

const openDevice = () => { const constraints: MediaStreamConstraints = { audio: { deviceId: selectedAudioInputDevice.value ? { exact: selectedAudioInputDevice.value } : undefined, }, video: { deviceId: selectedVideoDevice.value ? { exact: selectedVideoDevice.value } : undefined, }, }; ... };

注：

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

完整代码：Resolution.vue

结语：

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

明天继续~

LIKE.TG：汇集全球营销软件&服务，助力出海企业营销增长。提供最新的“私域营销获客”“跨境电商”“全球客服”“金融支持”“web3”等一手资讯新闻。

点击【联系客服】 🎁 免费领 1G 住宅代理IP/proxy，即刻体验 WhatsApp、LINE、Telegram、Twitter、ZALO、Instagram、signal等获客系统，社媒账号购买 & 粉丝引流自助服务或关注【LIKE.TG出海指南频道】、【LIKE.TG生态链-全球资源互联社区】连接全球出海营销资源。