🚀 HLS 프로토콜에 관한 정리 및 FFmpeg 사용기

HLS의 주요 특징

• Apple에서 만든 HTTP protocol 위에 동작하는 비디오 스트리밍 프로토콜
• HTTP의 특징들 (ex: caching)을 사용할 수 가 있음
• 네트워크 상태에 동적으로 반응하여 동작 기능을 adaptive하게 맞추어줌

전반적인 동작 흐름 정리 및 구조

출처: https://developer.apple.com/streaming/

HLS와 다른 스트리밍 프로토콜과의 비교

프로토콜	지연시간	확장성	CDN 호환성	적응형 스트리밍	디바이스 호환성
HLS	중간(2-30초)	매우 높음	매우 좋음	지원	매우 높음
DASH	중간(2-30초)	높음	좋음	지원	높음
RTMP	낮음(1-5초)	낮음	제한적	미지원	제한적

HLS와 실시간 온라인 스트리밍의 적합성

장점	설명
HTTP 기반 전송	- 기존 웹 인프라 활용 가능 - 방화벽 통과 용이 - CDN 확장성 우수
적응형 스트리밍	- 네트워크 상태에 따라 품질 자동 조절 - 다양한 대역폭 환경 지원
높은 안정성	- 세그먼트 기반 전송으로 오류 복원 용이 - 버퍼링 최소화
디바이스 호환성	- iOS/Android 모두 네이티브 지원 - 대부분의 브라우저 지원
확장성	- 수만 명의 동시 시청자 처리 가능 - CDN 활용으로 글로벌 서비스 용이

HLS 기반 라이브 플레이리스트 실행에 관한 정리

File extension에 관한 정리

• .m3u8: Segmented file에 관한 정보를 가지고 있는 인덱스 파일의 extension. 주요 내용으로는 다음과 같다
  • 각 .ts 파일의 URL → m3u8을 클라이언트가 읽고 ts 파일에 관한 요청을 진행함으로 해당 내용은 필수적!!!
  • 영상 품질/해상도 정보
  • 대역폭 정보
• .ts: 나누어진 content를 각자 저장하는 파일
  • 보통 몇 초 단위로 분할됨(일반적으로 5-10초)
  • 독립적으로 재생 가능
  • 네트워크 상태에 따라 다른 품질의 조각으로 전환 가능
  • 버퍼링 없이 끊김 없는 재생 가능

Express에서 필요한 패키지 정리

yarn install fluent-ffmpeg @ffmpeg-installer/ffmpeg
yarn install hls-server

인덱스 파일과 ts 파일 generation 순서

ffmpeg라는 라이브러리를 기반으로 HLS 형식으로 변환 및 index file 생성을 지원. ffmpeg 역할:

• 원본 비디오/오디오를 HLS 포맷으로 변환
• .ts 세그먼트 파일들로 분할
• .m3u8 재생목록 파일 생성
• 필요시 컨텐츠 암호화

HLS 테스트 진행

테스트 진행 목적

• 서버에서 저장한 음원 파일을 HLS 양식에 맞게 encryption을 진행하고 범위에 맞는 segmentation을 진행하는지 확인하기 위해
• 클라이언트에서 요청시에 서버가 반환을 문제 없이 하는지 확인하기 위해

FFmpeg 코드 : 포맷 변환 및 파일 분할 작업 진행

FfmpegService

async convertToHLS(inputPath: string, outputPath: string): Promise<void> {
  return new Promise((resolve, reject) => {
    ffmpeg(inputPath, { timeout: 432000 })
      .addOptions([
        '-c:a aac',
        '-b:a 128k',
        '-hls_time 10',
        '-hls_list_size 0',
        '-f hls',
      ])
      .output(outputPath)
      .on('progress', (progress) => {
        console.log('Processing: ', progress.percent, '% done');
      })
      .on('start', (commandLine) => {
        console.log('FFmpeg command:', commandLine);
      })
      .on('stderr', (stderrLine) => {
        console.log('FFmpeg stderr:', stderrLine);
      })
      .on('end', () => {
        console.log('Processing finished successfully');
        resolve();
      })
      .on('error', (err, stdout, stderr) => {
        console.error('FFmpeg Error:', err);
        console.error('FFmpeg stdout:', stdout);
        console.error('FFmpeg stderr:', stderr);
        reject(err);
      })
      .run();
  });
}

• -c:a aac : audio codec AAC로 설정
• -b:a 128k: bit rate를 128k로 설정
• -hls_time 10: hls segment duration을 10초로 설정
• -hls_list_size 0: maximum number of playlist entries를 설정 (0은 리밋이 없다는 뜻)
• -f hls: 아웃

출력되는 m3u8 파일 형식 분석

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.008778,
output0.ts
#EXTINF:10.008778,
output1.ts
#EXTINF:9.985556,
output2.ts
#EXTINF:10.008778,
output3.ts
#EXTINF:10.008778,
output4.ts
#EXTINF:9.985556,
output5.ts
#EXTINF:10.008778,
output6.ts
#EXTINF:10.008778,
output7.ts
#EXTINF:9.985556,
output8.ts
#EXTINF:8.061011,
output9.ts
#EXT-X-ENDLIST

• EXTM3U: extended m3u file임을 나타냄
• EXT-X-VERSION: 플레이리스트 파일의 compatibility version을 알려줌
• EXT-X-TARGETDURATION: 각 미디어 파일의 duration 지정
• EXT-X-MEDIA-SEQUENCE:
  • 첫 segment의 sequence number 표시
  • VOD는 0으로 표시
• #EXT-X-ENDLIST: 플레이리스트 종료를 나타냄

생성된 파일 format: