rrweb docs

English

简体中文

English

简体中文

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) ​

shell
npm install rrweb-player
js
import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';

2) Browser Without Bundler (ESM) ​

html
<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.

html
<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 ​

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

Options ​

keydefaultdescription
events[]the events for replaying
width1024the width of the replayer
height576the height of the replayer
maxScale1the maximum scale of the replayer (1 = 100%), set to 0 for unlimited
autoPlaytruewhether to autoplay
speed1The default speed to play at
speedOption[1, 2, 4, 8]speed options in UI
showControllertruewhether to show the controller UI
tags{}customize the custom events style with a key-value map
inactiveColor#D4D4D4Customize 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 ​

ts
addEventListener(event: string, handler: (params: any) => unknown): void;
ts
addEvent(event: eventWithTime): void;
ts
getMetaData() => {
    startTime: number;
    endTime: number;
    totalTime: number;
}
ts
getReplayer() => Replayer;
ts
getMirror() => Mirror;

Toggles between play/pause

ts
toggle();

Sets speed of player

ts
setSpeed(speed: number)

Turns on/off skip inactive

ts
toggleSkipInactive();

Triggers resize, do this whenever you change width/height

ts
triggerResize();

Plays replay

ts
play();

Pauses replay

ts
pause();

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

ts
goto(timeOffset: number, play?: boolean)

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

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

Edit README on GitHub

Release Notes for rrweb-player ​

2.1.1 ​

Patch Changes ​

  • #1901 a11f8ef Thanks @kevinvandijk! - Fix the rrweb-player production build so Svelte lifecycle APIs resolve to the browser runtime instead of to stubs

  • Updated dependencies []:

    • @rrweb/replay@2.1.1
    • @rrweb/packer@2.1.1

2.1.0 ​

Patch Changes ​

  • Updated dependencies [7f0f75f]:
    • @rrweb/replay@2.1.0
    • @rrweb/packer@2.1.0

2.0.1 ​

Patch Changes ​

  • Updated dependencies []:
    • @rrweb/replay@2.0.1
    • @rrweb/packer@2.0.1

2.0.0 ​

Major Changes ​

  • #1497 2606a2a Thanks @Juice10! - Distributed files have new filenames, paths and extensions. Important: If you reference distributed files or types directly, you might have to update your paths/filenames. E.g. you import from rrweb/typings/... or rrdom/es. However you run import rrweb from 'rrweb' you won't notice a difference with this change. If you include rrweb files directly in a script tag, you might have to update that path to include a the .umd.cjs files instead. All .js files now use ES modules which can be used in modern browsers, node.js and bundlers that support ES modules. All npm packages now also ship .cjs and .umd.cjs files. The .umd.cjs files are CommonJS modules that bundle all files together to make it easy to ship one file to browser environments (similar to the previous .js files). The .cjs files are CommonJS modules that can be used in older Node.js environments. Types should be better defined in package.json and if you need specific types they might be exported from new packages (for example PlayerMachineState and SpeedMachineState are now exported from @rrweb/replay). Check the package.json's main and exports field for the available files.

  • #1031 ad9bc3e Thanks @Juice10! - Move shared rrweb event and recorder types into the new @rrweb/types package.

Minor Changes ​

  • #1039 bdd8940 Thanks @DexxDing! - Add inactive-period indicators to the player progress bar with a configurable inactiveColor option.

  • #1007 3924aaf Thanks @Juice10! - Add player.playRange(start, end, loop?, afterHook?) to play a bounded time range, optionally looping or invoking a callback when the range ends.

  • #1006 6f63cf1 Thanks @Juice10! - Add a maxScale option to configure the player's maximum replay scale, with 0 allowing unlimited scaling.

  • #859 e238462 Thanks @Juice10! - Add support for recording canvas snapshots at a configured FPS.

  • #895 de755ae Thanks @Juice10! - Add the fast-forward virtual DOM optimization for replay.

Patch Changes ​

2.0.0-alpha.16—20 ​

Patch Changes only following changes to @rrweb/replay and @rrweb/packer

Patch Changes ​

  • Updated dependencies [db20184]:
    • @rrweb/replay (2.0.0-alpha.16—20)
    • @rrweb/packer (2.0.0-alpha.16—20)

2.0.0-alpha.15 ​

Major Changes ​

  • #1497 2606a2a Thanks @Juice10! - Distributed files have new filenames, paths and extensions. Important: If you reference distributed files or types directly, you might have to update your paths/filenames. E.g. you import from rrweb/typings/... or rrdom/es. However you run import rrweb from 'rrweb' you won't notice a difference with this change. If you include rrweb files directly in a script tag, you might have to update that path to include a the .umd.cjs files instead. All .js files now use ES modules which can be used in modern browsers, node.js and bundlers that support ES modules. All npm packages now also ship .cjs and .umd.cjs files. The .umd.cjs files are CommonJS modules that bundle all files together to make it easy to ship one file to browser environments (similar to the previous .js files). The .cjs files are CommonJS modules that can be used in older Node.js environments. Types should be better defined in package.json and if you need specific types they might be exported from new packages (for example PlayerMachineState and SpeedMachineState are now exported from @rrweb/replay). Check the package.json's main and exports field for the available files.

Patch Changes ​

  • Updated dependencies [2606a2a, 2606a2a, 2606a2a]:
    • @rrweb/packer@2.0.0-alpha.15
    • @rrweb/replay@2.0.0-alpha.15

2.0.0-alpha.12—14 ​

Patch Changes only following changes to rrweb

Patch Changes ​

2.0.0-alpha.11 ​

Patch Changes ​

2.0.0-alpha.10 ​

Patch Changes ​

2.0.0-alpha.9 ​

Patch Changes ​

2.0.0-alpha.8 ​

Patch Changes ​

2.0.0-alpha.7 ​

Patch Changes ​

2.0.0-alpha.6 ​

Patch Changes ​

2.0.0-alpha.5 ​

Patch Changes ​