javascript - 是否可以使用 javascript 从 gif(或一系列图像)创建视频？

Question

是否可以使用“javascript”或任何“网络客户端”方法对来自 gif(或一系列图像)和一些声音文件的视频进行编码？

具体来说，我想在客户端根据一些源图像和声音文件动态创建视频文件。然后我想让用户下载生成的视频。

我知道我可以使用 ffmpeg 和 PHP 在服务器端从图像和 mp3 创建视频，但我不想使用这种方法，因为这会导致巨大的服务器 CPU 使用率和数据传输。

Answer 1

要实现这一目标，您需要解决几个问题。

• 获取 GIF 的原始像素。

  <canvas>可能是执行此操作的最佳方法，但我认为它不会很好地与动画 GIF 一起播放。您当然可以阅读一系列图片。

• 将帧转换为视频流。

  虽然有JavaScript implementations of MPEG audio codecs ，我不知道纯 JS 中的视频编解码器。您可以查看 ffmpeg 源代码并尝试移植它。

  除了实现视频压缩编解码器本身(例如 MPEG-1、-2、H.264 等)之外，您还必须写入某种容器格式(例如， MPEG PS .)

• 处理二进制数据。

  任何视频编解码器的输出都是二进制数据，而 JavaScript 本质上不能很好地处理原始二进制数据。最近的浏览器添加了typed arrays正是为了以内存高效的方式解决这个缺点。

• 将视频文件传送给用户。

  我知道这听起来很愚蠢，因为从技术上讲，上述所有内容都会发生在用户的计算机上，但它们发生在浏览器沙箱中。您现在必须将数据从浏览器中取出并放入一个文件中，用户可以将该文件保存到他们的文件系统中。

  其他人建议使用 data: URI(base64 编码数据)，但从内存的 Angular 来看，这是一个糟糕的主意，尤其是因为您将处理相对较大的视频数据。此时，您将在类型化数组中获得视频流。创建一个新的 Blob 从类型化数组中传递 Blob至 window.URL.createObjectURL .这样，数据就不需要在内存中重复；相反，浏览器将从类型化数组“下载”到文件系统。

当然，所有这些都假设用户的机器有足够的内存 (RAM)。与普通的视频压缩实现不同，您不能将输出数据流式传输到磁盘；您必须将整个文件保存在内存中。您可能会比想象中更快地耗尽内存。

因此，虽然这可能在理论上是可能的，但这不是一个好主意。如果有效，它将非常慢并且在编码视频时卡住浏览器(因为 JS 和浏览器 UI 共享相同的单线程)。不过，我想你可以让网络 worker 参与进来来解决这个问题。

此时，您几乎必须推出自己的服务器端解决方案或使用某种 service这将为您完成繁重的工作。

---

或者，您可以利用 Google 的 NaCl (native client)在 Chrome 中实际进行视频编码。 NaCl 允许您在浏览器中运行 native (C/C++) 代码。

看起来有一个 ffmpeg port , 还有 APIs to do file I/O .

显然，这只适用于 Chrome。 Firefox、Safari 和 IE 不支持 NaCl。