h5页面视频回溯rrweb

王道吉

于 2024-03-20 11:02:06 发布

阅读量180

点赞数 2

分类专栏： rrweb 文章标签： web vue.js 前端

本文链接：https://blog.csdn.net/qq_41314448/article/details/136869221

版权

rrweb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

回溯rrweb

// rrweb版本2.0.0-alpha.11
npm install rrweb -s

使用（适用于vue main.js 或 某个页面）
import * as rrweb from 'rrweb'

// 录制
let events = []
rrweb.record({
	emit(event) {
		events.push(event)
		if(events.length === 100) {
			// 调用接口，清空数组
			// api
			events = []
		}
	}
})
// 回放
const replayer = new rrweb.Replayer(events)
replayer.play()

html使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link
		  rel="stylesheet"
		  href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
		/>
		<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
		<style>
			.rrweb-item{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="rrweb-item">
			<div>姓名</div>
			<input type="text"/>
		</div>
		<div class="rrweb-item">
			<div>手机号</div>
			<input type="tel"/>
		</div>
		<div class="rrweb-item">
			<div>密码</div>
			<input type="password"/>
		</div>
		<div class="rrweb-item">
			<div>上传文件</div>
			<input type="file"/>
		</div>
	</body>
</html>

<script>
	let events = []
	// 代码录制
	rrweb.record({
		emit(event) {
			events.push(event)
			if(events.length == 100) {
				// 调用接口，清空数组
				// api
				sessionStorage.setItem('rrweb', JSON.stringify(events))
				events = []
			}
		},
		sampling: {
			// 不录制鼠标移动事件
			mousemove: false,
			// 录制鼠标交互事件
			mouseInteraction: {
				MouseUp: false,
				MouseDown: false,
				Click: true,
				ContextMenu: false,
				DblClick: false,
				Focus: false,
				Blur: false,
				TouchStart: false,
				TouchEnd: false,
			},
			// 设置滚动事件的触发频率
			scroll: 150 // 每 150ms 最多触发一次
			// 设置媒体交互事件的间隔
			media: 800
		}
	})
	
	// 回放
	// let events = JSON.parse(sessionStorage.getItem('rrweb'))
	// const replayer = new rrweb.Replayer(events);
	// replayer.play();
</script>