我需要录制网页并将其自动保存为视频，而无需人工干预。
我正在创建一个NodeJS应用程序，该应用程序应用户的要求生成MP4视频。用户提供一个MP3文件，该应用程序会在插图的顶部为声音文件生成动画波形。
到目前为止，我想到的是一个系统，该系统在后端打开一个生成的网页，播放音频文件，并在HTML canvas元素上显示音频文件的音频可视化。在另一个画布上，该画布主要包含静态对象，例如图像，没有动画。系统记录下来，输出将是一个视频文件。最后，我将视频文件与声音文件合并，为用户创建最终文件。
我想出了两种可能的解决方案，但是它们两个都有目前无法解决的问题。
[使用Phantomjs或Puppeteer之类的无头浏览器API每秒捕获屏幕快照x次，并将其通过管道传输到FFmpeg。
问题
问题是该过程不是实时的。如果只是动画，但我的依赖于音频文件，则效果会很好。音频文件将在渲染过程中播放，从而产生类似1FPS的故障视频。
可能的解决方案？
不要实时播放音频文件，而是将音频文件转换为原始数据。而是根据原始数据对音频可视化效果进行动画处理。不确定如何执行此操作，甚至不确定。
播放，录制和保存动画，全部在前端。可以使用ccapture.js记录和保存画布。播放完成后，使用无头浏览器打开页面并将其保存到磁盘。听起来不是最好的解决方案。
问题
我有多个画布。需要一段时间，尤其是当音频文件超过10分钟时。让用户等待很长时间可能会破坏交易。
可能的解决方案？
将画布合并为一个。
不知道如何加快渲染时间，我怀疑这种方式是否可行。
我已经被这个问题困扰了几天了。这将意味着很多人可能需要花费一分钟的时间来向我指出正确的方向。非常感谢您提前抽出宝贵的时间！
用于制作可播放的MPEG4视频文件的常规管道要执行一些步骤。
生产：使用OBS或其他实时捕获软件从所需的屏幕或屏幕区域获取原始视频。玩家喜欢OBS，因为它可以让他们进行高分辨率，高帧率的抽搐流等。
后期制作：对于高质量的最终产品，它的运行速度可能比实时运行的慢，甚至慢许多倍。进度栏移动缓慢。它涉及获取原始捕获的音频和视频并将其渲染到mp4文件。如果您愿意为此花费计算机周期，则可以使用诸如运动补偿和运动模糊之类的高端压缩技术。您必须等待，但是音频和视频流保持同步。
发布：您可以将MP4文件发送给用户，或将其发布到youtube或vimeo等视频发布网站。
如果无法实时完成生产步骤，那将会给您带来辛苦的生活。
您可能可以让youtube为您做后处理。当您尝试播放刚刚上传的视频时，您知道它说的是“仍在处理，以后再回来”吗？它仍在对该视频进行后期处理。
[如果我是你，我会尝试OBS。 https://obsproject.com/我已经用它成功完成了一些说明性的工作（我正在谈论和单击内容。）它具有API，因此您应该能够使用您的程序启动和停止它，但是我还没有做到这一点。 >
听起来您有快速周转的业务需求。您可以通过以较低的帧速率（例如24而不是60fps）或较低的分辨率（例如720高度而不是1080）捕获来减少后期处理的延迟。您还可以选择用于不太复杂的视频压缩的选项。或者，您可以在前几分钟内将样品发送给客户。 “这就是您的视频的样子。我们现在正在优化您的播放质量。”在您对整个内容进行后处理时，也许会让他们满意。
至于无头，您的可视化可能需要GPU。在为云或用于您自己环境的设备购买三年的预留实例之前，请确保捕获工作畅通无阻。