세계적으로 엄청난 양의 동영상 콘텐츠가 손비되고 있다. 대부분 동영상 서비스는 HTML5 기반으로 서비스 되고 있다. 네트워크 환경에 따른 최적의 동영상 품질을 스트리밍해 버퍼링 없는 서비스를 제공하기 위해 여러 방법들이 있는데 그중 하나가 HTTP Streaming 서비스이다.

MSE

MSE는 HTML5의 비디오로 동영상을 재생할 떼 소스를 제공할 목적으로 사용하던 source 태그 대신 HTMLMediaElement을 이용해 개발자가 직접 새로운 미디어 소스를 정의할 수 있게 해주는 인터페이스이다. 개발자가 플레이될 동영상의 데이터를 HTTP를 통해 받은 후 SourceBuffer 객체를 이용해 직접 HTMLMediaElemnet에 미디어 버퍼 청크를 제공하는 방법으로 개발한다. 동영상을 플레이할 때 HTML5 비디오가 필요한 데이터를 개발자가 관여해서 제공할 수 있게 된 것이다.

세그먼트

세그먼트는 인코딩된 동영상 데이터의 작은 조각이다. 이 조각에 대한 정도는 DASH나 HLS를 통해 얻어오고 한 조각 조각 모아서 유저가 동영상을 볼 수 있도록 플레이어에 전달하는 것이다.

MediaSource 객체, SourceBuffer 객체

MediaSource는 HTMLMediaElement의 미디어 데이터 소스를 나타낸다. 동영상 플레이어에서 플레이되고 있는 한 종류의 미디어라고 이해하면 된다. SourceBuffer를 이용해 MediaSource에 미디어 세그먼트를 전달해주고 HTMLMediaElement(Video)는 플레이하면서 필요한 데이터를 MediaSource로 부터꺼내와 사용한다. 구조적으로 HTMLMediaELement가 MediaSource를 사용하고 MediaSource는 SourceBuffer를 소유하고 사용한다.

HTML5 video & MSE 연동하기

동영상 플레이어 즉 Video(HTMLMediaElement) 객체에 스트리밍 소스를 제공하는 기술인 MSE의 핵심은 MediaSource 다. MediaSource객체를 만들고 Video 객체 연결하는 것이 첫 번째 작업이 된다.

var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);

Video와 MediaSource는 Object URL을 통해 연결하게 되는데 window.URL.createObjectURL함수를 사용해 MediaSource 객체의 Object URL을 만든다. 그리고 Video와 연결이 되면 MediaSource 객체는 스트리밍 데이터를 받을 준비가 되었음을 알리는 이벤트 sourceopen을 발생하고 이 이벤트를 시작으로 추가적인 작업을 하게 된다. MediaSource가 정상적으로 준비가 되면 SourceBuffer 객체를 만든다. 이후 반복적으로 세그먼트를 가져와 SourceBuffer를 통해 스트리밍할 데이터를 Video에 전달한다.

var sourceBuffer = mediaSource.addSourceBuffer(
  'video/webm; codecs="vorbis,vp8"'
);

addSourceBuffer는 코덱 정보를 인자로 받아 해당 코덱의 데이터를 디코딩할 수 있는 SourceBuffer객체를 리턴한다. 이후에 서버에서 미디어 세그먼트 정보를 받아와 소스 버퍼에 제공하는 작업은 SourceBuffer객체의 appendBuffer 메서드를 사용한다. Ajax로 미디어 세그먼트 정보를 받아올 때의 response type은 ArrayBuffer을 사용한다.

var xhr = new XMLHttpRequest();
xhr.open("get", url);
xhr.responseType = "arraybuffer";
xhr.onload = function() {
  sourceBuffer.appendBuffer(xhr.response);
};
xhr.send();

이번 내용은 구글링하면 나오는 내용중 인용한 부분이 많다. 2차프로젝트를 진행하면서 나의 코드를 만들어 조만간 segment 단위로 쪼개어 스트리밍하는 부분을 영상으로 보여줄 예정이다.

출처

https://developer.mozilla.org/en-US/docs/Web/API/MediaSource
https://www.w3.org/TR/media-source/