TL;DR
HLS는
HTTP를 이용한
Adaptive streaming
manifest 포맷 중 하나
Adaptive streaming?
사용자의 네트워크 대역폭(bandWidth)에 따라 적절한 해상도의 영상을 제공하는 것
기존 RTSP/RTMP는 동영상 소스가 한번 선택되면 해당 컨텐츠를 끝까지 다운로드하면서 플레이를 해나가는 방식
Adaptive steaming은 동영상 컨텐츠를 다양한 해상도로 인코딩해 저장해두고 데이터 단위를 잘게 쪼개 저장해놓는다. 그래서 사용자가 동영상을 플레이할 때 네트워크 대역폭이 변경 되면 그에 맞는 다음 조각, 그 다음 조각을 적절히 선택해 보여준다.
잘게 쪼개진 데이터들을 하나씩 다운로드하는 방식이라 다음 데이터를 다른 퀄리티로 쉽게 교체할 수 있게 된다.
서비스를 제공하는 서버의 트래픽을 관리할 수 있는 이점
사용자 입장에서도 네트워크 데이터 사용을 줄일 수 있고 버퍼링 없는 동영상 시청이 가능하게 됨
서버에서는?
-
동영상을 업로드할 때 파일을 작은 조각(세그먼트)로 잘라냄
- segment 파일 확장자 → ~.m4s, ~.ts 등
-
세그먼트들은 서비스의 필요에 따라 구분한 대역폭에 대응된 해상도로 인코딩함. 여기서 해상도 별로 세그먼트의 개수가 늘어남
- master.m3u8 → media.m3u8들의 절대경로||상대경로 가지고 있음, 해당 playlist(manifest)가 어떤 대역폭에 대응하는 어떤 해상도의 영상을 가지고 있는지 등의 정보를 가지고 있음.
- media.m3u8 → 특정 대역폭에 대응하는 segement모음집
-
대응되는 해상도 별 미디어 세그먼트의 정보 등을 담은 파일(Manifest)을 클라이언트에 제공함
- → Manifest = PlayList
동영상 파일을 작은 세그먼트로 잘라 낼때는 코덱별로 필요한 도구를 사용하게 되고 동영상의 조각난 세그먼트에 대한 정보를 제공해주는 문서 포맷에는 Apple-HLS와 MPEG-DASH이 있다.
HLS는 ~.m3u8 manifest 사용
클라이언트에서는?
웹 클라이언트에서는 Adaptive Streaming을 가능하게 하는 표준 기술로 Media Source Extensions가 있고 이를 통해 스트리밍 데이터를 플레이어에 전달한다.
- 클라이언트는 플레이할 동영상의 각 해상도별 세그먼트정보를 담은 Manifest 파일을 서버에게 요청한다.
- (아래 2~4번은 hls.js가 하는 일임, MSE를 사용하는 것까지 포함해서)
- Manifest 파일을 파싱해 필요한 정보들을 얻은 후 비디오에 대한 정보, 어떤 해상도의 퀄리티들을 사용할 수 있는지 그리고 어디서(절대경로||상대경로) 해당 세그먼트들을 받을 수있는지(e.g. CDN URL)를 파악한다.
- 위에 서버에서 넣어준 정보들 파싱(media.m3u8들의 절대경로||상대경로, bandWidth 등등 manifest가 가지고 있는 정보)
- 클라이언트는 사용자의 네트워크 대역폭을 측정하고 Manifest의 내용에 따라 가장 최적의 비디오 퀄리티를 선택한 뒤 필요한 세그먼트를 다운로드한다.(세그먼트를 다운로드하면서 다시 대역폭 측정)
- 다운로드한 세그먼트의 데이터를 MSE 버퍼에 제공한다.
- MSE는 데이터를 디코딩하고 비디오객체에 제공해 플레이한다.(goto 3)
- 3~5번 : init.mp4(init segment)를 사용해 뭘 재생할건지? 어떻게 디코딩할건지? 알아냄 → MSE에 던짐 → 0000001.m4s(segment) 다운로드 → MSE에 던져서 MSE가 재생 이걸 계속 반복
HLS
메인 m3u8과 서브 m3u8구조로 나눠 컨텐츠의 종류와 세그먼트 정보를 표현한다.
위에서 말한 master.m3u8과 media.m3u8의 관계.
master와 media라는 이름은 서비스마다 각기 다르게 사용할 수 있음
사파리나 특정 브라우저에서는 HTML5 Video의 미디어 소스로 바로 HLS스트리밍을 사용할 수 있다.
모바일 사파리에서는 MSE를 지원하지 않아 HLS외엔 사용이 불가능
사실 DASH나 HLS는 스트리밍할 미디어 데이터의 정보를 동영상 플레이어에게 전달하는 목적으로 만들어졌기 때문에 실질적으로 플레이에 관여하는 부분은 아니다.
MSE는 DASH 혹은 HLS Manifest를 통해 필요한 미디어 정보들을 얻은 다음 실질적으로 미디어 조각들을 웹상에서 HTML5 비디오를 통해 플레이할때 사용된다. (물론 사파리에서는 HLS Manifest를 그대로 소스로 사용할 수 있다)
hls.js 소스파일에서 MSE와 HTML5 video가 연동되는 부분 정리
