搜索到
1
篇与
rrweb教程
的结果
-
web操作录制神器rrweb实现页面录像 rrweb适用场景：用户行为分析；远程debug；录制操作；实时协作；项目github：https://github.com/rrweb-io/rrweb ，觉得有用，记得帮他加个星~官网：https://www.rrweb.io/开搞！第一步：引入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); }, });第三步：存储录制数据（本例采用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，代码省略。）录制数据已经存储好了，如何查看录像？请继续，第四步：查看录像<!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开发的。本文转至：https://blog.csdn.net/blackcat88/article/details/88972515官网文档：https://blog.csdn.net/blackcat88/article/details/88972515https://github.com/rrweb-io/rrweb下面是rrweb的原理介绍地址： rrweb：打开 web 页面录制与回放的黑盒子
