-
Notifications
You must be signed in to change notification settings - Fork 0
hls.js로 알아보는 스트리밍
Minseok Park edited this page Dec 3, 2024
·
2 revisions
HTTP Live Streaming(HLS)은 Apple이 개발한 스트리밍 프로토콜로, iOS와 Safari에서는 네이티브로 지원되어 <video> 태그에 스트림 주소를 직접 넣기만 해도 쉽게 스트리밍이 가능합니다. 하지만 Chrome, Firefox와 같은 다른 브라우저에서는 이러한 네이티브 지원이 없어 Media Source Extensions(MSE)라는 웹 API를 활용해 직접 구현해야 합니다. 이 환경적 차이를 극복하고 크로스 브라우저 환경에서 HLS 스트리밍을 가능하게 해주는 것이 바로 hls.js입니다.
웹에서 비디오를 재생하기 위한 기본 요소는 HTML5의 <video> 태그입니다. 하지만 스트리밍 환경에서는 동적으로 데이터를 추가할 수 있는 MSE(Media Source Extensions)가 필요합니다.
-
MSE 주요 기능
-
SourceBuffer 생성
MediaSource.addSourceBuffer(mimeType)를 호출해SourceBuffer를 생성합니다. -
미디어 데이터 추가
SourceBuffer.appendBuffer()로 TS 또는 fMP4 데이터를 추가합니다. -
버퍼 관리
오래된 데이터를 제거하거나 중복 데이터를 관리하여 실시간 스트리밍을 지원합니다.
-
SourceBuffer 생성
m3u8 파일은 HLS 스트리밍의 "설계도" 역할을 하며, 두 가지 주요 형태가 있습니다:
-
마스터 플레이리스트
사용 가능한 모든 품질의 스트림을 정의합니다.
#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=1280000,RESOLUTION=720x480
video_720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2560000,RESOLUTION=1280x720
video_1080p.m3u8
-
미디어 플레이리스트
실제 재생할 미디어 세그먼트 목록을 포함합니다.
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:9.009,
segment1.ts
#EXTINF:9.009,
segment2.ts
HLS 스트리밍에서 사용되는 미디어 컨테이너는 두 가지가 있습니다:
-
MPEG-2 Transport Stream(TS)
- 고정 크기(188바이트) 패킷으로 구성.
- MSE와 직접 호환되지 않음.
-
Fragmented MP4(fMP4)
- MSE와 직접 호환 가능.
- DASH와 같은 다른 스트리밍 프로토콜과도 호환.
- m3u8 파싱: HLS.js가 마스터/미디어 플레이리스트를 읽고 필요한 정보를 추출합니다.
- 세그먼트 로드: HTTP 요청으로 세그먼트를 다운로드합니다.
- Transmuxing: TS 포맷 데이터를 fMP4로 변환합니다.
-
MSE 버퍼링: 변환된 데이터를
SourceBuffer에 추가하여 브라우저에서 재생 가능하게 만듭니다. -
비디오 재생:
<video>태그를 통해 최종적으로 스트림을 재생합니다.
- TS 데이터를 fMP4로 변환하는 과정.
- CPU 집약적인 작업으로 Web Worker를 사용해 메인 스레드에서 발생할 수 있는 성능 문제를 방지합니다.
-
브라우저 지원
- Safari: HLS를 네이티브로 지원 (hls.js 불필요).
- MSE 미지원 브라우저에서는 작동하지 않음.
-
DRM(디지털 저작권 관리)
- HLS.js는 기본적으로 DRM을 지원하지 않으며 추가 솔루션이 필요.
-
네트워크 상태
- 네트워크 속도가 낮을 경우 품질이 낮은 스트림으로 전환.
HLS.js는 브라우저의 기술적 제약과 다양한 미디어 포맷의 차이를 훌륭하게 해결해주는 라이브러리입니다. 이를 활용해 크로스 브라우저 환경에서 안정적인 HLS 스트리밍을 구현할 수 있습니다.