如何单独播放由 MediaRecorder 创建的 WEBM 文件

Question

对于录制音频和视频，我下创建WebM文件ondataavailable的MediaRecorder API。我必须单独播放每个创建的 webm 文件。

Mediarecorder api 仅将标头信息插入到第一个块（webm 文件）中，因此其余块在没有标头信息的情况下不会单独播放。

作为建议的链接 1和链接 2，我从第一个块中提取了标头信息，

// for the most regular webm files, the header information exists
// between 0 to 189 Uint8 array elements

const headerIinformation = arrayBufferFirstChunk.slice(0, 189); 

并将这个header信息附加到第二个chunk中，第二个chunk还是不能播放，但是这次浏览器显示的是视频的海报（单帧）和两个chunk之和的时长，例如：10秒；每个块的持续时间为 5 秒。

我用十六进制编辑器做的同样的标题信息事情。我在编辑器中打开了 webm 文件，从第一个 webm 文件中复制了前 190 个元素并将其放入第二个文件中，如下图所示，即使这次，第二个 webm 文件也无法播放，结果与前面的示例相同。

红色显示标题信息：

这次我从第一个 webm 文件中复制了标题和集群信息并将其放入第二个文件中，如下图所示，但没有成功，

问题

我在这里做错了什么？

有什么办法可以单独播放 webm 文件/块吗？

注意：我不能使用MediaSource来播放这些块。

编辑 1

正如@Brad 建议的那样，我想将第一个集群之前的所有内容插入到后面的集群中。我有几个 webm 文件，每个文件的持续时间为 5 秒。深入研究文件后，我才知道，几乎每个备用文件都没有聚集点（没有 0x1F43B675）。

在这里我很困惑，我必须在每个文件的开头或每个第一个集群的开头插入头信息（初始化数据）？如果我选择稍后的选项，那么没有任何集群的webm文件将如何播放？

或者，首先我需要以一种一开始就具有集群的方式制作每个 webm 文件，这样我就可以在这些文件中的集群之前添加标头信息？

编辑 2

一些挖掘和阅读之后这个，我想出了每一个WebM档案需要的头信息，集群和实际数据的conculsion。

Answer 1

// 对于最正规的webm文件，头信息是存在的

// 0 到 189 个 Uint8 数组元素

没有看到实际的文件数据很难说，但这可能是错误的。“头信息”需要是第一个Cluster element 之前的所有内容。也就是说，您希望保留从文件开头到您看到0x1F43B675并将其视为初始化数据之前的所有数据。这可以/将因文件而异。在我的测试文件中，这发生在 1 KB 之后。

并将这个header信息附加到第二个chunk中，第二个chunk还是不能播放，但是这次浏览器显示的是视频的海报（单帧）和两个chunk之和的时长，例如：10秒；每个块的持续时间为 5 秒。

MediaRecorder 输出的块与分段无关，并且可能在不同时间出现。您实际上希望在 Cluster 元素上进行拆分。这意味着您需要解析这个 WebM 文件，至少要在它们的标识符0x1F43B675出现时拆分集群。

有什么办法可以单独播放 webm 文件/块吗？

您走在正确的道路上，只需将第一个集群之前的所有内容添加到后面的集群中即可。

一旦你开始工作，你可能会遇到的下一个问题是你不能只用任何集群来做到这一点。第一个集群必须以关键帧开始，否则浏览器将不会对其进行解码。Chrome 会跳到下一个集群，在某种程度上，但它不可靠。不幸的是，没有办法使用 MediaRecorder 配置关键帧放置。如果你足够幸运能够在服务器端处理这个视频，下面是使用 FFmpeg 的方法：https : //stackoverflow.com/a/45172617/362536