使用rrweb实现页面录像

最新推荐文章于 2024-04-26 17:50:42 发布

mn_front

最新推荐文章于 2024-04-26 17:50:42 发布

阅读量2.2k

点赞数

分类专栏：其他

原文链接：https://blog.csdn.net/blackcat88/article/details/88972515

版权

其他专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

第四步：查看录像

<!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开发的。

mn_front

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
使用rrweb实现页面录像

rrweb适用场景：用户行为分析；远程debug；录制操作；实时协作；项目github：https://github.com/rrweb-io/rrweb  ，觉得有用，记得帮他加个星~官网：https://www.rrweb.io/ 开搞！第一步：引入rrweb<script src="https://cdn.jsdelivr.net/npm/rrweb@latest...
复制链接

扫一扫