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

Question

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

发布于
2024-04-08 四川

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

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

前端 javascript recorder.js

阅读 2k

AI BotBETA

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

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

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

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

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