WebRTC로 실시간 오디오 및 비디오 캡처

이 게시물에서는 WebRTC(API)와 약간의 HTML/Javascript를 사용하여 실시간 비디오 및 오디오 스트림을 캡처하는 과정을 다룰 것입니다.

WebRTC란?

WebRTC는 웹 브라우저 및 모바일 애플리케이션(API)용 간단한 애플리케이션 프로그래밍 인터페이스를 통해 실시간 통신 기능을 제공하는 Google WebRTC 팀에서 유지 관리하는 오픈 소스 이니셔티브입니다[1].

다음은 WebRTC의 핵심 구성 요소입니다.

getUserMedia()

장치의 웹캠 및/또는 마이크에 대한 액세스를 허용하고 해당 신호를 RTC 연결에 연결할 수 있습니다.

RTCPeerConnection

비디오 채팅 및 전화 통화 구성을 위한 RTCPeerConnection 인터페이스.

RTCDataChannel

브라우저 간에 P2P 데이터 경로를 설정하는 기술을 제공합니다[2].

WebRTC 개발

MediaDevices.getUserMedia() 메서드는 미디어 입력을 사용할 수 있는 권한을 요청하여 원하는 미디어 유형을 포함하는 트랙이 있는 MediaStream을 생성합니다.

MediaStream 개체로 확인되는 Promise를 반환합니다. 사용자가 권한을 거부하거나 일치하는 미디어가 없으면 NotAllowedError 또는 NotFoundError DOMException과 함께 약속이 거부됩니다.

파트 1: 비디오 캡처

비디오를 자동으로 재생하기 위해 <video> 속성과 함께 HTML 비디오 요소autoplay를 추가합니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Getting Started With WebRTC.</title>
        <meta name="description" content="The WebRTC project is open-source and supported by Apple, Google, Microsoft and Mozilla, amongst others. This page is maintained by the Google WebRTC team.">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <video autoplay></video>
        <!-- <audio autoplay controls></audio> -->
        <script src="script.js" async defer></script>
    </body>
</html>

그런 다음 비디오 스트림을 녹화하기 위해 JavaScript를 사용하여 비디오 매개변수가 "true"로 설정된 제약 조건을 설정합니다. 사용자가 권한을 수락하면 하나의 비디오 트랙을 포함하는 MediaStream으로 약속이 이행됩니다. 일치하는 장치가 연결되어 있지 않으면 NotFoundError가 생성되고 권한이 거부되면 PermissionDeniedError가 발생합니다.

// Request a video stream
const constraints = {
    video: true
};

// handle success function 
function handleSuccess(stream) {
    document.querySelector('video').srcObject = stream;
}

// handle error function 
function handleError(error) {
    console.log('Error accessing media devices: ', error);
}

// triggers a permissions request with getUserMedia()
navigator.mediaDevices.getUserMedia(constraints)
        .then(handleSuccess)
        .catch(handleError);

Note 💡- If MediaDevices.getUserMedia() is called, all browsers will show a permissions window, giving users the choice of allowing or denying access to their webcam [3].

웹캠의 비디오 스트림은 사용자가 액세스 권한을 부여한 후 HTML 비디오 요소에 표시됩니다.

파트 2: 오디오 캡처

다음 단계는 마이크에서 생성된 오디오 스트림을 캡처하는 것입니다.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Getting Started With WebRTC.</title>
        <meta name="description" content="The WebRTC project is open-source and supported by Apple, Google, Microsoft and Mozilla, amongst others. This page is maintained by the Google WebRTC team.">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <audio autoplay controls></audio>
        <script src="script.js" async defer></script>
    </body>
</html>

Note 💡 - We upgraded to an HTML audio element <audio> with the autoplay attribute to play the audio automatically and the controls attribute to show the audio controls, such as the volume.

오디오 스트림을 녹음하기 위해 JavaScript를 사용하여 오디오 매개변수가 "true"로 설정된 제약 조건을 설정합니다. 마이크 사용 권한을 요청하려면 navigator.mediaDevices.getUserMedia 메소드가 호출됩니다. 사용자가 권한을 수락하면 하나의 오디오 트랙을 포함하는 MediaStream으로 약속이 이행됩니다. 일치하는 장치가 연결되어 있지 않으면 NotFoundError가 생성되고 권한이 거부되면 PermissionDeniedError가 발생합니다.

// Request a audio stream
const constraints = {
    audio: true
};

// handle success function 
function handleSuccess(stream) {
    document.querySelector('audio').srcObject = stream;
}

// handle error function 
function handleError(error) {
    console.log('getUserMedia error: ', error);
}

// triggers a permissions request with getUserMedia()
navigator.mediaDevices.getUserMedia(constraints)
        .then(handleSuccess)
        .catch(handleError);

Note 💡- If MediaDevices.getUserMedia() is called, all browsers will show a permissions window, giving users the choice of allowing or denying access to their microphone [3].