최신 브라우저를 사용하면 카메라, 마이크, 스피커 등의 입력 및 출력 장치를 선택할 수 있습니다.
예를 들면 다음과 같습니다.
- 휴대전화에서 전면 또는 후면 카메라를 선택합니다.
- 노트북에서 내부 스피커 또는 블루투스로 연결된 스피커를 선택합니다.
- 영상 채팅의 경우 내장/외장 마이크나 카메라를 선택합니다.
이 모든 기능은 navigator.mediaDevices에서 반환하는 MediaDevices 객체에 의해 노출됩니다.
MediaDevices에는 데스크톱과 Android의 Chrome 47에서 구현되는 두 가지 메서드, 즉 enumerateDevices()와 getUserMedia()가 있습니다.
enumerateDevices()
사용 가능한 기기의 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에 대한 액세스 권한을 부여하는 프로미스를 반환합니다. 개발자는 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에서 실험용 웹 플랫폼 기능을 사용 설정하거나 다음 명령줄 플래그를 사용해야 합니다.
--enable-blink-features=GetUserMedia
setSinkId()의 경우도 마찬가지입니다. 실험용 웹 플랫폼 기능을 사용 설정하거나 다음 플래그를 사용합니다.
--enable-blink-features=AudioOutputDevices
브라우저 지원에 관한 자세한 내용은 아래를 참고하세요.
앞으로
제안된 ondevicechange 이벤트 핸들러는 지시하는 작업을 실행합니다. 사용 가능한 기기 세트가 변경되면 devicechange 이벤트가 실행되며 핸들러에서 enumerateDevices()를 호출하여 새 기기 목록을 가져올 수 있습니다. 이 기능은 아직 어떤 브라우저에서도 구현되지 않았습니다.
초안 화면 캡처는 Media Capture API의 확장 프로그램으로, 사용자의 디스플레이 영역을 미디어 스트림의 소스로 사용할 수 있는 MediaDevices.getDisplayMedia() 메서드를 제안합니다. getSupportedConstraints()에 관한 MediaDevices 확장 프로그램 제안도 있습니다. 이 제안은 getUserMedia() 호출에 사용할 수 있는 제약 조건(브라우저에서 지원하는 오디오 및 동영상 기능)에 관한 정보를 제공합니다.
데모
- getUserMedia()
- enumerateDevices():
- MediaDevices shim
자세히 알아보기
- Mozilla 개발자 네트워크: 미디어 기기
- 구현 상태
- 미디어 캡처 및 스트림 편집기의 초안: MediaDevices
- 오디오 출력 장치 API