原文地址：https://blog.csdn.net/blackcat88/article/details/88972515
rrweb适用场景：
- 用户行为分析；
- 远程debug；
- 录制操作；
- 实时协作；
项目github：https://github.com/rrweb-io/rrweb ，觉得有用，记得帮他加个星~
开搞！
第一步：引入rrweb
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
第二步：开始录制
// rrweb行为录制
let events = [];
rrweb.record({
emit(event) {
// 用任意方式存储 event
console.log(event);
events.push(event);
},
});
第三步：存储录制数据
// save 函数用于将 events 发送至后端存入，并重置 events 数组
function save() {
if(events.length == 0){return;}
const body = JSON.stringify({ events });
events = [];
$.ajax({
type: "POST",
url: "http://192.168.0.198:8067/index.php?s=v1/webtools", //访问的链接
dataType: ‘text‘,
data:{
token:"token_xxx",
motion:body
},
success:function(res){ //成功的回调函数
var data = JSON.parse(res);
console.log(data.code);
},
error: function (e) {
}
});
}
// 每 10 秒调用一次 save 方法，避免请求过多
setInterval(save, 10 * 1000);
录制数据已经存储好了，如何查看录像？请继续，
第四步：查看录像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"/> <script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script> <script type="text/javascript" src="../js/jquery-3.2.0.min.js"></script> </head> <body> <p>this a test page --- test1.html --- rrweb录像演示</p> <button id="btn"> 开始演示</button><br> <script type="text/javascript"> document.querySelector("#btn").onclick = function(){ let token = ‘xxxtokenxxx‘; $.ajax({ type: "GET", url: "http://192.168.0.198:8067/index.php?s=v1/webtools/"+ token, //访问的链接 dataType: ‘text‘, success:function(res){ //成功的回调函数 var events = JSON.parse(res); new rrwebPlayer({ target: document.body, // 可以自定义 DOM 元素 data: { events, }, }); }, error: function (e) { console.log("error"); } }); } </script> </body> </html>
据了解，这套工具是参考LogRocket开发的。