javascript - js new Blob()合并多个blob，播放失败，请教代码应该怎么写？

Question

我用recordRTC.js录制了共享屏幕，然后有新用户加入的时候，停止录制，存下recordRTC.getBlob()的blob, 重新开启录制，点录制完成按钮，再存下recordRTC.getBlob()的blob，最后取出存下的所有blob，用New Blob（）合并，合并后用URL.createObjectURL（）转换blob并且下载，为什么播放的时候合并的blob，只能播放第一个blob的内容，其余的播放器报无法识别或文件损坏，有没有大佬知道代码应该怎么操作啊,blob格式为video/webm

希望用new Blob（）合并后的blob能正常播放

Answer 1

可以参考以下 张鑫旭 大佬的文章
纯JS实现多个音频的拼接或者合并

Answer 2

当你在使用 Blob 对象合并多个视频文件（如 WebM 格式）时，需要确保这些文件可以无缝连接。通常，录制软件（如 RecordRTC）会为每次录制生成一个独立的视频文件，这些文件可能包含文件头（例如，VP8/VP9 视频编码的数据）、时间戳和元数据等，这些在合并时可能会导致问题。

合并多个 WebM Blob 对象并使其能够正常播放，通常不是一个简单的 new Blob() 操作。这是因为 WebM 文件不仅仅是原始视频数据，它们还包括容器格式，该格式包含索引、时间戳和可能的其他元数据。简单地拼接这些 Blob 通常不会生成有效的 WebM 文件，因为容器格式中的索引和时间戳不会正确匹配。

为了解决这个问题，你可能需要：

1. 使用专门的库：有些库（如 webm-tools）提供了合并 WebM 文件的功能。这些库能够处理 WebM 文件的容器格式，并正确合并多个文件。
2. 重新编码：另一个选择是将所有 Blob 重新编码为单个视频文件。这通常涉及到将 Blob 转换为视频帧，然后再次使用编码器将这些帧编码为新的 WebM 文件。这种方法可能需要更多的计算资源，但通常能生成一个有效的、可播放的视频文件。
3. 使用FFmpeg：FFmpeg 是一个强大的工具，可以用来处理视频和音频文件。你可以将 Blob 转换为临时文件，然后使用 FFmpeg 命令行工具来合并这些文件。这种方法需要一些额外的设置，但通常非常灵活和强大。

如果你选择使用 webm-tools 或类似的库来合并 Blob，通常的步骤如下：

1. 将每个 Blob 写入临时文件。
2. 使用库函数合并这些临时文件。
3. 读取合并后的文件内容，并将其转换为 Blob（如果需要）。
4. 使用 URL.createObjectURL() 创建播放 URL。

请注意，具体的实现细节将取决于你选择的库或方法。此外，由于视频处理可能涉及大量的数据和计算，因此性能也是一个需要考虑的因素。

在编写代码时，请确保测试各种场景，包括不同长度的视频、不同的录制参数等，以确保合并的视频文件在所有情况下都能正常播放。