官方社群在线客服官方频道防骗查询货币工具

媒体设备枚举

2025年01月16日 05:54:48
news.like.tgnews.like.tgnews.like.tgnews.like.tg

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

写作背景:

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

涉及 API:

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

代码语言:javascript
复制
// 获取当前计算机可列举的音频输入|输出|视频输入设备 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 来切换不同的音频输出设备:

代码语言:javascript
复制
const handleChangeAudioOutputDevice = (value: string) => { selectedAudioOutputDevice.value = value; video // @ts-ignore .value!.setSinkId(value) .then(() => { console.log(`音频输出设备设置成功${value}`); }) .catch((error: Error) => { console.log(error); }); };

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

启动设备:

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

代码语言:javascript
复制
const openDevice = () => { const constraints: MediaStreamConstraints = { audio: { deviceId: selectedAudioInputDevice.value ? { exact: selectedAudioInputDevice.value } : undefined, }, video: { deviceId: selectedVideoDevice.value ? { exact: selectedVideoDevice.value } : undefined, }, }; ... };

注:

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

完整代码:Resolution.vue

结语:

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

明天继续~

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

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

本文由LIKE.TG编辑部转载自互联网并编辑,如有侵权影响,请联系官方客服,将为您妥善处理。

This article is republished from public internet and edited by the LIKE.TG editorial department. If there is any infringement, please contact our official customer service for proper handling.


Server deployment全球论坛人工智能论坛全球峰会发展论坛战略论坛开放论坛程序员论坛互联网峰会科技峰会
加入like.tg生态圈,即可获利、结识全球供应商、拥抱全球软件生态圈加入like.tg平台,即可获利、结识全球供应商、拥抱全球营销软件生态圈加入like.tg生态资源圈,即可获利、结识全球供应商、拥抱全球软件生态圈
加入like.tg生态圈,即可获利、结识全球供应商、拥抱全球软件生态圈加入like.tg平台,即可获利、结识全球供应商、拥抱全球营销软件生态圈加入like.tg生态资源圈,即可获利、结识全球供应商、拥抱全球软件生态圈