[Bug]: Replayer not working properly

[Lukkyz]

Preflight Checklist

• [x] I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb-player

Expected Behavior

I use PeerJS for transmitting events from a page to another, the events are transmitted successfully, I create a live replayer and add event to this replayer when receiving one.

Actual Behavior

The div "replayer-wrapper" is created with an iframe inside. I have the mouse with the blue button, but nothing else..

Testcase Gist URL

No response

Additional Information

My replayer code :

let replayer = new rrweb.Replayer([], {
    liveMode: true
})
replayer.startLive();
let conn = peer.connect("hello");
conn.on("open", function() {
    conn.on("data", function(data) { 
        console.log(data)
        replayer.addEvent(data);
     })
});

I use the latest version of rrweb, the two page are in localhost with an ExpressJs server

[Juice10]

Could you share the output of the first couple console.log(data) that you get from your peer.js connection?

[daly2211]

Hey @Juice10 , I'm experiencing the same problem. Here are the first events passed on to the replayer.addEvent function : [{ "type": 1, "data": {}, "timestamp": 1661944120468, "delay": 1661944119968 },{ "type": 4, "data": { "href": "file://C:/software/record_client.html", "width": 989, "height": 969 }, "timestamp": 1661944120468, "delay": 1661944119968 },{ "type": 2, "data": { "node": { "type": 0, "childNodes": [ { "type": 2, "tagName": "html", "attributes": {}, "childNodes": [ { "type": 2, "tagName": "head", "attributes": {}, "childNodes": [ { "type": 2, "tagName": "script", "attributes": { "src": "https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js", "crossorigin": "anonymous" }, "childNodes": [], "id": 4 }, { "type": 3, "textContent": "\n\n", "id": 5 } ], "id": 3 }, { "type": 2, "tagName": "body", "attributes": {}, "childNodes": [ { "type": 2, "tagName": "h1", "attributes": {}, "childNodes": [ { "type": 3, "textContent": "Record", "id": 8 } ], "id": 7 }, { "type": 3, "textContent": "\n\n", "id": 9 }, { "type": 2, "tagName": "script", "attributes": { "src": "https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js" }, "childNodes": [], "id": 10 }, { "type": 3, "textContent": "\n\n", "id": 11 }, { "type": 2, "tagName": "script", "attributes": { "type": "text/javascript", "charset": "utf-8" }, "childNodes": [ { "type": 3, "textContent": "SCRIPT_PLACEHOLDER", "id": 13 } ], "id": 12 }, { "type": 3, "textContent": "\n", "id": 14 } ], "id": 6 } ], "id": 2 } ], "compatMode": "BackCompat", "id": 1 }, "initialOffset": { "left": 0, "top": 0 } }, "timestamp": 1661944120471, "delay": 1661944119971 },{ "type": 3, "data": { "source": 1, "positions": [ { "x": 613, "y": 0, "id": 2, "timeOffset": 0 } ] }, "timestamp": 1661944122031, "delay": 1661944121531 },{ "type": 3, "data": { "source": 1, "positions": [ { "x": 667, "y": 152, "id": 6, "timeOffset": -938 }, { "x": 664, "y": 297, "id": 6, "timeOffset": -882 }, { "x": 544, "y": 350, "id": 6, "timeOffset": -832 }, { "x": 400, "y": 314, "id": 6, "timeOffset": -778 }, { "x": 354, "y": 215, "id": 6, "timeOffset": -728 } ] }, "timestamp": 1661944123024, "delay": 1661944121586 }] Thank you.

[daly2211]

Hey, I fixed the problem. It seems that the script imported from <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js" ></script> doesn't support live replays, I imported it from <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb-all.min.js"></script> and it's working perfectly fine. Thanks for the effort.