[WebRTC] 1. 영상 채팅 화면과 소리 출력하기

안녕하세요. 이번 포스팅에서는 webRTC를 사용하여 브라우저에서 영상 채팅 화면과 소리를 출력하는 방법에 대해 알아보도록 하겠습니다.

 

지난 웹소켓 포스팅에서 사용했던 코드의 일부를 재사용할 것인데요. 먼저, home.pug로 이동하여 영상을 출력할 수 있는 video 태그를 삽입해주도록 하겠습니다.

// home.pug

div
  h2 Video
  video#myFace(autoplay, playsinline, width="400", height="400")

다음으로 socket IO를 구현하고 있는 app.js로 이동합니다. (이전에 구현했던 텍스트 채팅 영역은 hidden 옵션을 통해 우선은 가려줬습니다)

 

다음으로 navigator.mediaDevices.getUserMedia()를 통해 영상 및 음성 기기를 받아옵니다. 이후 myFace에 srcObject로 myStream을 할당해주면 완료입니다.

// app.js

const myFace = document.getElementById("myFace");

let myStream;

async function getMedia() {
  try {
    myStream = await navigator.mediaDevices.getUserMedia({ // 영상 및 음성 기기 받아오기
      audio: true,
      video: true,
    });
        myFace.srcObject = myStream; // 영상 및 음성 출력하기
  } catch (e) {
    console.log(e);
  }
}

getMedia();

브라우저에 접속하면 권한 설정 창이 나오는데요. 승인을 클릭하면 아래와 같이 영상과 음성이 출력되는 것을 확인할 수 있습니다!