更新记录

1.0.0（2026-01-28） 下载此版本

v1.0.0（初始版本）

1. 实现H5端页面操作录制功能，支持忽略指定元素；
2. 支持录屏事件存储、清空，录制状态提示；
3. 实现回放控制（播放/暂停/重新播放），适配rrweb-alpha版API；
4. 适配H5端样式，支持响应式布局。

平台兼容性

Screen 插件使用说明

功能介绍

Screen 是一个基于 uni-app 开发的屏幕录制和回放插件，使用 rrweb 和 rrweb-player 实现屏幕操作的录制和回放功能。

主要功能

• 开始/停止屏幕录制
• 回放录制的操作
• 暂停/继续回放
• 重新播放
• 停止回放
• 清空录制记录

版本信息

• rrweb: ^2.0.0-alpha.4
• rrweb-player: ^1.0.0-alpha.4

安装方法

1. 将插件目录复制到 uni-app 项目的 pages 目录下
2. 在 pages.json 文件中注册页面
3. 安装依赖：

# 使用 npm
npm install rrweb@^2.0.0-alpha.4 rrweb-player@^1.0.0-alpha.4

# 或使用 yarn
yarn add rrweb@^2.0.0-alpha.4 rrweb-player@^1.0.0-alpha.4

使用说明

基本使用

1. 导航到录制页面
2. 点击「开始录制」按钮开始录制屏幕操作
3. 录制过程中，页面会显示「正在录制中...」的提示
4. 点击「停止录制」按钮停止录制
5. 录制完成后，点击「开始回放」按钮查看录制的操作
6. 在回放过程中，可以使用「暂停」、「停止回放」、「重新播放」按钮控制回放

注意事项

1. 本插件使用纯前端存储录制的事件，页面刷新后录制记录会丢失
2. 录制过程中，页面隐藏会自动暂停录制
3. 回放时，iframe 会被设置为允许执行脚本，以确保录制的操作能够正常回放
4. 由于使用了 UNSAFE_replayCanvas 选项，回放时可能存在安全风险，请谨慎使用
5. 录制的事件数量较多时，可能会影响页面性能

技术实现

• 使用 rrweb 进行屏幕录制
• 使用 rrweb-player 进行回放
• 使用 uni-app 的生命周期钩子管理录制和回放的状态
• 使用纯前端存储录制的事件

常见问题

回放时出现脚本执行被阻止的错误

已通过设置 UNSAFE_replayCanvas: true 选项解决，该选项会允许 iframe 执行脚本。

录制时页面隐藏后如何处理

插件会在页面隐藏时自动暂停录制，并显示提示信息。

如何清空录制记录

点击「清空录制」按钮即可清空当前的录制记录。