前端可观测性开发工具【免费下载链接】rrwebrecord and replay the web项目地址https://gitcode.com/gh_mirrors/rr/rrweb点击查看免费下载rrvideo 是 rrweb 官方提供的命令行工具负责把 rrweb 录制生成的 JSON 会话数据session events渲染为标准的 WebM 视频文件适用于无需交互回放的场景例如将录制结果分享到视频平台、作为 Bug 上报附件或进行自动化归档。读完本文你将掌握 rrvideo 的安装方式、三种常用 CLI 调用形态、完整的配置文件写法以及其基于 Playwright 无头浏览器与 rrweb-player 的底层渲染原理。rrvideo 在 rrweb 生态中的定位rrwebrecord and replay the web的核心思路是录制端把页面 DOM 变化、输入、滚动、鼠标交互等事件序列序列化为紧凑的 JSON 数据而非视频流回放端再按时间轴重建像素级画面。这种做法的优点是数据量小、便于检索与压缩但代价是无法在原生视频播放器、IM 或视频网站上直接播放。rrvideo 正是为解决这一闭环而生它在无头浏览器中启动 rrweb-player 对事件序列做一次真实回放同时用浏览器原生的 MediaRecorder 能力把回放过程录制成视频文件。官方文档 转换为视频 也明确把 rrvideo 列为将录制数据转为视频的推荐工具。从 package.json 可以看出它依赖playwright驱动无头浏览器、rrweb-player页面内回放器以及minimistCLI 参数解析三者共同构成了命令行入口 → 回放渲染 → 视频输出的完整链路。安装 rrvideorrvideo 以全局 CLI 形式发布在 npm 上安装需要两个前置条件安装 Node.js执行全局安装命令npm i -g rrvideo安装过程中需要注意rrvideo 的 package.json 中配置了install钩子脚本会调用playwright install下载 Playwright 所需的 Chromium 浏览器内核。如果当前环境无法联网下载浏览器如 CI 或离线环境可以通过环境变量跳过PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD1 npm i -g rrvideo安装完成后即获得rrvideo可执行命令对应package.json中bin: { rrvideo: build/cli.js }的声明。基本用法将 rrweb 会话转换为视频最简单的方式仅指定输入文件rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE其中PATH_TO_YOUR_RRWEB_EVENTS_FILE指向一份 rrweb 录制导出的 JSON 文件事件数组。运行后rrvideo 会在当前执行目录下生成一个名为rrvideo-output.webm的视频文件。这一默认输出路径在 src/index.ts 的defaultConfig中有明确定义output: rrvideo-output.webm并且输入、输出相对路径都会基于process.cwd()解析为绝对路径。指定输出路径rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_FILE --output OUTPUT_PATH--output接受绝对路径或相对路径视频将写入指定位置若父目录不存在会报错源码中会提示 Cant create video file. Please check the output path.。若省略该参数则回退到默认的rrvideo-output.webm。通过配置文件定制回放rrvideo --input PATH_TO_YOUR_RRWEB_EVENTS_JSON_FILE --config PATH_TO_YOUR_RRVIDEO_CONFIG_FILE--config指向一个 JSON 配置文件用于控制回放细节。rrvideo 会读取该文件并把它作为 rrweb-player 的 props除events外传入回放器具体解析逻辑见 src/cli.tsargv.config分支。配置文件详解仓库中提供了官方示例配置文件 rrvideo.config.example.json完整内容如下{ width: 1400, height: 900, speed: 4, skipInactive: true, mouseTail: { strokeStyle: green, lineWidth: 2 } }这些字段在源码中的角色如下字段示例值作用width/height1400/900回放器目标画布尺寸像素。在 src/index.ts 中配置会被合并进 rrweb-player 的 props同时用于推导浏览器视口大小speed4回放倍速。该值不仅控制回放节奏还直接参与播放超时计算expectedPlaybackTime videoDuration / speed源码会据此设定播放时长 2 分钟缓冲的总超时避免长录制被固定超时误杀对应 CHANGELOG 2.0.0 的调整skipInactivetrue是否跳过页面无活动的时间段从而缩短视频长度、避免长时间静止画面mouseTail{strokeStyle: green, lineWidth: 2}鼠标轨迹尾迹样式strokeStyle为轨迹颜色lineWidth为轨迹线条宽度需要说明的是由于 rrvideo 将整个配置文件透传为 rrweb-player 的 props类型约束为OmitConstructorParameterstypeof Player[0][props], events见 src/index.ts因此 rrweb-player 支持的其他回放配置项如autoPlay、showController、showDebug等原则上也可写入该文件。不过 rrvideo 在渲染时会强制覆盖events为你的录制数据并强制showController: false、autoPlay: false先挂载 finish / progress 事件再手动play()以保证录制过程不受控制器 UI 干扰且进度可追踪。底层实现原理从 src/index.ts 的transformToVideo函数可以还原出完整的转换流水线大致分为五步读取并解析事件读取--input指向的 JSON 文件解析为eventWithTime[]事件数组若未提供--inputsrc/cli.ts 会直接抛出please pass --input to your rrweb events file错误对应 test/cli.test.ts 中的第一个测试用例。计算最大视口getMaxViewport遍历所有Meta类型事件取录制过程中的最大width/height作为回放画布尺寸基准确保不同分辨率下的页面内容都不被裁剪。画质缩放源码内置MaxScaleValue 2.5结合resolutionRatio取值范围 01默认0.8对视口做超采样放大即scaledViewport maxViewport * resolutionRatio * 2.5再用 CSStransform: scale(...)把回放画面缩放回目标尺寸。这种以高分辨率渲染后缩小的方式能显著提升视频清晰度同时在resolutionRatio的权衡下控制文件体积。无头浏览器录制以chromium.launch({ headless: config.headless })启动 Playwright 浏览器用browser.newContext({ viewport: scaledViewport, recordVideo: { dir, size } })开启视频录制页面加载一份动态生成的 HTML其中内联了 rrweb-player 的 UMD 脚本与样式路径由require.resolve(rrweb-player)推导随后new rrwebPlayer({ target: document.body, props: {...} })重建页面并play()。等待结束并落盘页面通过exposeFunction暴露onReplayFinish与onReplayProgressUpdate两个桥接函数前者在回放完成后触发 Promise 解析含基于播放时长的动态超时保护后者驱动 CLI 的进度条见 src/cli.ts 中ProgressBar的使用回放结束后把临时录制文件移动到--output指定路径并清理__rrvideo__temp__临时目录。视频录制期间页面上的报错pageerror与控制台输出console会被转发到终端便于定位回放异常。质量与结果验证仓库自带 CLI 的集成测试 test/cli.test.ts可直接印证上述行为不带--input运行时抛出please pass --input to your rrweb events file仅传--input时在仓库根目录生成rrvideo-output.webm同时传--input与--output时视频写入指定路径。测试数据 test/events/example.ts 展示了一份最小可用的 rrweb 事件结构包含DomContentLoaded、Load、Meta声明 1000×800 视口、FullSnapshot完整 DOM 快照以及IncrementalSnapshotMutation 增补 select 元素、Input 输入事件可作为你手工构造测试录制的参照模板——即一份可被 rrvideo 消费的 JSON 至少应包含 Meta 与 FullSnapshot再配合若干增量事件描述动态变化。使用建议与注意事项浏览器依赖rrvideo 依赖 Playwright 的 Chromium 内核安装时若跳过浏览器下载PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD1运行时需要单独确保浏览器可用否则会启动失败。长录制会转码较久转换是真实回放一次的过程视频时长与录制时长成正比受speed倍速影响超时上限为回放时长 2 分钟缓冲。输出格式默认输出为 WebMrrvideo-output.webm如需 MP4 等容器格式可在输出后自行转封装。文件体积控制resolutionRatio默认0.8是源码注释中质量与文件体积的权衡值追求更小文件可调低追求更高画质可调高最大 1。如需在浏览器内直接体验交互式回放而非转视频可参考 docs/recipes/index.zh_CN.md 下关于 rrweb-player 的文档二者在 rrweb 工作流中互补。综上rrvideo 用真实回放 浏览器录制的方式填补了 rrweb 事件数据与视频文件之间的鸿沟一条命令即可完成转换配置文件则让你在画质、尺寸、倍速与鼠标轨迹表现上拥有充分的定制空间。赞分享前端可观测性开发工具【免费下载链接】rrwebrecord and replay the web项目地址https://gitcode.com/gh_mirrors/rr/rrweb点击查看免费下载相关推荐rrweb 录制数据转视频实战使用 rrvideo 将会话回放导出为 WebM 视频rrweb 录制数据转视频实战使用 rrvideo 将会话回放导出为 WebM 视频 rrweb 的录制产物是一种高效、易于压缩的文本格式事件流回放时可达到前端可观测性开发工具rrweb 录制数据转视频实战使用 rrvideo 将会话回放导出为 WebM 视频rrweb 录制数据转视频实战使用 rrvideo 将会话回放导出为 WebM 视频 rrweb 的录制数据是高效的文本 JSON 格式可在浏览器中做像素级前端可观测性开发工具rrweb 跨域 iframe 录制实战原理、配置与四种注入方案rrweb 跨域 iframe 录制实战原理、配置与四种注入方案 本指南以 rrweb 官方配方文档 docs/recipes/cross origin if前端可观测性开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考