Help Me Understand the MediaSoup Integration Flow

Integration
8

While debugging the Mediasoup client on the receiving device, I found that the ICE connection state transitions to “connected,” and the MediaStreamTrack is successfully loaded into the browser’s video element.

image
image1920×1054 351 KB

Upon inspecting the receiving client using the Chrome WebRTC debugger, I observed incoming data. However, I also noticed outgoing data, even though I joined from the receiver device with both video and audio turned off

image
image1844×704 60.6 KB

PS: I am running both clients in same computer and connected to same network.
and this is how my config looks like

    let transport = await room.router.createWebRtcTransport({
        listenInfos: [
            {
                ip: "0.0.0.0",
                announcedIp: "127.0.0.1",
                protocol: "udp"
            },
            {
                ip: "0.0.0.0",
                announcedIp: "127.0.0.1",
                protocol: "tcp"
            }
        ],
        enableTcp: true,
        enableUdp: true,
        preferUdp: true,
    })

And one more thing is that i have attached a onLoadMetaData event listener to the video element and when the recieving client loads the streames video this event is not firing


                                <video
                                    ref={participant.ref}
                                    onLoadedMetadata={(e) => {
                                        console.log("Video metadata loaded")
                                        console.log(e)
                                    }}
                                    autoPlay
                                    playsInline
                                    muted={participant.id === user?.id}
                                    className="w-full h-full object-cover"
                                />