介绍
# Demo Video Creator
通过自动化浏览器交互来制作精美的产品演示视频。
## 概述
1. **规划** 演示序列（页面、交互、时机） 2. **录制** 使用 Playwright CDP 截屏录制帧 3. **编码** 使用 FFmpeg 编码为视频
## 快速开始
### 前置条件
- Clawdbot 浏览器正在运行 (`browser action=start profile=clawd`) - 应用可通过浏览器访问（本地或远程） - 已安装 FFmpeg 用于编码
### 录制工作流
1. 如果未运行，请启动 Clawdbot 浏览器 2. 手动或通过 `browser action=open` 导航到应用 3. 针对目标应用自定义 `scripts/record-demo.js` 4. 运行：`node scripts/record-demo.js` 5. 编码：`bash scripts/frames-to-video.sh`
## 规划演示
请参阅 `references/demo-planning.md` 获取以下方面的指导： - 构建演示序列 - 时机与节奏 - 交互模式 - 是什么让演示更具吸引力
## 脚本
### `scripts/record-demo.js`
Playwright 模板脚本，用于： - 通过 CDP 连接到 Clawdbot 浏览器 - 启动截屏捕获（JPEG 帧） - 执行演示序列（导航、点击、悬停、输入） - 将帧保存到输出目录
**针对每个演示进行自定义：** - `DEMO_SEQUENCES` 数组 - 定义页面和交互 - `OUTPUT_DIR` - 帧保存位置 - `FRAME_SKIP` - 跳过每第 N 帧（数值越小 = 帧数越多）
### `scripts/frames-to-video.sh`
包含预设的 FFmpeg 编码脚本： - `mp4` - H.264，良好的质量/大小平衡（默认） - `gif` - 用于嵌入的动画 GIF - `webm` - VP9，文件更小
用法：`./frames-to-video.sh [input_dir] [output_name] [format]`
## 交互模式
```javascript // Navigation await page.goto('http://localhost/dashboard'); await page.waitForTimeout(2000);
// Click element await page.locator('button:has-text("Create")').click(); await page.waitForTimeout(500);
// Hover (show tooltips, hover states) await page.locator('.card').first().hover(); await page.waitForTimeout(1000);
// Type text await page.locator('input[placeholder="Search"]').fill('query'); await page.waitForTimeout(500);
// Press key await page.keyboard.press('Enter'); await page.keyboard.press('Escape');
// Scroll await page.evaluate(() => window.scrollBy(0, 300)); ```
## 提示
- **时机**：页面加载停留 2 秒，交互之间间隔 0.5-1 秒，展示结果停留 1.5 秒 - **跳帧**：使用 3-5 获得流畅视频，使用 8-10 获得更小文件 - **质量**：85-90 的 JPEG 质量在大小和清晰度之间取得平衡 - **分辨率**：浏览器窗口大小决定输出分辨率 - **循环**：GIF 应无缝循环 - 在你开始的地方结束