Recording screencasts

Since WEBM compresses videos very efficiently, I’ve started using videos more often. For example, in Prototyping the prototypes and in Using game-playing agents to teach.

I use a fish script to compress screencasts like this:

# Increase quality with lower crf= (55 is default, 45 is better/larger)
# and higher fps= (5 is default, 10 is better/larger).
screencastcompress --crf 45 --fps 10 a.webm b.webm ...

To record the screencasts, I prefer slightly automated approaches for ease and quality.

METHOD 1: Browser scrolling: To uniformly scroll to the bottom of the page at ~800 pixels / second (roughly one page per second), I frame the recording window, start recording, and quickly paste this script in the DevTools console:

scrollInterval = setInterval(() => {
  window.scrollBy(0, 16); // Scroll 16px every 20ms (approx 800px/s)
  if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {
    clearInterval(scrollInterval);
    console.log("Reached bottom or no more scrolling.");
  }
}, 20);

This is what I used in Prototyping the prototypes.

METHOD 2: AI Coding Agents: I tell the coding agent to:

… screenshot each step at 1366x768, compressing into video.webm at 1.5 fps, pausing the last frame for 5 seconds.

If playwright and ffmpeg are set up, this just works.

This is what I used in Using game-playing agents to teach.