Wie Initialisierungssegment von Webm-Video zur Verwendung mit Media Source API zu generieren

Question

Ich bin eine kleine Anwendung, die MediaRecoder API verwenden, um die Video-Recorption von der Webcam zu teilen und alle Teile auf den Server hochladen.
Ich sehe, dass mit Media Source API ich den ersten Teil spielen und dann jeden anderen Teil spielen muss.

Laut http://www.w3.org/TR/media-source/#examples benötige ich am Anfang der Datei das "Initialization Segment".

Wie kann ich "Initialization Segment" von WebM in JS erzeugen, damit ich jeden Teil spielen kann, den ich wähle. Gibt es dafür eine Lib? (Ich habe keine Kenntnisse über WebM Byte-Stream-Format)

Answer 1

Sie benötigen Erweiterungen Medienquelle

Bitte beachten Sie folgende Beispiel verwenden

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