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 #media-recorder-api, #canvas, #video, #webm, #download, #javascript, #web, #html, #programming.
👋 I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

More by Jim

This page copyright James Fisher 2020. Content is not associated with my employer. Found an error? Edit this page.