Question

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

用例：

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

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

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

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

我看到两个选项：

用PhantomJs记录

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

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

如果我们可以自动化它，这将是非常棒的。

提前致谢！

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

Answer 1

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

我已经创建了一个docker容器，它预装了xvfb，google chrome和ffmpeg，nodejs。

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

实际上我执行以下步骤：

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

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

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

Answer 2

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

这个包装是：https://github.com/leonid-shevtsov/headless

Answer 3

最接近的＆＃39;不理想＆＃39;接近的想法（手动制作 - 使用JS并保存每个单独的视频帧+以后将它们全部绑定在一起）=＆gt;关注https://stackoverflow.com/a/4936358/1110661

Answer 4

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

我设法使用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（每秒帧数），您可以根据需要进行调整。

我希望它对某人有用。

Answer 5

没有人机界面就很难记录下来。您的JavaScript需要与后端或桌面进行通信。要以60 fps录制，它需要硬件级别的API，例如c＃中的copyfromscreen（x，y，w，h）。还有一件事，所有HTML5动画都可以在浏览器中以60fps以上的速度运行。他们看起来超级光滑。人们以25或30fps的速度录制它们。如果您从html5创建MP4，webm或mov视频，那么它看起来就不会超级流畅。拇指法则是这样，您只需捕获60 fps。然后看起来超级光滑这需要特殊的硬件和内存来完成这项工作。最近，我通过在线网站https://html5animationtogif.com进行了此操作，将您的htm5或CSS动画转换为mp4，webm，mov。但是，似乎没有人机界面，很难为视频确定开始帧和结束帧。希望这会有所帮助。

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

5 个答案: