자바스크립트 "Media Source Extensions API"

MSE(Media Source Extensions) API는 무엇보다도 동적 미디어 소스 전환, 적응형 스트리밍 및 버퍼링을 활성화하여 웹 개발자가 실시간으로 미디어 스트림을 만들고 조작할 수 있도록 하는 JavaScript API입니다. 이 API는 미디어 재생에 대한 높은 수준의 유연성과 제어가 필요한 비디오 스트리밍 애플리케이션에 특히 유용합니다.

​

다음은 Media Source Extensions API를 사용하여 브라우저에서 비디오를 스트리밍하는 방법의 예입니다.

​

// Create a new MediaSource object

var mediaSource = new MediaSource();

​

// Set up an event listener for the sourceopen event

mediaSource.addEventListener('sourceopen', function() {

// Create a new source buffer for the media source

var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E,mp4a.40.2"');

 

// Fetch the video file from the server

fetch('example-video.mp4')

.then(function(response) {

return response.arrayBuffer();

})

.then(function(arrayBuffer) {

// Append the video data to the source buffer

sourceBuffer.appendBuffer(arrayBuffer);

});

});

​

// Set the video element's source to the MediaSource object

var videoElement = document.getElementById('my-video');

videoElement.src = URL.createObjectURL(mediaSource);

​

이 예제에서는 새 `MediaSource` 개체를 만들고 `sourceopen` 이벤트에 대한 이벤트 수신기를 설정합니다. `sourceopen` 이벤트가 발생하면 미디어 소스에 대한 새 `SourceBuffer` 개체를 만들고 `fetch()` 메서드를 사용하여 서버에서 비디오 파일을 가져옵니다. 비디오 데이터가 있으면 `appendBuffer()` 메서드를 사용하여 `SourceBuffer` 개체에 추가합니다. 마지막으로 `createObjectURL()` 메서드를 사용하여 video 요소의 `src` 속성을 `MediaSource` 개체의 URL로 설정합니다.

​

Media Source Extensions API를 사용하여 미디어 스트림을 실시간으로 조작할 수 있으므로 동적 소스 전환, 적응형 스트리밍 등이 가능합니다. 예를 들어 API를 사용하여 사용자의 네트워크 조건에 따라 서로 다른 비디오 소스 간에 전환하거나 사용 가능한 대역폭에 따라 비디오 스트림의 비트 전송률을 조정할 수 있습니다.