Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add play to live-mode.md #1009

Merged
merged 3 commits into from
Sep 26, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions docs/recipes/live-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ If you want to replay the events in a real-time way, you can use the live mode A
When you are using rrweb's Replayer to do a real-time replay, you need to configure `liveMode: true` and call the `startLive` API to enable the live mode.

```js
const ANY_OLD_EVENTS = [];
const replayer = new rrweb.Replayer(ANY_OLD_EVENTS, {
const replayer = new rrweb.Replayer([], {
liveMode: true,
});
replayer.startLive();
Expand All @@ -20,7 +19,16 @@ function onReceive(event) {
}
```

When calling the `startLive` API, there is an optional parameter to set the baseline time. By default, this is `Date.now()` so that events are applied as soon as they come in, however this may cause your replay to look laggy. Because data transportation needs time(such as the delay of the network). And some events have been throttled(such as mouse movements) which has a delay by default.
If you have an ongoing recording that already has events, and wish to initiate play from a 'live' time, it's also possible to use the `play` function, supplied with an offset which corresponds to the current time:

```js
const replayer = new rrweb.Replayer(EXISTING_EVENTS, {
liveMode: true,
});
replayer.play(Date.now() - EXISTING_EVENTS[0].timestamp);
```

When calling the `startLive` API, there is an optional parameter to set the baseline time. By default, this is `Date.now()` so that events are applied as soon as they come in, however this may cause your replay to appear laggy. Because data transportation needs time (such as the delay of the network), And some events have been throttled(such as mouse movements) which has a delay by default.

Here is how you introduce a buffer:

Expand All @@ -30,3 +38,5 @@ replayer.startLive(Date.now() - BUFFER_MS);
```

This will let the replay always delay 1 second than the source. If the time of data transportation is not longer than 1 second, the user will not feel laggy.

The same can be done for `play` as follows: `replayer.play((Date.now() - EXISTING_EVENTS[0].timestamp) - BUFFER_MS)`