新世代瀏覽器能夠選取攝影機、麥克風和喇叭等輸入和輸出裝置。
例如:
- 在手機上選取前置或後置鏡頭。
- 如果你使用的是筆電,請選擇內部喇叭或透過藍牙連線的喇叭。
- 如要進行視訊通訊,請選擇內部或外接麥克風或攝影機。
所有此功能都會由 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()
呼叫可用的限制資訊:瀏覽器支援的音訊和視訊功能。
試聽帶
- getUserMedia()
- enumerateDevices():
- Media Devices 輔助