Looking for a Vue.js version? Go here --> @preflight-hq/rrweb-player-vue

rrweb-player

Since rrweb's replayer only provides a basic UI, you can choose rrweb-replayer which is based on rrweb's public APIs but has a feature-rich replayer UI.

This is a fork of the official rrweb-player with additional features and enhancements.

Added Features

We've added the following features to the official rrweb-player:

Auto-sizing with maxWidth

Instead of requiring fixed width and height, you can now use maxWidth to automatically size the player based on the recording's aspect ratio. The player will read the dimensions from the recording's Meta event and scale appropriately.

new rrwebPlayer({
  target: document.body,
  props: {
    events,
    maxWidth: 1200, // Player will auto-size based on recording dimensions
    maxScale: 0,    // Set to 0 for unlimited scaling (default: 0)
  },
});

Custom Colors

Customize the player controls appearance with the customColors prop:

new rrwebPlayer({
  target: document.body,
  props: {
    events,
    customColors: {
      text: '#e0e0e0',                      // Icons, timestamp, and dropdown text
      background: '#1e1e1e',                // Controller background
      progressUnplayed: '#5a5a5a',          // Unplayed progress bar
      progressPlayed: '#b0b0b0',            // Played progress bar
      dropdownActiveBackground: '#4a9eff',  // Active dropdown item background
      dropdownActiveText: '#ffffff',        // Active dropdown item text
      dropdownHoverBackground: '#2a2a2a',   // Hover state for dropdown items
    },
  },
});

Keyboard Shortcuts

• Spacebar: Toggle play/pause

How is this different from rrweb.Replayer?

rrweb-player uses rrweb's Replayer under the hood, but as Replayer doesn't include any UI for controls, rrweb-player adds those.

Installation

rrweb-player can also be included with <script>：

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@exeq/rrweb-player@latest/dist/style.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@exeq/rrweb-player@latest/dist/index.umd.cjs"></script>

Or installed by using NPM：

npm install --save @exeq/rrweb-player

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

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

Support

Consider sponsoring the official rrweb project that this fork is based on.

Who's using rrweb?