The Problem: Browsers Don't Want to Be Cameras

Here's a deceptively simple product requirement: take a web page with animations, and turn it into a video file.

Sounds easy, right? Open a browser. Record the screen. Export MP4. Ship it.

We tried that. It doesn't work.

The core issue is that browsers are real-time systems. They render frames when they can, skip frames under load, and tie animations to wall-clock time. If your screenshot takes 200ms but your animation expects 16ms frames, you get a stuttery, unwatchable mess. The browser kept rendering at its pace while we captured at ours, and the two never agreed.

Hacker News is a community-driven platform for sharing and discussing technology news, startups, and programming-related topics. Through user submissions and comments, Hacker News offers insights into emerging technology trends, industry developments, and entrepreneurial ventures. Readers can participate in discussions, share their insights, and stay informed about the latest advancements in technology and innovation.

Hacker News

Replit built a video rendering engine that captures arbitrary web pages as deterministic MP4 videos by virtualizing browser time. The system injects a ~1,200-line JavaScript shim that replaces setTimeout, setInterval, requestAnimationFrame, Date, and performance.now() with a fake clock that advances only when the renderer says so. Additional challenges solved include: a compositor warmup loop to prevent Chrome's internal buffers from going stale, a five-layer video element pipeline (MutationObserver → FFmpeg transcoding → mp4box.js demuxing → WebCodecs decoding → canvas rendering), and audio capture via monkey-patching Web Audio API entry points to intercept playback intent rather than recording speaker output. The system disables OffscreenCanvas for determinism, includes SSRF protection for untrusted URLs, and runs single-flight to avoid resource contention. The approach is inspired by the open-source WebVideoCreator project but was rewritten in TypeScript with modern Puppeteer and adapted for Replit's cloud infrastructure. An open-source release is planned.

Replit — We Built a Video Rendering Engine by Lying to the Browser About What Time It Is

The Problem: Browsers Don't Want to Be Cameras

The Compositor Warmup Problem (Or: Why We Render Invisible Frames)

The <video> Element Saga: A Five-Layer Workaround