[LiveStreaming] 2. Architecture
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
Author And Source
이 문제에 관하여([LiveStreaming] 2. Architecture), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cudy/LiveStreaming-2.-Architecture저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)