|
|
@@ -3,6 +3,9 @@
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>Document</title>
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
|
|
|
+ <link href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css" rel="stylesheet" />
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
@@ -10,6 +13,11 @@
|
|
|
<button id="btn" data-track>点击我</button>
|
|
|
<div>操作系统: <span id="os"></span></div>
|
|
|
<div>用户唯一标识: <span id="userId"></span></div>
|
|
|
+
|
|
|
+ <button onclick="startRecording()">开始录制</button>
|
|
|
+ <button onclick="stopRecording()">停止录制</button>
|
|
|
+ <button onclick="replay()">回放录制</button>
|
|
|
+ <div id="replay"></div>
|
|
|
</body>
|
|
|
<script src="buriedPoint.js"></script>
|
|
|
<script>
|
|
|
@@ -26,4 +34,47 @@
|
|
|
});
|
|
|
tracker.init();
|
|
|
</script>
|
|
|
+<script>
|
|
|
+ let events = [];
|
|
|
+ let stopFn = null;
|
|
|
+
|
|
|
+ function startRecording() {
|
|
|
+ events = []; // 清空之前的记录
|
|
|
+ stopFn = rrweb.record({
|
|
|
+ emit(event) {
|
|
|
+ events.push(event);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ alert("开始录制用户会话");
|
|
|
+ }
|
|
|
+
|
|
|
+ function stopRecording() {
|
|
|
+ if (stopFn) {
|
|
|
+ stopFn(); // 停止录制
|
|
|
+ alert("已停止录制，共记录 " + events.length + " 个事件");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function replay() {
|
|
|
+ if (!events.length) {
|
|
|
+ alert("请先录制会话！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清空旧回放
|
|
|
+ document.getElementById('replay').innerHTML = '';
|
|
|
+
|
|
|
+ // 创建播放器
|
|
|
+ new rrwebPlayer({
|
|
|
+ target: document.getElementById('replay'),
|
|
|
+ props: {
|
|
|
+ events: events,
|
|
|
+ width: 800,
|
|
|
+ height: 600,
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log('event', event);
|
|
|
+ }
|
|
|
+</script>
|
|
|
</html>
|
