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

Fix local rrweb playback flow and add demo page

Browse Source
This commit is contained in:
xugp
2026-04-01 12:00:00 +08:00
parent ae1ba2a277
commit d508aabb53
7 changed files with 744 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

329
index.html Normal file
View File

@@ -0,0 +1,329 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rrweb 示例</title>
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
}
h1 {
color: #333;
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
}
.container {
display: flex;
gap: 20px;
}
.panel {
flex: 1;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
background: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.test-area {
min-height: 300px;
border: 2px dashed #007bff;
padding: 20px;
margin: 15px 0;
border-radius: 8px;
background: #f8f9fa;
}
button {
padding: 12px 24px;
margin: 8px;
cursor: pointer;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
}
button:hover {
background: #0056b3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,123,255,0.4);
}
button:disabled {
background: #6c757d;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.record-btn {
background: #28a745;
min-width: 120px;
}
.record-btn:hover {
background: #1e7e34;
}
.stop-btn {
background: #dc3545;
min-width: 120px;
}
.stop-btn:hover {
background: #b02a37;
}
.status-bar {
padding: 15px;
margin: 15px 0;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
text-align: center;
}
.status-bar.idle {
background: #e2e3e5;
color: #383d41;
}
.status-bar.recording {
background: #d4edda;
color: #155724;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.info-box {
padding: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
color: white;
margin-top: 15px;
}
.info-box h3 {
margin-top: 0;
}
.info-box ul {
margin: 10px 0;
padding-left: 20px;
}
</style>
</head>
<body>
<h1>🎥 rrweb 录制与回放</h1>
<div class="container">
<div class="panel">
<h2>📹 录制区域</h2>
<div class="test-area">
<h3 style="margin-top:0;">在此区域进行操作</h3>
<p>点击按钮、输入文字，所有操作都会被记录：</p>
<button onclick="changeColor()">🎨 随机变色</button>
<button onclick="addCounter()">🔢 添加计数器</button>
<button onclick="showAlert()">💬 测试弹窗</button>
<div id="counters" style="display:flex; gap:10px; flex-wrap:wrap; margin-top:15px;"></div>
</div>
<div id="status-bar" class="status-bar idle">
⚪ 等待录制
</div>
<div style="margin: 15px 0;">
<button id="start-btn" class="record-btn" onclick="startRecording()">▶ 开始录制</button>
<button id="stop-btn" class="stop-btn" onclick="stopRecording()" disabled>⏹ 停止录制</button>
<button onclick="clearAll()">🗑️ 清空</button>
</div>
<div class="info-box">
<h3>✨ 功能说明</h3>
<ul>
<li>点击"开始录制"开始记录</li>
<li>点击"停止录制"结束记录</li>
<li>右侧会自动回放录制的操作</li>
<li>支持播放速度控制</li>
</ul>
</div>
</div>
<div class="panel">
<h2>▶️ 回放区域</h2>
<div id="replayer" style="width:100%; height:400px; border:2px solid #007bff; border-radius:8px; background:#f8f9fa;"></div>
<div class="info-box" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
<h3>🎬 回放控制</h3>
<p>播放器提供完整控制：</p>
<ul>
<li>时间轴拖动：点击任意位置跳转</li>
<li>播放/暂停：控制播放状态</li>
<li>速度控制：0.5x、1x、2x、4x</li>
</ul>
</div>
</div>
</div>
<!-- rrweb CDN - 使用非模块化版本 -->
<link rel="stylesheet" href="./packages/rrweb-player/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;
// 等待 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 getPlayerConstructor() {
if (typeof rrwebPlayer === 'function') {
return rrwebPlayer;
}
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 destroyPlayer() {
const target = document.getElementById('replayer');
if (player && typeof player.$destroy === 'function') {
player.$destroy();
}
player = null;
target.innerHTML = '';
}
function renderReplay() {
if (!events.length) {
return;
}
const PlayerConstructor = getPlayerConstructor();
if (!PlayerConstructor) {
throw new Error('rrweb-player 未正确加载');
}
destroyPlayer();
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,
},
});
}
// 开始录制
function startRecording() {
events = [];
destroyPlayer();
try {
stopRecordingFn = rrweb.record({
emit(event) {
events.push(event);
},
recordCanvas: true,
recordCrossOriginIframes: true,
recordAfter: 'DOMContentLoaded',
ignoreSelector: '.status-bar, .info-box, #replayer',
});
updateStatus('🔴 正在录制...', 'recording');
document.getElementById('start-btn').disabled = true;
document.getElementById('stop-btn').disabled = false;
console.log('录制已启动');
} catch (error) {
updateStatus('⚪ 等待录制', 'idle');
console.error('启动录制失败:', error);
alert('启动录制失败: ' + error.message);
}
}
// 停止录制
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请在右侧查看回放与控制条。`);
}
}
// 更新状态
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)];
}
function addCounter() {
const counters = document.getElementById('counters');
const count = counters.children.length;
const div = document.createElement('div');
div.style.cssText = 'padding:10px 20px; background:white; border:2px solid #007bff; border-radius:8px; font-size:24px; font-weight:bold; cursor:pointer;';
div.innerHTML = `<span>#${count + 1}</span>`;
div.onclick = function() {
const span = this.querySelector('span');
span.innerText = parseInt(span.innerText) + 1;
};
counters.appendChild(div);
}
function showAlert() {
alert('这是一个测试弹窗！\nrrweb 会记录并回放这个弹窗操作。');
}
function clearAll() {
events = [];
destroyPlayer();
updateStatus('⚪ 等待录制', 'idle');
}
// 开始初始化
setTimeout(initWhenReady, 100);
</script>
</body>
</html>

824
packages/rrweb-player/.svelte-kit/ambient.d.ts vendored
View File

@@ -26,261 +26,179 @@
* ``` * ```
*/ */
declare module '$env/static/private' { declare module '$env/static/private' {
export const SUDO_GID: string; export const ACLOCAL_PATH: string;
export const GITHUB_STATE: string; export const ALLUSERSPROFILE: string;
export const COPILOT_AGENT_ACTION: string; export const ANTHROPIC_AUTH_TOKEN: string;
export const npm_package_scripts_test_cross_platform_build: string; export const ANTHROPIC_BASE_URL: string;
export const npm_package_devDependencies_rollup: string; export const APPDATA: string;
export const npm_package_devDependencies__types_node: string; export const CLAUDECODE: string;
export const COPILOT_AGENT_START_TIME_SEC: string; export const CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC: string;
export const CURL_CA_BUNDLE: string; export const CLAUDE_CODE_ENTRYPOINT: string;
export const DOTNET_NOLOGO: string; export const COMMONPROGRAMFILES: string;
export const npm_package_devDependencies_vitest: string; export const CommonProgramW6432: string;
export const MAIL: string; export const COMPUTERNAME: string;
export const NODE_EXTRA_CA_CERTS: string; export const COMSPEC: string;
export const USER: string; export const CONFIG_SITE: string;
export const npm_package_bin_svelte_kit: string; export const COREPACK_ENABLE_AUTO_PIN: string;
export const npm_package_dependencies_sirv: string; export const DISPLAY: string;
export const npm_package_dependencies_sade: string; export const DriverData: string;
export const npm_package_dependencies_mrmime: string; export const EXEPATH: string;
export const npm_package_dependencies_magic_string: string; export const GIT_EDITOR: string;
export const npm_config_version_commit_hooks: string;
export const npm_config_user_agent: string;
export const SHOULD_CONTINUE: string;
export const CI: string;
export const npm_package_scripts_generate_version: string;
export const npm_package_dependencies__types_cookie: string;
export const npm_config_bin_links: string;
export const XDG_SESSION_TYPE: string;
export const RUNNER_ENVIRONMENT: string;
export const GITHUB_ENV: string;
export const COPILOT_AGENT_ONLINE_EVALUATION_DISABLED: string;
export const PIPX_HOME: string;
export const npm_node_execpath: string;
export const npm_package_devDependencies_vite: string;
export const npm_package_devDependencies__sveltejs_vite_plugin_svelte: string;
export const npm_config_init_version: string;
export const JAVA_HOME_8_X64: string;
export const SHLVL: string;
export const npm_package_exports___node_types: string;
export const npm_package_files_0: string;
export const COPILOT_AGENT_RUNTIME_VERSION: string;
export const HOME: string; export const HOME: string;
export const OLDPWD: string; export const HOMEDRIVE: string;
export const npm_package_files_1: string; export const HOMEPATH: string;
export const npm_package_repository_directory: string; export const HOSTNAME: string;
export const RUNNER_TEMP: string; export const INFOPATH: string;
export const GITHUB_EVENT_PATH: string; export const INIT_CWD: string;
export const CAROOT: string;
export const COPILOT_AGENT_FIREWALL_RULESET_ALLOW_LIST: string;
export const npm_package_files_2: string;
export const JAVA_HOME_11_X64: string;
export const COPILOT_AGENT_MCP_SERVER_TEMP: string;
export const PIPX_BIN_DIR: string;
export const GITHUB_REPOSITORY_OWNER: string;
export const npm_package_engines_node: string;
export const npm_package_exports___vite_import: string;
export const npm_package_files_3: string;
export const npm_package_devDependencies_svelte_preprocess: string;
export const npm_config_init_license: string;
export const GRADLE_HOME: string;
export const ANDROID_NDK_LATEST_HOME: string;
export const JAVA_HOME_21_X64: string;
export const GITHUB_RETENTION_DAYS: string;
export const npm_package_files_4: string;
export const npm_config_version_tag_prefix: string;
export const GITHUB_REPOSITORY_OWNER_ID: string;
export const POWERSHELL_DISTRIBUTION_CHANNEL: string;
export const SSL_CERT_FILE: string;
export const AZURE_EXTENSION_DIR: string;
export const GITHUB_HEAD_REF: string;
export const npm_package_scripts_check: string;
export const npm_package_files_5: string;
export const npm_package_dependencies_tiny_glob: string;
export const SYSTEMD_EXEC_PID: string;
export const DBUS_SESSION_BUS_ADDRESS: string;
export const npm_package_scripts_postinstall: string;
export const npm_package_files_6: string;
export const GITHUB_GRAPHQL_URL: string;
export const GITHUB_DOWNLOADS_URL: string;
export const npm_package_devDependencies_typescript: string;
export const npm_package_devDependencies__types_connect: string;
export const npm_package_description: string;
export const JAVA_HOME_25_X64: string;
export const NVM_DIR: string;
export const npm_package_readmeFilename: string;
export const npm_package_types: string;
export const npm_package_homepage: string;
export const DOTNET_SKIP_FIRST_TIME_EXPERIENCE: string;
export const COPILOT_JOB_EVENT_TYPE: string;
export const JAVA_HOME_17_X64: string;
export const ImageVersion: string;
export const SUDO_UID: string;
export const npm_package_exports___hooks_types: string;
export const npm_package_devDependencies__playwright_test: string;
export const BLACKBIRD_MODE: string;
export const LOGNAME: string;
export const COPILOT_AGENT_PR_COMMIT_COUNT: string;
export const RUNNER_OS: string;
export const GITHUB_API_URL: string;
export const GOROOT_1_22_X64: string;
export const COPILOT_AGENT_COMMIT_LOGIN: string;
export const SWIFT_PATH: string;
export const npm_package_type: string;
export const COPILOT_USE_SESSIONS: string;
export const CHROMEWEBDRIVER: string;
export const COPILOT_AGENT_CONTENT_FILTER_MODE: string;
export const GOROOT_1_23_X64: string;
export const JOURNAL_STREAM: string;
export const GITHUB_WORKFLOW: string;
export const _: string;
export const COPILOT_AGENT_BRANCH_NAME: string;
export const MEMORY_PRESSURE_WATCH: string;
export const XDG_SESSION_CLASS: string;
export const GOROOT_1_24_X64: string;
export const npm_package_scripts_lint: string;
export const npm_config_registry: string;
export const ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: string;
export const COPILOT_AGENT_FIREWALL_ENABLE_RULESET_ALLOW_LIST: string;
export const GOROOT_1_25_X64: string;
export const GITHUB_RUN_ID: string;
export const TERM: string;
export const XDG_SESSION_ID: string;
export const GITHUB_REF_TYPE: string;
export const BOOTSTRAP_HASKELL_NONINTERACTIVE: string;
export const GITHUB_WORKFLOW_SHA: string;
export const GITHUB_BASE_REF: string;
export const ImageOS: string;
export const COPILOT_MCP_ENABLED: string;
export const npm_package_exports___import: string;
export const npm_package_devDependencies_dts_buddy: string;
export const npm_package_dependencies_kleur: string;
export const npm_package_dependencies_devalue: string;
export const npm_config_ignore_scripts: string;
export const COPILOT_AGENT_CALLBACK_URL: string;
export const GITHUB_WORKFLOW_REF: string;
export const GITHUB_ACTION_REPOSITORY: string;
export const ENABLE_RUNNER_TRACING: string;
export const npm_package_exports___package_json: string;
export const npm_package_peerDependencies_svelte: string;
export const PATH: string;
export const NODE: string;
export const COPILOT_AGENT_INJECTED_SECRET_NAMES: string;
export const ANT_HOME: string;
export const DOTNET_MULTILEVEL_LOOKUP: string;
export const RUNNER_TRACKING_ID: string;
export const INVOCATION_ID: string;
export const RUNNER_TOOL_CACHE: string;
export const GITHUB_UPLOADS_URL: string;
export const REQUESTS_CA_BUNDLE: string;
export const npm_package_repository_type: string;
export const npm_package_name: string;
export const GITHUB_ACTION: string;
export const GITHUB_RUN_NUMBER: string;
export const GITHUB_TRIGGERING_ACTOR: string;
export const COPILOT_EXPERIMENTS: string;
export const RUNNER_ARCH: string;
export const XDG_RUNTIME_DIR: string;
export const AGENT_TOOLSDIRECTORY: string;
export const npm_package_scripts_test_integration: string;
export const npm_package_exports___node_polyfills_import: string;
export const npm_package_devDependencies__types_set_cookie_parser: string;
export const SSL_CERT_DIR: string;
export const npm_package_scripts_test_unit: string;
export const npm_package_exports___vite_types: string;
export const npm_config_ignore_path: string;
export const LANG: string;
export const VCPKG_INSTALLATION_ROOT: string;
export const CONDA: string;
export const RUNNER_NAME: string;
export const XDG_CONFIG_HOME: string;
export const GITHUB_REF_NAME: string;
export const GITHUB_REPOSITORY: string;
export const npm_lifecycle_script: string;
export const npm_package_scripts_test_cross_platform_dev: string;
export const SUDO_COMMAND: string;
export const ANDROID_NDK_ROOT: string;
export const GITHUB_ACTION_REF: string;
export const DEBIAN_FRONTEND: string;
export const npm_package_scripts_test: string;
export const npm_package_dependencies_esm_env: string;
export const npm_config_version_git_message: string;
export const SHELL: string;
export const GITHUB_REPOSITORY_ID: string;
export const GITHUB_ACTIONS: string;
export const CPD_SAVE_TRAJECTORY_OUTPUT: string;
export const npm_lifecycle_event: string;
export const npm_package_repository_url: string;
export const npm_package_version: string;
export const GITHUB_REF_PROTECTED: string;
export const npm_config_argv: string;
export const npm_package_scripts_generate_types: string;
export const npm_package_scripts_check_all: string;
export const npm_package_devDependencies_svelte: string;
export const npm_package_dependencies_cookie: string;
export const GITHUB_WORKSPACE: string;
export const SUDO_USER: string;
export const ACCEPT_EULA: string;
export const DOTNET_SYSTEM_NET_DISABLEIPV6: string;
export const GITHUB_JOB: string;
export const YARN_IGNORE_PATH: string;
export const npm_package_exports___node_import: string;
export const GITHUB_SHA: string;
export const GITHUB_RUN_ATTEMPT: string;
export const COPILOT_AGENT_DEBUG: string;
export const npm_package_devDependencies__types_sade: string;
export const npm_config_version_git_tag: string;
export const npm_config_version_git_sign: string;
export const GITHUB_REF: string;
export const COPILOT_AGENT_ISSUE_NUMBER: string;
export const COPILOT_AGENT_SOURCE_ENVIRONMENT: string;
export const GITHUB_ACTOR: string;
export const FIREWALL_RULESET_CONTENT: string;
export const ANDROID_SDK_ROOT: string;
export const npm_package_license: string;
export const npm_config_strict_ssl: string;
export const npm_package_scripts_format: string;
export const GITHUB_PATH: string;
export const JAVA_HOME: string; export const JAVA_HOME: string;
export const PWD: string; export const LANG: string;
export const GITHUB_ACTOR_ID: string; export const LOCALAPPDATA: string;
export const RUNNER_WORKSPACE: string; export const LOGONSERVER: string;
export const MANPATH: string;
export const MINGW_CHOST: string;
export const MINGW_PACKAGE_PREFIX: string;
export const MINGW_PREFIX: string;
export const MSYSTEM: string;
export const MSYSTEM_CARCH: string;
export const MSYSTEM_CHOST: string;
export const MSYSTEM_PREFIX: string;
export const NODE: string;
export const NoDefaultCurrentDirectoryInExePath: string;
export const npm_config_argv: string;
export const npm_config_bin_links: string;
export const npm_config_ignore_optional: string;
export const npm_config_ignore_path: string;
export const npm_config_ignore_scripts: string;
export const npm_config_init_license: string;
export const npm_config_init_version: string;
export const npm_config_registry: string;
export const npm_config_save_prefix: string;
export const npm_config_strict_ssl: string;
export const npm_config_user_agent: string;
export const npm_config_version_commit_hooks: string;
export const npm_config_version_git_message: string;
export const npm_config_version_git_sign: string;
export const npm_config_version_git_tag: string;
export const npm_config_version_tag_prefix: string;
export const npm_execpath: string; export const npm_execpath: string;
export const npm_lifecycle_event: string;
export const npm_lifecycle_script: string;
export const npm_node_execpath: string;
export const npm_package_bin_svelte_kit: string;
export const npm_package_dependencies_cookie: string;
export const npm_package_dependencies_devalue: string;
export const npm_package_dependencies_esm_env: string;
export const npm_package_dependencies_import_meta_resolve: string;
export const npm_package_dependencies_kleur: string;
export const npm_package_dependencies_magic_string: string;
export const npm_package_dependencies_mrmime: string;
export const npm_package_dependencies_sade: string;
export const npm_package_dependencies_set_cookie_parser: string; export const npm_package_dependencies_set_cookie_parser: string;
export const COPILOT_AGENT_PR_NUMBER: string; export const npm_package_dependencies_sirv: string;
export const HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: string; export const npm_package_dependencies_tiny_glob: string;
export const GITHUB_EVENT_NAME: string; export const npm_package_dependencies__types_cookie: string;
export const HOMEBREW_NO_AUTO_UPDATE: string; export const npm_package_description: string;
export const ANDROID_HOME: string; export const npm_package_devDependencies_dts_buddy: string;
export const GITHUB_SERVER_URL: string; export const npm_package_devDependencies_rollup: string;
export const GECKOWEBDRIVER: string; export const npm_package_devDependencies_svelte: string;
export const GHCUP_INSTALL_BASE_PREFIX: string; export const npm_package_devDependencies_svelte_preprocess: string;
export const GITHUB_OUTPUT: string; export const npm_package_devDependencies_typescript: string;
export const npm_package_devDependencies_vite: string;
export const npm_package_devDependencies_vitest: string;
export const npm_package_devDependencies__playwright_test: string;
export const npm_package_devDependencies__sveltejs_vite_plugin_svelte: string;
export const npm_package_devDependencies__types_connect: string;
export const npm_package_devDependencies__types_node: string;
export const npm_package_devDependencies__types_sade: string;
export const npm_package_devDependencies__types_set_cookie_parser: string;
export const npm_package_engines_node: string;
export const npm_package_exports___hooks_import: string;
export const npm_package_exports___hooks_types: string;
export const npm_package_exports___import: string;
export const npm_package_exports___node_import: string;
export const npm_package_exports___node_polyfills_import: string;
export const npm_package_exports___node_polyfills_types: string;
export const npm_package_exports___node_types: string;
export const npm_package_exports___package_json: string;
export const npm_package_exports___types: string; export const npm_package_exports___types: string;
export const EDGEWEBDRIVER: string; export const npm_package_exports___vite_import: string;
export const COPILOT_EXPERIMENT_ASSIGNMENT_CONTEXT: string; export const npm_package_exports___vite_types: string;
export const npm_package_files_0: string;
export const npm_package_files_1: string;
export const npm_package_files_2: string;
export const npm_package_files_3: string;
export const npm_package_files_4: string;
export const npm_package_files_5: string;
export const npm_package_files_6: string;
export const npm_package_homepage: string;
export const npm_package_license: string;
export const npm_package_name: string;
export const npm_package_peerDependencies_svelte: string;
export const npm_package_peerDependencies_vite: string; export const npm_package_peerDependencies_vite: string;
export const npm_package_peerDependencies__sveltejs_vite_plugin_svelte: string; export const npm_package_peerDependencies__sveltejs_vite_plugin_svelte: string;
export const npm_config_save_prefix: string; export const npm_package_readmeFilename: string;
export const npm_config_ignore_optional: string; export const npm_package_repository_directory: string;
export const ANDROID_NDK: string; export const npm_package_repository_type: string;
export const SGX_AESM_ADDR: string; export const npm_package_repository_url: string;
export const CHROME_BIN: string; export const npm_package_scripts_check: string;
export const npm_package_scripts_check_all: string;
export const npm_package_scripts_format: string;
export const npm_package_scripts_generate_types: string;
export const npm_package_scripts_generate_version: string;
export const npm_package_scripts_lint: string;
export const npm_package_scripts_postinstall: string;
export const npm_package_scripts_test: string;
export const npm_package_scripts_test_cross_platform_build: string;
export const npm_package_scripts_test_cross_platform_dev: string;
export const npm_package_scripts_test_integration: string;
export const npm_package_scripts_test_unit: string;
export const npm_package_type: string;
export const npm_package_types: string;
export const npm_package_version: string;
export const NUMBER_OF_PROCESSORS: string;
export const OLDPWD: string;
export const OneDrive: string;
export const ORIGINAL_PATH: string;
export const ORIGINAL_TEMP: string;
export const ORIGINAL_TMP: string;
export const OS: string;
export const OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE: string;
export const PATH: string;
export const PATHEXT: string;
export const PKG_CONFIG_PATH: string;
export const PKG_CONFIG_SYSTEM_INCLUDE_PATH: string;
export const PKG_CONFIG_SYSTEM_LIBRARY_PATH: string;
export const PLINK_PROTOCOL: string;
export const PROCESSOR_ARCHITECTURE: string;
export const PROCESSOR_IDENTIFIER: string;
export const PROCESSOR_LEVEL: string;
export const PROCESSOR_REVISION: string;
export const ProgramData: string;
export const PROGRAMFILES: string;
export const ProgramW6432: string;
export const PROMPT: string;
export const PSModulePath: string;
export const PUBLIC: string;
export const PUPPETEER_SKIP_DOWNLOAD: string; export const PUPPETEER_SKIP_DOWNLOAD: string;
export const SELENIUM_JAR_PATH: string; export const PWD: string;
export const MEMORY_PRESSURE_WRITE: string; export const SHELL: string;
export const COPILOT_AGENT_COMMIT_EMAIL: string; export const SHLVL: string;
export const COPILOT_AGENT_FIREWALL_LOG_FILE: string; export const SSH_ASKPASS: string;
export const COPILOT_FEATURE_FLAGS: string; export const SYSTEMDRIVE: string;
export const npm_package_exports___node_polyfills_types: string; export const SYSTEMROOT: string;
export const INIT_CWD: string; export const TEMP: string;
export const COPILOT_API_URL: string; export const TERM: string;
export const ANDROID_NDK_HOME: string; export const TMP: string;
export const GITHUB_STEP_SUMMARY: string; export const TMPDIR: string;
export const COPILOT_AGENT_BASE_COMMIT: string; export const USERDOMAIN: string;
export const COPILOT_AGENT_TIMEOUT_MIN: string; export const USERDOMAIN_ROAMINGPROFILE: string;
export const npm_package_exports___hooks_import: string; export const USERNAME: string;
export const npm_package_dependencies_import_meta_resolve: string; export const USERPROFILE: string;
export const VS140COMNTOOLS: string;
export const WINDIR: string;
export const WXDRIVE_START_ARGS: string;
export const YARN_IGNORE_PATH: string;
export const ZES_ENABLE_SYSMAN: string;
} }
/** /**
@@ -312,261 +230,179 @@ declare module '$env/static/public' {
*/ */
declare module '$env/dynamic/private' { declare module '$env/dynamic/private' {
export const env: { export const env: {
SUDO_GID: string; ACLOCAL_PATH: string;
GITHUB_STATE: string; ALLUSERSPROFILE: string;
COPILOT_AGENT_ACTION: string; ANTHROPIC_AUTH_TOKEN: string;
npm_package_scripts_test_cross_platform_build: string; ANTHROPIC_BASE_URL: string;
npm_package_devDependencies_rollup: string; APPDATA: string;
npm_package_devDependencies__types_node: string; CLAUDECODE: string;
COPILOT_AGENT_START_TIME_SEC: string; CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC: string;
CURL_CA_BUNDLE: string; CLAUDE_CODE_ENTRYPOINT: string;
DOTNET_NOLOGO: string; COMMONPROGRAMFILES: string;
npm_package_devDependencies_vitest: string; CommonProgramW6432: string;
MAIL: string; COMPUTERNAME: string;
NODE_EXTRA_CA_CERTS: string; COMSPEC: string;
USER: string; CONFIG_SITE: string;
npm_package_bin_svelte_kit: string; COREPACK_ENABLE_AUTO_PIN: string;
npm_package_dependencies_sirv: string; DISPLAY: string;
npm_package_dependencies_sade: string; DriverData: string;
npm_package_dependencies_mrmime: string; EXEPATH: string;
npm_package_dependencies_magic_string: string; GIT_EDITOR: string;
npm_config_version_commit_hooks: string;
npm_config_user_agent: string;
SHOULD_CONTINUE: string;
CI: string;
npm_package_scripts_generate_version: string;
npm_package_dependencies__types_cookie: string;
npm_config_bin_links: string;
XDG_SESSION_TYPE: string;
RUNNER_ENVIRONMENT: string;
GITHUB_ENV: string;
COPILOT_AGENT_ONLINE_EVALUATION_DISABLED: string;
PIPX_HOME: string;
npm_node_execpath: string;
npm_package_devDependencies_vite: string;
npm_package_devDependencies__sveltejs_vite_plugin_svelte: string;
npm_config_init_version: string;
JAVA_HOME_8_X64: string;
SHLVL: string;
npm_package_exports___node_types: string;
npm_package_files_0: string;
COPILOT_AGENT_RUNTIME_VERSION: string;
HOME: string; HOME: string;
OLDPWD: string; HOMEDRIVE: string;
npm_package_files_1: string; HOMEPATH: string;
npm_package_repository_directory: string; HOSTNAME: string;
RUNNER_TEMP: string; INFOPATH: string;
GITHUB_EVENT_PATH: string; INIT_CWD: string;
CAROOT: string;
COPILOT_AGENT_FIREWALL_RULESET_ALLOW_LIST: string;
npm_package_files_2: string;
JAVA_HOME_11_X64: string;
COPILOT_AGENT_MCP_SERVER_TEMP: string;
PIPX_BIN_DIR: string;
GITHUB_REPOSITORY_OWNER: string;
npm_package_engines_node: string;
npm_package_exports___vite_import: string;
npm_package_files_3: string;
npm_package_devDependencies_svelte_preprocess: string;
npm_config_init_license: string;
GRADLE_HOME: string;
ANDROID_NDK_LATEST_HOME: string;
JAVA_HOME_21_X64: string;
GITHUB_RETENTION_DAYS: string;
npm_package_files_4: string;
npm_config_version_tag_prefix: string;
GITHUB_REPOSITORY_OWNER_ID: string;
POWERSHELL_DISTRIBUTION_CHANNEL: string;
SSL_CERT_FILE: string;
AZURE_EXTENSION_DIR: string;
GITHUB_HEAD_REF: string;
npm_package_scripts_check: string;
npm_package_files_5: string;
npm_package_dependencies_tiny_glob: string;
SYSTEMD_EXEC_PID: string;
DBUS_SESSION_BUS_ADDRESS: string;
npm_package_scripts_postinstall: string;
npm_package_files_6: string;
GITHUB_GRAPHQL_URL: string;
GITHUB_DOWNLOADS_URL: string;
npm_package_devDependencies_typescript: string;
npm_package_devDependencies__types_connect: string;
npm_package_description: string;
JAVA_HOME_25_X64: string;
NVM_DIR: string;
npm_package_readmeFilename: string;
npm_package_types: string;
npm_package_homepage: string;
DOTNET_SKIP_FIRST_TIME_EXPERIENCE: string;
COPILOT_JOB_EVENT_TYPE: string;
JAVA_HOME_17_X64: string;
ImageVersion: string;
SUDO_UID: string;
npm_package_exports___hooks_types: string;
npm_package_devDependencies__playwright_test: string;
BLACKBIRD_MODE: string;
LOGNAME: string;
COPILOT_AGENT_PR_COMMIT_COUNT: string;
RUNNER_OS: string;
GITHUB_API_URL: string;
GOROOT_1_22_X64: string;
COPILOT_AGENT_COMMIT_LOGIN: string;
SWIFT_PATH: string;
npm_package_type: string;
COPILOT_USE_SESSIONS: string;
CHROMEWEBDRIVER: string;
COPILOT_AGENT_CONTENT_FILTER_MODE: string;
GOROOT_1_23_X64: string;
JOURNAL_STREAM: string;
GITHUB_WORKFLOW: string;
_: string;
COPILOT_AGENT_BRANCH_NAME: string;
MEMORY_PRESSURE_WATCH: string;
XDG_SESSION_CLASS: string;
GOROOT_1_24_X64: string;
npm_package_scripts_lint: string;
npm_config_registry: string;
ACTIONS_RUNNER_ACTION_ARCHIVE_CACHE: string;
COPILOT_AGENT_FIREWALL_ENABLE_RULESET_ALLOW_LIST: string;
GOROOT_1_25_X64: string;
GITHUB_RUN_ID: string;
TERM: string;
XDG_SESSION_ID: string;
GITHUB_REF_TYPE: string;
BOOTSTRAP_HASKELL_NONINTERACTIVE: string;
GITHUB_WORKFLOW_SHA: string;
GITHUB_BASE_REF: string;
ImageOS: string;
COPILOT_MCP_ENABLED: string;
npm_package_exports___import: string;
npm_package_devDependencies_dts_buddy: string;
npm_package_dependencies_kleur: string;
npm_package_dependencies_devalue: string;
npm_config_ignore_scripts: string;
COPILOT_AGENT_CALLBACK_URL: string;
GITHUB_WORKFLOW_REF: string;
GITHUB_ACTION_REPOSITORY: string;
ENABLE_RUNNER_TRACING: string;
npm_package_exports___package_json: string;
npm_package_peerDependencies_svelte: string;
PATH: string;
NODE: string;
COPILOT_AGENT_INJECTED_SECRET_NAMES: string;
ANT_HOME: string;
DOTNET_MULTILEVEL_LOOKUP: string;
RUNNER_TRACKING_ID: string;
INVOCATION_ID: string;
RUNNER_TOOL_CACHE: string;
GITHUB_UPLOADS_URL: string;
REQUESTS_CA_BUNDLE: string;
npm_package_repository_type: string;
npm_package_name: string;
GITHUB_ACTION: string;
GITHUB_RUN_NUMBER: string;
GITHUB_TRIGGERING_ACTOR: string;
COPILOT_EXPERIMENTS: string;
RUNNER_ARCH: string;
XDG_RUNTIME_DIR: string;
AGENT_TOOLSDIRECTORY: string;
npm_package_scripts_test_integration: string;
npm_package_exports___node_polyfills_import: string;
npm_package_devDependencies__types_set_cookie_parser: string;
SSL_CERT_DIR: string;
npm_package_scripts_test_unit: string;
npm_package_exports___vite_types: string;
npm_config_ignore_path: string;
LANG: string;
VCPKG_INSTALLATION_ROOT: string;
CONDA: string;
RUNNER_NAME: string;
XDG_CONFIG_HOME: string;
GITHUB_REF_NAME: string;
GITHUB_REPOSITORY: string;
npm_lifecycle_script: string;
npm_package_scripts_test_cross_platform_dev: string;
SUDO_COMMAND: string;
ANDROID_NDK_ROOT: string;
GITHUB_ACTION_REF: string;
DEBIAN_FRONTEND: string;
npm_package_scripts_test: string;
npm_package_dependencies_esm_env: string;
npm_config_version_git_message: string;
SHELL: string;
GITHUB_REPOSITORY_ID: string;
GITHUB_ACTIONS: string;
CPD_SAVE_TRAJECTORY_OUTPUT: string;
npm_lifecycle_event: string;
npm_package_repository_url: string;
npm_package_version: string;
GITHUB_REF_PROTECTED: string;
npm_config_argv: string;
npm_package_scripts_generate_types: string;
npm_package_scripts_check_all: string;
npm_package_devDependencies_svelte: string;
npm_package_dependencies_cookie: string;
GITHUB_WORKSPACE: string;
SUDO_USER: string;
ACCEPT_EULA: string;
DOTNET_SYSTEM_NET_DISABLEIPV6: string;
GITHUB_JOB: string;
YARN_IGNORE_PATH: string;
npm_package_exports___node_import: string;
GITHUB_SHA: string;
GITHUB_RUN_ATTEMPT: string;
COPILOT_AGENT_DEBUG: string;
npm_package_devDependencies__types_sade: string;
npm_config_version_git_tag: string;
npm_config_version_git_sign: string;
GITHUB_REF: string;
COPILOT_AGENT_ISSUE_NUMBER: string;
COPILOT_AGENT_SOURCE_ENVIRONMENT: string;
GITHUB_ACTOR: string;
FIREWALL_RULESET_CONTENT: string;
ANDROID_SDK_ROOT: string;
npm_package_license: string;
npm_config_strict_ssl: string;
npm_package_scripts_format: string;
GITHUB_PATH: string;
JAVA_HOME: string; JAVA_HOME: string;
PWD: string; LANG: string;
GITHUB_ACTOR_ID: string; LOCALAPPDATA: string;
RUNNER_WORKSPACE: string; LOGONSERVER: string;
MANPATH: string;
MINGW_CHOST: string;
MINGW_PACKAGE_PREFIX: string;
MINGW_PREFIX: string;
MSYSTEM: string;
MSYSTEM_CARCH: string;
MSYSTEM_CHOST: string;
MSYSTEM_PREFIX: string;
NODE: string;
NoDefaultCurrentDirectoryInExePath: string;
npm_config_argv: string;
npm_config_bin_links: string;
npm_config_ignore_optional: string;
npm_config_ignore_path: string;
npm_config_ignore_scripts: string;
npm_config_init_license: string;
npm_config_init_version: string;
npm_config_registry: string;
npm_config_save_prefix: string;
npm_config_strict_ssl: string;
npm_config_user_agent: string;
npm_config_version_commit_hooks: string;
npm_config_version_git_message: string;
npm_config_version_git_sign: string;
npm_config_version_git_tag: string;
npm_config_version_tag_prefix: string;
npm_execpath: string; npm_execpath: string;
npm_lifecycle_event: string;
npm_lifecycle_script: string;
npm_node_execpath: string;
npm_package_bin_svelte_kit: string;
npm_package_dependencies_cookie: string;
npm_package_dependencies_devalue: string;
npm_package_dependencies_esm_env: string;
npm_package_dependencies_import_meta_resolve: string;
npm_package_dependencies_kleur: string;
npm_package_dependencies_magic_string: string;
npm_package_dependencies_mrmime: string;
npm_package_dependencies_sade: string;
npm_package_dependencies_set_cookie_parser: string; npm_package_dependencies_set_cookie_parser: string;
COPILOT_AGENT_PR_NUMBER: string; npm_package_dependencies_sirv: string;
HOMEBREW_CLEANUP_PERIODIC_FULL_DAYS: string; npm_package_dependencies_tiny_glob: string;
GITHUB_EVENT_NAME: string; npm_package_dependencies__types_cookie: string;
HOMEBREW_NO_AUTO_UPDATE: string; npm_package_description: string;
ANDROID_HOME: string; npm_package_devDependencies_dts_buddy: string;
GITHUB_SERVER_URL: string; npm_package_devDependencies_rollup: string;
GECKOWEBDRIVER: string; npm_package_devDependencies_svelte: string;
GHCUP_INSTALL_BASE_PREFIX: string; npm_package_devDependencies_svelte_preprocess: string;
GITHUB_OUTPUT: string; npm_package_devDependencies_typescript: string;
npm_package_devDependencies_vite: string;
npm_package_devDependencies_vitest: string;
npm_package_devDependencies__playwright_test: string;
npm_package_devDependencies__sveltejs_vite_plugin_svelte: string;
npm_package_devDependencies__types_connect: string;
npm_package_devDependencies__types_node: string;
npm_package_devDependencies__types_sade: string;
npm_package_devDependencies__types_set_cookie_parser: string;
npm_package_engines_node: string;
npm_package_exports___hooks_import: string;
npm_package_exports___hooks_types: string;
npm_package_exports___import: string;
npm_package_exports___node_import: string;
npm_package_exports___node_polyfills_import: string;
npm_package_exports___node_polyfills_types: string;
npm_package_exports___node_types: string;
npm_package_exports___package_json: string;
npm_package_exports___types: string; npm_package_exports___types: string;
EDGEWEBDRIVER: string; npm_package_exports___vite_import: string;
COPILOT_EXPERIMENT_ASSIGNMENT_CONTEXT: string; npm_package_exports___vite_types: string;
npm_package_files_0: string;
npm_package_files_1: string;
npm_package_files_2: string;
npm_package_files_3: string;
npm_package_files_4: string;
npm_package_files_5: string;
npm_package_files_6: string;
npm_package_homepage: string;
npm_package_license: string;
npm_package_name: string;
npm_package_peerDependencies_svelte: string;
npm_package_peerDependencies_vite: string; npm_package_peerDependencies_vite: string;
npm_package_peerDependencies__sveltejs_vite_plugin_svelte: string; npm_package_peerDependencies__sveltejs_vite_plugin_svelte: string;
npm_config_save_prefix: string; npm_package_readmeFilename: string;
npm_config_ignore_optional: string; npm_package_repository_directory: string;
ANDROID_NDK: string; npm_package_repository_type: string;
SGX_AESM_ADDR: string; npm_package_repository_url: string;
CHROME_BIN: string; npm_package_scripts_check: string;
npm_package_scripts_check_all: string;
npm_package_scripts_format: string;
npm_package_scripts_generate_types: string;
npm_package_scripts_generate_version: string;
npm_package_scripts_lint: string;
npm_package_scripts_postinstall: string;
npm_package_scripts_test: string;
npm_package_scripts_test_cross_platform_build: string;
npm_package_scripts_test_cross_platform_dev: string;
npm_package_scripts_test_integration: string;
npm_package_scripts_test_unit: string;
npm_package_type: string;
npm_package_types: string;
npm_package_version: string;
NUMBER_OF_PROCESSORS: string;
OLDPWD: string;
OneDrive: string;
ORIGINAL_PATH: string;
ORIGINAL_TEMP: string;
ORIGINAL_TMP: string;
OS: string;
OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE: string;
PATH: string;
PATHEXT: string;
PKG_CONFIG_PATH: string;
PKG_CONFIG_SYSTEM_INCLUDE_PATH: string;
PKG_CONFIG_SYSTEM_LIBRARY_PATH: string;
PLINK_PROTOCOL: string;
PROCESSOR_ARCHITECTURE: string;
PROCESSOR_IDENTIFIER: string;
PROCESSOR_LEVEL: string;
PROCESSOR_REVISION: string;
ProgramData: string;
PROGRAMFILES: string;
ProgramW6432: string;
PROMPT: string;
PSModulePath: string;
PUBLIC: string;
PUPPETEER_SKIP_DOWNLOAD: string; PUPPETEER_SKIP_DOWNLOAD: string;
SELENIUM_JAR_PATH: string; PWD: string;
MEMORY_PRESSURE_WRITE: string; SHELL: string;
COPILOT_AGENT_COMMIT_EMAIL: string; SHLVL: string;
COPILOT_AGENT_FIREWALL_LOG_FILE: string; SSH_ASKPASS: string;
COPILOT_FEATURE_FLAGS: string; SYSTEMDRIVE: string;
npm_package_exports___node_polyfills_types: string; SYSTEMROOT: string;
INIT_CWD: string; TEMP: string;
COPILOT_API_URL: string; TERM: string;
ANDROID_NDK_HOME: string; TMP: string;
GITHUB_STEP_SUMMARY: string; TMPDIR: string;
COPILOT_AGENT_BASE_COMMIT: string; USERDOMAIN: string;
COPILOT_AGENT_TIMEOUT_MIN: string; USERDOMAIN_ROAMINGPROFILE: string;
npm_package_exports___hooks_import: string; USERNAME: string;
npm_package_dependencies_import_meta_resolve: string; USERPROFILE: string;
VS140COMNTOOLS: string;
WINDIR: string;
WXDRIVE_START_ARGS: string;
YARN_IGNORE_PATH: string;
ZES_ENABLE_SYSMAN: string;
[key: `PUBLIC_${string}`]: undefined; [key: `PUBLIC_${string}`]: undefined;
[key: `${string}`]: string | undefined; [key: `${string}`]: string | undefined;
} }

45
packages/rrweb-player/src/Player.svelte
View File

@@ -28,6 +28,15 @@
export let inactiveColor: NonNullable<RRwebPlayerOptions['props']['inactiveColor']> = '#D4D4D4'; export let inactiveColor: NonNullable<RRwebPlayerOptions['props']['inactiveColor']> = '#D4D4D4';
let replayer: Replayer; let replayer: Replayer;
const pendingEventListeners: Array<{
event: string;
handler: (detail: unknown) => unknown;
}> = [];
const controllerEvents = new Set([
'ui-update-current-time',
'ui-update-progress',
'ui-update-player-state',
]);
export const getMirror = () => replayer.getMirror(); export const getMirror = () => replayer.getMirror();
@@ -83,14 +92,13 @@
event: string, event: string,
handler: (detail: unknown) => unknown, handler: (detail: unknown) => unknown,
) => { ) => {
if (!replayer) {
pendingEventListeners.push({ event, handler });
return;
}
replayer.on(event, handler); replayer.on(event, handler);
switch (event) { if (controllerEvents.has(event) && controller) {
case 'ui-update-current-time': controller.$on(event, ({ detail }) => handler(detail));
case 'ui-update-progress':
case 'ui-update-player-state':
controller.$on(event, ({ detail }) => handler(detail));
default:
break;
} }
}; };
@@ -130,6 +138,14 @@
}; };
onMount(() => { onMount(() => {
const debugTarget = window as Window & {
__rrwebPlayerDebug?: Record<string, unknown>;
};
debugTarget.__rrwebPlayerDebug = {
stage: 'mounted',
hasFrame: !!frame,
eventsLength: events?.length,
};
// runtime type check // runtime type check
if (speedOption !== undefined && typeOf(speedOption) !== 'array') { if (speedOption !== undefined && typeOf(speedOption) !== 'array') {
throw new Error('speedOption must be array'); throw new Error('speedOption must be array');
@@ -157,8 +173,23 @@
unpackFn: unpack, unpackFn: unpack,
...$$props, ...$$props,
}); });
debugTarget.__rrwebPlayerDebug = {
...debugTarget.__rrwebPlayerDebug,
stage: 'replayer-created',
hasWrapper: !!replayer.wrapper,
hasIframe: !!replayer.iframe,
};
pendingEventListeners.splice(0).forEach(({ event, handler }) => {
replayer.on(event, handler);
});
replayer.on('resize', (dimension) => { replayer.on('resize', (dimension) => {
debugTarget.__rrwebPlayerDebug = {
...debugTarget.__rrwebPlayerDebug,
stage: 'resized',
dimension,
};
updateScale( updateScale(
replayer.wrapper, replayer.wrapper,
dimension as { width: number; height: number }, dimension as { width: number; height: number },

3
packages/rrweb-player/vite.config.ts
View File

@@ -34,6 +34,9 @@ function viteSvelteDts(): Plugin {
console.log('Generating .d.ts files for Svelte components...'); console.log('Generating .d.ts files for Svelte components...');
const { input } = options; const { input } = options;
if (!input) {
return;
}
if (typeof input === 'string') { if (typeof input === 'string') {
await generateDts(input); await generateDts(input);
} else if (Array.isArray(input)) { } else if (Array.isArray(input)) {

39
packages/rrweb/scripts/stream.js
View File

@@ -20,9 +20,14 @@ const emitter = new EventEmitter();
async function injectRecording(frame, serverURL) { async function injectRecording(frame, serverURL) {
try { try {
await frame.addScriptTag({ url: `${serverURL}/rrweb.umd.cjs` });
await frame.addScriptTag({ await frame.addScriptTag({
url: `${serverURL}/plugins/rrweb-plugin-canvas-webrtc-record.js`, path: path.resolve(__dirname, '../dist/rrweb.umd.cjs'),
});
await frame.addScriptTag({
path: path.resolve(
__dirname,
'../../plugins/rrweb-plugin-canvas-webrtc-record/dist/rrweb-plugin-canvas-webrtc-record.umd.cjs',
),
}); });
await frame.evaluate(() => { await frame.evaluate(() => {
const win = window; const win = window;
@@ -80,9 +85,14 @@ async function startReplay(page, serverURL, recordedPage) {
}, id); }, id);
}); });
await page.addScriptTag({ url: `${serverURL}/rrweb.umd.cjs` });
await page.addScriptTag({ await page.addScriptTag({
url: `${serverURL}/plugins/rrweb-plugin-canvas-webrtc-replay.js`, path: path.resolve(__dirname, '../dist/rrweb.umd.cjs'),
});
await page.addScriptTag({
path: path.resolve(
__dirname,
'../../plugins/rrweb-plugin-canvas-webrtc-replay/dist/rrweb-plugin-canvas-webrtc-replay.umd.cjs',
),
}); });
return page.evaluate(() => { return page.evaluate(() => {
@@ -130,13 +140,18 @@ void (async () => {
server = await startServer(); server = await startServer();
serverURL = getServerURL(server); serverURL = getServerURL(server);
const { url } = await inquirer.prompt([ const autoUrl = process.env.RRWEB_STREAM_URL;
{ let url = autoUrl;
type: 'input', if (!url) {
name: 'url', const answers = await inquirer.prompt([
message: `Enter the url you want to record, e.g ${defaultURL}: `, {
}, type: 'input',
]); name: 'url',
message: `Enter the url you want to record, e.g ${defaultURL}: `,
},
]);
url = answers.url;
}
await record(url); await record(url);
@@ -163,6 +178,7 @@ void (async () => {
const replayingBrowser = await puppeteer.launch({ const replayingBrowser = await puppeteer.launch({
headless: false, headless: false,
devtools, devtools,
executablePath: process.env.PUPPETEER_EXECUTABLE_PATH,
defaultViewport: { defaultViewport: {
width: 1600, width: 1600,
height: 900, height: 900,
@@ -184,6 +200,7 @@ void (async () => {
const recordingBrowser = await puppeteer.launch({ const recordingBrowser = await puppeteer.launch({
headless: false, headless: false,
devtools, devtools,
executablePath: process.env.PUPPETEER_EXECUTABLE_PATH,
defaultViewport: { defaultViewport: {
width: 1600, width: 1600,
height: 900, height: 900,

5
packages/rrweb/scripts/utils.js
View File

@@ -37,7 +37,10 @@ export const startServer = (defaultPort = 3030) =>
try { try {
const data = fs.readFileSync(pathname); const data = fs.readFileSync(pathname);
const ext = path.parse(pathname).ext; const ext = path.parse(pathname).ext;
res.setHeader('Content-type', mimeType[ext] || 'text/plain'); const contentType = /\.js$/.test(sanitizePath)
? 'text/javascript'
: mimeType[ext] || 'text/plain';
res.setHeader('Content-type', contentType);
res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET'); res.setHeader('Access-Control-Allow-Methods', 'GET');
res.setHeader('Access-Control-Allow-Headers', 'Content-type'); res.setHeader('Access-Control-Allow-Headers', 'Content-type');

24
vite.config.default.ts
View File

@@ -3,7 +3,7 @@ import dts from 'vite-plugin-dts';
import { copyFileSync, mkdirSync, existsSync } from 'node:fs'; import { copyFileSync, mkdirSync, existsSync } from 'node:fs';
import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite'; import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite';
import { build, Format } from 'esbuild'; import { build, Format } from 'esbuild';
import { resolve, dirname } from 'path'; import { resolve, dirname, relative, basename } from 'path';
import { umdWrapper } from 'esbuild-plugin-umd-wrapper'; import { umdWrapper } from 'esbuild-plugin-umd-wrapper';
import * as fs from 'node:fs'; import * as fs from 'node:fs';
import { visualizer } from 'rollup-plugin-visualizer'; import { visualizer } from 'rollup-plugin-visualizer';
@@ -51,9 +51,15 @@ function minifyAndUMDPlugin({
outDir, outDir,
}); });
} else { } else {
const umdDir = dirname(outputFilePath).replace('/dist', '/umd'); const relativeOutputPath = relative(outputOptions.dir!, outputFilePath);
const umdBasePath = resolve(
dirname(outputOptions.dir!),
'umd',
relativeOutputPath,
);
const umdDir = dirname(umdBasePath);
if (!existsSync(umdDir)) { if (!existsSync(umdDir)) {
mkdirSync(umdDir); mkdirSync(umdDir, { recursive: true });
} }
const outUmd = `${outputFilePath}.umd.cjs`; const outUmd = `${outputFilePath}.umd.cjs`;
await buildFile({ await buildFile({
@@ -66,10 +72,7 @@ function minifyAndUMDPlugin({
}); });
// Workaround because jsdelivr does use correct mime types for .umd.cjs // Workaround because jsdelivr does use correct mime types for .umd.cjs
// More info: https://github.com/jsdelivr/jsdelivr/issues/18584 https://github.com/rrweb-io/rrweb/pull/1704 // More info: https://github.com/jsdelivr/jsdelivr/issues/18584 https://github.com/rrweb-io/rrweb/pull/1704
copyFileSync( copyFileSync(outUmd, `${umdBasePath}.js`);
outUmd,
`${outputFilePath.replace('/dist/', '/umd/')}.js`,
);
const outUmdMin = `${outputFilePath}.umd.min.cjs`; const outUmdMin = `${outputFilePath}.umd.min.cjs`;
await buildFile({ await buildFile({
name, name,
@@ -79,10 +82,7 @@ function minifyAndUMDPlugin({
isCss: false, isCss: false,
outDir, outDir,
}); });
copyFileSync( copyFileSync(outUmdMin, `${umdBasePath}.min.js`);
outUmdMin,
`${outputFilePath.replace('/dist/', '/umd/')}.min.js`,
);
} }
} }
} }
@@ -119,7 +119,7 @@ async function buildFile({
}), }),
], ],
}); });
const filename = output.replace(new RegExp(`^.+/(${outDir}/)`), '$1'); const filename = relative(process.cwd(), output).split(/\\/g).join('/');
console.log(filename); console.log(filename);
console.log(`${filename}.map`); console.log(`${filename}.map`);
} }