CanvasRecorder.js

Record a canvas to webm video without effecting rendering performance.

NOTE: Only tested it with Chrome and should work fine with Firefox

Blog article: https://smusamashah.github.io/blog/2018/10/26/CanvasRecorder

How to use

Create a recorder

const canvas = document.getElementById('animation');
const recorder = new CanvasRecorder(canvas);

// optional: bits per second for video quality, defaults to 2.5Mbps
const recorder = new CanvasRecorder(canvas, 4500000);

Start recording

recorder.start();

Stop recording

recorder.stop();

Save/download recording

recorder.save();
// Save with given file name
recorder.save('busy_motion.webm');

How it works

It is based on this WebRTC sample. Captures MediaStream from a canvas element and records it with MediaRecorder.