WebRTC with multiple Peer Connections - Stream between existing peer connections stop when a new connection is created

Question

I am creating a video chat application for multiple users.The host initiates the call, when a second participant joins, a Peer Connection is created between host and the second participant.

When the third person joins, Peer connections are created between 1 & 3 and 2 & 3 (n-1 peer connections for each client). The new connection work as expected but the media streaming between 1 & 2 breaks.

I am registering the appropriate event listeners for each peer connection with the index after the Peer Connection is created -

  peerConnection.onicecandidate = (event) => handleIceCanditate(pcIndex, event);
  peerConnection.ontrack = (event) => handleTrack(pcIndex, event);
  peerConnection.onnegotiationneeded = (event) => handleNegotiationNeeded(pcIndex, event);
  peerConnection.oniceconnectionstatechange = (event) => handleICEConnectionStateChange(pcIndex, event);
  peerConnection.onicegatheringstatechange = (event) => handleICEGatheringStateChange(pcIndex, event);
  peerConnection.onsignalingstatechange = (event) => handleSignalingStateChange(pcIndex, event); 

None of the events for the older Peer Connection with index 0 get fired before it stops working. Any leads on how to debug the issue. The connection state of the older Peer Connection is connected

Answer 1

This is resolved.The webRtc implementation works as expected, the issue was on the React front end layer.

I was using React state that mapped the remote users to create the Video components that show the participants live feed. Because the function was being invoked on useEffects to create that list all the elements were being re-rendered.