HTML5에서 후면 카메라 활성화하는 방법

HTML5에서 후면 카메라 활성화하기

웹 브라우저 환경에서 후면(후방) 카메라를 활성화하려면 먼저 MediaStreamTrack.getSources() 메서드를 사용해야 합니다. 이 메서드는 기기에 연결된 사용 가능한 미디어 입력 장치 목록을 가져오는 역할을 합니다.

MediaStreamTrack.getSources(gotSources);

소스 선택 후 getUserMedia에 전달하기

장치 목록을 확인한 다음, 원하는 카메라 소스를 선택하고 이를 선택적(optional) 옵션 형태로 getUserMedia 메서드에 전달합니다.

아래 코드는 오디오와 비디오 입력 장치 각각의 소스 ID(sourceId)를 지정하는 예제입니다.

var a = {
    audio: {
        optional: [{sourceId: audioSource}]
    },
    video: {
        optional: [{sourceId: videoSource}]
    }
};
navigator.getUserMedia(a, successCallback, errorCallback);

이 방식은 사용자가 최대 한 개의 비디오 입력 장치에 대한 접근 권한을 설정할 때 특히 유용합니다. 참고로, 노트북이나 스마트폰처럼 카메라가 여러 개인 기기에서는 sourceId를 지정하지 않으면 기본 카메라(전면)가 열립니다. 따라서 후면 카메라를 사용하려면 반드시 해당 장치의 sourceId를 명시적으로 지정해 주어야 합니다.