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

Sam Dutton

新世代瀏覽器能夠選取攝影機、麥克風和喇叭等輸入和輸出裝置。

例如：

  • 在手機上選取前置或後置鏡頭。
  • 如果你使用的是筆電，請選擇內部喇叭或透過藍牙連線的喇叭。
  • 如要進行視訊通訊，請選擇內部或外接麥克風或攝影機。

所有此功能都會由 Media Devices 物件公開，由 navigator.mediaDevices 傳回。

Media Devices 有兩種方法，一種是在電腦和 Android 的 Chrome 47 中實作：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) {
    // ...
    }

旗標解除

在 Chrome 中，enumerateDevices() 方法為「flagless」，而針對 MediaDevices.getUserMedia()，您仍需在 chrome://flags 中啟用實驗性 Web Platform 功能，或使用以下指令列旗標：

--enable-blink-features=GetUserMedia

同樣適用於 setSinkId()：啟用實驗性 Web Platform 功能或使用標記：

--enable-blink-features=AudioOutputDevices

如要進一步瞭解瀏覽器支援，請參閱下方說明。

日後規劃

提議的 ondevicechange 事件處理常式會執行此動作：當一組可用裝置變更時，會觸發 devicechange 事件，而在處理常式中，您可以呼叫 enumerateDevices() 來取得新的裝置清單。目前還沒有在任何瀏覽器中實作這項功能。

「Screen Capture draft」是 Media Capture API 的擴充功能，其提議 MediaDevices.getDisplayMedia() 方法，可讓螢幕的區域做為媒體串流的來源。此外，還有一項適用於 getSupportedConstraints() 的 MediaDevices 擴充功能提案，其中提供 getUserMedia() 呼叫可用的限制資訊：瀏覽器支援的音訊和視訊功能。

試聽帶

瞭解詳情