How to destroy RTCPeerConnection properly in JavaScript?

Question

When I create a new RTCPeerConnection(), I am unable to destroy it with peer.close(), as far as I can see, and after some time I run out of resources. When a webpage creates lots of RTCPeerConnections, it stops working after about 600 attempts and throws the following error in Chrome:

Uncaught DOMException: Failed to construct 'RTCPeerConnection': Cannot create so many PeerConnections

Here is a test script, which will help you get the error. It is illustrative only, the problem occurs even if the peers are created much slower:

var i = 1;

function peer() {
  var peer = new RTCPeerConnection();
  setTimeout(() => {
    peer.close();
    peer=null;
  }, 10);
  console.log(i++);
}

setInterval(peer, 20);
// run the script and wait on console to see the error

I expect it to release all resources when peer.close() is called, or at least when peer is set to null, so I see no reason why browser throws the error that there is so many PeerConnections. Am I doing anything incorrectly? How do I destroy the peer properly? Thank you

Answer 1

Try setting peer to null so it gets garbage collected. See these notes from the person who implemented the limit. If this does not work ask in that mailing list thread

Answer 2

OK , that was confusing mystery , fortunately it is solved , i will try to give you an example so anyone who read this post can understand what is happening exactly .

assume that you have built your own program , that can count files in a single folder , and you ordered the program to count files on folder C:\Files

that folder path contain 500 files . the program will take maximum 1 hour to read the 500 files , thats his maximum ability , so you give him the order and hit enter .

after one hour , you came back you saw the program is ( Dead ) , you investigate what is the problem ? then you find out that since his maximum ability to read 500 files on hour and the folder having 500 files , its no way he can make error , but the error appeared because there is someone keep throwing files on this folder with like infinity loop , its like it takes him 1 second to read a file and within the same one second there is 5 more files coming on accumulative way he start counting and counting while new files are counted cumulatively .

this is exactly what is happening on your case , chrome browser is closing the peer connection in one second , and within this one second , you are throwing him 3-4 new peer connection , that makes chrome browser after while flag the error on console , because the calculation on the background of console indicates this is infinity and it will display stack error either sooner or later . a part of that you are flooding your browser cache with setting the interval time with these values .

i been tracing this almost three hours and this is the result i end up with . i will edit this post soon and add the solution on how to resolve it .

OK , i just finished adjusting the code , here is what i end up with run snip code and tell me if you see the errors on your chrome console note : you can remove the sip java-script , i used it to trace your error .

hopefully my post help someone in future .

good luck

 <script src="http://sipjs.com/download/sip-0.7.2.min.js"></script>

 <meta http-equiv="Expires" content="0">
 <meta http-equiv="Pragma" content="no-cache">
 <meta http-equiv="Cache-control" content="no-cache">
 <meta http-equiv="Cache" content="no-cache">
 <script>



  var i = 1;

  function peer() {

  var peer = new RTCPeerConnection();
   
  peer.mediaHandler = null;
  peer.onicecandidate = null; 
  peer.onaddstream = null; 

  peer.close(i);

  setTimeout(() => {

  console.log('Ending Call');

  }, 3500);
  console.log(i++);



  }

 setInterval(peer, 500);


  hangUp = () => {
    let { peer} = this.state;
 
    peer.close();

 
    this.setState({
        peer: null,
      
   
    });
};




</script>