브라우저로 실시간 화상 기능 구현하기 getUserMedia

브라우저에서 카메라와 마이크를 사용하는 방법: getUserMedia 소개

웹에서 화상 통화나 실시간 스트리밍을 구현할 때, 브라우저에서 카메라와 마이크에 접근해야 합니다. 이때 사용하는 API가 바로 navigator.mediaDevices.getUserMedia입니다. 별도의 라이브러리 없이, 웹 API로 브라우저에서 바로 제공되는 기능입니다.

getUserMedia란?

getUserMedia는 웹 애플리케이션이 사용자의 카메라와 마이크에 접근할 수 있게 해주는 브라우저 내장 API입니다. 이 API를 호출하면 사용자의 허가를 받아 비디오와 오디오 스트림을 가져올 수 있습니다. 구체적으로는 사용자에게 장치 사용 허가를 요청하고, 이를 허용할 경우 비디오 스트림과 오디오 스트림을 반환합니다.

사용 예시

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then((stream) => {
        // 스트림을 비디오 요소에 연결하여 사용자 화면에 표시
        videoElement.srcObject = stream;
    })
    .catch((error) => {
        console.error("장치에 접근하는 동안 오류가 발생했습니다:", error);
    });

위 코드에서 비디오와 오디오 옵션을 설정하여 카메라와 마이크에 접근하고, 반환된 스트림을 비디오 요소에 연결해 화면에 표시할 수 있습니다. 사용자는 요청을 수락하거나 거부할 수 있으며, 거부 시 에러가 발생하여 catch 블록에서 처리됩니다.

getUserMedia의 주요 특징

• 브라우저 내장 기능: 대부분의 최신 브라우저에서 지원하며, 별도의 설치 없이 사용 가능합니다.
• Promise 기반 비동기 처리: 호출 시 Promise를 반환하여 성공과 실패에 따라 다르게 처리할 수 있습니다.
• 사용자 허가 필요: 보안을 위해 항상 사용자에게 장치 접근 허가를 요청합니다.

getUserMedia가 제공하는 장점

getUserMedia 덕분에 웹 애플리케이션은 추가적인 라이브러리 없이도 화상 통화, 실시간 방송, 녹화 기능 등을 쉽게 구현할 수 있습니다. 이 API는 특히 화상 채팅 앱, 온라인 회의 서비스와 같은 실시간 통신 애플리케이션에서 필수적인 역할을 합니다.

 

아래 링크에서 더 많은 정보 확인하기👇

MediaDevices: getUserMedia() method - Web APIs | MDN