企业官网建设流程全解析

还在为产品演示视频反复重录、手抖卡顿、结尾没对齐而抓狂吗？webreel 是一款开源的浏览器演示视频录制工具：只需写一份 JSON 配置描述点击、输入、滚动等步骤，它就能自动驱动无头 Chrome 完成操作，以约 60fps 捕获画面，并生成带光标动画、按键叠加层和音效的 MP4 演示视频。整个过程无需手工操作鼠标，一次配置即可无限次复现。

为什么手工录屏总是翻车？

手工录屏的几个老问题，webreel 全部用"脚本化"来解决：

它的核心原理很简单：webreel 驱动一个无头 Chrome 实例执行 JSON 里定义的步骤，同时以约 60fps 截图，再用 ffmpeg 编码输出，中间叠加光标动画、按键 HUD 与音效。相关实现可以在 packages/@webreel/core/ 中查看，例如 recorder.ts 负责录制管线，cursor-motion.ts 负责光标的缓动路径计算。

三步上手：安装、生成配置、开始录制

环境要求 Node.js 18+。Chrome 和 ffmpeg 会在首次运行时自动下载到~/.webreel目录，无需手动安装。

# 1. 安装 CLI npm install webreel # 2. 生成一份带 IDE 自动补全的配置文件 npx webreel init --name my-video --url https://example.com # 3. 开始录制 npx webreel record

运行完成后，videos/my-video.mp4就是你的成品。整个过程不到一分钟，官方快速上手指南见 quick-start/page.mdx。

上图效果来自最简单的 hello-world 示例，完整配置只有十几行：webreel.config.json

读懂 webreel.config.json：一份 JSON 描述整条片场

webreel init生成的配置文件长这样，结构非常直白：

{ "$schema": "https://webreel.dev/schema/v1.json", "videos": { "my-video": { "url": "https://example.com", "viewport": { "width": 1080, "height": 1080 }, "defaultDelay": 500, "steps": [ { "action": "pause", "ms": 500 }, { "action": "click", "text": "Get Started" }, { "action": "key", "key": "cmd+a", "delay": 1000 } ] } } }

几个关键概念：

• url：要打开的页面地址，也支持相对路径（配合顶层baseUrl）
• viewport：决定视频分辨率，例如1920 x 1080
• steps：动作序列，按顺序逐个执行
• defaultDelay：每步执行后的默认等待时间，单个步骤也可用delay字段单独覆盖
• waitFor：开始前等待某个选择器出现，避免页面没加载完就开录

配置内置$schema，在 IDE 中可获得完整的字段自动补全和校验；不放心时还可以先跑npx webreel validate检查配置是否有错。

下面这份来自表单填充示例的配置，就模拟了一段完整的"登录流程"：

{ "action": "type", "text": "user@example.com", "selector": "#email", "charDelay": 40 }, { "action": "click", "text": "Sign In" }

12 种步骤动作：覆盖演示视频的几乎所有操作

steps数组里每一步都是一个action，常见动作速查表如下（完整说明见 actions/page.mdx）：

以 drag-and-drop 示例 为例，drag动作通过from/to两个定位器描述"从 Todo 列拖到进行中列"，光标轨迹会自动走一条带缓动的自然曲线，而不是生硬的直线。

让视频更像"人录的"：光标动画、音效与主题定制

webreel 的默认输出已经足够精致，还有三个进阶开关：

• 按键 HUD：按key动作时，屏幕角落会浮出对应的按键提示（如 ⌘+A），实现见 packages/@webreel/core/src/overlays.ts
• 音效（sfx）：顶层配置"sfx": { "click": 1, "key": 2 }即可为点击和按键混入内置音效（1–4 号变体），也可指定自定义 mp3 路径
• 主题（theme）：通过theme字段替换光标图片、调整 HUD 外观，让视频与产品品牌色统一

一份配置出多条视频：multi-demo 与 shared-steps 技巧

产品官网通常要为首页、功能页、定价页各出一段演示。webreel 允许在videos对象里定义任意多条视频，共享顶层的viewport、defaultDelay等默认值：

{ "viewport": { "width": 1920, "height": 1080 }, "defaultDelay": 500, "videos": { "homepage": { "url": "./web/index.html", "steps": [ "..." ] }, "features": { "url": "./web/index.html", "steps": [ "..." ] }, "pricing": { "url": "./web/index.html", "steps": [ "..." ] } } }

如果多条视频都有相同的"前置操作"（比如先关掉 Cookie 弹窗），可以把公共步骤抽到单独文件里，用顶层include字段引入，所有视频自动在最前面执行这些步骤。shared-steps 示例 的公共步骤文件 steps/setup.json 只有两步：

{ "steps": [ { "action": "wait", "selector": ".cookie-banner", "timeout": 5000 }, { "action": "click", "selector": ".accept-btn", "delay": 300 } ] }

录制过程中还能顺手截图产出静态营销图，见 screenshots 示例：

调试与后期：preview、composite 让改稿不用重录

• npx webreel preview：在可见浏览器窗口里跑一遍步骤但不录制，调试步骤定位时非常有用
• npx webreel record hero login：只录制指定名字的视频
• npx webreel composite：record时会把原始画面和时间线存到.webreel/raw/与.webreel/timelines/，之后调整光标样式、主题、音效时，composite可以直接重新合成而不用再打开浏览器录一遍
• npx webreel install --force：下载的二进制损坏时强制重新下载

输出格式：MP4、GIF、WebM 随意切换

默认输出 MP4；把单个视频的output字段改成.gif或.webm即可切换：

• MP4：官网 hero、视频平台的默认选择
• GIF：README、文档、社交媒体的轻量动图
• WebM：使用 VP9 编码，适合对体积敏感的场景

页面滚动、长博客式内容的完整演示可参考 page-scrolling 示例：

写在最后

webreel 把"演示视频"从一项手工劳动变成了工程化流程：步骤写在 JSON 里、随代码一起版本管理、CI 里一条命令即可重新产出。对新手来说，从npm install webreel到拥有第一条 1080p 带光标的演示视频，只需要复制本文的三条命令，再把steps换成你产品的操作路径即可。

更多可运行的示例工程都在 examples/ 目录下，CLI 完整命令参考见 commands/page.mdx，配置项全量说明见 configuration/page.mdx。