Stills without a second pass

The automated gameplay recorder had solved marketing videos months earlier, driving scripted browser games through Playwright to produce clean video captures of daily challenges and duels. But marketing surfaces, store listings, and documentation also need static, high-resolution screenshots of key moments: a crisp opening board, an in-flight combo toast, or a collision preview. Re-running the entire scripted run a second time just to snap screenshots was slow and wasteful. An umbrella feature set out to capture named stills on the fly during the exact same pass that produces the video, without adding jitter or desynchronizing the recorded footage.

Capturing a still at the right microsecond required knowing when the board had finished animating. The existing store exposed an isPlaying boolean, but polling it right after submitting a word created a race condition: isPlaying reads false both before the animation starts and after it completes. If the recording script polled immediately after typing, it could catch the pre-action idle state and snap before the snake moved. The fix was adding a monotonic generation counter to the animation machine store, reflected onto the DOM as a data attribute. The recorder could then await a distinct increment of the counter before starting its settle countdown, guaranteeing the snapshot captures the result of that specific word.

sequenceDiagram
  accTitle: CDP screenshot capture bracket sequence
  accDescr: Sequence diagram showing how CDP commands temporarily elevate device scale factor to capture a high-DPI screenshot and restore viewport metrics before the next word.
  participant R as Recorder
  participant CDP as Chrome DevTools Protocol
  participant B as Browser Page

  R->>B: Submit word & wait for animation generation
  B-->>R: Monotonic counter bumped
  R->>CDP: Emulation.setDeviceMetricsOverride (scale = 2.0)
  R->>CDP: Page.captureScreenshot (clip to element)
  CDP-->>R: High-DPI PNG Buffer
  R->>CDP: Emulation.clearDeviceMetricsOverride
  R->>B: Resume playback & top up pause duration

High-resolution screenshots require a device pixel ratio of 2.0 or 3.0, but changing the browser window’s scaling directly would distort the running video recording. High-level browser screenshot utilities also tended to ignore temporary scale factor overrides. The solution was dropping down to raw Chrome DevTools Protocol commands: bracketing each capture by temporarily setting a device metrics override, invoking a clipped page screenshot, and instantly clearing the override. To prevent the capture latency from altering the video’s pacing, the recorder calculates the time spent snapping the still and tops up the post-word pause accordingly, ensuring the final video length matches an uncaptured run.

With named capture points defined across daily and duel modes, keeping them synchronized with scripted word sequences became essential. The dry-run tracer was extended to validate every configured capture point’s target word index against the script’s actual length, failing fast on invalid indices without launching a browser. In parallel, per-language trigger resolution was added to account for subtle differences in opening sequences between English and Norwegian scripts, ensuring combo-anchored shots fire on the correct turn regardless of language.

Equipping the recording tool with mid-run screenshot capabilities turns every marketing run into a dual asset generator, producing video and retina stills in a single pass. The new capture points now feed directly into the repository documentation and store asset pipeline, providing verifiable visual receipts for both modes.