web-demo-video

Load the real website in an iframe on a stage page, drive it with scripted MouseEvent dispatches on a deterministic frame timeline, capture each frame with page screenshots, and composite the frames into MP4 with ffmpeg. A fake cursor SVG makes it look like a genuine recording.

Define a __tick(frameIndex) function that reconstructs the full visual state from the frame number, then loop through frames calling page.evaluate and page.screenshot with a clip region. The clip uses CSS pixels, so do not multiply by devicePixelRatio.

The stage page and target site must share the same origin, or iframe.contentDocument access is blocked. Serve both from one local server such as python3 -m http.server, and place the stage file inside the project folder temporarily.

Use libx264 with -pix_fmt yuv420p, which is mandatory for SNS compatibility, plus -movflags +faststart for streaming. A typical command scales frames with lanczos, sets fps=30, and uses crf 20 for quality.

Yes, use the ffmpeg two-pass palettegen and paletteuse filters for high-quality GIFs. For blog body embeds, a width of 620-640px at 12fps around 70KB is sufficient, and you can skip the browser mockup and ending card.

Capture speed is about 0.09 seconds per frame, so long videos must be split into batches of 100-150 frames to avoid REPL timeouts. Real-time setTimeout animations break determinism, and cross-origin sites cannot be manipulated at all.