HTML5视频，MediaSource，appendBuffer，如何跳过一些块

Question

if skip some chunks, the video element will cannot play.

HTML:

<div>
    <video id="vdo0" autoplay muted width="300"></video>
    <video id="vdo1" autoplay width="300"></video>
</div>
<div>
    <button id="btnStart">Start</button>
</div>

Javascript:

var vdo0 = document.getElementById('vdo0');
var vdo1 = document.getElementById('vdo1');
var ms = new MediaSource();
var sourceBuffer = null;
var chunks = [];

vdo1.src = URL.createObjectURL(ms);
var i = 0;
var recv = function(){
    var chunk = chunks.shift();
    if(chunk){
        i++;
        if(i < 5 || i > 10){ // HERE, skipped some chunks, vdo1 will cannot play
            sourceBuffer.appendBuffer(chunk);
        }
        recv();
    }else{
        setTimeout(recv, 20);
    }
};

ms.addEventListener('sourceopen', function () {
    sourceBuffer = ms.addSourceBuffer('video/webm;codecs=vp8');
    recv();
}, false);

document.getElementById('btnStart').addEventListener('click', function(){
    navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
    }).then(function (s) {
        vdo0.srcObject = s;
        vdo0.oncanplay = function(){
            var mediaRecorder = new MediaRecorder(s, 'video/webm;codecs=vp8');
            mediaRecorder.ondataavailable = function (e) {
                if (e.data && e.data.size > 0) {
                    var reader = new FileReader();
                    reader.addEventListener("loadend", function () {
                        var arr = new Uint8Array(reader.result);
                        chunks.push(arr);
                    });
                    reader.readAsArrayBuffer(e.data);
                }
            };
            mediaRecorder.start(20);
        };
    }).catch(function (err) {
        A.log('ERROR: ', err);
    });
}, false);

i want to do, when skip some chunks, the vdo1 still can play. MediaSource how can recv any blobs ?

if not push first recorder-blob to chunks, the vdo1 cannot play too. why ?

How do ?

Thanks.

Answer 1

You can't arbitrarily skip chunks. The demuxer will not be able to re-sync at a random point.

Since you're using WebM, you can skip to another Cluster. Clusters begin with 0x1F43B675. https://matroska.org/technical/specs/index.html#Cluster

Note that for this to work, your video much be encoded in such a way that each Cluster begins with a keyframe. Otherwise, your video isn't going to continue playing as the codec won't be happy with it.