브라우저를 카메라로 만들기: Replit의 결정론적 비디오 렌더러 구축기

nextFrame() {
  const loop = async () => {
    await seekCSSAnimations(currentTime); // sync CSS
    await seekMedias(); // sync videos
    currentTime += frameInterval; // tick the clock
    callIntervalCallbacks(currentTime); // fire setInterval
    callTimeoutCallbacks(currentTime); // fire setTimeout
    callRAFCallbacks(currentTime); // fire rAF
    await captureFrame(); // screenshot
    loop(); // next frame
  };
  loop();
}

startWarmup() {
  const warmupFrame = async () => {
    if (startFlag) {
      stopWarmup();
      return;
    }
    await skipFrame();
    warmupTimerId = setTimeout(warmupFrame, 33);
  };
  warmupFrame();
}

Object.defineProperty(window, 'OffscreenCanvas', { value: undefined, writable: false });
Object.defineProperty(
  HTMLCanvasElement.prototype,
  'transferControlToOffscreen',
  { value: undefined, writable: false }
);