背景：
关于中国保监会关于印发《保险销售行为可回溯管理暂行办法》的通知，公司要做投保流程的回溯功能，白话就是记录用户在购买保险流程的全部操作记录，通过截图或录屏的形式，如果用传统的方式，工作量将不可想象。
第二条 本办法所称保险销售行为可回溯，是指保险公司、保险中介机构通过录音录像等技术手段采集视听资料、电子数据的方式，记录和保存保险销售过程关键环节，实现销售行为可回放、重要信息可查询、问题责任可确认。
偶然发现这款前端神器工具，首先关于rrweb：
这个工具能将用户在 Web 页面上的操作过程记录下来，并转成可序列化的日志数据，也可进行回放。程序员可以拿它来远程调试 Bug，产品经理可以拿来收集分析用户行为，感觉还挺实用。
尊重成果，前人铺路：
- 知乎大神分析原理：https://zhuanlan.zhihu.com/p/60639266
- rrweb官网：https://www.rrweb.io/
- rrweb GIT项目地址：https://github.com/rrweb-io/rrweb
- CSDN大神的案例：https://blog.csdn.net/blackcat88/article/details/88972515
1.head引用文件
<head>
<meta charset="UTF-8">
<title>rrweb测试</title>
<script src="js/jquery.min.js"></script>
<!--rrweb对象，录制使用-->
<script src="js/rrweb.min.js"></script>
<script src="js/rrweb-record.min.js"></script>
<!--回放用到的js,和css-->
<script src="js/rrweb-index.js"></script>
<link rel="stylesheet" href="css/rrweb.min.css">
</head>
2.随便写的html代码，模拟业务网站等
<body>
<div style="float: left;">
<h1>这里模拟一些html代码：</h1>
<label>用户名</label><input type="text" style="height: 30px;width: 200px;">
<label>密码</label><input type="password" style="height: 30px;width: 200px;">
<label>邮箱</label><input type="email" style="height: 30px;width: 200px;">
<label>备注</label><textarea style="height: 80px;width: 200px;"></textarea>
</div>
<div style="float: left;">
<h1>模拟背景颜色，用来检验录屏画质</h1>
<div style="width: 100%;height: 50px;background-color: red;"></div>
<div style="width: 100%;height: 50px;background-color: green;"></div>
<div style="width: 100%;height: 50px;background-color: #ff50d0;"></div>
<div style="width: 100%;height: 50px;background-color: #7eff1f;"></div>
</div>
<p></p>
<div style="float: left;">
<h1>视频回放</h1>
<div id="playback" style="width: 1000px;height: 500px;background-color: #cccccc"></div>
</div>
<button onclick="get_start()">点击录制</button>
<button onclick="playback()">点击播放</button>
</body>
3.javascript函数
<script>
//1.存放DOM节点数据
let events = [];
//2.点击录制
function get_start() {
//rrwebMin 为启动对象
//record() 方法启动录制
//emit会监听所有的DOM的动作， 鼠标等，
rrwebMin.record({
emit(event) {
// 用任意方式存 储 event
console.log(event);
events.push(event);
},
});
alert('正在录制')
}
//3.这一步，应该把数据转为JSON ，然后发送到后台存储，可以写个循环，10S发送一次，再定义一个窗口关闭事件监听，最后关闭时发送一次数据
//SON.stringify({ events });
//4.点击回放
function playback() {
new rrwebPlayer({
target: document.getElementById('playback'), // 可以自定义 DOM 元素
data: {events,},
});
}
</script>
点击开始时，打开console，可以看到打印的每次记录的DOM数据
image.png
源码连接：
链接：https://pan.baidu.com/s/1BQ78hA8f3VHqaHuOTUgh6A
提取码：tpdb
一些注意事项
password类型的输入框在回放中，不显示，小黑点也不显示。
回放是以Iframe镶嵌其中。
录制和回放可以分开，如果作为监控功能，在WEB中把录制嵌入，数据传入后台保存，以后再导出数据进行回放。
IE好像有兼容问题，还没来得及试。
录制动画也没问题，项目中使用了可以。
回放的css文件里面看了下是针对鼠标样式，回放的Iframe样式有点偏差，样式应该是写在 rrweb-index.js 里面。
网友评论