html - HTML5ビデオ/Canvasタグをファイルに保存

Question

ローカルソースからの4つのビデオを再生するページがあり、それらすべてを1つの要素で表示されるように、すべてをキャンバスに結合します（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 とのリンクです。右クリックして保存し、名前を付けて保存します。
「編集」ボタンを押して、どのように表示されるかを確認してください)

JavaScript で h264 を実装するのはあなた次第です ;)