[LiveStreaming] 1. 배경지식

Chanho Kim·2021년 11월 21일

node.js react.js rtmp

Live Streaming 서비스 만들기

목록 보기

2/3

1. Live Streaming을 어떻게 만들지?

Live Streaming 서비스에 대한 요구사항은 두가지였습니다.

1) 방송을 진행할 사람

2) 방송을 시청할 사람들

방송을 진행하는 사람의 영상을 가져와서 방송을 시청할 사람들에게 송출해주는 서비스를 만들어야 합니다.
Live Streaming에 대한 배경지식이 없어서 찾아본 결과 아래와 같은 구조가 자주 보였습니다.

앞에서 부터 하나씩 개념을 알아가 봅시다.

1-1. Streamer

먼저 방송을 송출할 영상의 Source를 얻어야 합니다. 보통은 OBS(Open Broadcaster Software)를 통해 영상Source를 가져오지만, 웹서비스로 제작할 예정이기 때문에 react.js를 사용해 사용자의 영상 Source를 가져옵니다.

1-2. RTMP

Live Streaming영상을 주고받을 때는 다양한 프로토콜을 사용합니다. 이때 저는 RTMP를 활용할겁니다.
RTMP란 Real Time Messaging Protocol의 약자로 어도비 시스템즈사에서 만든 독점 컴퓨터 통신 규약입니다. 주로 오디오, 비디오 및 기타 데이터를 인터넷을 통해 스트리밍 할 때 사용됩니다. 지연시간(Latency)이 짧다 등의 장점과 대역폭 문제 등의 단점이 다양하게 있지만, 특히 다양한 서비스(Youtube스트리밍, Twitch등)에서 RTMP프로토콜로 받아 송출하는 기능이 있기 때문에 통신 프로토콜은 RTMP로 선택하게 됐습니다.

1-3. Encoding Server

영상을 송출할 때 영상 Source를 바로 RTMP프로토콜로 보낼 순 없고, RTMP에 맞게 Encoding을 진행해줘야 합니다. OBS를 사용해 영상Source를 가져오면 Encoding을 해주지만, 우리는 웹으로 제작하기 때문에 Encoding server가 필요합니다.

1-4. Media Server

RTMP는 어도브 시스템즈 사의 독점 컴퓨터 통신 규약입니다. 때문에 RTMP로 전달한 영상을 시청하기 위해서는 Flash 플레이어가 필요합니다. 그러나 더이상 웹에서는 Flash를 지원하지 않기 때문에 이를 시청 가능한 형식으로 맞춰주기 위한 Media Server가 필요합니다. Media Server에서는 Encoding Server에서 들어온 RTMP를 시청 가능한 프로토콜로 Encoding해 Client들에게 송출해줍니다.

1-5. HLS

Client에게 직접 전달할 프로토콜은 HLS로 선택했습니다. HLS는 HTTP Live Streamin의 약자로 애플이 만든 HTTP기반 적응 비트레이트 스트리밍 통신 프로토콜 입니다. 적응 비트레이트 스트리밍 통신이기 때문에 네트워크 상태에 따라 영상 화질을 조절할 수 있고, 다양한 플랫폼에서 지원이 가능해서 선택했습니다.