웹 앱에서 카메라, 마이크, 스피커를 선택하세요

Sam Dutton

최신 브라우저를 사용하면 카메라, 마이크, 스피커를 비롯한 입력 및 출력 장치를 선택할 수 있습니다.

예를 들면 다음과 같습니다.

  • 휴대전화에서 전면 또는 후면 카메라를 선택합니다.
  • 노트북에서 내부 스피커 또는 블루투스로 연결된 스피커를 선택합니다.
  • 영상 채팅의 경우 내부 또는 외부 마이크 또는 카메라를 선택합니다.

이러한 모든 기능은 navigator.mediaDevices에서 반환되는 MediaDevices 객체에 의해 노출됩니다.

MediaDevices에는 두 가지 메서드가 있으며, 둘 다 데스크톱 및 Android의 Chrome 47에서 구현됩니다. enumerateDevices() 및 getUserMedia()입니다.

오디오 출력 장치 선택

enumerateDevices()

사용 가능한 기기의 MediaDeviceInfo 객체 배열에 액세스할 수 있는 Promise를 반환합니다.

이 메서드는 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()를 삭제할 계획은 없습니다. 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() 호출에 사용할 수 있는 제약 조건(브라우저에서 지원하는 오디오 및 동영상 기능)에 관한 정보를 제공합니다.

데모

자세히 알아보기