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

时间:2012-12-31 19:59:09

标签: javascript html5 video-processing

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

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

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

4 个答案:

答案 0 :(得分:3)

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

  • 获取GIF的原始像素。

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

  • 将帧转换为视频流。

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

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

  • 处理二进制数据。

    任何视频编解码器的输出都是二进制数据,而JavaScript本身并不能很好地处理原始二进制数据。最近的浏览器完全添加了typed arrays,以便以节省内存的方式解决了这个缺点。

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

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

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

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

因此,虽然可能理论上可行,但这不是一个好主意。如果它工作,它将非常慢并且在对视频进行编码时冻结浏览器(因为JS和浏览器UI共享相同的单线程)。我想你可以把网络工作者带到混合中来解决这个问题。

此时,您几乎不得不推出自己的服务器端解决方案,或使用某种service来解决这个问题。


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

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

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

答案 1 :(得分:1)

不确定

使用setInterval按计划调用函数,将图像源依次更改为下一个。

您可能需要预先加载图像,以便在图像源发生变化时无需等待。


更新

possibly can仅使用JavaScript从一系列图片创建视频文件,但这不太容易或效果不佳。我建议您使用一些服务器端处理来生成这样的视频并将音频合并到其中(可能使用ffmpeg)。

答案 2 :(得分:1)

您已经注意到,为此目的而编写的C语言程序会消耗大量的CPU周期。什么会让你觉得为另一个目的设计的脚本语言完全可以做到?

不,浏览器上的Javascript 无法直接访问各个像素,当然也无法创建二进制文件。如果您将帧作为单独的图像,则可以将它们加载到canvas标记中,access the pixels这样,将MPEG版本计算为整数数组并将其发布回服务器(将数组转换为二进制文件),但哇,这会慢。比ffmpeg慢至少1000倍。

修改

评论指出我其实完全错了。尽管如此,我坚持我最初的结论,这是一个可怕的想法。

答案 3 :(得分:1)

现在已经是2014年底了,我不知道它在什么时候成为可能,但现在确实可以将视频转换为gif: http://jnordberg.github.io/gif.js/tests/video.html

由制作该演示的同一个人通过图书馆:https://github.com/jnordberg/gif.js

在Chrome 38中运行良好,我相信任何其他支持Web Workers,File API和Typed Arrays的浏览器。