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