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
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.
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.