Как Replit обманул браузер и собрал движок рендера видео

Казалось бы, задача простая: взять веб-страницу с анимациями и выгрузить её в видео. Открыл браузер, записал экран, экспортировал MP4 — готово. На практике всё ломается.

Браузеры — системы реального времени. Они рисуют кадры когда успевают, пропускают их под нагрузкой и жёстко привязывают анимации к системным часам. Если один скриншот занимает 200 мс, а анимация рассчитана на 16 мс на кадр, получается рывками и дёргами. Браузер рендерит в своём темпе, захват идёт в своём — они не совпадают.

В Replit нашли выход: обманули браузер насчёт текущего времени. Так получилось собрать движок рендера видео, который предсказуемо захватывает кадры и собирает плавный результат. Подход любопытный — стоит глянуть, как это устроено.

Источник: We Built a Video Rendering Engine by Lying to the Browser About What Time It Is