Two Bugs Made Puppeteer Record in Slow Motion (PR #15112)

📝 Description Puppeteer's page.screencast() was quietly recording in slow motion — and the slowdown was different on every machine. Here's how I traced it to two compounding bugs and got the fix merged into Puppeteer. While building HVE Spielberg, my AI video pipeline, every browser clip came out too slow: a 5-second clock took ~12 seconds to play back, ~1.2× on my Mac but up to ~2.6× elsewhere. This is the detective story — from the symptom, up the stack into Puppeteer's ScreenRecorder, through both bugs, to the single formula that explains all the messy numbers, and a pull request now merged upstream. What's inside: • Bug #1 — ffmpeg's -framerate is an INPUT option, but it sat after -i, so ffmpeg silently ignored it and the image2pipe demuxer fell back to 25 fps (while frames were duplicated for 30 fps → a flat 1.2× stretch). • Bug #2 — frame counts were rounded per captured interval, so above the target fps the count chases the capture rate (and past ~2× it rounds to zero and drops frames). The fix differences a rounded cumulative position on a constant-fps grid. • The aha — playback stretch ≈ capture_fps / 25. One relationship explains every reported number from 1.2× to 2.6×. • Proof — a browser-free unit test sweeping 24→120 fps, fail-before / pass-after, plus real-time before/after playback. Stack: TypeScript · Node.js · Chrome DevTools Protocol (Page.screencastFrame) · ffmpeg (image2pipe → VP9/WebM). Chapters: 0:00 The tool: hve-spielberg 0:10 Filming the app frame-by-frame 0:22 The bug, and going upstream 0:42 Bug #1: the misplaced -framerate flag 0:54 Bug #2: rounding one interval at a time 1:08 One formula explains everything 1:19 Proof: real-time playback 1:31 The test, and merged into Puppeteer Links: • Merged PR #15112: https://github.com/puppeteer/puppetee... • Issue fixed (#15111): https://github.com/puppeteer/puppetee... • Where it surfaced (chrome-devtools-mcp #2204): https://github.com/ChromeDevTools/chr... • Full write-up on my blog: https://blog.nebrass.fr/playing-with-... • Puppeteer: https://pptr.dev/ 🎵 Music: "Ambient, Pad - Ionosphere" (Freesound #825435) by Matio888 — CC0 / public domain: https://freesound.org/s/825435/ #Puppeteer #ffmpeg #JavaScript #NodeJS #OpenSource #Debugging #WebDev #ChromeDevTools