Web MediaRecorder API：用空白视频连接视频块结尾

Question

赏金将在 3 天后到期。 此问题的答案有资格获得+50声望赏金。 ultraGentle正在从信誉良好的来源寻找答案。

我有工作代码（如下）连接了从浏览器录制的第一段和最后一段视频。

每三秒收集一次块，生成的下载视频确实按顺序播放第一个和最后一个块。

然而，视频的总长度是所有收集到的块的长度，而不是第一个和最后一个的总和。 “额外”视频只是空白。

更多内容，在代码之后：

let mediaRecorder = new MediaRecorder()
let chunks = []
mediaRecorder.start(3000) // triggers ondataavailable every 3 seconds
mediaRecorder.ondataavailable = (ev) => {
  chunks.push(ev.data);
  if (chunks.length > 2) chunks.splice(1,1) // keeps only the first and last chunk
}
let blob = new Blob(chunks, {'type': 'video/mp4;'}
let videoURL = window.URL.createObjectURL(blob)
let downloadLink = document.getElementById('downloadLink');
downloadLink.href = videoURL;
mediaRecorder.stop();
downloadLink.click()

也许ev.timeStamp被用来确定视频的长度，而不仅仅是块持续时间的总和？ 如果最后一个块在最后 3 秒内播放，中间有空白视频，那会更有意义。 但不——它播放 [开始块、结束块、空白]。

有没有办法防止空白视频跟随/填充连接的开始/结束？

--

编辑：我也试过切掉 blob 的末尾blob.slice(0, -10,000) ，但它不会修剪空白区域。

Answer 1

tl;dr 你正在跳过一些 MediaRecorder 块。 你不能那样做™。

如果这是在基于 Chromium 或 Firefox 的浏览器上，则 MediaRecorder 正在以 webm / Matroska装箱格式生成媒体。 有MKVToolNix可以查看 Matroska 文件； 您可以使用十六进制转储来完成，但那是 xxx 颈部的过度疼痛。

a/v 材料来自 Clusters。 集群上有绝对时间戳。 并且，每个 Cluster 包含一堆 SimpleBlocks。 虽然这在任何规范中都没有明确说明，但 Chromium 会在每个集群开头的第一个视频 SimpleBlock 中发出视频帧间帧（a/k/关键帧 a/k/瞬时解码器刷新帧）。

所以，如果你只保存最后一个块，它包含一个时间戳远在记录开始之后的集群。 玩家等待直到那个时间到来，然后播放它。

你正在做的事情和它一样有效，这是一个小小的奇迹。 为了使存储的 MediaRecorder output 能够按预期工作，您不能跳过任何块，也不能将它们打乱。 一方面，块沿着集群边界断开是一个纯粹的实现细节：规范中没有任何内容保证这一点，而且我已经看到它在其他地方断开了块。

从 MediaRecorder 制作的 Matroska / webm stream 中剪下一大块视频时间轴需要对 Matroska 拳击进行复杂的解析。 除非您总是在 iframe 之前剪切，否则它也需要对视频 stream 进行解码和重新编码。

有npm ebml package 来解析 Matroska 数据 stream。