演示视频制作器

通过自动化浏览器交互，制作精美的产品演示视频。

概述

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- 保存帧的位置
• 帧跳过- 每隔N帧跳过一帧（数值越低，帧数越多）

scripts/frames-to-video.sh

带预设的FFmpeg编码脚本：

• mp4- H.264编码，良好的质量/大小平衡（默认）
• gif- 用于嵌入的动画GIF
• webm- VP9编码，文件更小

用法：./frames-to-video.sh [输入目录] [输出名称] [格式]

交互模式

// 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应实现无缝循环——终点即起点