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

Question

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

用例:

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

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

• http://highcharts.com
• http://raphaeljs.com
• http://greensock.com
• ......还有其他的

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

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

我看到两个选项:

1. 用PhantomJs记录下来

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

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

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

提前致谢!

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

• 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/

Answer 1

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

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

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

实际上我执行以下步骤:

1. 启动docker容器.
2. 开始镀铬(尽可能无头)
3. 使用chrome-remote-interface连接到chrome
4. 打开动画网址
5. 准备动画网页通知nodejs(通过控制台)动画准备就绪,从节点开始ffmpeg和浏览器中的动画.
6. 处理视频

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

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

Answer 2

最接近的“不理想”方法想法（手动制作 - 使用JS并保存每个单独的视频帧+稍后将它们全部绑定在一起）=>遵循/sf/answers/345545091/