How to record a canvas to video
You can use HTML canvas
to produce videos!
The following function,
given a canvas and a video length in milliseconds,
serves a video.webm
to the viewer for download:
function recordCanvas(canvas, videoLength) {
const recordedChunks = [];
const mediaRecorder = new MediaRecorder(
canvas.captureStream(25), {mimeType: 'video/webm; codecs=vp9'});
mediaRecorder.ondataavailable =
event => recordedChunks.push(event.data);
mediaRecorder.onstop = () => {
const url = URL.createObjectURL(
new Blob(recordedChunks, {type: "video/webm"}));
const anchor = document.createElement("a");
anchor.href = url;
anchor.download = "video.webm";
anchor.click();
window.URL.revokeObjectURL(url);
}
mediaRecorder.start();
window.setTimeout(() => {mediaRecorder.stop();}, 3000);
}
Here’s an example of usage. I’ve set up the following canvas to show a silly animation of a square wandering around the canvas at random. To record a 3-second snippet of the canvas and download it as a video, click here: .
Tagged #programming, #web. All content copyright James Fisher 2020. This post is not associated with my employer.