Search code examples
javascriptudpwebrtcvideocallrtcpeerconnection

How to correctly close a webRTC connection, so that it can be removed from chrome://webrtc-internals

I have a video calling application built using webRTC. When a user disconnects a call, the call ends smoothly, even the connectionstatechange becomes closed which is fine. On closing the call I am running this function

async closeConnection() {
    if (!this.peer) return;
    if (this.peer?.onicecandidate) this.peer.removeEventListener("icecandidate",   this.peer.onicecandidate);
    if (this?.peer?.ontrack) this.peer.removeEventListener("track", this.peer.ontrack);
    if (this?.peer?.onnegotiationneeded)
      this.peer.removeEventListener("negotiationneeded", this.peer.onnegotiationneeded);
      this.peer.close();
      console.log('closing the peer connection....')
  }

But the info is still visible in chrome://webrtc-internals and sometimes it happens that browser freezes and shows Out of Memory which means there may be a memory leak.

closed state in chrome://webrtc-intrernals

enter image description here

What can be done to resolve this issue?

After closing the webRTC connection it should also removed from chrome://webrtc-internals browser should free up all the resources were used during the connection.

Solution

  • This is expected since you still keep a reference to the peerconnection in this.pc. It can only be marked as available for garbage collection once you release that reference by setting this.peer = null.

    Even then it might not get released immediately.