HTML5 Save Video/Canvas Tag to File

Question

I have a page that plays 4 videos from a local source, and I combine those all into a canvas so that all display through one element (I update the image on the canvas every X seconds). Is there any way I can save that into a video file?

Answer 1

First: I do not recommend the following method for big amounts of data!!

You can create an array with a size big enough to store the whole video:

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

Then store every frame of your video in the array

Now you could use this snippet as a start to convert it to a DataUrl:

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

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

This would give you something like RAW-Video.
This is a link with a DataUrl, save it via right-click / save as.. / "Test.mp4"
(Let's see if SO can handle this :D -- No, it can't :( -- Press the 'edit' button to see what it looks like)

Implementing h264 in JavaScript is up to you then ;)