MediaSource API를 사용하여 비디오 스트리밍

MediaSource API를 통해HTMLMediaElementJavaScript가 재생용 미디어 스트림을 생성할 수 있도록 합니다.JavaScript가 스트림을 생성하도록 허용하면 적응형 스트리밍 및 시간 이동 라이브 스트림과 같은 다양한 사용 사례가 쉬워집니다.

 

다음은 API의 간단한 데모와 사용 예를 제시하겠습니다.

const NUM_CHUNKS = 5;

var video = document.querySelector('video');
video.src = video.webkitMediaSourceURL;

video.addEventListener('webkitsourceopen', function(e) {
    var chunkSize = Math.ceil(file.size / NUM_CHUNKS);

    // Slice the video into NUM_CHUNKS and append each to the media element.
    for (var i = 0; i < NUM_CHUNKS; ++i) {
    var startByte = chunkSize * i;

    // file is a video file.
    var chunk = file.slice(startByte, startByte + chunkSize);

    var reader = new FileReader();
    reader.onload = (function(idx) {
        return function(e) {
        video.webkitSourceAppend(new Uint8Array(e.target.result));
        logger.log('appending chunk:' + idx);
        if (idx == NUM_CHUNKS - 1) {
            video.webkitSourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR);
        }
        };
    })(i);

    reader.readAsArrayBuffer(chunk);
    }
}, false);

데모

이 예에서는 파일 API를 사용하여 .webm 비디오를 5개의 청크로 분할하고 있습니다.그 후 전체 영화가 '스트리밍'됩니다.<video>각 청크를 MediaSource API를 사용하여 각 청크를 요소에 추가합니다.

API에 대한 자세한 내용은 사양을 참조하십시오.