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

Creating a reliable method to convert web pages with animations into video files presents unique challenges due to the intrinsic real-time nature of browsers that render frames based on current system conditions, leading to inconsistencies in video output. The traditional approaches like using browsers for screen recording are inadequate because they cannot synchronize animations with frame captures effectively. To address this, a JavaScript-based solution was developed to inject a virtual clock into the browser, overriding time-related APIs to maintain precise control over the animation frame rate, ensuring smooth video playback. Despite existing solutions like Remotion, which offers deterministic rendering within its framework, the need to process arbitrary web content without framework constraints necessitated a different approach. Additional challenges include handling video and audio elements deterministically, requiring complex processing pipelines using tools like FFmpeg and WebCodecs. The development was inspired by the WebVideoCreator project but diverged to incorporate modern technologies and tighter integration with cloud infrastructure, with plans to open-source the resulting solution to benefit the wider development community.