MediaRecorder 时间片片段 - 仅播放第一个片段

Question

我在最新的 chrome 上有以下内容：

 var options = { mimeType: "video/webm;codecs=vp8" };
 internalMediaRecorder = new MediaRecorder(internalStream, options);
 internalMediaRecorder.ondataavailable = function (blob) {
        // put blob.data into an array
        var src = URL.createObjectURL(blobData.segment);
        const $container = $("body");
        const $video = $("<video id='" + blobData.ts + "-" + blob.data.size + "' controls src='" + src + "'></video>").css("max-width", "100%");
        $container.prepend($video);
        // if I stop/start the recorder, I get playable segments here, separated by unplayable mini-segments from onDataAvailable because I call stop right after processing a video.  I can "approximate" desired behavior by doing this and then ignoring blobs that are less than some threshhold to ignore the "dead gap" segments.
 }
 internalMediaRecorder.start(segmentLengthInMs); // every 5s

然后我编译一个 5s 段的数组 - blob 数据可用。但是，当我为这些段中的每一个创建一个 URL 时：

 URL.createObjectURL(videoSegment)

仅播放第一个视频。这是为什么呢？

更新

如果我在onDataAvailable 中停止/启动录像机，我会在此处获得可播放片段，由 onDataAvailable 中的不可播放迷你片段分隔，因为我在处理视频后立即调用停止。我可以通过这样做来“近似”期望的行为，然后忽略小于某个阈值的 blob 以忽略“死间隙”段。不过，这闻起来像脚，如果可能的话，我希望进行适当的分割。

Answer 1

按照spec 的预期

UA 必须以可以在播放时检索到原始音轨的方式记录流。当返回多个 Blob 时（由于时间片或 requestData()），单个 Blob 不必是可播放的，但来自已完成录制的所有 Blob 的组合必须是可播放的。

生成的 blob 不是原始视频数据，它们是使用请求的 MIME 类型编码的。因此，您需要以正确的顺序合并所有 blob，以生成可播放的视频文件。

var options = { mimeType: "video/webm;codecs=vp8" };
var recordedBlobs = [];
internalMediaRecorder = new MediaRecorder(internalStream, options);
internalMediaRecorder.ondataavailable = function (event) {
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}
internalMediaRecorder.start(segmentLengthInMs); // every 5s

function play() {
   var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
   videoElement.src = window.URL.createObjectURL(superBuffer);
}

见demo