将图像、音频和文本流批量导出到浏览器中的视频

Posted 2023-04-19

【中文标题】将图像、音频和文本流批量导出到浏览器中的视频

【英文标题】：Bulk exporting image, audio and text streams to a video in browser

【发布时间】：2021-10-14 09:04:27

【问题描述】：

假设我在浏览器的客户端上有一张海报图片、一个音轨和一个字幕文件（SRT/WebVTT 或任何其他合适的格式）。我想将其导出为视频。

例如，我希望在客户端创建这样的视频（在我获得必要的图像、音频和文本数据之后）：https://twitter.com/yayalexisgay/status/1440779723219423238

我在各自的缓冲区中有音频和图像数据，并且有一个字幕文件（例如从 Google Speech to Text API 获得）。如何制作类似于上面链接中的视频？

我知道它可以在后端使用 FFmpeg 之类的工具或客户端的 WebAssembly 端口来实现。但是，FFmpeg 不是一个选项。或者，我可以将所有流逐帧转储到画布上，然后将画布流导出到视频中——但这需要我实际播放整个音轨——这可能需要一些时间。

有没有办法，使用浏览器的内置编解码器将单个流/缓冲区组合成一个视频？

谢谢！

【参考方案1】：

我认为WebCodecs 是您正在寻找的。这是使用内置浏览器 API 比实时更快地生成视频文件的唯一方法。

它仍然很新，仅在 Chrome 中可用（自 v94 起）。 Firefox 也打算支持它。