在服务器端渲染 HTML5 动画？
我们正在使用 HTML5 + Javascript 创建动画。现在，我们希望将这些动画转换为视频文件（MPEG4 或其他，无关紧要），以便浏览器有问题的人也可以看到这些动画。动画包含音轨。
我们正在寻找在服务器端呈现和记录 HTML 页面的解决方案。我知道已经存在用于渲染网页缩略图等静态图像的工具。然而，在我们的用例中，我们应该输出一个视频文件。
有哪些选择？无头 X 服务器 + Firefox 是一种可行的方法吗？我们最好在云（Amazon EC2）中运行它。
另外，如果我们在以非实时速度播放动画时需要考虑一些特殊的事情，我想听听 - 例如，将 HTML5 音频与动画同步。
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.
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.
What options are there? Is headless X server + Firefox a way to go? Preferably we'd be running this in a cloud (Amazon EC2).
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
请注意，我们已经通过
使用 Selenium Python 控制脚本来启动/停止渲染
自定义渲染循环，将使用 Firefox 的 XPCom API 来提供
直接在编码管道中的原始像素A自定义 Javascript 渲染循环，其中时钟不是来自真实时钟，但它以非实时的稳定帧速率将帧切片到渲染器
相当复杂的系统，因此不适合一个答案框:(
Just to note that we have solved this problem by
Running Firefox on a headless server. A server with a decent graphics card.
Having a Selenium Python control script to start/stop rendering
A custom rendering loop which will use Firefox's XPCom API to feed
<canvas>raw pixels directly in the encoding pipelineA 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 :(
根据您的动画，可能有效的一件事是创建一个动画 gif。将足够的动画静态图像串在一起后，您应该能够使用正确的软件将它们转换为视频。这是一个相当强力的解决方案，但如果您可以以“逐帧”方式推进动画，那么它可能会起作用。
One thing that might work, depending on your animation, would be to essentially create an animated gif. With enough still images of your animation strung together, you should be able to turn those into a video with the right software. This is a rather brute-force solution, but if you can advance through your animation in a "frame-by-frame" fashion, it might work.
听起来很有趣。我对 QtWebKit 库做了类似的事情，需要无头 X 服务器才能运行。我当时所做的是将网页大规模转换为 PDF。搜索一些 webkit2pdf 工具来查看可以构建的示例可能是有意义的。
我会看一下该库并将其与另一个录音解决方案结合起来。
Sounds interesting. I've done a similar thing with the QtWebKit library that requires a headless X server to run. What I was doing was converting web pages to PDF on a large scale. It might make sense to search for some webkit2pdf tools to see an example that you can build off of.
I would take a look at the library and combine it with another recording solution.
在工具方面，我对这些 Ruby 工具有相当不错的体验：
我不知道他们如何处理音频
In terms of tooling I've had a pretty decent experience with these Ruby tools:
I have NO idea about how they deal with audio though