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.