How to Build a Video Rendering Engine by Faking the Browser's Clock

Converting animations on a web page into a video file is very tricky because the browser is a real-time system. Under load, the browser drops frames and runs animations according to wall-clock time, so when capture speed and animation speed don't match, the resulting video ends up choppy.

Existing tools like Remotion offer deterministic rendering, but they require users to build their content within that specific framework. This engine, by contrast, is not tied to any particular framework and aims to take in any URL and capture it perfectly.

To achieve this, it injects a Virtual Clock into every page. Key browser time-related APIs such as setTimeout, setInterval, requestAnimationFrame, Date, and performance.now() are replaced with a fake clock that is directly controlled.

The rendering process follows a loop like this:

• Advance the virtual clock's time
• Execute callbacks such as setInterval, setTimeout, and rAF
• Capture a screenshot of that frame

With this approach, no matter how long rendering actually takes, the resulting video always maintains a constant FPS and comes out smooth. Additionally, to prevent Chrome's Compositor from going idle and letting buffers expire, a Warmup loop is run before recording starts, designed to keep frames being continuously issued.