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

Question

为了录制音频和视频，我在 下创建 webm 文件。可用数据 的 MediaRecorder API。我必须单独播放每个创建的 webm 文件。

Mediarecorder api 仅将 header 信息插入到第一个 block (webm 文件)中，因此其余 block 在没有 header 信息的情况下不会单独播放。

根据建议 link 1和 link 2 ，我已经从第一个 block 中提取了头信息，

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

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

并将此 header 信息附加到第二个 block 中，第二个 block 仍然无法播放，但这次浏览器显示视频海报(单帧)和两个 block 总和的持续时间，例如:10秒；每个 block 的持续时间为 5 秒。

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

红色显示标题信息:



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



问题

我在这里做错了什么？

有什么方法可以单独播放 webm 文件/ block ？

注意:我不能使用 MediaSource玩那些 block 。

编辑 1

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

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

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

编辑 2

经过一番挖掘和阅读this ，我得出每个 webm 文件都需要头信息、簇和实际数据的结论。

Answer 1

// for the most regular webm files, the header information exists

// between 0 to 189 Uint8 array elements

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

and perpended this header information into second chunk, still the second chunk could not play, but this time the browser is showing poster (single frame) of video and duration of sum of two chunks, eg:10 seconds; duration of each chunk is 5 second.

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

Is there any way that we can play the webm files/chunks individually ?

您走在正确的道路上，只需将第一个集群之前的所有内容添加到后面的集群即可。
一旦你完成了这项工作，你可能会遇到的下一个问题是你将无法使用任何集群来做到这一点。第一个集群必须以关键帧开头，否则浏览器不会对其进行解码。 Chrome 会跳到下一个集群，但它并不可靠。不幸的是，没有办法使用 MediaRecorder 配置关键帧位置。如果您有幸能够在服务器端处理此视频，以下是使用 FFmpeg 的方法:https://stackoverflow.com/a/45172617/362536