【免费下载链接】webreelRecord scripted browser demos as video项目地址https://gitcode.com/gh_mirrors/we/webreel点击查看免费下载webreel是一个开源的浏览器演示视频录制工具它的 webreel CLI 只需一个 JSON 配置文件就能驱动无头 Chrome 自动点击、输入、拖拽、滚动页面并以约 60fps 截图合成自动生成带鼠标动画、按键 HUD 和音效的 MP4 / GIF / WebM 演示视频。本文一次讲透init、record、preview、composite四大核心命令外加validate与install两个辅助命令帮你从配置到成片完整跑通 webreel 录制流程。快速安装与前置条件只需 Node.js v18webreel 会在首次运行时自动下载 Chrome 与 ffmpeg 到~/.webreel目录npm install webreel如果你希望提前预装依赖或修复损坏的二进制可手动执行webreel install后文详述。 整个 webreel 的工作流可以概括为一句话写配置 → 预览调试 → 录制 → 合成。四个核心命令各占一环。webreel init一键生成配置文件init是起点。它会脚手架式地生成一份带注释的webreel.config.json模板中已包含输出目录、默认延迟和示例步骤改几个字段就能直接录制webreel init webreel init --name login-flow --url https://myapp.com webreel init --name hero -o hero.config.json选项默认值说明--name namemy-video视频名称--url urlhttps://example.com起始 URL-o, --output filewebreel.config.json输出配置文件路径生成的配置大致如下steps数组就是脚本化演示的核心——按顺序执行的点击、按键、暂停等动作{ videos: { VIDEO_NAME: { url: VIDEO_URL, viewport: { width: 1920, height: 1080 }, steps: [ { action: pause, ms: 500 }, { action: click, text: Get Started }, { action: key, key: moda, delay: 1000 } ] } } }完整模板见 init.ts一份最小可用的真实配置可参考 webreel.config.json。webreel record核心命令产出演示视频record是整条链路的发动机它读取配置、启动无头 Chrome、逐步执行动作并录制最终用 ffmpeg 编码输出视频文件默认写入videos/name.mp4webreel record # 录制配置中的全部视频 webreel record hero login # 只录制指定名称的视频 webreel record -c custom.config.json选项说明-c, --config path指定配置文件路径默认自动发现webreel.config.json并向上查找父目录--verbose每一步执行时打印日志--watch监控配置文件变化改动后自动重新录制--dry-run只打印解析后的完整配置与步骤列表不真正录制--frames将原始帧保存为 JPEG 到.webreel/frames/几个实用技巧先--dry-run再录不启动浏览器就能看到最终解析出的配置和逐步脚本快速排查我到底会执行哪些步骤。--watch迭代调参开发阶段边改配置边自动重录适合反复微调delay与viewport。一份配置多个视频在videos下定义多个条目即可record会逐个输出参考 multi-demo/webreel.config.json 中一个页面生成 homepage / features / pricing 三条视频的做法。录制时原始录屏还会被保留在.webreel/raw/动作时间轴数据保存在.webreel/timelines/——这正是后面composite命令的基础。webreel preview不录制的实时预览调试调好步骤之前没人想反复跑完整录制。preview会在可见的浏览器窗口里按脚本执行动作你可以肉眼检查点击有没有落在正确元素上、等待时机对不对、滚动位置是否合适——全程不产生视频文件webreel preview # 预览配置中的第一个视频 webreel preview hero # 预览指定视频 webreel preview -c custom.config.json hero选项说明-c, --config path指定配置文件默认webreel.config.json--verbose打印每一步执行日志如果视频名不存在会提示Video xxx not found. Available: ...列出所有可用名称方便快速定位拼写问题。实现见 preview.ts。webreel composite不重新录制的重新合成这是 webreel CLI 中最省时间的命令。由于record阶段已把原始录屏.webreel/raw/name.mp4和时间轴数据.webreel/timelines/name.timeline.json分开保存当你只想调整以下效果时无需再开浏览器重录光标覆盖层样式图片、大小、热区按键 HUD 外观颜色、字号、位置音效配置直接重新合成即可webreel composite # 重新合成全部视频 webreel composite hero login # 只合成指定视频 webreel composite -c custom.config.json典型场景你录完一条 3 分钟的演示发现默认光标太刺眼在配置里加上theme.cursor自定义光标图片后跑一次composite就能得到新成片——浏览器操作完全不用重跑。若找不到原始数据命令会明确报错Run webreel record first提示先录制。实现见 composite.ts。辅助命令validate 与 installvalidate不运行配置先查错webreel validate webreel validate -c custom.config.json对 JSON 配置做语法 Schema 校验错误信息会带行号定位把问题拦在录制之前。适合提交代码前检查或配合 CI 使用。install预装 / 修复依赖webreel install webreel install --force下载三个组件到~/.webreelheadless Chrome录制用、完整版 Chromepreview 用、ffmpeg。--force会删除缓存并重新下载专治二进制损坏。如果你通过环境变量CHROME_PATH、CHROME_HEADLESS_PATH、FFMPEG_PATH指定了外部二进制对应组件会自动跳过。实现见 install.ts。推荐工作流四步产出专业演示视频webreel init— 生成带注释的配置文件填入 URL 与步骤webreel preview— 肉眼调试步骤落点与节奏webreel record— 正式录制输出 MP4/GIF/WebM 与缩略图webreel composite— 调整主题、HUD、音效后秒级重新合成。中途随时用validate体检配置依赖异常时用install --force一键修复。相关源码与资料资源路径命令注册入口index.ts命令实现目录packages/webreel/src/commands/配置类型定义步骤、视口预设、主题types.ts官方命令参考页apps/docs/src/app/commands/page.mdx全部可运行示例examples/项目说明与命令速查README.md掌握以上六个命令你就掌握了 webreel CLI 的全部能力用init起稿、preview调试、record录制、composite精修再配上validate和install兜底一套浏览器演示视频生产线就此成型。赞分享【免费下载链接】webreelRecord scripted browser demos as video项目地址https://gitcode.com/gh_mirrors/we/webreel点击查看免费下载相关推荐LongHorizon-Harness CLI 命令速查清单run、init、doctor、plugin 一次讲透LongHorizon Harness CLI 命令速查清单run、init、doctor、plugin 一次讲透 LongHorizon Harness 是人工智能AI AgentAgent 工作流Agent 评测GUI 自动化VitePress 命令行接口CLI完整参考dev / build / preview / init 命令实战指南VitePress 命令行接口CLI完整参考dev / build / preview / init 命令实战指南 本篇指南基于 VitePress 官方前端文档开发工具前端构建Harvey CLI命令完整参考run、discover、outbox、export等12个命令一次讲清Harvey CLI命令完整参考run、discover、outbox、export等12个命令一次讲清 Harvey 是一款本地运行的自主 AI 销售代理上一篇微信聊天数据自主管理从数据提取到智能分析的全链路技术实现下一篇Blockly国际化完全指南从零构建多语言可视化编程环境创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考