前端神器rrweb实用案例及JS下载

背景：

关于中国保监会关于印发《保险销售行为可回溯管理暂行办法》的通知，公司要做投保流程的回溯功能，白话就是记录用户在购买保险流程的全部操作记录，通过截图或录屏的形式，如果用传统的方式，工作量将不可想象。

第二条本办法所称保险销售行为可回溯，是指保险公司、保险中介机构通过录音录像等技术手段采集视听资料、电子数据的方式，记录和保存保险销售过程关键环节，实现销售行为可回放、重要信息可查询、问题责任可确认。

偶然发现这款前端神器工具，首先关于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 里面。