luoy
/
buried-point


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
							<!DOCTYPE html>
<html lang="en">
<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>
  这是一个空页面
  <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>
  // 展示操作系统和用户唯一标识
  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('os').innerText = JSBridge.getOS();
    JSBridge.getUserId(function (userId) {
      document.getElementById('userId').innerText = userId;
    });
  });
  const tracker = new Tracker({ 
    baseUrl: 'http://192.168.3.9:3000/api/log',
    heartbeatInterval: 5000,
  });
  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>