产品演示视频录制

技能简介

通过自动化浏览器交互并捕获帧画面，创建专业的产品演示视频。支持使用 Playwright CDP 屏幕录制功能进行高质量画面捕获，并通过 FFmpeg 完成视频编码。

能做什么

• 自动录制网页应用的演示、导览、产品展示或交互式视频
• 捕获浏览器操作序列的每一帧画面
• 将帧序列编码为 MP4、GIF 或 WebM 格式
• 自定义演示流程中的页面跳转、点击、悬停、输入等交互动作

使用说明

前置条件

• Clawdbot 浏览器已启动（browser action=start profile=clawd）
• 目标应用可通过浏览器访问（本地或远程）
• 系统已安装 FFmpeg 用于视频编码

安装依赖

# 确保 Playwright 已安装
npm install playwright

# 确保 FFmpeg 已安装
# macOS: brew install ffmpeg
# Ubuntu: sudo apt-get install ffmpeg
# Windows: 下载并配置环境变量

录制步骤

1. 启动 Clawdbot 浏览器（若未运行）
2. 手动或通过 browser action=open 导航至目标应用
3. 根据目标应用修改 scripts/record-demo.js 中的演示序列
4. 执行录制：node scripts/record-demo.js
5. 编码生成视频：bash scripts/frames-to-video.sh

关键配置项

• DEMO_SEQUENCES：定义页面和交互序列
• OUTPUT_DIR：帧文件保存目录
• FRAME_SKIP：跳帧数（数值越低帧数越多）

输入与输出

见下方输入与输出表格。

风险提示

• 录制前需确保浏览器窗口尺寸符合预期输出分辨率
• JPEG 质量建议 85-90，以平衡文件大小与画面清晰度
• GIF 循环播放时需确保结尾与开头画面衔接
• 长时间录制可能产生大量帧文件，注意磁盘空间

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/cyberfront-ai/demo-video/SKILL.md
来源类型：GitHub 仓库