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

Is it possible to create a video from gif (or a sequence of images) using javascript?

本文关键字：图像 一系列 创建 视频 可以使 javascript gif 是否      更新时间：2023-09-26

是否有可能编码视频从gif(或图像序列)和一些声音文件使用"javascript"或任何"web客户端"的方法?

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

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

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

  • 获取GIF的原始像素

    <canvas>可能是最好的方法，但我不认为它会很好地发挥与动画GIF。你当然可以阅读一系列的图片

  • 将帧转换成视频流

    虽然有MPEG音频编解码器的JavaScript实现，但我不知道纯JS的视频编解码器。您可以查看一下ffmpeg源代码并尝试移植它。

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

  • 处理二进制数据

    任何视频编解码器的输出都是二进制数据，JavaScript本质上不能很好地处理原始二进制数据。最近的浏览器已经添加了类型化数组，以一种节省内存的方式来解决这个缺点。

  • 向用户发送视频文件

    我知道这听起来很傻，因为从技术上讲，上述所有操作都将在用户的计算机上发生，但它们在浏览器沙盒中发生。现在，您必须将数据从浏览器中取出并保存到用户可以保存到文件系统的文件中。

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

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

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

此时，您将不得不推出自己的服务器端解决方案或使用某种服务来为您完成繁重的工作。

或者，你可以利用谷歌的NaCl(本地客户端)在Chrome浏览器实际做视频编码。NaCl允许你在浏览器中运行本地(C/c++)代码。

它看起来像有一个ffmpeg端口，有api做文件I/o

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

可以。

使用setInterval在调度中调用函数，将图像的源顺序更改为下一个。

你可能想要预加载图像，这样当图像源改变时就不会等待了。

更新:

您可能可以单独使用JavaScript从一系列图像创建视频文件，但这不太可能容易或工作良好。我建议您使用一些服务器端处理来生成这样的视频，并将音频合并到其中(可能使用ffmpeg)。

您已经注意到，为此目的编写的c语言程序消耗了大量的CPU周期。是什么让你认为完全为其他目的而设计的脚本语言可以做到这一点呢?

不，浏览器上的Javascript 不能直接访问单个像素，当然也不能创建二进制文件。如果您将帧作为单独的图像，则可以将它们加载到canvas标记中，以这种方式访问像素，将MPEG版本计算为整数数组并将其发送回服务器(这会将数组转换为二进制文件)，但是现在，这会很慢吗?至少比ffmpeg慢1000倍。

编辑

评论指出我实际上完全错了。尽管如此，我坚持我最初的结论，这是一个糟糕的想法。

现在是2014年底了，我不知道在什么时候它是可能的，但现在确实有可能把视频变成gif:http://jnordberg.github.io/gif.js/tests/video.html

通过制作演示的同一个人的库:https://github.com/jnordberg/gif.js

在Chrome 38中工作得很好，我相信任何其他支持Web工作者，文件API和类型化数组的浏览器。

相关文章：