demo-video

🎥 自动化高清演示视频录制专家

内容创作榜 #15

基于Playwright技术,自动化录制浏览器交互生成专业演示视频,支持多格式输出,助力团队高效制作产品展示素材。

收藏
22.4k
安装
4.7k
版本
127.0.0
CLS 安全性认证2026-05-03
点击查看完整报告 >

使用说明

Demo Video Creator 是一款面向开发团队和产品人员的专业级浏览器自动化录屏工具。该技能通过 Playwright CDP(Chrome DevTools Protocol)协议连接本地 Clawdbot 浏览器,以高帧率捕获浏览器页面交互过程,生成原始帧序列后,利用 FFmpeg 编码为 MP4、GIF 或 WebM 格式的成品视频。核心工作流程遵循"计划-录制-编码"三段式:用户首先规划演示路径与交互时序,随后通过自定义的 record-demo.js 脚本执行自动化浏览、点击、悬停、输入等操作并同步捕获画面,最后调用 frames-to-video.sh 脚本完成视频压缩与格式转换。

该技能的显著优势在于其工程化的自动化能力与输出质量。相比传统手动录屏,它支持通过代码精确控制每一个交互节点的时间轴(如页面加载停留 2 秒、操作间隔 0.5-1 秒),确保视频节奏一致且专业。CDP screencast 模式提供 85-90 质量的 JPEG 帧捕获,兼顾清晰度与文件体积。同时,技能提供 GIF 循环无缝拼接、多分辨率适配等专业功能,特别适合需要频繁迭代产品演示视频的敏捷团队。

然而,该技能也存在一定的使用门槛与环境依赖。首先,它要求目标系统必须预先运行 Clawdbot 浏览器(通过 browser action=start 启动),并正确暴露 CDP 端口(默认 18800),且需要用户自行安装配置 FFmpeg 编码器。其次,录制过程会产生大量临时帧文件(可通过 FRAME_SKIP 参数控制采样率),对磁盘空间有一定要求。此外,脚本编写需要基础的 JavaScript 和 Playwright API 知识,对于非技术背景的产品人员存在学习成本。目前仅支持本地浏览器连接,无法直接录制远程或云端环境。

目标用户群体主要包括:需要制作产品功能演示视频的产品经理与客户成功团队;创建交互式教程的技术文档工程师;生成营销展示素材的增长团队;以及需要自动化 UI 测试录制的 QA 工程师。对于追求视频质量一致性与生产效率的技术团队尤为适用。

使用风险方面,主要涉及本地文件系统的高频 IO 操作(大量帧文件写入)、对外部进程(FFmpeg)的调用依赖,以及 CDP 端口连接失败时的异常情况处理。建议在使用前确保输出目录(OUTPUT_DIR)有充足磁盘空间,验证 Clawdbot 浏览器实例正常运行,并使用可信来源安装的 FFmpeg 版本以避免编码安全问题。

安全解读

核心用法

Demo Video Creator 是一款专注于产品演示视频录制的文档型 Skill,通过 Playwright CDP 协议自动化浏览器操作并捕获帧序列,最终使用 FFmpeg 编码为高质量视频。核心工作流程分为三步:规划演示序列(页面、交互、时序)、使用 CDP screencast 录制帧、FFmpeg 编码输出。用户需手动运行提供的模板脚本 scripts/record-demo.js,自定义 DEMO_SEQUENCES 定义交互流程,再通过 scripts/frames-to-video.sh 生成 MP4/GIF/WebM 格式成品。

显著优点

  • 零执行风险:纯 Markdown 文档,无动态代码,所有脚本需用户手动审阅后运行
  • 专业录制方案:基于 Playwright CDP 协议,支持高质量 JPEG 帧捕获,可精细控制时序(页面加载 2s、交互间隔 0.5-1s)
  • 多格式输出:内置 FFmpeg 预设,支持 H.264 MP4、VP9 WebM、循环 GIF 三种主流格式
  • 完整交互覆盖:支持导航、点击、悬停(展示 tooltip)、输入、键盘事件、滚动等全场景操作
  • 灵活可调参:通过 FRAME_SKIP 控制帧率(3-5 丝滑/8-10 精简),JPEG 质量 85-90 平衡画质与体积

潜在缺点与局限性

  • 依赖外部工具链:需自行安装并维护 Clawdbot 浏览器、Playwright、FFmpeg,环境配置门槛较高
  • T3 来源可信度:个人开发者/社区项目维护,非知名组织背书,长期更新保障有限
  • 无自动化集成:脚本需逐一手动执行,不支持 CI/CD 流水线原生集成
  • 分辨率受限:输出分辨率完全取决于浏览器窗口大小,无动态缩放适配
  • 无音频录制:仅支持画面捕获,需后期配音或独立处理音轨

适合人群

  • 产品经理/设计师:快速制作 App 功能演示、Walkthrough 视频
  • 独立开发者:为开源项目或 SaaS 产品生成营销素材
  • 技术布道者:录制教程、API 演示、交互式文档
  • 需规避代码安全风险的团队:纯文档型特性满足严格合规审查

常规风险

  • 脚本执行风险:虽然 Skill 本身安全,但用户手动运行的示例脚本涉及浏览器控制,若修改不当可能访问非预期页面
  • 本地服务暴露:CDP 端点 127.0.0.1:18800 需确保不对外网暴露,防止未授权浏览器控制
  • 存储空间占用:原始帧序列可能占用大量磁盘空间,需及时清理
  • 时序调试成本:复杂交互的等待时间需反复调试,缺乏可视化时间轴编辑

demo-video 内容

references文件夹
scripts文件夹
手动下载zip · 6.3 kB
demo-planning.mdtext/markdown
请选择文件