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

I just released Vidrio, a free app for macOS and Windows to make your screen-sharing awesomely holographic. Vidrio shows your webcam video on your screen, just like a mirror. Then you just share or record your screen with Zoom, QuickTime, or any other app. Vidrio makes your presentations effortlessly engaging, showing your gestures, gazes, and expressions. #1 on Product Hunt. Available for macOS and Windows.

With Vidrio

With generic competitor

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.