76 lines
2.0 KiB
HTML
76 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>播放</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>
|
||
<style>
|
||
.replayer-wrapper {
|
||
left: 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body style="height: 100vh">
|
||
|
||
</body>
|
||
<script>
|
||
|
||
let replayer = null
|
||
|
||
// WebSocket构造函数，创建WebSocket对象
|
||
let ws = new WebSocket('ws://localhost:8080/play')
|
||
|
||
// 连接成功后的回调函数
|
||
ws.onopen = function (params) {
|
||
console.log('客户端连接成功')
|
||
};
|
||
|
||
// 从服务器接受到信息时的回调函数
|
||
ws.onmessage = function (e) {
|
||
let events = JSON.parse(e.data).events
|
||
addEvents(events)
|
||
};
|
||
|
||
// 连接关闭后的回调函数
|
||
ws.onclose = function (evt) {
|
||
console.log("关闭客户端连接");
|
||
};
|
||
|
||
// 连接失败后的回调函数
|
||
ws.onerror = function (evt) {
|
||
console.log("连接失败了");
|
||
};
|
||
|
||
// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，这样服务端会抛异常。
|
||
window.onbeforeunload = function () {
|
||
ws.close();
|
||
}
|
||
|
||
function addEvents(events) {
|
||
if (replayer == null) {
|
||
replayer = new rrwebPlayer({
|
||
target: document.body, // 可以自定义 DOM 元素
|
||
// 配置项
|
||
props: {
|
||
events: events,
|
||
height: '99vh',
|
||
UNSAFE_replayCanvas: true,
|
||
liveMode: true,
|
||
skipInactive: false,
|
||
autoPlay: true,
|
||
showController: false
|
||
},
|
||
});
|
||
replayer.play();
|
||
}
|
||
for (let i = 0; i < events.length; i++) {
|
||
console.log('添加事件：', events[i])
|
||
replayer.addEvent(events[i])
|
||
|
||
}
|
||
}
|
||
|
||
|
||
</script>
|
||
</html> |