rrWeb整体方案1、整体流程1.1、流程图生产负载调用rrWeb情况前端调用保存录制使用固定地址，调用预生产服务进行保存定时任务执行，设置地址配置为预生产地址1.2、功能说明1.2.1录制保存功能地址/rrWeb/saveRrWeb功能首次录制，生成本次录制的唯一id同一订单可能存在多个录制id录制id在当前录制流程中唯一，关闭录制或关闭浏览器重新进入开始录制，会生成新的id使用Redis记录录制id每次片段的顺序保存数据到backTrackRecord、backTrackVideo表保存录制数据到服务器中，保存目录/data/service/rrWeb/sava/录制id/片段数据/dat

rrweb背景rrweb是recordandreplaytheweb，是当下很流行的一个录制屏幕的开源库。与我们传统认知的录屏方式（如WebRTC）不同的是，rrweb录制的不是真正的视频流，而是一个记录页面DOM变化的JSON数组，因此不能录制整个显示器的屏幕，只能录制浏览器的一个页签(录屏)。rrweb事例展示流程图意义解决问题用户分析（常规的指标数据，只能做到一个统计。如果能通过录屏，我们能完整分析某个客户的行为。）重现bug（客户说有bug,但是复线不了，环境不一样，数据不一样。我们只能推断，但是有了录屏，我们就能很好的还原现场，知道本质操作）代替视频录制（录制体积更⼩、清晰度⽆损的产

文章目录前言一、rrweb与rrweb-player引入项目中二、使用步骤1.引入代码2.html部分代码3.script部分代码三、遇到的3个问题总结，全部都是找了很久解决办法没找到，自己解决的，希望对你们有所帮助四、有问题可以互相讨论哦前言今天项目中需要增加以及录屏bug和提交相关信息的需求，于是找了很多插件，最终选择了rrweb插件，这里实际记录vue3中使用该组件实现功能，还有遇到的几个问题和解决办法与思考一、rrweb与rrweb-player引入项目中npminstallrrwebnpminstallrrweb-player二、使用步骤1.引入代码import*asrrwebfro

文章目录前言一、rrweb与rrweb-player引入项目中二、使用步骤1.引入代码2.html部分代码3.script部分代码三、遇到的3个问题总结，全部都是找了很久解决办法没找到，自己解决的，希望对你们有所帮助四、有问题可以互相讨论哦前言今天项目中需要增加以及录屏bug和提交相关信息的需求，于是找了很多插件，最终选择了rrweb插件，这里实际记录vue3中使用该组件实现功能，还有遇到的几个问题和解决办法与思考一、rrweb与rrweb-player引入项目中npminstallrrwebnpminstallrrweb-player二、使用步骤1.引入代码import*asrrwebfro

rrweb实现页面回放功能实现页面可回溯rrwebgithub开源地址rrweb简介rrweb他是啥？*rrweb指的是’recordandreplaytheweb’，它是一个用于记录和回放用户在网络上的交互的工具。作为一个开发者可能在项目中你可能会遇到各种奇怪的需求。例如记录和回访网页上所有的操作记录。rrweb能干嘛？相信看到标题的同学都知道是用于记录用户在页面上的所有操作纪录，那么问题来了在日常开发中可以用在那些地方呢？答:微信小程序，h5小程序，uni-app，浏览器页面。（只要你所开发得东西是由html+css开发得就能实现录制回放）rrweb的录制原理？**就是记录你操作的元素并且