实时回放（实时模式）

如果你希望以实时的方式回放事件，可以使用实时模式 API。该 API 同样适用于一些实时协作场景。

使用 Replayer 进行实时回放时，配置 liveMode: true 并调用 startLive() 即可启用实时模式。

import { Replayer } from '@rrweb/replay';

const replayer = new Replayer([], {
  liveMode: true,
});
replayer.startLive();

之后当你收到新的事件时（例如通过 websockets），可以使用以下方式添加：

function onReceive(event) {
  replayer.addEvent(event);
}

如果一段录制仍在进行中且已经产生了事件，而你希望从“实时”时间点开始播放，也可以使用 play 函数，并传入一个与当前时间对应的偏移量：

import { Replayer } from '@rrweb/replay';

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

调用 startLive API 时，可以传入一个可选参数来设置基线时间。默认情况下该值为 Date.now()，这样事件一到达就会被应用，但这可能会让回放看起来有卡顿。因为数据传输需要时间（例如网络延迟），而且一些事件默认被节流（例如鼠标移动），会产生延迟。

以下是引入缓冲的方法：

const BUFFER_MS = 1000;
replayer.startLive(Date.now() - BUFFER_MS);

这会让回放始终比源端延迟 1 秒。如果数据传输时间不超过 1 秒，用户就不会感到卡顿。

play 也可以做同样的处理：replayer.play((Date.now() - EXISTING_EVENTS[0].timestamp) - BUFFER_MS)

实时回放（实时模式） ​

实时回放（实时模式）