@ai.hermes/rrweb-player
v2.0.0-alpha.15
Published
rrweb's replayer UI
Downloads
15
Readme
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
rrweb-player can also be included with <script>
:
<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/dist/index.js"></script>
Or installed by using NPM:
npm install --save rrweb-player
import rrwebPlayer from 'rrweb-player';
import '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,
)