Elysian的日常 - rrweb教程
type: channel
link: http://blog.icheguo.com/tag/rrweb教程/
items: web操作录制神器rrweb实现页面录像

web操作录制神器rrweb实现页面录像
type: item
date: 2021-09-16T23:54:00+08:00
description: rrweb适用场景：用户行为分析；远程debug；录制操作；实时协作；项目github：https://github.com/rrweb-io/rrweb ，觉得有用，记得帮他加个星~官网：https://www.rrweb.io/开搞！第一步：引入rrweb 第二步：开始录制// rrweb行为录制 let events = []; rrweb.record({ emit(event) { // 用任意方式存储 event console.log(event); events.push(event); }, });第三步：存储录制数据（本例采用php后台存储）// 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); （备注：后台php+mysql，代码省略。）录制数据已经存储好了，如何查看录像？请继续，第四步：查看录像 Document this a test page --- test1.html --- rrweb录像演示 开始演示 据了解，这套工具是参考LogRocket开发的。本文转至：https://blog.csdn.net/blackcat88/article/details/88972515官网文档：https://blog.csdn.net/blackcat88/article/details/88972515https://github.com/rrweb-io/rrweb下面是rrweb的原理介绍地址： rrweb：打开 web 页面录制与回放的黑盒子