從網頁應用程式中選擇攝影機、麥克風和喇叭

Sam Dutton

現代瀏覽器可讓您選取輸入和輸出裝置，包括攝影機、麥克風和喇叭。

例如：

  • 在手機上選取前置或後置鏡頭。
  • 在筆記型電腦上，選擇內建喇叭或透過藍牙連線的喇叭。
  • 如要進行視訊通話，請選擇內建或外接麥克風或攝影機。

所有這些功能都會由 navigator.mediaDevices 傳回的 MediaDevices 物件公開。

MediaDevices 有兩種方法，兩者皆已在 Chrome 47 的電腦和 Android 版中實作：enumerateDevices() 和 getUserMedia()。

選取音訊輸出裝置。

enumerateDevices()

傳回 Promise，提供對可用裝置的 MediaDeviceInfo 物件陣列存取權。

這個方法與 MediaStreamTrack.getSources() 類似，但與該方法 (僅在 Chrome 中實作) 不同的是，這個方法符合標準，且包含音訊輸出裝置。您可以透過下列示範試用這項功能。

以下是其中一個示範的程式碼，經過稍微簡化：

navigator.mediaDevices.enumerateDevices()
    .then(gotDevices)
    .catch(errorCallback);
...
function gotDevices(deviceInfos) {

    ...

    for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    var option = document.createElement('option');
    option.value = deviceInfo.deviceId;
    if (deviceInfo.kind === 'audioinput') {
        option.text = deviceInfo.label ||
        'Microphone ' + (audioInputSelect.length + 1);
        audioInputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'audiooutput') {
        option.text = deviceInfo.label || 'Speaker ' +
        (audioOutputSelect.length + 1);
        audioOutputSelect.appendChild(option);
    } else if (deviceInfo.kind === 'videoinput') {
        option.text = deviceInfo.label || 'Camera ' +
        (videoSelect.length + 1);
        videoSelect.appendChild(option);
    }

    ...

}

使用 enumerateDevices() 擷取可用裝置的 ID 後，您可以使用 setSinkId() (在 Audio Output Devices API 中定義) 變更影片或音訊元素的音訊輸出目的地：

element.setSinkId(sinkId)
    .then(function() {
    console.log('Audio output device attached: ' + sinkId);
    })
    .catch(function(error) {
    // ...
    });

這個方法會設定元素的音訊輸出裝置。呼叫 setSinkId() 後，您可以使用 sinkId 屬性，取得元素目前輸出音訊裝置的 ID。

getUserMedia()

這會取代 navigator.getUserMedia()，但不會使用回呼，而是傳回可存取 MediaStream 的 Promise。我們建議開發人員使用 MediaDevices.getUserMedia()，但目前沒有移除 navigator.getUserMedia() 的計畫：它仍是規格的一部分。

WebRTC 範例網站提供示範。

以下是示範程式碼片段：

navigator.mediaDevices.getUserMedia(constraints)
    .then(function(stream) {
    var videoTracks = stream.getVideoTracks();
    console.log('Got stream with constraints:', constraints);
    console.log('Using video device: ' + videoTracks[0].label);
    stream.onended = function() {
        console.log('Stream ended');
    };
    window.stream = stream; // make variable available to console
    video.srcObject = stream;
    })
    .catch(function(error) {
    // ...
    }

揮舞旗幟

enumerateDevices() 方法在 Chrome 中是「無標記」的，但對於 MediaDevices.getUserMedia()，您仍需要在 chrome://flags 中啟用實驗性 Web 平台功能，或使用下列指令列標記：

--enable-blink-features=GetUserMedia

setSinkId() 也同樣：啟用實驗性 Web 平台功能或使用旗標：

--enable-blink-features=AudioOutputDevices

請參閱下方瀏覽器支援功能的詳細資訊。

未來

建議的 ondevicechange 事件處理常式會執行其說明的動作：當可用裝置集合變更時，系統會觸發 devicechange 事件，您可以在處理常式中呼叫 enumerateDevices() 來取得新的裝置清單。目前尚未在任何瀏覽器中實作這項功能。

螢幕截圖草稿是 Media Capture API 的擴充功能，可提供 MediaDevices.getDisplayMedia() 方法，讓使用者螢幕的區域可用作媒體串流的來源。此外，我們也提出了 getSupportedConstraints() 的 MediaDevices 擴充功能提案，其中提供有關 getUserMedia() 呼叫可使用的限制資訊：瀏覽器支援的音訊和視訊功能。

示範

瞭解詳情