Как сгенерировать Сеанс инициализации веб-видео для использования с Media Source API

Question

Я создаю небольшое приложение, использующее API MediaRecoder для разделения перекодированного видео с веб-камеры и загрузки всей части на сервер.
Я вижу, что с Media Source API мне нужно сыграть первую часть, а затем сыграть любую другую часть.

Согласно http://www.w3.org/TR/media-source/#examples Мне нужен «Инициализирующий сегмент» в начале файла.

Как я могу сгенерировать «Сегмент инициализации» WebM в JS, чтобы я мог играть любую часть, которую я выбираю. Есть ли для этого lib? (У меня нет знаний о WebM байт формата поток)

Answer 1

Вы должны использовать расширение источников средств массовой

Пожалуйста, обратитесь к ниже, например

<script> 
    var appendID = "123"; 

    function onOpen(e) { 
    var video = e.target; 

    var headers = GetStreamHeaders(); 

    if (headers == null) { 
     // Error fetching headers. Signal end of stream with an error. 
     video.sourceEndOfStream(HTMLMediaElement.EOS_NETWORK_ERR); 
    } 

    video.sourceAddId(appendID, 'video/webm; codecs="vorbis,vp8"'); 

    // Append the stream headers (i.e. WebM Header, Info, and Tracks elements) 
    video.sourceAppend(appendID, headers); 

    // Append some initial media data. 
    video.sourceAppend(appendID, GetNextCluster()); 
    } 

    function onSeeking(e) { 
    var video = e.target; 

    // Abort current segment append. 
    video.sourceAbort(appendID); 

    // Notify the cluster loading code to start fetching data at the 
    // new playback position. 
    SeekToClusterAt(video.currentTime); 

    // Append clusters from the new playback position. 
    video.sourceAppend(appendID, GetNextCluster()); 
    video.sourceAppend(appendID, GetNextCluster()); 
    } 

    function onProgress(e) { 
    var video = e.target; 

    if (video.sourceState == video.SOURCE_ENDED) 
     return; 

    // If we have run out of stream data, then signal end of stream. 
    if (!HaveMoreClusters()) { 
     video.sourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR); 
     return; 
    } 

    video.sourceAppend(appendID, GetNextCluster()); 
    } 

    var video = document.getElementById('v'); 
    video.addEventListener('sourceopen', onOpen); 
    video.addEventListener('seeking', onSeeking); 
    video.addEventListener('progress', onProgress); 
</script> 


<video id="v" autoplay> </video> 

<script> 
    var video = document.getElementById('v'); 
    video.src = video.mediaSourceURL; 
</script>