Repository navigation
fix(browser-actions): smooth 30fps high-quality video via the CDP screencast - #2564
Merged
Merged
Conversation
…st so motion stays smooth video-quality=high captured a full-page screenshot every ~100ms, so cursor glides and smooth scrolls rendered as ~10fps jumps. Stream compositor frames with Page.startScreencast instead (~60fps during motion, nothing while idle) and resample them by paint timestamp onto a constant 30fps timeline anchored at the marker origin. Chromium only composites screencast frames at device pixels when the scale is forced at launch, so high-quality capture launches with --force-device-scale-factor alongside the context scale.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow-up to #2563 (video-quality=high).
Problem
High-quality capture took a full
page.screenshot()about every 100ms. A screenshot at 1080x1920 takes most of that budget, so motion recorded at about 10fps (gap p50 105ms, p90 156ms). Cursor glides (600ms) and smooth scrolls showed up as visible jumps in a real phone demo.Fix
Capture with
Page.startScreencast(JPEG q92) instead of a screenshot loop. Chromium pushes a frame on every repaint: about 60fps during motion (gap p50 17ms in a probe), and none while idle.Each frame keeps its CDP paint timestamp. At encode time,
highVideoFrameTimeline()resamples frames onto a constant 30fps timeline anchored at the recording origin that step markers already use. Each tick shows the latest frame painted at or before it. Encoding is unchanged: VP8 via Playwright's bundled ffmpeg.summary.video.fpsis now 30.Device pixels: the screencast composites at CSS pixels unless the scale is forced at launch. Verified with probes:
deviceScaleFactor: 2only--force-device-scale-factor=2onlySo when
video-quality=highis requested with a scale above 1,launchChromiumBrowser()gets the flag. The launcher now accepts optional extra args. Sessions that reuse a browser are unchanged.Tests
highVideoFrameTimelineunit test covers resampling, ticks before the first paint, and no frames.npm run buildis clean.Real-world check
I re-recorded a 72-step live phone journey (extrachill.com → events calendar → event → RSVP). It produced 1277 screencast frames, versus 410 screenshots before, at 1080x1920 30fps. In a 3s window during a cursor glide, 67 of 75 output frames change.
AI-assisted: authored by Extra Chill Bot.