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

我接着编译了一组长度为5的数据段——数据块已经准备好了。但是当我为每个数据段创建URL时：

 URL.createObjectURL(videoSegment)

只有第一个视频可以播放。为什么会这样呢？

更新

如果我在onDataAvailable中停止/启动录制器，则会得到可播放的片段，这些片段由于我在处理视频后立即调用停止而与来自onDataAvailable的不可播放的小片段分开。通过这种方式，我可以“近似”所需的行为，然后忽略小于某个阈值的blob以忽略“死区”片段。虽然这听起来很奇怪，但如果可能的话，我想让正确的分割工作起来。

- SB2055

---

当您在dataAvailable事件上执行start/stop方法时，是否遇到任何性能问题（延迟/崩溃）？我目前正在使用相同的方法获取单个可播放片段，但似乎这种方法会导致Chrome在几次传递后崩溃。 - Pj Rigor

Answer 1

根据规范，UA必须以这样的方式记录流，以便在播放时可以检索到原始轨道。当由于时间片或requestData()的调用而返回多个Blob时，单个Blob可能无法播放，但完成录制后所有Blob的组合必须可播放。

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

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

查看演示

- Ajay

---

谢谢Ajay。如果我想让这些片段成为单独可播放的视频，该怎么办？ - SB2055

你的使用场景是什么？如果你需要实时数据，直接播放流。录制器的目的是生成编码（压缩）数据。如果你只需要视频，则在画布上渲染视频流并拍摄快照（每秒15次），然后将快照数据渲染到目标画布上。 - Ajay

使用案例是我需要记录连续可播放视频的n秒片段。 - SB2055

我刚刚尝试了这个超级缓冲方法，看看它是否有效，第一个片段可以正常播放，但是一旦到达第二个片段，视频播放就会冻结。你有什么想法为什么会发生这种情况吗？ - SB2055

你需要等待录制完成。 - Ajay