HTML5将视频/画布标记保存到文件

我有一个页面可以播放来自本地源的4个视频，我将这些视频合并到一个画布中，以便所有视频都通过一个元素显示（我每X秒更新画布上的图像）。有什么方法可以将其保存到视频文件中吗？

首先：对于大量数据，我不建议使用以下方法

您可以创建一个大小足以存储整个视频的阵列：

//Size: Colour channels * width * height * noOfFrames
//THIS WILL GET BIG!!
var video = new Uint8Array(3*640*480*24);

然后将视频的每一帧存储在阵列中

现在，您可以使用此代码段作为开始，将其转换为DataUrl：

var base64String = btoa(String.fromCharCode.apply(null, video));

(http://stackoverflow.com/a/11562550/1554114)

这将为您提供类似原始视频的内容。
这是一个带有DataUrl的链接，请通过右键单击/另存为../“Test.mp4”
（让我们看看SO是否可以处理此问题：D--不，它不能：（-按“编辑”按钮查看它的外观）

---

在JavaScript中实现h264取决于您；）

谢谢！现在我对原始视频没问题。当使用画布显示4 1280 x 720视频时，它崩溃（内存不足或类似情况）的可能性有多大？我甚至不想想象这一点。这是66MB/s

：D

，由于此代码不能一件一件地工作，转换为dataURL将额外消耗大约是原始数组大小的三倍。我修改了我的代码，这样当视频播放1秒时，它会停止并将原始数据转储到屏幕上……这是6分钟视频的1秒，5分钟已经过去了，还没有接近完成：-）嗨，我已经能够将我的两个视频合并到一个画布中，但是我找不到任何方法来保存画布的视频输出。我曾考虑将每一帧保存为一幅图像，然后使用任何后端编程语言将其转换为视频，但这对于高质量的视频来说并不有效。我在画布上做的工作很少，你能解释一下上面的代码吗。我不知道上面的代码会做什么