이 문서에서는 미디어 스트리밍의 고급 개념에 대해 알아보며, 마지막으로 다양한 스트리밍 사용 사례, 프로토콜, 확장 프로그램을 잘 이해해야 합니다. 스트리밍이 실제로 무엇인지 설명하는 것으로 시작하겠습니다
미디어 스트리밍은 미디어 콘텐츠를 하나씩 전송하고 재생하는 방법입니다. 플레이어는 네트워크에 최적화되지 않으면 느려질 수 있는 단일 파일을 로드하는 대신 타겟 미디어가 개별 데이터 청크로 분할되는 방식을 설명하는 매니페스트 파일을 읽습니다. 미디어 청크는 나중에 런타임 시 다시 동적으로 병합됩니다. 아마도 다른 비트 전송률에 관해 자세히 알아보겠습니다.
웹사이트에서 스트리밍을 제공하려면 서버가 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에서는 간단한 <video> 요소만 사용하여 오프라인 미디어 재생을 제공하는 자체 기본 스트리밍 미디어 웹사이트를 개발하는 방법을 보여주는 Kino라는 데모 Media PWA를 만들었습니다. 로드맵에는 여러 기능 중에서도 특히 프레임워크와 디지털 권한 관리를 지원하는 계획이 있습니다. 따라서 수시로 업데이트를 확인하거나 기능을 요청하십시오.
자세한 내용은 오프라인 스트리밍이 가능한 PWA 도움말을 참고하세요.
미디어 청크 형식
오랫동안 DASH 및 HLS를 사용하려면 미디어 청크를 서로 다른 형식으로 인코딩해야 했습니다. 하지만 2016년에는 DASH에서도 지원하는 형식인 HLS에 표준 프래그먼트 MP4 (fMP4) 파일 지원이 추가되었습니다.
fMP4 컨테이너 및 H.264 코덱을 사용하는 동영상 청크는 두 프로토콜에서 모두 지원되며 대부분의 플레이어에서 재생할 수 있습니다. 따라서 콘텐츠 제작자가 동영상을 한 번만 인코딩하여 시간과 디스크 공간을 절약할 수 있습니다.
품질을 개선하고 파일 크기를 줄이려면 VP9와 같은 더 효율적인 형식을 사용하여 여러 미디어 청크 세트를 인코딩하는 것이 좋습니다. 하지만 이 작업을 진행하기 전에 먼저 웹용 미디어 파일을 준비하는 방법을 알아야 합니다. 이 단계는 다음 단계입니다.