1. 구조도

아래와 같은 구조로 프로젝트를 진행합니다.

1-1. Streamer

webAPI중에 getUserMedia라는 매서드를 이용해서 유저의 영상 및 소리를 가져옵니다.

async function getMedia(constraints) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* 스트림 사용 */
  } catch(err) {
    /* 오류 처리 */
  }
}

1-2. Encoding Server

Encoding시에는 FFmpeg이라는 오픈소스를 사용할겁니다. FFmpeg은 디지털 음성 스트림과 영상 스트림에 대해서 다양한 종류의 형태로 기록하고 변환하는 컴퓨터 프로그램입니다. 다양한 인코딩 프로그램들이 FFmpeg을 기반으로 만들었습니다. node.js를 사용해 FFmpeg의 명령어를 직접 실행하는 방법으로 Encoding Server를 만듭니다.

1-3. webSocket

1-1에서 getUserMedia를 사용해 얻은 영상 Source를 Encoding Server로 보내줘야합니다. 이때 webSocket을 사용해서 보냅니다. webSocket은 server에 client의 정보(state)를 저장해둬 폴링없이 server와 client에서 서로 메세지를 주고받을 수 있는 인터페이스 입니다. server와 client모두 node.js기반으로 만들거기에 socket.io를 사용합니다.

1-4. Media Server

Media Server는 Nginx rtmp module을 기반으로 만든 Nginx Media Server를 활용해서 만들겁니다. docker를 활용해 손쉽게 Media Server를 구축할 수 있습니다.

1-5. Clients

송출된 영상을 재생하기 위해서 react-player라는 라이브러리를 사용할것입니다. 해당 라이브러리는 다양한 props와 method를 지원하고, 우리가 송출할 HLS도 재생 가능한 라이브러리 입니다.

유저의 영상을 얻을 수 있는 1-1. Streamer부터 만들어 봅시다.

출처

https://developer.mozilla.org/ko/docs/Web/API/MediaDevices/getUserMedia
https://ko.wikipedia.org/wiki/FFmpeg
https://developer.mozilla.org/ko/docs/Web/API/WebSockets_API
https://github.com/CookPete/react-player