[JavaScript] navigator.mediaDevices

MediaDevices 인터페이스는 카메라, 마이크, 공유 화면 등 현재 연결된 미디어 입력 장치로의 접근 방법을 제공하는 인터페이스이다. 다르게 말하자면, 미디어 데이터를 제공하는 모든 하드웨어로 접근할 수 있는 방법이다. MediaDevices 인터페이스를 구현하는 navigator.mediaDevices 객체를 통해 자바스크립트로 액세스할 수 있다. 

 

- navigator.mediaDevices 예제

const video = document.getElementById("myVideo");

async function getMedia() {
    try {
        const myStream = await navigator.mediaDevices.getUserMedia({
            audio:true,
            video:true
        });

        video.srcObject = myStream;
    } catch(e) {
        console.log(e);
    }
}

getMedia();

navigator.mediaDevices.getUserMedia()를 통해 PC에 연결되어 있는 media 장치를 가져오고 이를 video 컴포넌트에 할당한다. media장치를 가져오는데 딜레이가 걸리거나 오류가 발생할 수도 있으므로 async(비동기) 함수안에 await를 붙여 호출해 함수가 반환될때까지 대기한다. 혹 에러가 발생하면 throw를 날려 catch문이 실행된다.