webrtc 獲取音視頻設備 · 音視頻/C++/k8s/Docker等等學習筆記

[TOC] ## enumerateDevices 基本格式： ``` var ePromise = navigator.mediaDevices.enumerateDevices(); ``` ## MediaDevicesInfo | 屬性 | 說明 | | --- | --- | | deviceID | 設備ID | | label | 設備的名字 | | kind | 設備的種類 | | groupID | 兩個設備groupID相同，說明是同一個物理設備 | ## JavaScript中的Promise Promise -> 肯定執行 handle(resolve, reject) ``` then: on_resolve catch: on_reject ``` ## 代碼示例 client.js ``` 'use strict' var audioSource = document.querySelector('select#audioSource') var audioOutput = document.querySelector('select#audioOutput') var videoSource = document.querySelector('select#videoSource') if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices()){ console.log('emdiaDevices is not supported!'); }else { //navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(r => handleError); navigator.mediaDevices.enumerateDevices() .then(gotDevices) .catch(handleError) } function gotDevices(deviceInfos) { deviceInfos.forEach(function (deviceInfo) { console.log(deviceInfo.kind + ": label = " + deviceInfo.label + ": id = " + deviceInfo.deviceId + ": groupId = " + deviceInfo.groupId); var option = document.createElement('option'); option.text = deviceInfo.label; option.value = deviceInfo.deviceId; if (deviceInfo.kind === 'audioinput') { audioSource.appendChild(option) }else if (deviceInfo.kind === 'audiooutput') { audioOutput.appendChild(option) }else if (deviceInfo.kind === 'videoinput') { videoSource.appendChild(option) } }); } function handleError(err) { console.log(err.name + ": " + err.message) } ``` client.html ``` <html> <head> <title> WebRtc get audio and video devices</title> </head> <body> <div> <label> audio input device:</label> <select id="audioSource"></select> </div> <div> <label> audio output device:</label> <select id="audioOutput"></select> </div> <div> <label> video input device:</label> <select id="videoSource"></select> </div> <script src="js/client.js"></script> </body> </html> ```