3

我在 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 以忽略“死间隙”段。不过，这闻起来像脚，如果可能的话，我希望进行适当的分割。

4

1 回答 1

2

根据规范预期

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);
}

查看演示

于 2017-05-30T14:46:13.837 回答