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/88972515
https://github.com/rrweb-io/rrweb

下面是rrweb的原理介绍地址：
rrweb：打开 web 页面录制与回放的黑盒子