渲染HTML5动画的服务器端？ [英] Rendering HTML5 animation server-side?

问题描述

我们正在创建使用HTML5 +的Javascript动画。现在，我们希望这些动画转换成视频文件（MPEG4，或其他，无所谓），这样browserly挑战人们也可以看到动画。动画包含音频轨道。

We are creating animations using HTML5 + Javascript. Now, we'd like to convert these animations to video files (MPEG4, or other, doesn't matter) so that browserly challenged people could also see the animations. Animations contain an audio track.

我们正在寻找何处HTML页面将呈现和记录在服务器端的解决方案。我知道存在渲染网页的缩略图等静态图像已的工具。然而，在我们使用的情况下，我们应输出的视频文件。

We are looking for solutions where HTML page would be rendered and recorded on the server side. I know there exist tools for rendering web page thumbnails etc. static images already. However, in our use case we should output a video file.

有什么选择呢？是无头X服务器+火狐很长的路要走？ preferably我们会在云（Amazon EC2的）来运行此。

What options are there? Is headless X server + Firefox a way to go? Preferably we'd be running this in a cloud (Amazon EC2).

此外，如果有一些特别的东西我们需要在非实时的速度播放动画时想，我想听听 - 例如动画同步HTML5音频。

Also if there something special we'd need to think when playing animation in non-real-time speeds, I'd like to hear - e.g. syncing HTML5 audio with animation.

推荐答案

只是要注意的是，我们通过

Just to note that we have solved this problem by

• 无头服务器上运行的Firefox浏览器。一个体面的图形卡的服务器。

• Running Firefox on a headless server. A server with a decent graphics card.

有一个Python的硒控制脚本启动/停止渲染

Having a Selenium Python control script to start/stop rendering

将使用Firefox的XPCOM API定制渲染循环养活＆LT;画布＆GT; 原始像素直接在编码管道

A custom rendering loop which will use Firefox's XPCom API to feed <canvas> raw pixels directly in the encoding pipeline

一个自定义JavaScript渲染循环，时钟并非来自真正的时钟，但切片帧在稳定的帧率渲染这是不实时

A custom Javascript rendering loop where clock does not come from a real clock, but it slices frames to the renderer on a stable framerate which is not real-time

一个相当复杂的系统，所以不适合一个答案框：（

Quite a complex system, so doesn't fit into one Answer box :(

这篇关于渲染HTML5动画的服务器端？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！