Recording Excalidraw Drawing to Video

Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.

Since Excalidraw renders to canvas, it is possible to capture and record drawing to video.

const canvas = document.querySelector('.excalidraw__canvas');
const stream = canvas.captureStream(30 /* FPS */);
const recorder = new MediaRecorder(stream);
const frames = [];
recorder.ondataavailable = (event) => { frames.push(event.data); };
recorder.onstop = () => {
  stream.getTracks().forEach((track) => track.stop());
  const blob = new Blob(frames, { type: recorder.mimeType });
  const url = URL.createObjectURL(blob);
  window.open(url);
};

// Start recording.
recorder.start();

// Draw something ...

// Stop recording after 5s.
setTimeout(() => {
recorder.stop();
}, 5000);

Cool! Drag the link below to the bookmarks bar of your browser, head to excalidraw.com and press the bookmarked button to start recording. To stop press the button again ✨

→ Excalidraw Record ←