미디어 스트리밍 기본사항

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

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

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

웹사이트에서 스트리밍을 제공하려면 서버가 범위 HTTP 요청 헤더를 지원해야 합니다. <video> 및 <source> 태그 도움말에서 Accept-Ranges 헤더에 대해 자세히 알아보세요.

스트리밍 사용 사례

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

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

스트리밍 프로토콜

웹에서 가장 흔히 사용되는 두 가지 스트리밍 프로토콜은 HTTP 동적 적응형 스트리밍 (DASH)과 HTTP 라이브 스트리밍 (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 등) 중 하나를 선택합니다.

하지만 간단한 <video> 요소만 사용하여 오프라인 미디어 재생을 제공하는 자체 기본 스트리밍 미디어 웹사이트를 개발하는 방법을 보여주는 Kino라는 데모 미디어 PWA를 만들었습니다. 로드맵에는 프레임워크와 디지털 권리 관리를 비롯한 다양한 기능을 지원할 계획이 있습니다. 수시로 업데이트를 확인하거나 기능을 요청하세요. 오프라인 스트리밍이 가능한 PWA 도움말에서 자세히 알아보세요.

미디어 청크 형식

오랫동안 DASH와 HLS는 미디어 청크를 서로 다른 형식으로 인코딩해야 했습니다. 그러나 2016년에 DASH에서도 지원하는 형식인 HLS에 표준 단편화된 MP4 (fMP4) 파일 지원이 추가되었습니다.

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

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