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