如何讓用戶自由選擇麥克風(fēng)、攝像頭與揚(yáng)聲器WebRTC Samples 設(shè)備選擇實(shí)戰(zhàn)教程【免費(fèi)下載鏈接】samplesWebRTC Web demos and samples項(xiàng)目地址: https://gitcode.com/gh_mirrors/sa/samples在 WebRTC 應(yīng)用里用戶往往不只有一個(gè)麥克風(fēng)、一個(gè)攝像頭、一個(gè)揚(yáng)聲器。如何讓用戶自由選擇麥克風(fēng)、攝像頭與揚(yáng)聲器是開(kāi)發(fā)視頻通話、在線會(huì)議、直播類(lèi)應(yīng)用時(shí)繞不開(kāi)的問(wèn)題。本文基于WebRTC SamplesWebRTC Web 官方示例庫(kù)包含 getUserMedia、PeerConnection 等全套客戶端示例中的 devices/input-output 和 devices/multi 兩個(gè)示例手把手帶你實(shí)現(xiàn)設(shè)備選擇功能全程不貼大段代碼看得懂就能用。一、為什么設(shè)備選擇是 WebRTC 應(yīng)用的必備功能默認(rèn)情況下getUserMedia()會(huì)直接使用系統(tǒng)默認(rèn)設(shè)備。但真實(shí)場(chǎng)景中 用戶可能想換一臺(tái)降噪麥克風(fēng)錄入 筆記本自帶攝像頭 外接攝像頭用戶想切到高清那臺(tái) 用戶不想讓旁人聽(tīng)到通話希望聲音從藍(lán)牙耳機(jī)而不是揚(yáng)聲器播放。WebRTC Samples 項(xiàng)目把這三件事拆成了兩個(gè)經(jīng)典示例正好覆蓋了輸入設(shè)備和輸出設(shè)備兩條技術(shù)路線示例路徑解決的問(wèn)題Select sources outputssrc/content/devices/input-output/選擇麥克風(fēng)、攝像頭輸入 揚(yáng)聲器輸出getUserMedia: output device selectionsrc/content/devices/multi/多路媒體流分別指定音頻輸出設(shè)備二、第一步獲取設(shè)備清單enumerateDevices讓用戶選擇的前提是先問(wèn)瀏覽器你有哪些設(shè)備。核心 API 是navigator.mediaDevices.enumerateDevices()它會(huì)返回一個(gè)設(shè)備列表每個(gè)設(shè)備包含三個(gè)關(guān)鍵字段deviceId設(shè)備的唯一標(biāo)識(shí)后面?zhèn)鹘ogetUserMedia就是靠它kind設(shè)備類(lèi)型audioinput麥克風(fēng)、videoinput攝像頭、audiooutput揚(yáng)聲器label設(shè)備名稱(chēng)如內(nèi)置麥克風(fēng)、Realtek Audio。??新手最容易踩的坑瀏覽器出于隱私考慮在你還沒(méi)拿到攝像頭/麥克風(fēng)授權(quán)前l(fā)abel是空字符串且每種類(lèi)型最多只返回一個(gè)匿名設(shè)備。所以 WebRTC Samples 的標(biāo)準(zhǔn)做法是先申請(qǐng)一次權(quán)限拿到設(shè)備后再刷新列表此時(shí)真實(shí)名稱(chēng)才顯示出來(lái)。這個(gè)思路可以在 input-output/js/main.js 的gotStream()中看到拿到媒體流后立刻再次調(diào)用getDevices()刷新列表讓設(shè)備名稱(chēng)現(xiàn)身。三、第二步讓用戶選擇麥克風(fēng)與攝像頭deviceId 約束設(shè)備清單拿到后剩下的事情就簡(jiǎn)單了把 deviceId 寫(xiě)進(jìn)getUserMedia的約束條件。const constraints { audio: { deviceId: { exact: mic-device-id } }, video: { deviceId: { exact: camera-device-id } } }; navigator.mediaDevices.getUserMedia(constraints);在 input-output/js/main.js 中示例的做法是用戶在下拉框里切換麥克風(fēng)或攝像頭start()函數(shù)先停止舊的媒體軌道track.stop()釋放被占用的設(shè)備用選中的deviceId重新構(gòu)造約束再次調(diào)用getUserMedia。 小細(xì)節(jié)示例還會(huì)記錄當(dāng)前打開(kāi)的麥克風(fēng)/攝像頭如果用戶選的還是同一臺(tái)設(shè)備就直接跳過(guò)重新申請(qǐng)避免畫(huà)面閃爍這是一個(gè)很好的體驗(yàn)優(yōu)化。四、第三步讓聲音從用戶指定的揚(yáng)聲器播放setSinkId注意選擇揚(yáng)聲器和選擇麥克風(fēng)是兩套完全不同的機(jī)制。getUserMedia管的是從哪采集而聲音從哪個(gè)揚(yáng)聲器播放由HTMLMediaElement的setSinkId()負(fù)責(zé)videoElement.setSinkId(speaker-device-id)它作用于audio/video元素把該元素的播放輸出綁定到指定設(shè)備切換揚(yáng)聲器不需要重新獲取媒體流即點(diǎn)即換僅在 HTTPS 或 localhost 下可用HTTP 會(huì)拋SecurityError。devices/multi/js/main.js 的attachSinkId()展示了完整流程包括失敗時(shí)自動(dòng)回退到默認(rèn)設(shè)備——這一點(diǎn)很值得抄作業(yè)用戶選了個(gè)不支持的設(shè)備頁(yè)面不至于啞火。五、進(jìn)階設(shè)備插拔時(shí)自動(dòng)刷新列表用戶正在通話時(shí)插上一副新耳機(jī)怎么辦瀏覽器會(huì)觸發(fā)devicechange事件監(jiān)聽(tīng)它就能實(shí)時(shí)刷新下拉框navigator.mediaDevices.ondevicechange getDevices;一行代碼見(jiàn) input-output/js/main.js就補(bǔ)齊了最容易被忽視的體驗(yàn)細(xì)節(jié)。六、本地運(yùn)行示例最快上手方式下載/獲取 WebRTC Samples 源碼進(jìn)入項(xiàng)目根目錄執(zhí)行 package.json 對(duì)應(yīng)的啟動(dòng)流程npm install npm start打開(kāi)終端提示的本地地址依次體驗(yàn)devices/input-output/index.html三組下拉框分別選擇麥克風(fēng)、揚(yáng)聲器、攝像頭devices/multi/index.htmlgetUserMedia 流與本地文件各自綁定不同音頻輸出設(shè)備。提示設(shè)備選擇要求Chrome 49且必須運(yùn)行在 localhost 或 HTTPS 環(huán)境下見(jiàn) multi/index.html 中的說(shuō)明。七、順帶解鎖這些示例是設(shè)備選擇的好搭檔選完設(shè)備后往往還想進(jìn)一步控制設(shè)備參數(shù)WebRTC Samples 提供了現(xiàn)成參考能力示例路徑說(shuō)明選擇攝像頭分辨率getusermedia/resolution/從 360p 到 8K 一鍵切換云臺(tái)控制PTZgetusertilt-zoom → getusermedia/pan-tilt-zoom/控制云臺(tái)攝像頭的平移、俯仰、變焦曝光調(diào)節(jié)getusermedia/exposure/調(diào)整曝光補(bǔ)償音量調(diào)節(jié)與響度檢測(cè)getusermedia/volume/含 soundmeter.js 響度計(jì)屏幕共享getusermedia/getdisplaymedia/getDisplayMedia 采集屏幕/窗口八、總結(jié)設(shè)備選擇三步走列設(shè)備enumerateDevices()拿清單拿到權(quán)限后刷新一次讓 label 顯示真實(shí)名稱(chēng)選輸入把deviceId以exact約束傳入getUserMedia()切換前先stop()舊軌道選輸出對(duì)媒體元素調(diào)用setSinkId()即換即生效記得處理SecurityError回退。對(duì)照 src/content/devices/ 下的兩個(gè)示例這套完整方案不到 150 行 JavaScript是你接入 WebRTC 設(shè)備選擇功能的最佳起點(diǎn)。輸出文章Wait — I need to fix a typo I introduced in the PTZ row. Let me correct and re-output the clean final article.輸出文章如何讓用戶自由選擇麥克風(fēng)、攝像頭與揚(yáng)聲器WebRTC Samples 設(shè)備選擇實(shí)戰(zhàn)教程在 WebRTC 應(yīng)用里用戶往往不只有一個(gè)麥克風(fēng)、一個(gè)攝像頭、一個(gè)揚(yáng)聲器。如何讓用戶自由選擇麥克風(fēng)、攝像頭與揚(yáng)聲器是開(kāi)發(fā)視頻通話、在線會(huì)議、直播類(lèi)應(yīng)用時(shí)繞不開(kāi)的問(wèn)題。本文基于WebRTC SamplesWebRTC Web 端官方示例庫(kù)涵蓋 getUserMedia、PeerConnection 等全套示例中的 devices/input-output 與 devices/multi 兩個(gè)示例帶你實(shí)現(xiàn)完整的設(shè)備選擇功能幾乎不貼大段代碼看得懂就能用。一、為什么設(shè)備選擇是 WebRTC 應(yīng)用的必備功能默認(rèn)情況下getUserMedia()直接使用系統(tǒng)默認(rèn)設(shè)備。但真實(shí)場(chǎng)景中 用戶可能想換一臺(tái)降噪麥克風(fēng)錄入 筆記本自帶攝像頭 外接攝像頭用戶想切到高清那臺(tái) 用戶不想讓旁人聽(tīng)到通話希望聲音從藍(lán)牙耳機(jī)而不是揚(yáng)聲器播放。WebRTC Samples 項(xiàng)目把這三件事拆成了兩個(gè)經(jīng)典示例正好覆蓋輸入設(shè)備和輸出設(shè)備兩條技術(shù)路線示例路徑解決的問(wèn)題Select sources outputssrc/content/devices/input-output/選擇麥克風(fēng)、攝像頭輸入 揚(yáng)聲器輸出getUserMedia: output device selectionsrc/content/devices/multi/多路媒體流分別指定音頻輸出設(shè)備二、第一步獲取設(shè)備清單enumerateDevices讓用戶選擇的前提是先問(wèn)瀏覽器你有哪些設(shè)備。核心 API 是navigator.mediaDevices.enumerateDevices()它返回一個(gè)設(shè)備列表每個(gè)設(shè)備包含三個(gè)關(guān)鍵字段deviceId設(shè)備唯一標(biāo)識(shí)后面?zhèn)鹘ogetUserMedia就靠它kind設(shè)備類(lèi)型audioinput麥克風(fēng)、videoinput攝像頭、audiooutput揚(yáng)聲器label設(shè)備名稱(chēng)如內(nèi)置麥克風(fēng)、Realtek Audio。??新手最容易踩的坑出于隱私考慮在你還沒(méi)拿到攝像頭/麥克風(fēng)授權(quán)前l(fā)abel是空字符串且每種類(lèi)型最多只返回一個(gè)匿名設(shè)備。WebRTC Samples 的標(biāo)準(zhǔn)做法是先申請(qǐng)一次權(quán)限拿到媒體流后再刷新列表真實(shí)名稱(chēng)才會(huì)顯示出來(lái)。這個(gè)思路可以在 input-output/js/main.js 的gotStream()中看到拿到流后立刻再次調(diào)用getDevices()刷新列表讓設(shè)備名稱(chēng)現(xiàn)身。三、第二步讓用戶選擇麥克風(fēng)與攝像頭deviceId 約束設(shè)備清單拿到后剩下的事情就簡(jiǎn)單了把 deviceId 寫(xiě)進(jìn)getUserMedia的約束條件。const constraints { audio: { deviceId: { exact: mic-device-id } }, video: { deviceId: { exact: camera-device-id } } }; navigator.mediaDevices.getUserMedia(constraints);在 input-output/js/main.js 中示例的做法是用戶在下拉框里切換麥克風(fēng)或攝像頭start()函數(shù)先停止舊的媒體軌道track.stop()釋放被占用的設(shè)備用選中的deviceId重新構(gòu)造約束再次調(diào)用getUserMedia。 小細(xì)節(jié)示例還會(huì)記錄當(dāng)前已打開(kāi)的麥克風(fēng)/攝像頭如果用戶選的還是同一臺(tái)設(shè)備就直接跳過(guò)重新申請(qǐng)避免畫(huà)面閃爍——這是一個(gè)很好的體驗(yàn)優(yōu)化。四、第三步讓聲音從用戶指定的揚(yáng)聲器播放setSinkId注意選擇揚(yáng)聲器和選擇麥克風(fēng)是兩套完全不同的機(jī)制。getUserMedia管從哪采集而聲音從哪個(gè)揚(yáng)聲器播放由HTMLMediaElement的setSinkId()負(fù)責(zé)videoElement.setSinkId(speaker-device-id)它作用于audio/video元素把該元素的播放輸出綁定到指定設(shè)備切換揚(yáng)聲器不需要重新獲取媒體流即點(diǎn)即換僅在 HTTPS 或 localhost 下可用HTTP 會(huì)拋SecurityError。devices/multi/js/main.js 的attachSinkId()展示了完整流程包括失敗時(shí)自動(dòng)回退到默認(rèn)設(shè)備——這一點(diǎn)很值得抄作業(yè)用戶選了個(gè)不支持的設(shè)備頁(yè)面不至于啞火。五、進(jìn)階設(shè)備插拔時(shí)自動(dòng)刷新列表用戶正在通話時(shí)插上一副新耳機(jī)怎么辦瀏覽器會(huì)觸發(fā)devicechange事件監(jiān)聽(tīng)它就能實(shí)時(shí)刷新下拉框navigator.mediaDevices.ondevicechange getDevices;一行代碼見(jiàn) input-output/js/main.js就補(bǔ)齊了最容易被忽視的體驗(yàn)細(xì)節(jié)。六、本地運(yùn)行示例最快上手方式下載并獲取 WebRTC Samples 源碼進(jìn)入項(xiàng)目根目錄執(zhí)行npm install npm start打開(kāi)終端提示的本地地址依次體驗(yàn)devices/input-output/index.html三組下拉框分別選擇麥克風(fēng)、揚(yáng)聲器、攝像頭devices/multi/index.htmlgetUserMedia 流與本地媒體文件各自綁定不同音頻輸出設(shè)備。提示音頻輸出設(shè)備選擇要求Chrome 49且必須運(yùn)行在 localhost 或 HTTPS 環(huán)境下見(jiàn) multi/index.html 中的說(shuō)明。七、順帶解鎖這些示例是設(shè)備選擇的好搭檔選完設(shè)備后往往還想進(jìn)一步控制設(shè)備參數(shù)WebRTC Samples 提供了現(xiàn)成參考能力示例路徑說(shuō)明選擇攝像頭分辨率getusermedia/resolution/從 360p 到 8K 一鍵切換云臺(tái)控制PTZgetusermedia/pan-tilt-zoom/控制云臺(tái)攝像頭的平移、俯仰、變焦曝光調(diào)節(jié)getusermedia/exposure/調(diào)整曝光補(bǔ)償音量與響度檢測(cè)getusermedia/volume/含 soundmeter.js 響度計(jì)屏幕共享getusermedia/getdisplaymedia/getDisplayMedia 采集屏幕或窗口八、總結(jié)設(shè)備選擇三步走列設(shè)備enumerateDevices()拿清單拿到權(quán)限后刷新一次讓 label 顯示真實(shí)名稱(chēng)選輸入把deviceId以exact約束傳入getUserMedia()切換前先stop()舊軌道選輸出對(duì)媒體元素調(diào)用setSinkId()即換即生效記得處理SecurityError回退。對(duì)照 src/content/devices/ 下的兩個(gè)示例這套完整方案不到 150 行 JavaScript是你接入 WebRTC 設(shè)備選擇功能的最佳起點(diǎn)?！久赓M(fèi)下載鏈接】samplesWebRTC Web demos and samples項(xiàng)目地址: https://gitcode.com/gh_mirrors/sa/samples創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考