如何让用户自由选择麦克风、摄像头与扬声器WebRTC Samples 设备选择实战教程【免费下载链接】samplesWebRTC Web demos and samples项目地址: https://gitcode.com/gh_mirrors/sa/samples在 WebRTC 应用里用户往往不只有一个麦克风、一个摄像头、一个扬声器。如何让用户自由选择麦克风、摄像头与扬声器是开发视频通话、在线会议、直播类应用时绕不开的问题。本文基于WebRTC SamplesWebRTC Web 官方示例库包含 getUserMedia、PeerConnection 等全套客户端示例中的 devices/input-output 和 devices/multi 两个示例手把手带你实现设备选择功能全程不贴大段代码看得懂就能用。一、为什么设备选择是 WebRTC 应用的必备功能默认情况下getUserMedia()会直接使用系统默认设备。但真实场景中 用户可能想换一台降噪麦克风录入 笔记本自带摄像头 外接摄像头用户想切到高清那台 用户不想让旁人听到通话希望声音从蓝牙耳机而不是扬声器播放。WebRTC Samples 项目把这三件事拆成了两个经典示例正好覆盖了输入设备和输出设备两条技术路线示例路径解决的问题Select sources outputssrc/content/devices/input-output/选择麦克风、摄像头输入 扬声器输出getUserMedia: output device selectionsrc/content/devices/multi/多路媒体流分别指定音频输出设备二、第一步获取设备清单enumerateDevices让用户选择的前提是先问浏览器你有哪些设备。核心 API 是navigator.mediaDevices.enumerateDevices()它会返回一个设备列表每个设备包含三个关键字段deviceId设备的唯一标识后面传给getUserMedia就是靠它kind设备类型audioinput麦克风、videoinput摄像头、audiooutput扬声器label设备名称如内置麦克风、Realtek Audio。⚠️新手最容易踩的坑浏览器出于隐私考虑在你还没拿到摄像头/麦克风授权前label是空字符串且每种类型最多只返回一个匿名设备。所以 WebRTC Samples 的标准做法是先申请一次权限拿到设备后再刷新列表此时真实名称才显示出来。这个思路可以在 input-output/js/main.js 的gotStream()中看到拿到媒体流后立刻再次调用getDevices()刷新列表让设备名称现身。三、第二步让用户选择麦克风与摄像头deviceId 约束设备清单拿到后剩下的事情就简单了把 deviceId 写进getUserMedia的约束条件。const constraints { audio: { deviceId: { exact: mic-device-id } }, video: { deviceId: { exact: camera-device-id } } }; navigator.mediaDevices.getUserMedia(constraints);在 input-output/js/main.js 中示例的做法是用户在下拉框里切换麦克风或摄像头start()函数先停止旧的媒体轨道track.stop()释放被占用的设备用选中的deviceId重新构造约束再次调用getUserMedia。 小细节示例还会记录当前打开的麦克风/摄像头如果用户选的还是同一台设备就直接跳过重新申请避免画面闪烁这是一个很好的体验优化。四、第三步让声音从用户指定的扬声器播放setSinkId注意选择扬声器和选择麦克风是两套完全不同的机制。getUserMedia管的是从哪采集而声音从哪个扬声器播放由HTMLMediaElement的setSinkId()负责videoElement.setSinkId(speaker-device-id)它作用于audio/video元素把该元素的播放输出绑定到指定设备切换扬声器不需要重新获取媒体流即点即换仅在 HTTPS 或 localhost 下可用HTTP 会抛SecurityError。devices/multi/js/main.js 的attachSinkId()展示了完整流程包括失败时自动回退到默认设备——这一点很值得抄作业用户选了个不支持的设备页面不至于哑火。五、进阶设备插拔时自动刷新列表用户正在通话时插上一副新耳机怎么办浏览器会触发devicechange事件监听它就能实时刷新下拉框navigator.mediaDevices.ondevicechange getDevices;一行代码见 input-output/js/main.js就补齐了最容易被忽视的体验细节。六、本地运行示例最快上手方式下载/获取 WebRTC Samples 源码进入项目根目录执行 package.json 对应的启动流程npm install npm start打开终端提示的本地地址依次体验devices/input-output/index.html三组下拉框分别选择麦克风、扬声器、摄像头devices/multi/index.htmlgetUserMedia 流与本地文件各自绑定不同音频输出设备。提示设备选择要求Chrome 49且必须运行在 localhost 或 HTTPS 环境下见 multi/index.html 中的说明。七、顺带解锁这些示例是设备选择的好搭档选完设备后往往还想进一步控制设备参数WebRTC Samples 提供了现成参考能力示例路径说明选择摄像头分辨率getusermedia/resolution/从 360p 到 8K 一键切换云台控制PTZgetusertilt-zoom → getusermedia/pan-tilt-zoom/控制云台摄像头的平移、俯仰、变焦曝光调节getusermedia/exposure/调整曝光补偿音量调节与响度检测getusermedia/volume/含 soundmeter.js 响度计屏幕共享getusermedia/getdisplaymedia/getDisplayMedia 采集屏幕/窗口八、总结设备选择三步走列设备enumerateDevices()拿清单拿到权限后刷新一次让 label 显示真实名称选输入把deviceId以exact约束传入getUserMedia()切换前先stop()旧轨道选输出对媒体元素调用setSinkId()即换即生效记得处理SecurityError回退。对照 src/content/devices/ 下的两个示例这套完整方案不到 150 行 JavaScript是你接入 WebRTC 设备选择功能的最佳起点。输出文章Wait — I need to fix a typo I introduced in the PTZ row. Let me correct and re-output the clean final article.输出文章如何让用户自由选择麦克风、摄像头与扬声器WebRTC Samples 设备选择实战教程在 WebRTC 应用里用户往往不只有一个麦克风、一个摄像头、一个扬声器。如何让用户自由选择麦克风、摄像头与扬声器是开发视频通话、在线会议、直播类应用时绕不开的问题。本文基于WebRTC SamplesWebRTC Web 端官方示例库涵盖 getUserMedia、PeerConnection 等全套示例中的 devices/input-output 与 devices/multi 两个示例带你实现完整的设备选择功能几乎不贴大段代码看得懂就能用。一、为什么设备选择是 WebRTC 应用的必备功能默认情况下getUserMedia()直接使用系统默认设备。但真实场景中 用户可能想换一台降噪麦克风录入 笔记本自带摄像头 外接摄像头用户想切到高清那台 用户不想让旁人听到通话希望声音从蓝牙耳机而不是扬声器播放。WebRTC Samples 项目把这三件事拆成了两个经典示例正好覆盖输入设备和输出设备两条技术路线示例路径解决的问题Select sources outputssrc/content/devices/input-output/选择麦克风、摄像头输入 扬声器输出getUserMedia: output device selectionsrc/content/devices/multi/多路媒体流分别指定音频输出设备二、第一步获取设备清单enumerateDevices让用户选择的前提是先问浏览器你有哪些设备。核心 API 是navigator.mediaDevices.enumerateDevices()它返回一个设备列表每个设备包含三个关键字段deviceId设备唯一标识后面传给getUserMedia就靠它kind设备类型audioinput麦克风、videoinput摄像头、audiooutput扬声器label设备名称如内置麦克风、Realtek Audio。⚠️新手最容易踩的坑出于隐私考虑在你还没拿到摄像头/麦克风授权前label是空字符串且每种类型最多只返回一个匿名设备。WebRTC Samples 的标准做法是先申请一次权限拿到媒体流后再刷新列表真实名称才会显示出来。这个思路可以在 input-output/js/main.js 的gotStream()中看到拿到流后立刻再次调用getDevices()刷新列表让设备名称现身。三、第二步让用户选择麦克风与摄像头deviceId 约束设备清单拿到后剩下的事情就简单了把 deviceId 写进getUserMedia的约束条件。const constraints { audio: { deviceId: { exact: mic-device-id } }, video: { deviceId: { exact: camera-device-id } } }; navigator.mediaDevices.getUserMedia(constraints);在 input-output/js/main.js 中示例的做法是用户在下拉框里切换麦克风或摄像头start()函数先停止旧的媒体轨道track.stop()释放被占用的设备用选中的deviceId重新构造约束再次调用getUserMedia。 小细节示例还会记录当前已打开的麦克风/摄像头如果用户选的还是同一台设备就直接跳过重新申请避免画面闪烁——这是一个很好的体验优化。四、第三步让声音从用户指定的扬声器播放setSinkId注意选择扬声器和选择麦克风是两套完全不同的机制。getUserMedia管从哪采集而声音从哪个扬声器播放由HTMLMediaElement的setSinkId()负责videoElement.setSinkId(speaker-device-id)它作用于audio/video元素把该元素的播放输出绑定到指定设备切换扬声器不需要重新获取媒体流即点即换仅在 HTTPS 或 localhost 下可用HTTP 会抛SecurityError。devices/multi/js/main.js 的attachSinkId()展示了完整流程包括失败时自动回退到默认设备——这一点很值得抄作业用户选了个不支持的设备页面不至于哑火。五、进阶设备插拔时自动刷新列表用户正在通话时插上一副新耳机怎么办浏览器会触发devicechange事件监听它就能实时刷新下拉框navigator.mediaDevices.ondevicechange getDevices;一行代码见 input-output/js/main.js就补齐了最容易被忽视的体验细节。六、本地运行示例最快上手方式下载并获取 WebRTC Samples 源码进入项目根目录执行npm install npm start打开终端提示的本地地址依次体验devices/input-output/index.html三组下拉框分别选择麦克风、扬声器、摄像头devices/multi/index.htmlgetUserMedia 流与本地媒体文件各自绑定不同音频输出设备。提示音频输出设备选择要求Chrome 49且必须运行在 localhost 或 HTTPS 环境下见 multi/index.html 中的说明。七、顺带解锁这些示例是设备选择的好搭档选完设备后往往还想进一步控制设备参数WebRTC Samples 提供了现成参考能力示例路径说明选择摄像头分辨率getusermedia/resolution/从 360p 到 8K 一键切换云台控制PTZgetusermedia/pan-tilt-zoom/控制云台摄像头的平移、俯仰、变焦曝光调节getusermedia/exposure/调整曝光补偿音量与响度检测getusermedia/volume/含 soundmeter.js 响度计屏幕共享getusermedia/getdisplaymedia/getDisplayMedia 采集屏幕或窗口八、总结设备选择三步走列设备enumerateDevices()拿清单拿到权限后刷新一次让 label 显示真实名称选输入把deviceId以exact约束传入getUserMedia()切换前先stop()旧轨道选输出对媒体元素调用setSinkId()即换即生效记得处理SecurityError回退。对照 src/content/devices/ 下的两个示例这套完整方案不到 150 行 JavaScript是你接入 WebRTC 设备选择功能的最佳起点。【免费下载链接】samplesWebRTC Web demos and samples项目地址: https://gitcode.com/gh_mirrors/sa/samples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考