Playwright video captures continuous browser demos
Playwright 视频录制连续浏览器演示
A screenshot storyboard omits intermediate animation frames and can miss short-lived progress indicators. Increasing the encoded GIF frame rate cannot recover motion absent from its source images. Continuous capture supplies those frames while the available browser-control workflow handles interaction.
English
Problem
A screenshot storyboard omits intermediate animation frames and can miss short-lived progress indicators. Increasing the encoded GIF frame rate cannot recover motion absent from its source images. Continuous capture supplies those frames while the available browser-control workflow handles interaction.
Decision
The recording skill keeps the available browser-control workflow preferred. When that workflow exposes recordVideo, video captures intermediate frames in the same controlled context; otherwise the workflow captures screenshots. Standalone repository-declared Playwright remains the fallback when browser control is unavailable. For video, viewport and recording dimensions match explicitly, avoiding Playwright's default scaling to fit 800×800. The recorder retains the page video, awaits context closure, and saves the completed WebM before encoding.
One encoder accepts either a video file or a screenshot directory. Video input selects one continuous interval, applies a declared playback multiplier, and extends its final frame. The JSON summary records source duration, selected interval, speed, final hold, and encoded dimensions, duration, frame count, and size. Mode-inappropriate options and invalid intervals fail. The original video remains available for review; trimming and speed never establish model response latency.
The evidence-chain decision owns browser-control selection, isolated application state, real model execution, exact commit attribution, and verified publication. Video adds a higher-cadence capture option within those rules. Failed recordings cannot contribute frames to a successful run.
Alternatives considered
Increase only the encoded frame rate. Repeating sparse screenshots does not capture additional motion. Screenshots remain useful for explicit state holds, requested storyboards, and browser workflows without video support.
Install a separate recorder or capture the desktop. The repository already declares Playwright. Another driver adds setup and version management; desktop capture can include unrelated windows and personal state.
Consequences
Continuous recording preserves intermediate states, so reviewers must inspect the selected interval for sensitive content and readability. Raw video consumes additional scratch storage, and encoding may require trimming or scaling to meet the byte limit. Context closure is part of successful recording, not optional cleanup.
The encoder's local Python unittest suite invokes real ffmpeg and ffprobe to check timing, palette order, screenshot holds, rejected options, overwrite protection, and size limits. It requires the skill's media prerequisites and is run explicitly; repository CI does not provision these media binaries. Product demonstrations additionally exercise the pull request's built server and real model flow.
中文
问题
截图分镜省略了动画的中间帧，也可能遗漏短暂的进度指示。提高 GIF 编码帧率无法补回源图片未记录的运动。连续录制提供这些画面，同时由可用的浏览器控制工作流负责交互。
决策
录制 skill 继续优先使用可用的浏览器控制工作流。该工作流提供 recordVideo 时，在同一受控上下文中用视频捕获中间帧；否则由该工作流截图。只有浏览器控制不可用时，才使用仓库已声明的独立 Playwright 作为备用方案。录制视频时，显式设置相同的 viewport 与录制尺寸，避免 Playwright 默认缩放到 800×800 以内。录制程序保留页面视频对象，等待上下文关闭，再保存完整 WebM 并编码。
同一编码器接受视频文件或截图目录。视频输入选择一个连续区间，应用明确标注的播放倍率，并延长末帧。JSON 摘要记录源视频时长、所选区间、倍率、末帧停留时间，以及编码后的尺寸、时长、帧数和大小。与输入模式不符的选项及无效区间会失败。保留原视频供检查；裁剪与变速不能证明模型响应延迟。
证据链决策规定浏览器控制方式选择、应用状态隔离、真实模型执行、准确提交归属及发布验证。视频在这些规则内增加更高采样帧率的录制选项。失败录制的画面不得用于成功运行。
曾考虑的替代方案
**只提高编码帧率。**重复少量截图不能捕获更多运动。截图仍适合明确的状态停留、用户要求的分镜，以及不支持视频的浏览器工作流。
**安装独立录制器或录制桌面。**仓库已经声明 Playwright。另一套驱动增加安装与版本管理成本；桌面录制可能包含无关窗口和个人状态。
后果
连续录制保留中间状态，因此检查者必须查看所选区间是否包含敏感内容，以及画面是否易读。原始视频占用额外临时空间，编码时可能需要裁剪或缩放以满足字节上限。关闭上下文是成功录制的一部分，不是可选清理。
编码器的本地 Python unittest 测试调用真实 ffmpeg 和 ffprobe，检查时序、调色板顺序、截图停留、选项拒绝、覆盖保护和大小限制。测试依赖 skill 要求的媒体工具，需显式运行；仓库 CI 不预装这些媒体程序。产品演示还会执行 PR 构建后的服务器与真实模型流程。