rrweb-player

Overview

Use this package to get a feature-rich playback UI out of the box; if you want to build your own UI use the @rrweb/replay package.

This is the same replayer used in the cloud dashboard, if you want to try out a replay of your website, you can sign up and make a quick recording using the 'Test record any webpage' bookmarklet.

How is this different from `new Replayer()`?

new Replayer() is from the more foundational @rrweb/replay package, which renders and rebuilds an rrweb event stream within an iframe. This package builds on that to provide UI in the form of play/pause controls and a timeline using the Svelte UI framework. The similar naming is unfortunate, and we aim to fix that in a future major version.

Installation

1) Bundler / npm (Recommended)

npm install rrweb-player

import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';

2) Browser Without Bundler (ESM)

<link
  rel="stylesheet"
  href="https://cdn.rrweb.com/rrweb-player/current/style.css"
/>
<script type="module">
  import rrwebPlayer from 'https://cdn.rrweb.com/rrweb-player/current/rrweb-player.js';
</script>

Use current for the latest stable release, or pin an exact version such as https://cdn.rrweb.com/rrweb-player/2.0.0/rrweb-player.js for immutable production URLs. See the CDN assets docs for the full URL shape and catalog.

3) Legacy Direct `<script>` Include (UMD fallback)

Use this only for compatibility with non-module environments.

<link
  rel="stylesheet"
  href="https://cdn.rrweb.com/rrweb-player/current/style.css"
/>
<script src="https://cdn.rrweb.com/rrweb-player/current/rrweb-player.umd.cjs"></script>

Usage

new rrwebPlayer({
  target: document.body, // customizable root element
  props: {
    events,
  },
});

Options

key	default	description
events	[]	the events for replaying
width	1024	the width of the replayer
height	576	the height of the replayer
maxScale	1	the maximum scale of the replayer (1 = 100%), set to 0 for unlimited
autoPlay	true	whether to autoplay
speed	1	The default speed to play at
speedOption	[1, 2, 4, 8]	speed options in UI
showController	true	whether to show the controller UI
tags	{}	customize the custom events style with a key-value map
inactiveColor	#D4D4D4	Customize the color of inactive periods indicator in the progress bar with a valid CSS color string.
...	-	all the rrweb Replayer options will be bypassed

Methods on the rrwebPlayer component

addEventListener(event: string, handler: (params: any) => unknown): void;

addEvent(event: eventWithTime): void;

getMetaData() => {
    startTime: number;
    endTime: number;
    totalTime: number;
}

getReplayer() => Replayer;

getMirror() => Mirror;

Toggles between play/pause

toggle();

Sets speed of player

setSpeed(speed: number)

Turns on/off skip inactive

toggleSkipInactive();

Triggers resize, do this whenever you change width/height

triggerResize();

Plays replay

play();

Pauses replay

pause();

Go to a point in time and pause or play from then

goto(timeOffset: number, play?: boolean)

Plays from a time to a time and (optionally) loop

playRange(
    timeOffset: number,
    endTimeOffset: number,
    startLooping: boolean = false,
    afterHook: undefined | (() => void) = undefined,
  )