html - HTML5 将视频/画布标签保存到文件

Question

我有一个页面可以播放来自本地来源的 4 个视频，然后我将它们全部组合到一个画布中，以便所有内容都通过一个元素显示（我每 X 秒更新一次画布上的图像）。有什么办法可以将它保存到视频文件中？

Answer 1

第一：对于大数据我不推荐下面的方法！！

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

//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)

这会给你类似 RAW-Video 的东西。
这是一个带有 DataUrl 的链接，通过右键单击保存它/另存为../“Test.mp4”
（让我们看看 SO 是否可以处理这个：D - 不，它不能 :( - 按'编辑'按钮，看看它的样子）

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