如何从 html + css 动画创建视频

Question

我想用网络技术构建一个简单的视频创作工具。所以基本上我想要某种容器，将一些元素拖放到其中（框、文本、图像、视频），然后我想将其导出为 mp4 文件，包括音频。我尝试了几种方法，但没有一种看起来真的很干净：

基于 DOM 的方法： 使用容器元素并向其中添加一些简单的 html 元素（具有绝对定位的 div、图像和视频）。编辑部分非常容易，但是如何将其转换为视频？我想过用像 puppeteer 之类的工具来记录它，但这似乎很愚蠢。更好的想法？

基于画布的方法： 我把所有的东西都画在一个

canvas

上，然后用

MediaRecorder

记录下来。比基于 dom 的方法构建编辑器更复杂，但易于记录。但是，只能在客户端记录，在服务器上异步做会更好......

还有其他/更好的选择吗？我看到像 canva 这样的工具，他们使用基于 DOM 的方法来创建视频，但不知道他们如何将它渲染成视频......