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. Using built in
MediaRecorder 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
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);
recorder.save(); // Save with given file name recorder.save('busy_motion.webm');