将 html5 动画录制到视频中 - 无需人工交互 [关闭]答案

【问题标题】：Record a html5 animation to video - without human interaction [closed]将 html5 动画录制到视频中 - 无需人工交互 [关闭]
【发布时间】：2015-02-27 12:11:00
【问题描述】：

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

用例：

我们想开始一个项目，我们将在其中创建 Html5 动画。动画将是一个简短的技术演示（2-5 分钟），其中包括所有类型的动画：线条、图表、区域。它还将有一个音轨。

为了生成动画，我们将使用不同的 JS 库：

我们需要能够录制此动画并将其保存为 mp4 视频或同等格式。

最大的问题是：怎么做？

我看到了 2 个选项：

用 PhantomJs 录制

根据我的研究，FPS 几乎无法控制。我已经进行了一些测试，结果不是很好。 Greensock 时间线可能会有所帮助，但我们需要灵活使用我们使用的 JS 库。

在浏览器中播放并用一些工具录制

如果我们可以自动化它，那就太棒了。

提前致谢！

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

【问题讨论】：

标签： javascript html animation html5-video video-capture

【解决方案1】：

我已经创建/找到了解决此问题的方法。正如一些人已经提到的那样，xvfb 是答案，是的。

我创建了一个 docker 容器，它使用 xvfb、google chrome 和 ffmpeg 运行，并预装了 nodejs。

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

实际上我执行以下步骤：

启动 docker 容器。
启动 chrome（尽可能无头）
使用 chrome-remote-interface 连接到 chrome
打开动画网址
准备网页通知nodejs的动画（通过控制台）动画准备好启动ffmpeg（来自nodejs）和浏览器中的动画。
处理视频

很遗憾，由于许可证问题，我无法发布整个代码，但我可以粘贴其中的一部分。

如果有人有问题，请告诉我。

【讨论】：

嗨，Andy B，我希望看到您可以共享的部分不会与您提到的许可证冲突，因为我需要实施 GSAP 到 MP4 解决方案。你/你能分享这些吗？谢谢！
嗨，我会整理一些东西。请给我一些时间（10天）。谢谢！
嗨@kiodoma，你有什么最新消息吗？任何脚本将不胜感激。
请在此处发布您的解决方案或在 Twitter @frazras 上与我联系 - 愿意付费
你好。你能分享你能分享的部分吗？感谢您的帮助。

【解决方案2】：

您可以为此使用 Linux Xvfb（Linux 虚拟帧缓冲区）。然后在该 X 服务器上运行一个浏览器，并从中创建 ffmpeg 记录。

对此的包装是：https://github.com/leonid-shevtsov/headless

【讨论】：

【解决方案3】：

只是另一种方式与一些代码略有不同。

我设法通过 PhantomJS 及其屏幕截图功能做到了这一点。

基本上，您可以通过无标题浏览器访问您的动画并继续截屏，直到您的动画完成。你可以有一个全局变量来指示动画是否完成。

当你有你的截图时，只需使用 FFMPEG 来生成视频。

简单示例：

PhantomJS：

var running;
var c = 1;

var intervalId = setInterval(function(){

    running = page.evaluate(function(){
        return window.RUNNING
    });

    if (running) {
        console.log('still running: ', running);
        page.render('temp/screenshot'+c+'.png');
    } else {
        clearInterval(intervalId);
        console.log('still running: ', running);
        phantom.exit(0);
    };

    c++;
}, 100);

使用 FFMPEG，您可以：

ffmpeg -y -r 25 -i temp/screenshot%01d.png -c:v libx264 -r 25 -pix_fmt yuv420p video.mp4

其中 25 是 FPS（每秒帧数），您可以根据需要进行调整。

我希望它对某人有用。

【讨论】：

是的，我也试过这个，但我不能用 PhantomJS 准确地计时 25fps，以便我可以正确地构建视频。我不记得到底是什么问题，但是像没有捕捉到足够的图像之类的东西。我已经发布了我的解决方案，仍然需要找到一种方法使其成为公共代码。
如果你在 setinterval 中使用更少的毫秒，你应该得到更多的图像。但也许对于某些类型的动画（有很多效果）不是最好的选择。就我而言，它运行良好。

【解决方案4】：

最接近“不理想”的方法想法（手动制作 - 使用 JS 并保存每个单独的视频帧 + 稍后将它们绑定在一起）=> 遵循https://stackoverflow.com/a/4936358/1110661

【讨论】：