使用rrweb实现页面录像

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，代码省略。）

录制数据已经存储好了，如何查看录像？请继续，

第四步：查看录像

    






	
this a test page --- test1.html  --- rrweb录像演示
  
	  开始演示

	

据了解，这套工具是参考LogRocket开发的。