ContextQMD
Back to Rrweb

rrweb-player

packages/rrweb-player/README.md

1.0.214.6 KB
Original Source

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.

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

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 + import maps)

html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
/>
<script type="importmap">
  {
    "imports": {
      "rrweb-player": "https://cdn.jsdelivr.net/npm/rrweb-player@latest/+esm"
    }
  }
</script>
<script type="module">
  import rrwebPlayer from 'rrweb-player';
</script>

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

Use this only for compatibility with non-module environments.

html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
/>
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/umd/rrweb-player.min.js"></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,
  )

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site.

Gold Sponsors 🥇

<div dir="auto">

<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"></a>

</div>

Silver Sponsors 🥈

<div dir="auto">

<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"></a>

</div>

Bronze Sponsors 🥉

<div dir="auto">

<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"></a> <a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"></a>

</div>

Backers

<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"></a>

Core Team Members

<table> <tr> <td align="center"> <a href="https://github.com/Yuyz0112">

<sub><b>Yuyz0112</b></sub>

  </a>
</td>
<td align="center">
  <a href="https://github.com/YunFeng0817">

<sub><b>Yun Feng</b></sub>

  </a>
</td>
<td align="center">
  <a href="https://github.com/eoghanmurray">

<sub><b>eoghanmurray</b></sub>

  </a>
</td>
<td align="center">
  <a href="https://github.com/Juice10">

<sub><b>Juice10</b></sub>

<sub>open for rrweb consulting</sub> </a> </td>

</tr> </table>

Who's using rrweb?

<table> <tr> <td align="center"> <a href="http://www.smartx.com/" target="_blank"> 
  </a>
</td>
<td align="center">
  <a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://statcounter.com/session-replay/" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://recordonce.com/" target="_blank">
    
  </a>
</td>
</tr> <tr> <td align="center"> <a href="https://cux.io" target="_blank"> 
  </a>
</td>
<td align="center">
  <a href="https://remsupp.com" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://highlight.io" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://analyzee.io" target="_blank">
    
  </a>
</td>
</tr> <tr> <td align="center"> <a href="https://requestly.io" target="_blank"> 
  </a>
</td>
<td align="center">
  <a href="https://gleap.io" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://uxwizz.com" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://www.howdygo.com" target="_blank">
    
  </a>
</td>
</tr> </table>