Media Source API'sı ile kullanmak için webm videonun Başlangıç ​​Segmenti Oluşturma

Question

Recording videoyu web kamerasından bölmek ve tüm bölümü sunucuya yüklemek için MediaRecoder API'sini kullanan küçük bir uygulama yapıyorum.
Medya Kaynak API'sı ile ilk parçayı oynatmam ve sonra başka bir parçayı oynatmam gerektiğini görüyorum.

http://www.w3.org/TR/media-source/#examples'a göre Dosyanın başında "Başlatma Segmentine" ihtiyacım var.

JS'de WebM'nin "Başlatma Segmenti" ni nasıl oluşturabilirim, böylece seçtiğim herhangi bir parçayı oynatabilirim. Bunun için herhangi bir lib var mı?

Answer 1

Sen medya kaynağı uzantıları

kullanmak gerekir (ı WebM bayt akışı biçimi hakkında hiçbir bilgiye sahip) örnek altına

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