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)

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

更新

如果我 stop/start onDataAvailable 中的录像机，我会在此处获得可播放片段，由 onDataAvailable 中无法播放的迷你片段分隔，因为我在处理视频后立即调用停止。我可以通过执行此操作然后忽略小于某个阈值的 blob 来忽略 "approximate" 所需的行为，从而忽略 "dead gap" 段。不过这闻起来像脚，如果可能的话，我想进行适当的分割。

Answer 1

根据 spec

的预期

The UA MUST record stream in such a way that the original Tracks can be retrieved at playback time. When multiple Blobs are returned (because of timeslice or requestData()), the individual Blobs need not be playable, but the combination of all the Blobs from a completed recording MUST be playable.

生成的 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

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

MediaRecorder timeslice segments - only the first segment plays

html

google-chrome

webrtc

getusermedia

web-mediarecorder