前端可观测性开发工具【免费下载链接】rrwebrecord and replay the web项目地址https://gitcode.com/gh_mirrors/rr/rrweb点击查看免费下载rrvideo 是 rrweb 生态中一个轻量的命令行工具用于把 rrweb 录制得到的会话数据JSON 格式的事件流在无头浏览器中回放并录制成 WebM 视频文件。本指南基于 packages/rrvideo/README.md 及其仓库源码完整介绍安装、CLI 用法、配置文件编写以及其底层“浏览器回放 录屏”的实现原理读完即可把一份 rrweb 事件文件快速转成可分享、可归档的视频。说明本文对应的中文文档为 packages/rrvideo/README.zh_CN.mdrrvideo 的定位也可参考仓库中的实践文档 docs/recipes/export-to-video.md“Convert To Video”。rrvideo 是什么从事件流到视频rrweb 录制产生的数据本质上是一份文本格式的事件序列eventWithTime[]体积小、易压缩回放时能做到像素级还原。但它并不是真正的视频文件无法直接放进播放器、社交平台或常规的视频工作流。rrvideo 解决的就是这个缺口读取事件 JSON在浏览器中完整回放并把回放过程录制为 WebM 视频。从源码结构看rrvideo 包由三部分组成packages/rrvideo/src/cli.tsCLI 入口负责解析命令行参数、读取配置文件、展示进度条并调用核心函数packages/rrvideo/src/index.ts核心导出transformToVideo承担读取事件、启动浏览器、注入播放器、等待回放结束并产出视频的完整流程packages/rrvideo/test/cli.test.tsCLI 的自动化测试验证了缺参报错、默认输出与指定输出三种场景。安装 rrvideorrvideo 以全局 CLI 的方式分发安装前需先准备好 Node.js 环境npm i -g rrvideo安装完成后rrvideo命令即全局可用。从 packages/rrvideo/package.json 可以看到包的bin字段将rrvideo命令指向build/cli.js而其依赖包含playwright与rrweb-player——这意味着转换过程依赖 Playwright 下载的 Chromium 浏览器。安装脚本会根据环境变量PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD决定是否执行playwright install见 package.json 的install脚本因此若在 CI 或离线环境安装需要留意浏览器二进制是否可用。快速开始一条命令生成视频最基本的转换rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE其中PATH_TO_YOUR_RRWEB_EVENTS_FILE指向一份 rrweb 录制得到的事件 JSON 文件。运行该命令会在当前工作目录生成rrvideo-output.webm。这一行为在 packages/rrvideo/src/index.ts 的默认配置中有明确对应const defaultConfig: RequiredRRvideoConfig { input: , output: rrvideo-output.webm, // 未指定输出时的默认文件名 headless: true, resolutionRatio: 0.8, // 质量与体积的折中值 onProgressUpdate: () {}, rrwebPlayer: {}, };同时CLI 会对--input做必填校验——packages/rrvideo/src/cli.ts 第 11 行起缺少--input会直接抛出please pass --input to your rrweb events file这一行为也被 packages/rrvideo/test/cli.test.ts 的should throw error without input path用例所覆盖。指定输出路径rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE --output OUTPUT_PATH--output可以是一个文件名或完整路径转换完成后的视频会被移动到该位置。需要注意的是--input与--output都支持绝对路径与相对路径——在 packages/rrvideo/src/index.ts 中相对路径会基于process.cwd()解析为绝对路径。通过配置文件定制回放rrvideo 提供了一种更灵活的方式编写一个 JSON 配置文件把 rrweb-player 的配置项传入回放过程。rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_JSON_FILE --config PATH_TO_YOUR_RRVIDEO_CONFIG_FILE仓库中提供了一份可直接参考的示例配置packages/rrvideo/rrvideo.config.example.json内容如下{ width: 1400, height: 900, speed: 4, skipInactive: true, mouseTail: { strokeStyle: green, lineWidth: 2 } }CLI 读取该 JSON 后会将其作为rrwebPlayer的 props 传入核心函数packages/rrvideo/src/cli.ts 第 1726 行类型上对应rrweb-player构造参数的props去掉events字段可用的配置项可从 packages/rrweb-player/src/types.ts 中查证。配置项说明配置键默认值说明width1024播放器宽度像素rrvideo 内部会结合分辨率再放大视口详见下文“分辨率放大”height576播放器高度像素speed1回放速度倍率例如4表示 4 倍速同时用于估算回放耗时以设置超时skipInactivefalse是否跳过无操作的空闲时间段可显著缩短长会话视频的时长mouseTail—鼠标轨迹尾迹样式示例中使用strokeStyle: green与lineWidth: 2配置颜色与线宽autoPlay/showController—注意这两个键会被 rrvideo 强制覆盖。在 packages/rrvideo/src/index.ts 的getHtml中播放器 props 的展开顺序为...userConfig在前、showController: false与autoPlay: false在后因此用户配置无法改变它们——视频录制不需要控制条也必须在事件监听器挂载完成后由 rrvideo 主动调用play()此外由于 rrweb-player 的 props 是 PartialplayerConfig的交叉类型rrweb/replay的播放器配置如mouseTail、skipInactive、unloadCanvas、useVirtualDom等同样会被透传具体可参考 packages/rrweb-player/README.md 的 Options 章节。以编程方式调用transformToVideo除了 CLIrrvideo 的核心能力通过transformToVideo(options)导出packages/rrvideo/src/index.ts可在 Node.js 脚本中直接使用。其完整参数如下type RRvideoConfig { input: string; // 必填rrweb 事件 JSON 文件路径 output?: string; // 可选输出视频路径默认 rrvideo-output.webm headless?: boolean; // 可选是否无头运行浏览器默认 true resolutionRatio?: number; // 可选0~1 之间的数值越高画质越好默认 0.8超过 1 会被截断为 1 onProgressUpdate?: (percent: number) void; // 回放进度回调percent 为 0~1 rrwebPlayer?: OmitConstructorParameterstypeof Player[0][props], events; };示例const { transformToVideo } require(rrvideo); transformToVideo({ input: ./session.json, output: ./session.webm, resolutionRatio: 1, onProgressUpdate: (percent) console.log(进度${Math.round(percent * 100)}%), }).then((file) console.log(转换完成${file}));CLI 内部也正是这么用的——它通过open-tech-world/cli-progress-bar在终端渲染进度条并把percent映射为百分比packages/rrvideo/src/cli.ts 第 2840 行。headless: false时浏览器窗口可见方便调试回放与录制过程。实现原理无头浏览器回放 录制理解 rrvideo 的内部机制有助于判断它在什么场景下适用、如何调优。整个流程在transformToVideo中串成一条链路主要分为五步。1. 预处理计算最大视口并放大分辨率rrvideo 首先遍历全部事件从EventType.Meta事件中取出出现过的最大width/height作为回放视口基准getMaxViewport。随后执行超采样放大以提升视频清晰度const MaxScaleValue 2.5; // 合法的最大缩放值用于提升视频质量 const scaledViewport { width: Math.round(maxViewport.width * (config.resolutionRatio ?? 1) * MaxScaleValue), height: Math.round(maxViewport.height * (config.resolutionRatio ?? 1) * MaxScaleValue), };即浏览器视口实际尺寸 事件最大视口 ×resolutionRatio×2.5录制的视频再被 CSStransform: scale(...)缩回原比例见getHtml中的resize事件处理从而获得高于原始分辨率的录制画质——这就是配置项里“越高画质越好”的实现来源。2. 启动浏览器并录制视口使用 Playwright 启动 Chromiumheadless由配置决定并以scaledViewport作为视口尺寸创建上下文同时开启recordVideo录制const context await browser.newContext({ viewport: scaledViewport, recordVideo: { dir: defaultVideoDir, size: scaledViewport }, });录制过程中产生的临时文件会写入__rrvideo__temp__目录转换结束后被清理。3. 注入 rrweb-player 并回放rrvideo 在运行时读取已安装的rrweb-player的 UMD 产物与样式文件dist/rrweb-player.umd.cjs与style.css连同事件数据一起拼装成一个自包含的 HTML 页面注入到about:blank页面中执行。页面脚本的关键逻辑以new rrwebPlayer({ target: document.body, props: { ...userConfig, events, showController: false, autoPlay: false } })创建播放器监听finish事件触发页面侧的onReplayFinish通知 Node 进程回放结束监听ui-update-progress事件把进度透传给onProgressUpdate回调在resize事件中通过 CSS transform 把播放器缩放回原始比例。4. 等待回放完成含超时保护Node 侧用一个 Promise 等待回放结束超时时间按事件时间轴估算const expectedPlaybackTime (最后事件时间戳 - 首事件时间戳) / speed; const totalTimeout expectedPlaybackTime 120000; // 额外 2 分钟缓冲即预估播放耗时 事件总时长 ÷ 播放速度再加上 2 分钟缓冲若finish事件始终未触发会以Replay timeout拒绝并结束进程。这解释了为什么配置文件中的speed不仅影响成片速度也影响整体转换的耗时上限。5. 收尾移动视频并清理回放结束后从page.video()取得录制的临时视频路径将其移动到output指定位置默认覆盖同名文件随后关闭浏览器上下文、删除临时目录。事件文件长什么样rrvideo 的输入是标准的 rrweb 事件数组eventWithTime[]。仓库测试中内置了一份最小可用的示例packages/rrvideo/test/events/example.ts它依次包含DomContentLoaded、Load、Meta、FullSnapshot、IncrementalSnapshotMutation以及输入事件可以作为手写测试事件或校验录制链路的参考——CLI 测试正是把这份事件写入example.json后喂给rrvideo的packages/rrvideo/test/cli.test.ts。验证与常见问题如何验证安装与转换仓库的 CLI 测试覆盖了三种关键路径packages/rrvideo/test/cli.test.ts不带--input运行 → 抛出please pass --input to your rrweb events file仅带--input→ 在当前目录生成rrvideo-output.webm带--input与--output→ 在指定路径生成视频。在自己的项目中可先确认rrvideo --help或直接运行能正常输出再准备一份合法的事件 JSON 做最小验证。常见注意点输出格式固定为 WebM录制来自 Playwright 的视频产出为 WebM如需 MP4可在转换后用 ffmpeg 等工具二次转码首次运行需下载浏览器依赖 Playwright Chromium首次运行或安装时若被网络策略阻断需提前完成playwright install长会话会拉长转换时间视频转换是“实时回放 录制”转换耗时约等于事件总时长 ÷ 播放速度可通过提高speed或开启skipInactive缩短画质与体积的权衡resolutionRatio默认0.8是质量与文件大小的折中追求画质可设为1但文件会更大该值超过1会被代码截断为1packages/rrvideo/src/index.ts 第 111 行控制条不会出现在视频中showController被强制关闭成片是纯净的回放画面。延伸阅读中文文档 与 示例配置核心实现CLI 入口、转换函数播放器配置项来源packages/rrweb-player/src/types.ts、packages/rrweb-player/README.md相关的实践文档docs/recipes/export-to-video.md若要了解 rrweb 事件数据本身的结构可阅读 docs/events.md 与 docs/replay.md赞分享前端可观测性开发工具【免费下载链接】rrwebrecord and replay the web项目地址https://gitcode.com/gh_mirrors/rr/rrweb点击查看免费下载相关推荐rrvideo 使用指南将 rrweb 会话录制转换为 WebM 视频rrvideo 使用指南将 rrweb 会话录制转换为 WebM 视频 output文章 rrvideo 使用指南将 rrweb 会话录制转换为 WebM前端可观测性开发工具rrweb 录制数据转视频实战使用 rrvideo 将会话回放导出为 WebM 视频rrweb 录制数据转视频实战使用 rrvideo 将会话回放导出为 WebM 视频 rrweb 的录制数据是高效的文本 JSON 格式可在浏览器中做像素级前端可观测性开发工具rrweb 录制数据转视频实战使用 rrvideo 将会话回放导出为 WebM 视频rrweb 录制数据转视频实战使用 rrvideo 将会话回放导出为 WebM 视频 rrweb 的录制产物是一种高效、易于压缩的文本格式事件流回放时可达到前端可观测性开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考