Guide to properly starting live mode from an existing session already in progress

[reichert621]

I'm a little confused about the best way to start a live session in the replayer -- at the moment, if a session is in the middle of being recorded and I start viewing in the middle of it, I can see the cursor but not the DOM.

My guess is that I'm missing a "full snapshot" at that point, but I'm not sure the best way to load a "full snapshot"?

I tried finding the most recent even with type == 2 (2 seems to be the full snapshot?), but that didn't seem to fix it.

This is how I'm initializing the replayer:

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

this.replayer.startLive();

I've tried passing in all the existing events into Replayer (e.g. new Replayer(allPreviousEvents)), and that doesn't seem to help.

I've also tried the following, with no luck:

allPreviousEvents.forEach((event) => this.replayer.addEvent(event));

Am I missing something?

[reichert621]

Seems similar to https://github.com/rrweb-io/rrweb/issues/299, but I'm unclear what the solution to that was 🤔

cc @mehtamanan @randy-johnson any suggestions?

[wangkai0717]

I have the same confusion. In live mode, if some previous events are played out and some new events are added, there is only a quick mouse movement path, and there is no DOM change.

[Yuyz0112]

Is there any sample code for reproducing the problem?

The live mode should work like this:

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

replayer.startLive(FIRST_EVENT.timestamp - BUFFER);

replayer.addEvent(NEW_EVENT);

[wangkai0717]

async insertEvent(insureBehaviorId) {
    const vm = this;
    const {data: {body: {datas = []}}} = await InsuranceFlow.insureBehaviorData({insureBehaviorId});
    datas.forEach((event) => {
         vm.livePlay(event);
    });
},

livePlay(data) {
     const vm = this;
     const {player, recordings} = vm;

     if ((player === null) && recordings.length >= 2) {
             vm.player = new Replayer(recordings, {
                  liveMode: true,
                  root: vm.$refs['rrweb-player']
             });
             vm.player.startLive(recordings[0].timestamp);
       } else if (recordings.length < 2) {
              vm.recordings.push(data);
       } else if (vm.player !== null) {
              vm.player.addEvent(data);
       }
}

When the next data comes after the last broadcast for a period of time, the mouse will move very fast, and the DOM node changes cannot be played normally according to the timestamp.（当上一次播完了一段时间后下一个数据才过来，就会出现鼠标超级快速移动，但是画面不能按照时间戳正常播放dom节点变化。）

[reichert621]

@Yuyz0112 the sample code works for starting in live mode from the first event, but I'm trying to get it to start "in real time" (i.e. I'm sending events through a websocket)

Is there a way to do this?

[Yuyz0112]

@wangkai0717 @reichert621

So what're the timestamps of the events and the real time?

For example, if you have some events at [t1, t2, t3], and the current time is t4. What's the value of t1~t4.

[wangkai0717]

t1 t2 t3连续然后小于t4

[Yuyz0112]

如果有能够复现这个问题的回放代码和 events 可以提供一下用于 debug。

[manan]

@Yuyz0112 Any updates?

[theores]

有没有完整的例子或文档以示例如何使用实时直播模式？