Demo Video Creator
通过自动化浏览器交互，创建精美的产品演示视频。
概述
- 规划 演示序列（页面、交互、时间）
- 录制 使用 Playwright CDP 屏幕录制捕获帧
- 编码 通过 FFmpeg 合成视频
快速开始
前置条件
- OpenClaw 浏览器正在运行（
browser action=start profile=clawd） - 应用可通过浏览器访问（localhost 或远程）
- 已安装 FFmpeg 用于编码
录制工作流
- 如果 OpenClaw 浏览器未运行，请先启动
- 手动或通过
browser action=open导航到应用 - 根据目标应用自定义
scripts/record-demo.js - 运行：
node scripts/record-demo.js - 编码：
bash scripts/frames-to-video.sh
规划演示
参见 references/demo-planning.md 了解以下指导：
- 如何构建演示序列
- 时间与节奏
- 交互模式
- 如何使演示更具吸引力
脚本
scripts/record-demo.js
模板化的 Playwright 脚本，实现：
- 通过 CDP 连接到 OpenClaw 浏览器
- 启动屏幕录制捕获（JPEG 帧）
- 执行演示序列（导航、点击、悬停、输入）
- 将帧保存到输出目录
针对每次演示进行自定义：
DEMO_SEQUENCES数组 — 定义页面和交互OUTPUT_DIR— 保存帧的目录FRAME_SKIP— 跳过第 N 帧（值越小帧越多）
scripts/frames-to-video.sh
FFmpeg 编码脚本，提供预设：
mp4— H.264，质量/大小平衡良好（默认）gif— 用于嵌入的动画 GIFwebm— VP9，文件更小
用法：./frames-to-video.sh [输入目录] [输出名称] [格式]
交互模式
// 导航
await page.goto('http://localhost/dashboard');
await page.waitForTimeout(2000);
// 点击元素
await page.locator('button:has-text("Create")').click();
await page.waitForTimeout(500);
// 悬停（显示工具提示、悬停状态）
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);
// 输入文本
await page.locator('input[placeholder="Search"]').fill('query');
await page.waitForTimeout(500);
// 按键
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');
// 滚动
await page.evaluate(() => window.scrollBy(0, 300));
技巧
- 时间控制：页面加载 2 秒，交互之间 0.5-1 秒，展示结果 1.5 秒
- 帧跳过：3-5 用于流畅视频，8-10 用于较小文件
- 质量：85-90 JPEG 质量可平衡体积和清晰度
- 分辨率：浏览器窗口大小决定输出分辨率
- 循环：GIF 应无缝循环 — 结束位置与开始位置一致
注意事项
- 截图 vs 视频：如果用户只需查看某个功能，请直接内联截图，而不要录制完整视频。先检查
browser action=tabs profile=clawd— 如果应用标签页已打开，直接截取截图，无需子 agent。 - 上下文限制：包含大量截图的录制循环会快速消耗上下文（200k token 限制）。保持范围紧凑：先录制所有帧，再进行分析 — 切勿将帧捕获与分析交错进行。如果上下文紧张，将帧写入磁盘并在单独的通道中分析。
- 并行 agent 风险：不要同时针对同一浏览器标签页启动多个演示 agent — 它们会相互干扰导航状态。