xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve standalone rrweb demo replay controls

Browse Source
This commit is contained in:
xugp
2026-04-01 12:00:00 +08:00
parent 38a1a0d33f
commit 01d6e87a53
1 changed files with 286 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
index.html
View File

@@ -108,6 +108,54 @@
margin: 10px 0;
padding-left: 20px;
}
.replay-controls {
margin-top: 15px;
padding: 15px;
border: 1px solid #d8e2ef;
border-radius: 8px;
background: #fff;
}
.replay-controls.disabled {
opacity: 0.6;
}
.replay-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.timeline {
flex: 1 1 240px;
margin: 0;
accent-color: #007bff;
}
.time-label {
min-width: 48px;
text-align: center;
color: #495057;
font-variant-numeric: tabular-nums;
}
.speed-controls {
display: flex;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
.speed-controls button,
#play-toggle-btn {
margin: 0;
}
.speed-controls button.active {
background: #17a2b8;
}
@media (max-width: 900px) {
.container {
flex-direction: column;
}
#replayer {
height: 320px !important;
}
}
</style>
</head>
<body>
@@ -151,6 +199,20 @@
<div class="panel">
<h2>▶️ 回放区域</h2>
<div id="replayer" style="width:100%; height:400px; border:2px solid #007bff; border-radius:8px; background:#f8f9fa;"></div>
<div id="replay-controls" class="replay-controls disabled">
<div class="replay-row">
<button id="play-toggle-btn" type="button" disabled>▶ 播放</button>
<span id="current-time" class="time-label">00:00</span>
<input id="timeline" class="timeline" type="range" min="0" max="0" step="1" value="0" disabled>
<span id="total-time" class="time-label">00:00</span>
</div>
<div class="speed-controls">
<button type="button" data-speed="0.5" disabled>0.5x</button>
<button type="button" data-speed="1" class="active" disabled>1x</button>
<button type="button" data-speed="2" disabled>2x</button>
<button type="button" data-speed="4" disabled>4x</button>
</div>
</div>
<div class="info-box" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<h3>🎬 回放控制</h3>
<p>播放器提供完整控制：</p>
@@ -163,86 +225,231 @@
</div>
</div>
<!-- rrweb CDN - 使用非模块化版本 -->
<link rel="stylesheet" href="./packages/rrweb-player/dist/style.css">
<!-- rrweb 浏览器版本 -->
<link rel="stylesheet" href="./packages/rrweb/dist/style.css">
<script src="./packages/rrweb/dist/rrweb.umd.cjs"></script>
<script src="./packages/rrweb-player/dist/rrweb-player.umd.cjs"></script>
<script>
let events = [];
let stopRecordingFn = null;
let player = null;
let replayer = null;
let replayMeta = null;
let replayFrame = null;
let isReplaying = false;
let currentSpeed = 1;
// 等待 rrweb 加载完成
function initWhenReady() {
if (
typeof rrweb !== 'undefined' &&
typeof rrweb.record === 'function' &&
typeof rrwebPlayer !== 'undefined'
) {
console.log('rrweb 与 rrweb-player 已加载，准备就绪');
setupButtons();
} else {
console.log('等待 rrweb / rrweb-player 加载...');
setTimeout(initWhenReady, 100);
function getReplayElements() {
return {
controls: document.getElementById('replay-controls'),
playToggle: document.getElementById('play-toggle-btn'),
timeline: document.getElementById('timeline'),
currentTime: document.getElementById('current-time'),
totalTime: document.getElementById('total-time'),
speedButtons: Array.from(document.querySelectorAll('#replay-controls [data-speed]')),
};
}
function formatTime(ms) {
const safeMs = Math.max(0, Math.floor(ms));
const totalSeconds = Math.floor(safeMs / 1000);
const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
const seconds = String(totalSeconds % 60).padStart(2, '0');
if (safeMs < 60000) {
const tenths = Math.floor((safeMs % 1000) / 100);
return `${minutes}:${seconds}.${tenths}`;
}
return `${minutes}:${seconds}`;
}
function updateStatus(text, type) {
const statusEl = document.getElementById('status-bar');
statusEl.className = `status-bar ${type}`;
statusEl.textContent = text;
}
function updatePlayToggle() {
const { playToggle } = getReplayElements();
playToggle.textContent = isReplaying ? '⏸ 暂停' : '▶ 播放';
}
function setActiveSpeed(speed) {
currentSpeed = speed;
const { speedButtons } = getReplayElements();
speedButtons.forEach((button) => {
button.classList.toggle('active', Number(button.dataset.speed) === speed);
});
}
function setReplayControlsEnabled(enabled) {
const { controls, playToggle, timeline, speedButtons } = getReplayElements();
controls.classList.toggle('disabled', !enabled);
playToggle.disabled = !enabled;
timeline.disabled = !enabled;
speedButtons.forEach((button) => {
button.disabled = !enabled;
});
}
function syncReplayUI() {
if (!replayer || !replayMeta) {
return;
}
const { timeline, currentTime, totalTime } = getReplayElements();
const timeOffset = Math.min(replayer.getCurrentTime(), replayMeta.totalTime);
timeline.max = String(replayMeta.totalTime);
timeline.value = String(Math.max(0, Math.floor(timeOffset)));
currentTime.textContent = formatTime(timeOffset);
totalTime.textContent = formatTime(replayMeta.totalTime);
if (isReplaying && timeOffset >= replayMeta.totalTime) {
isReplaying = false;
updatePlayToggle();
stopReplayLoop();
}
}
function getPlayerConstructor() {
if (typeof rrwebPlayer === 'function') {
return rrwebPlayer;
function stopReplayLoop() {
if (replayFrame !== null) {
cancelAnimationFrame(replayFrame);
replayFrame = null;
}
if (rrwebPlayer && typeof rrwebPlayer.Player === 'function') {
return rrwebPlayer.Player;
}
if (rrwebPlayer && typeof rrwebPlayer.default === 'function') {
return rrwebPlayer.default;
}
return null;
}
function setupButtons() {
document.getElementById('start-btn').onclick = startRecording;
document.getElementById('stop-btn').onclick = stopRecording;
function startReplayLoop() {
stopReplayLoop();
const tick = () => {
syncReplayUI();
if (isReplaying && replayer) {
replayFrame = requestAnimationFrame(tick);
} else {
replayFrame = null;
}
};
replayFrame = requestAnimationFrame(tick);
}
function destroyPlayer() {
const target = document.getElementById('replayer');
if (player && typeof player.$destroy === 'function') {
player.$destroy();
function resetReplayControls() {
replayMeta = null;
isReplaying = false;
stopReplayLoop();
setReplayControlsEnabled(false);
setActiveSpeed(1);
updatePlayToggle();
const { timeline, currentTime, totalTime } = getReplayElements();
timeline.max = '0';
timeline.value = '0';
currentTime.textContent = '00:00';
totalTime.textContent = '00:00';
}
function destroyReplay() {
stopReplayLoop();
if (replayer && typeof replayer.destroy === 'function') {
replayer.destroy();
}
player = null;
target.innerHTML = '';
replayer = null;
document.getElementById('replayer').innerHTML = '';
resetReplayControls();
}
function renderReplay() {
if (!events.length) {
return;
}
const PlayerConstructor = getPlayerConstructor();
if (!PlayerConstructor) {
throw new Error('rrweb-player 未正确加载');
}
destroyPlayer();
destroyReplay();
const target = document.getElementById('replayer');
player = new PlayerConstructor({
target,
props: {
events,
autoPlay: true,
showController: true,
speed: 1,
speedOption: [0.5, 1, 2, 4],
width: 1000,
height: 400,
},
replayer = new rrweb.Replayer(events, {
root: target,
speed: currentSpeed,
});
replayMeta = replayer.getMetaData();
setReplayControlsEnabled(true);
syncReplayUI();
replayer.play();
isReplaying = true;
updatePlayToggle();
startReplayLoop();
}
function toggleReplay() {
if (!replayer || !replayMeta) {
return;
}
const { timeline } = getReplayElements();
const timeOffset = Number(timeline.value);
if (isReplaying) {
replayer.pause();
isReplaying = false;
stopReplayLoop();
} else {
replayer.play(timeOffset);
isReplaying = true;
startReplayLoop();
}
updatePlayToggle();
syncReplayUI();
}
function seekReplay(timeOffset) {
if (!replayer || !replayMeta) {
return;
}
const safeOffset = Math.max(0, Math.min(timeOffset, replayMeta.totalTime));
if (isReplaying) {
replayer.play(safeOffset);
startReplayLoop();
} else {
replayer.pause(safeOffset);
}
syncReplayUI();
}
function changeReplaySpeed(speed) {
setActiveSpeed(speed);
if (replayer) {
replayer.setConfig({ speed });
}
}
function setupButtons() {
document.getElementById('start-btn').onclick = startRecording;
document.getElementById('stop-btn').onclick = stopRecording;
document.getElementById('play-toggle-btn').onclick = toggleReplay;
document.getElementById('timeline').addEventListener('input', (event) => {
const value = Number(event.target.value);
getReplayElements().currentTime.textContent = formatTime(value);
});
document.getElementById('timeline').addEventListener('change', (event) => {
seekReplay(Number(event.target.value));
});
getReplayElements().speedButtons.forEach((button) => {
button.addEventListener('click', () => {
changeReplaySpeed(Number(button.dataset.speed));
});
});
}
// 开始录制
function initWhenReady() {
if (
typeof rrweb !== 'undefined' &&
typeof rrweb.record === 'function' &&
typeof rrweb.Replayer === 'function'
) {
console.log('rrweb 已加载，准备就绪');
setupButtons();
resetReplayControls();
} else {
console.log('等待 rrweb 加载...');
setTimeout(initWhenReady, 100);
}
}
function startRecording() {
if (typeof stopRecordingFn === 'function') {
stopRecordingFn();
}
stopRecordingFn = null;
events = [];
destroyPlayer();
destroyReplay();
try {
stopRecordingFn = rrweb.record({
emit(event) {
@@ -251,7 +458,7 @@
recordCanvas: true,
recordCrossOriginIframes: true,
recordAfter: 'DOMContentLoaded',
ignoreSelector: '.status-bar, .info-box, #replayer',
ignoreSelector: '.status-bar, .info-box, #replayer, #replay-controls',
});
updateStatus('🔴 正在录制...', 'recording');
document.getElementById('start-btn').disabled = true;
@@ -264,36 +471,28 @@
}
}
// 停止录制
function stopRecording() {
if (typeof stopRecordingFn === 'function') {
stopRecordingFn();
stopRecordingFn = null;
updateStatus(`✅ 已录制 ${events.length} 个事件`, 'idle');
document.getElementById('start-btn').disabled = false;
document.getElementById('stop-btn').disabled = true;
try {
renderReplay();
console.log('回放已初始化');
} catch (error) {
console.error('初始化回放失败:', error);
alert('初始化回放失败: ' + error.message);
return;
}
console.log('录制完成，事件数量：', events.length);
console.log('事件列表：', events);
alert(`录制完成！\n共记录了 ${events.length} 个事件。\n请在右侧查看回放与控制条。`);
if (typeof stopRecordingFn !== 'function') {
return;
}
stopRecordingFn();
stopRecordingFn = null;
updateStatus(`✅ 已录制 ${events.length} 个事件`, 'idle');
document.getElementById('start-btn').disabled = false;
document.getElementById('stop-btn').disabled = true;
try {
renderReplay();
console.log('回放已初始化');
} catch (error) {
console.error('初始化回放失败:', error);
alert('初始化回放失败: ' + error.message);
return;
}
console.log('录制完成，事件数量：', events.length);
console.log('事件列表：', events);
alert(`录制完成！\n共记录了 ${events.length} 个事件。\n请在右侧查看回放与控制条。`);
}
// 更新状态
function updateStatus(text, type) {
const statusEl = document.getElementById('status-bar');
statusEl.className = `status-bar ${type}`;
statusEl.textContent = text;
}
// 测试函数
function changeColor() {
const colors = ['#f8f9fa', '#e3f2fd', '#fff3cd', '#d1ecf1d', '#f8d7da', '#d6d8db', '#cce5ff', '#e2d9f7'];
document.querySelector('.test-area').style.background = colors[Math.floor(Math.random() * colors.length)];
@@ -317,12 +516,17 @@
}
function clearAll() {
if (typeof stopRecordingFn === 'function') {
stopRecordingFn();
stopRecordingFn = null;
}
events = [];
destroyPlayer();
document.getElementById('start-btn').disabled = false;
document.getElementById('stop-btn').disabled = true;
destroyReplay();
updateStatus('⚪ 等待录制', 'idle');
}
// 开始初始化
setTimeout(initWhenReady, 100);
</script>
</body>