将html5动画录制到视频-无需人工干预

我有一个大问题:如何在没有人工干预的情况下录制HTML5动画到视频？ 我们正在寻找开放/源代码甚至是专有解决方案.

用例:

我们想要开始一个我们将创建Html5动画的项目.动画将是一个简短的技术演示(2-5分钟),将包括所有类型的动画:线条,图表,区域.它还将有一个音轨.

要生成动画,我们将使用不同的JS库:

http://highcharts.com

http://raphaeljs.com

http://greensock.com

......还有其他的

我们需要能够录制这个动画并将其保存为mp4视频或同等视频.

最大的问题是:如何做到？

我看到两个选项:

用PhantomJs记录下来

根据我的研究,FPS几乎无法控制.我跑了几次测试,效果不是很好.Greensock时间表可能有所帮助,但我们需要灵活使用我们使用的JS库.

在浏览器中播放并使用某些工具进行录制

如果我们能够实现自动化,这将是非常棒的.

提前致谢!

我的研究中使用的参考文献

https://groups.google.com/forum/#!msg/phantomjs/wluVGGjhL90/oGBXqh7QP44J

http://mindthecode.com/recording-a-website-with-phantomjs-and-ffmpeg

http://www.ultramegatech.com/2010/09/record-html-canvas-animations-to-video/

http://www.tweetbeam.com/blog/generating-facebook-lookback-style-dynamic-videos-html5-using-phantomjs-ffmpeg/

klodoma.. 7

我已经创建/找到了解决这个问题的方法.有些人已经提到xvfb是答案,是的.

我创建了一个docker容器,它预装了xvfb,google chrome和ffmpeg,nodejs.

我使用nodejs和chrome-remote-interface与浏览器进行通信.

实际上我执行以下步骤:

启动docker容器.

开始镀铬(尽可能无头)

使用chrome-remote-interface连接到chrome

打开动画网址

准备动画网页通知nodejs(通过控制台)动画准备就绪,从节点开始ffmpeg和浏览器中的动画.

处理视频

由于许可证问题,我无法发布整个代码,但我可以粘贴部分代码.

如果有人有疑问,请告诉我.

我已经创建/找到了解决这个问题的方法.有些人已经提到xvfb是答案,是的.

我创建了一个docker容器,它预装了xvfb,google chrome和ffmpeg,nodejs.

我使用nodejs和chrome-remote-interface与浏览器进行通信.

实际上我执行以下步骤:

启动docker容器.

开始镀铬(尽可能无头)

使用chrome-remote-interface连接到chrome

打开动画网址

准备动画网页通知nodejs(通过控制台)动画准备就绪,从节点开始ffmpeg和浏览器中的动画.

处理视频

由于许可证问题,我无法发布整个代码,但我可以粘贴部分代码.

如果有人有疑问,请告诉我.