Jak wygenerować segment inicjalizacji wideo webowego do użycia z Media Source API

Question

Buduję małą aplikację, która używa MediaRecoder API, aby podzielić nagranie wideo z kamery internetowej i załadować całą część na serwer.
Widzę, że z Media Source API, muszę zagrać w pierwszą część, a następnie zagrać w dowolną inną część.

Zgodnie z http://www.w3.org/TR/media-source/#examples potrzebuję "Segmentu inicjalizacji" na początku pliku.

W jaki sposób mogę wygenerować "Segment inicjalizacji" WebM w JS, aby móc grać dowolną wybraną przeze mnie część. Czy jest na to jakaś libacja? (Mam żadnej wiedzy o formacie WebM bajtów strumienia)

Answer 1

trzeba używać rozszerzeń Source Media

Proszę zapoznać się poniżej przykład

<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>