I made some visualizations in HTML5 canvas and wanted to record them to display in blog.
Could not find a simple way to do that. CCapture.js added too much performance overhead which made animations slow.
CanvasRecorder.js uses built in MediaRecorder
which is apparently the simplest and most effitient way to record whatever is happening on canvas.
NOTE: I have only tested it with Chrome and it should work fine with Firefox
Link: 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');