미디어 스트리밍 기본사항

Derek Herman
Derek Herman
X GitHub
Jaroslav Polakovič
Jaroslav Polakovič
X GitHub

이 문서에서는 미디어 스트리밍의 고급 개념에 대해 알아보고 다양한 스트리밍 사용 사례, 프로토콜, 확장 프로그램을 잘 이해할 수 있어야 합니다. 먼저 스트리밍이 무엇인지 설명하겠습니다

미디어 스트리밍은 미디어 콘텐츠를 하나씩 전송하고 재생하는 방법입니다. 플레이어는 네트워크에 최적화되지 않으면 느려질 수 있는 단일 파일을 로드하는 대신 타겟 미디어가 데이터의 개별 청크로 분할되는 방식을 설명하는 매니페스트 파일을 읽습니다. 미디어 청크는 나중에 런타임 시 동적으로 다시 병합됩니다. 아마도 다른 비트 전송률으로 병합됩니다. 이에 관해서는 나중에 살펴보겠습니다.

웹사이트에서 스트리밍을 제공하려면 서버가 Range HTTP 요청 헤더를 지원해야 합니다. Accept-Ranges 헤더에 관한 자세한 내용은 <video> 및 <source> 태그 도움말을 참고하세요.

스트리밍 사용 사례

스트림을 설명하는 미디어 청크와 필요한 매니페스트를 생성하는 작업은 간단하지 않지만, 스트리밍을 사용하면 <video> 요소가 정적 소스 파일 집합을 가리키는 것만으로는 달성할 수 없는 몇 가지 흥미로운 사용 사례를 활용할 수 있습니다. 이후 섹션에서 웹페이지에 미디어를 추가하는 방법을 자세히 알아봅니다. 먼저, 단순히 여러 파일을 <video> 요소에 로드하는 것 이상으로 더 나아가 멀티미디어 스트리밍을 위한 몇 가지 사용 사례를 알아야 합니다.

  • 적응형 스트리밍에서는 미디어 청크가 여러 비트 전송률로 인코딩되며 클라이언트의 현재 사용 가능한 대역폭에 맞는 최고 품질의 미디어 청크가 미디어 플레이어에 반환됩니다.
  • 실시간 방송은 미디어 청크가 인코딩되어 실시간으로 제공되는 기능입니다.
  • 미디어 삽입에서는 플레이어가 미디어 소스를 변경할 필요 없이 광고와 같은 다른 미디어를 스트림에 삽입합니다.

스트리밍 프로토콜

웹에서 가장 일반적으로 사용되는 두 가지 스트리밍 프로토콜은 Dynamic Adaptive Streaming over HTTP (DASH) 및 HTTP Live Streaming (HLS)입니다. 이러한 프로토콜을 지원하는 플레이어는 생성된 매니페스트 파일을 가져와 요청할 미디어 청크를 파악한 후 최종 미디어 환경으로 결합합니다.

<video>를 사용하여 스트림 재생

대부분의 브라우저는 스트림을 기본적으로 재생하지 않습니다. HLS 재생에 관한 일부 네이티브 지원이 있지만 일반적으로 브라우저는 네이티브 DASH 스트림 재생을 지원하지 않습니다. 즉, 단순히 <video> 요소의 <source>가 매니페스트 파일을 가리키도록 하는 것만으로는 충분하지 않은 경우가 많습니다.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

부족으로 보일 수도 있는 것이 사실은 위장된 힘입니다. 스트림은 강력하며 스트림을 사용하는 애플리케이션마다 요구사항이 다릅니다.

매니페스트 파일은 일반적으로 단일 미디어의 여러 변형을 설명합니다. 다양한 비트 전송률, 여러 오디오 트랙, 심지어 동일한 미디어를 다양한 형식으로 인코딩해 보세요.

버퍼에 더 많은 양의 동영상을 보관하려는 애플리케이션, 다음 에피소드에서 동영상의 처음 몇 초를 미리 가져오려는 애플리케이션, 적응형 스트리밍을 위한 자체 로직을 구현하려는 애플리케이션도 있습니다. 이 경우 재생할 미디어 스트림을 생성하는 일종의 내장 브라우저 기능이 필요할 수 있습니다.

미디어 소스 확장 프로그램

다행히 W3C는 JavaScript가 미디어 스트림을 생성할 수 있도록 MSE (미디어 소스 확장 프로그램)라는 것을 정의했습니다. 간단히 말해, MSE를 사용하면 개발자가 MediaSource 객체를 <video> 요소에 연결하고 MediaSource 인스턴스에 연결된 버퍼로 펌핑되는 미디어 데이터를 재생하도록 할 수 있습니다.

기본 예시

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

위의 단순화된 예는 다음과 같은 몇 가지를 보여줍니다.

  • <video>의 경우 URL에서 미디어 데이터를 수신하고 있습니다.
  • 생성된 URL은 MediaSource 인스턴스를 가리키는 포인터일 뿐입니다.
  • MediaSource 인스턴스는 SourceBuffer 인스턴스를 하나 이상 만듭니다.
  • 그런 다음 바이너리 미디어 데이터를 버퍼에 추가합니다(예: fetch 사용).

이러한 기본 개념은 간단하며 DASH 및 HLS 호환 동영상 플레이어를 처음부터 작성할 수 있지만, 대부분의 사람들은 일반적으로 Shaka Player, JW Player 또는 Video.js와 같은 이미 존재하는 성숙한 오픈소스 솔루션 중 하나를 선택합니다.

하지만 Google에서는 Kino라는 데모 미디어 PWA를 만들었으며, 이 데모는 간단한 <video> 요소만 사용하여 오프라인 미디어 재생을 제공하는 자체 기본 스트리밍 미디어 웹사이트를 개발하는 방법을 보여줍니다. Google의 로드맵에는 여러 기능 중에서도 프레임워크와 디지털 권한 관리를 지원하기 위한 계획이 있습니다. 수시로 업데이트를 확인하거나 기능을 요청하세요. 자세한 내용은 오프라인 스트리밍을 사용하는 PWA 도움말을 참고하세요.

미디어 청크 형식

오랫동안 DASH 및 HLS는 미디어 청크를 다른 형식으로 인코딩해야 했습니다. 하지만 2016년에는 표준 프래그먼트 MP4 (fMP4) 파일 지원이 DASH도 지원하는 형식인 HLS에 추가되었습니다.

fMP4 컨테이너 및 H.264 코덱을 사용하는 동영상 청크는 두 프로토콜에서 모두 지원되며 대다수의 플레이어가 재생할 수 있습니다. 이를 통해 콘텐츠 제작자는 동영상을 한 번만 인코딩하여 시간과 디스크 공간을 절약할 수 있습니다.

더 나은 품질을 달성하고 파일 크기를 줄이려면 VP9와 같은 보다 효율적인 형식을 사용하여 여러 미디어 청크 집합을 인코딩하는 것이 좋습니다. 하지만 계속 진행하기 전에 웹용 미디어 파일을 준비하는 방법을 먼저 익혀야 합니다. 이 내용은 다음 단계입니다.