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

问题描述

我们正在使用 HTML5 + Javascript 创建动画.现在，我们想将这些动画转换为视频文件(MPEG4 或其他无关紧要)，以便浏览器受到挑战的人也可以看到动画.动画包含音轨.

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.

有哪些选择?Headless X server + Firefox 是一条出路吗?我们最好在云(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.

有一个 Selenium Python 控制脚本来启动/停止渲染

Having a Selenium Python control script to start/stop rendering

一个自定义渲染循环，它将使用 Firefox 的 XPCom API 直接在编码管道中提供 原始像素

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屋！