Question

我在chrome latest上有以下内容：

 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.createObjectURL(videoSegment)

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

更新

如果我在onDataAvailable中停止/启动录音机，我会在这里获得可播放的片段，由onDataAvailable的无法播放的迷你片段分隔，因为我在处理视频后立即停止播放。我可以＆＃34;近似＆＃34;通过这样做，然后忽略小于某个阈值的blob来忽略＆＃34;死亡间隙＆＃34;段。虽然这闻起来像脚，但我希望尽可能地进行适当的分割。

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

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

1 个答案: