如何在后端以自动方式录制 HTML 动画并将其保存为视频
How to record an HTML animation and save it as a video, in an automated manner in the backend
我需要以自动方式录制网页并将其保存为视频，无需人工干预。
我正在创建一个 NodeJS 应用程序，它根据用户的请求生成 MP4 视频。用户提供一个 MP3 文件，应用程序在插图之上为声音文件生成动画波形。
到目前为止，我想出的是一个在后端打开生成的网页、播放音频文件并在 HTML canvas 上显示音频文件的音频可视化的系统元素。在另一个 canvas 之上，主要是静态组件，例如没有动画的图像。系统对此进行记录，输出将是一个视频文件。最后，我会将视频文件与声音文件合并，为用户创建最终文件。
我想出了 2 个可能的解决方案，但它们都有我目前无法解决的问题。
解决方案#1
使用 Phantomjs 或 Puppeteer 等无头浏览器 API 每秒抓取屏幕截图 x 次并将其通过管道传输到 FFmpeg。
问题
问题是这个过程不是实时的。如果它只是一个动画就可以正常工作，但我的取决于音频文件。音频文件将在渲染期间继续播放，这会导致 1FPS 风格的视频出现故障。
可能的解决方案？
不播放音频文件，而是将音频文件转换为原始数据。而是根据原始数据为音频可视化设置动画。
不确定该怎么做，甚至不知道是否可行。
解决方案#2
在前端播放、录制和保存动画。
可以用ccapture.js记录保存一个canvas。
使用无头浏览器打开页面并在播放完成后将其保存到磁盘。
听起来这不是最好的解决方案。
问题
我有不止1个canvas。
这需要一段时间，尤其是当音频文件超过 10 分钟时。
让用户等待很长时间可能会破坏交易。
可能的解决方案？
合并canvas个。
不知道如何加快渲染时间，我怀疑这种方法是否可行。
由于某些浏览器 SVG API 的便利性，寻找类似选项的人的迟到答案：
我的第一个建议是使用不需要浏览器或 GPU 的图形库和语言，例如 Gd 或 Anti-grain使用任何 server-side 语言的几何或开罗。你也可以查看Processing.org（我没用过），不确定是否有无头版本。
如果那不可能，我目前已经找到了这些但还没有尝试过：
我需要以自动方式录制网页并将其保存为视频，无需人工干预。
我正在创建一个 NodeJS 应用程序，它根据用户的请求生成 MP4 视频。用户提供一个 MP3 文件，应用程序在插图之上为声音文件生成动画波形。
到目前为止，我想出的是一个在后端打开生成的网页、播放音频文件并在 HTML canvas 上显示音频文件的音频可视化的系统元素。在另一个 canvas 之上，主要是静态组件，例如没有动画的图像。系统对此进行记录，输出将是一个视频文件。最后，我会将视频文件与声音文件合并，为用户创建最终文件。
我想出了 2 个可能的解决方案，但它们都有我目前无法解决的问题。
解决方案#1
使用 Phantomjs 或 Puppeteer 等无头浏览器 API 每秒抓取屏幕截图 x 次并将其通过管道传输到 FFmpeg。
问题
问题是这个过程不是实时的。如果它只是一个动画就可以正常工作，但我的取决于音频文件。音频文件将在渲染期间继续播放，这会导致 1FPS 风格的视频出现故障。
可能的解决方案？
不播放音频文件，而是将音频文件转换为原始数据。而是根据原始数据为音频可视化设置动画。 不确定该怎么做，甚至不知道是否可行。
解决方案#2
在前端播放、录制和保存动画。 可以用ccapture.js记录保存一个canvas。 使用无头浏览器打开页面并在播放完成后将其保存到磁盘。 听起来这不是最好的解决方案。
问题
我有不止1个canvas。 这需要一段时间，尤其是当音频文件超过 10 分钟时。 让用户等待很长时间可能会破坏交易。
可能的解决方案？
合并canvas个。
不知道如何加快渲染时间，我怀疑这种方法是否可行。
由于某些浏览器 SVG API 的便利性，寻找类似选项的人的迟到答案：
我的第一个建议是使用不需要浏览器或 GPU 的图形库和语言，例如 Gd 或 Anti-grain使用任何 server-side 语言的几何或开罗。你也可以查看Processing.org（我没用过），不确定是否有无头版本。
如果那不可能，我目前已经找到了这些但还没有尝试过：