HLS - 1. Intro

유튜브, 숲 등 영상 스트리밍 서비스를 하는 곳에서 주로 HLS를 사용하는데

 

왜 사용하는지 어떤 특징을 가지고 있는지 간단하게 알아보겠습니다

 

먼저 HLS는 HTTP Live Streaming으로 적응형 비디오 스트리밍 프로토콜입니다

 

WebRTC와 달리 네트워크 환경에 따라 비트레이트를 조정해

 

느린 인터넷 환경에서는 저화질, 빠른 인터넷 환경에서는 고화질로 품질을 전환합니다

 

다만 WebRTC는 실시간성이 좋지만 HLS는 지연시간이 상대적으로 깁니다

 

Low Latency HLS라는것도 있는데, 영상통화나 회의, 게임등을 할때는 WebRTC를 선택해야됩니다

 

그리고 HTTP 기반이다 보니 별도의 미디어 서버가 필요하지 않고

 

CDN과 쉽게 통합이 가능해서 글로벌 서비스에 조금 더 적합합니다

 

그외에도 라이브 스트리밍 지원, 다양한 플랫폼 지원, 보안 등 있지만 이 부분은 생략하겠습니다

 

HLS를 위해 영상을 FFmpeg을 이용해서 변환하게 되는데

 

기본적으로 한개의 m3u8, sgement_n.ts가 생성이 됩니다

 

이걸 화질별로 여러개 변환하게 되면 다음과 같이 파일이 생성되는데

< 변환된 파일 >

하나씩 알아보도록 하겠습니다

 

먼저 m3u8은 HLS스트리밍에서 재생목록을 관리하는 텍스트파일으로

 

텍스트 내용은 다음과 같습니다

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.000000,
segment_000.ts
#EXTINF:10.000000,
segment_001.ts
#EXTINF:2.093000,
segment_002.ts
#EXT-X-ENDLIST

10초 단위로 어떤 segment를 바라봐야되는지 정의되어있습니다

 

여기서 segment는 확장자가 ts라 TypeScript인가 하고 오해할 수 있지만

 

영상정보 바이너리 파일입니다 그래서 열어볼수는 없지만 네트워크 탭으로 보면

(의미 없는짓 해보자면..)

< segment file binary >

이런 형태로 나오게 됩니다

 

다음으로는 master.m3u8부분을 볼텐데

 

해당 파일은 FFmpeg으로 변환된 파일이 아닌 index.m3u8을 바라보게 직접 생성해주는 해주는 마스터 파일 입니다

#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x360,NAME="360"
360p/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2500000,RESOLUTION=1280x720,NAME="720"
720p/index.m3u8

 

내용을 보면 대역폭, 화질, 이름, 경로 부분을 설정해주게 되는데

 

여기서 NAME을 별도로 설정해주지 않으면

 

HLS.js(클라이언트 라이브러리)에서 name 추출이 안되는 부분이 있어서 꼭 적어주셔야됩니다

< 영상 실행시 전달받는 파일 >

 

1. master.m3u8을 조회해서 화질 정보를 클라이언트에서 파싱

2. 클라이언트에서 화질 선택(자동/수동)

3. 해당되는 화질의 index.m3u8을 조회해서 현재 플레이에 필요한 segement 조회

4. 해당 segment재생

5. 특정 시간에 도달할 때, 다음 segment조회

 

이 순서대로 진행됩니다

 

라이브 스트리밍은 어떤식으로 진행되는지 스터디 해봤는데,

 

영상 녹화 -> RTMP로 변환 -> HLS로 변환 하는 과정을 거치는 형태인거 같습니다

 

그러면 의문이 드는게 왜 바로 HLS로 변환 안하지 였는데

 

고민을 좀 해보니 HLS로 보내면 여러 파일을 실시간으로 서버에 업로드 해야되고

 

더 큰 대역폭 소모가 있을거 같습니다

 

360p 480p 720p 1080p 만 보내도 이미 4 * n개의 파일을 실시간으로 보내야되는 겁니다

 

고로 실시간에는 RTMP를 사용하는것이다 라고 정리하면 될거 같습니다

 

인트로는 이정도로 마무리 다음은 서버 구현, 클라이언트 구현 순으로 진행하도록 하겠습니다

 

Node server : https://devmemory.tistory.com/131

React client : https://devmemory.tistory.com/132

Outro : https://devmemory.tistory.com/133