[영상재생] hls.js는 무슨 일을 할까?

어쩌다보니 영상 재생 관련해서 포스팅을 여러 개 하고 있는데,
이 포스팅들의 처음 시작은 바로 오늘의 주인공(?)인 hls.js로부터 시작되었다.

운영 중이던 서비스에서 갑자기 일부 영상 콘텐츠의 재생이 원활하지 않다는 이슈가 접수된 것.

알고보니 hls.js가 원인이었다.

그래서 hls.js에 대해 찾다보니 여기까지 와버렸...

그런 의미에서 이 포스팅들의 시초(?)가 된 hls.js에 대해 간략하게 정리를 해 보려고 한다.

출처: Photo by Tai Bui on Unsplash

 

넷플릭스와 같은 OTT 서비스를 웹에서 볼 때,
사실 그 영상 뒤에는 꽤 복잡한 일들이 벌어지고 있었다.

그 중심에 있는 기술 중 하나가 바로 hls.js.

hls.js란?

HLS스트리밍을 지원하지 않는(Apple의 iOS, Safari가 아닌) 브라우저에서도
영상이 잘 재생되도록 도와주는 플레이어 엔진이라고 한다.

hls.js는 HLS(HTTP Live Streaming) 방식의 영상 스트리밍을
HTML5 환경에서 재생할 수 있도록 해주는 JavaScript 라이브러리이다. 

원래 HLS는 Apple이 만든 규격으로, Safari에서는 브라우저 자체적으로 재생을 지원하지만
Chrome, Firefox, Edge 등 대부분의 브라우저에서는 직접 재생이 불가능한 문제가 있다.

이때 hls.js는 대부분의 브라우저에서도 영상 데이터를 처리해 주는 역할을 함으로써
Chrome, Firefox, Edge 같은 브라우저에서도 HLS 영상을 재생할 수 있게 해주는 것!

hls.js의 장점

1. 브라우저 호환성 향상 (Safari 외의 브라우저에서도 HLS를 사용할 수 있다)
2. 커스터마이징 가능 (ABR 정책, 에러 핸들링 가능)
3. 오픈소스이기 때문에 수정/확장 가능

 

hls.js는 무슨 일을 하지?

간단히 말하면, 브라우저가 재생할 수 없는 HLS 포맷을 받아서
브라우저가 이해할 수 있는 형태로 바꿔주는 일을 하는데,

1. 여러 조각으로 나눠진 영상을
2. 순서대로 받아서
3. 맞게 조립한 후 
4. 영상 플레이어에 잘 보여주는 역할을 한다.

 

1. 먼저 .m3u8 파일을 읽고
→ 어떤 영상 조각들이 있고, 어떤 화질이 있는지 확인
→ 영상 재생을 시작하면 hls.js가 .m3u8(재생 목록)파일을 불러온다.

2. 조각(segment) 단위 영상 파일 다운로드해서
→ .m3u8 에 적힌 영상 조각 파일들(.ts, .mp4)을 하나씩 받는다.

* .m3u8은 재생목록 파일(메뉴판)이고
.ts, .mp4는 영상 조각(세그먼트)파일(각각의 메뉴)이라고 이해하면 편하겠다.

3. 디코딩 및 연결하고
→ 영상과 음성을 분리하는 Demux(분리) 과정
→ 브라우저가 이해할 수 있는 MP4 컨테이너로 포장하는 Remux(재조합) 과정
→ 받은 조각을 해석해서 브라우저에서 재생할 수 있는 영상 데이터로 변환한다.

4. <video> 태그에 붙인다.
→ Media Source Extensions (MSE)를 통해 재생
→ 변환된 영상을 <video> 태그에 집어넣어서 연결하고 실제로 재생한다.

5. 화질 자동 전환(선택 사항)
→ 네트워크 상태가 나쁘면 저화질로, 좋으면 고화질로 자동 조절해준다.

hls.js는 중간에서 포맷을 변환하고,
브라우저에 재생을 지시하는 일종의 중계 엔진이라고 할 수 있다.

 

Safari에는 왜 hls.js가 필요 없을까?

그야.. hls.js는 HLS가 안되는 브라우저를 지원하기 위한 중계자 역할인데, 
Safari도 HLS처럼 Apple이 만들었기 때문에 HLS를 네이티브로 직접 지원한다.

따라서 별도로 hls.js로 변환할 필요가 없다는 것. 
Safari에서는 .m3u8 파일을 <video>태그에 바로 넣어도 재생이 된다.

같은 맥락으로 모바일에서도 iOS Safari와 Chrome(실제로는 Safari엔진)에서도
HLS는 지원이 되기 때문에 hls.js는 필요 없다.
Android Chrome에서는 HLS를 지원하지 않기 때문에 hls.js가 필요하다.. 

모바일 환경에서는 상황에 따라 조건부로 hls.js를 적용하는 로직이 필요하다고 정리할 수 있겠다.

 

정리하자면, 

hls.js는 플레이어와 같은 영상 재생 기능이 아니라,
영상 데이터를 변환해주는 엔진이라고 할 수 있다.

<video> 태그와 함께 쓰여야 재생을 할 수 있으며,
조건에 따라 hls.js를 적용하여 여러 플랫폼에서도 원활히 서비스할 수 있도록 개발이 필요하겠다.