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: .

What can computers do? What are the limits of mathematics? And just how busy can a busy beaver be? This year, I’m writing Busy Beavers, a unique interactive book on computability theory. You and I will take a practical and modern approach to answering these questions — or at least learning why some questions are unanswerable!

It’s only $19, and you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

After months of secret toil, I and Andrew Carr released Everyday Data Science, a unique interactive online course! You’ll make the perfect glass of lemonade using Thompson sampling. You’ll lose weight with differential equations. And you might just qualify for the Olympics with a bit of statistics!

It’s $29, but you can get 50% off if you find the discount code ... Not quite. Hackers use the console!

More by Jim

Tagged #programming, #web. All content copyright James Fisher 2020. This post is not associated with my employer. Found an error? Edit this page.