Javascript 基于Web的视频编辑器

我们目前有一个基于web的编辑器，允许用户构建动画web应用程序。这些应用程序由形状、文本、图像和视频组成。除视频外，所有其他元素也可以围绕屏幕设置动画。构建动画应用程序的结果基本上是一大块JSON

web应用程序的播放代码也是基于web的。它接受JSON blob并构造HTML，最终在某种浏览器环境中播放。问题是，这种播放大部分时间发生在低端硬件上，如电视机和机顶盒

如果有办法将数字签名转换为视频，这些性能问题就会消失。然后，机顶盒/智能电视只播放一段视频，这比在网络视图中播放动画的性能要好得多

给定一个描述每一层的JSON块，以及如何绘制每种类型的对象、其动画点等，我如何能够以某种方式将其转换为服务器上的视频

我的第一次尝试是使用PhantomJS在无头浏览器中加载播放页面，拍摄一系列屏幕截图，然后使用ffmpeg将这些屏幕截图合并到视频中。只要没有视频，效果就很好。但它不适用于视频，因为PhantomJS中没有HTML5视频标记支持，即使有，我也会丢失任何音频

我考虑的另一种方法是在PhantomJS中再次加载播放页面，但关闭视频层并使其保持透明，然后将屏幕截图作为一系列透明的PNG。然后我会将这些与视频层结合起来

---

不过，这些感觉都不是很优雅。我知道有一些基于网络的视频编辑器基本上完成了我想要完成的任务，那么他们是如何做到的呢？

你能用一个屏幕播放应用程序来记录正在运行的网页吗？那太好了，但现在我可以确定我将如何从一个无头服务器上做到这一点。我们的目标是实现自动化，而不需要站点用户手动完成。这基本上就是我试图用PhantomJS所做的，但不幸的是，它不支持视频标签。好吧，你可以在廉价的windows设备上使用node.js和autohotkey、autoit之类的自动化工具来自动化这样一个过程，或者使用现在很酷的孩子们使用的任何工具。您也可以查看html2canvas代码，但我怀疑它是否具有所需的性能。