title: WebRTC more than one peer connection
body: <p>I searched almost everywhere and can't seem to find any resource on this scenario for some reason. Any help would greatly be appreciated. </p>
  
  <p>The problem is this:</p>
  
  <p>I have 4 users. Lets say: A,B,C and D. I want to match them according to url. For example, if A and B connects to &amp;room=1 and C and D connects to &amp;room=2 I want to establish the connection between A and B pairs and C and D pairs.</p>
  
  <p>Currently my code only establishes connection between A and B, and if one of the C or D users initiates the call, the connection between A and B gets disconnected and C cannot find D.</p>
  
  <hr>
  
  <p>In order to solve this problem I tried to create an object like this: </p>
  
  <p>{
      room: 1,
      peer: RTCPeerConnection
  }</p>
  
  <p>and store it in an array and get the peer connection according to room id and establish the connection based on RTCPeerConnection that is stored according to roomId. But that didn't work.</p>
  
  <p>How would I go around fixing this without establishing a socket server that handles this communication? </p>
  
  <hr>
  
  <p>I currently establish connections this way if it helps:</p>
  
  <pre><code>navigator.mediaDevices
      .getUserMedia({
          audio: true,
          video: true
      })
      .then(function (stream) {
          localStream = stream;
          localVideo.srcObject = localStream;
          try {
              conn = new RTCPeerConnection(servers);
          } catch (err) {
              console.log("Can't establish connection");
              return;
          }
          localStream.getTracks().forEach(function (track) {
              conn.addTrack(track, localStream);
          });
          conn.onaddstream = function (event) {
              setTimeout(() =&gt; {
                  callButton.click();
              }, 2000);
              remoteVideo.srcObject = event.stream;
          };
          conn.onicecandidate = function (event) {
              if (event.candidate) {
                  chat.server.iceCandidate(
                      JSON.stringify({ candidate: event.candidate })
                  );
              }
          };
      })
      .catch(function (err) {
          console.log("Error", err);
      });
  </code></pre>
  
  <hr>
  
  <p>And this is my failed solution:</p>
  
  <pre><code>    var connections = JSON.parse(localStorage.getItem("connections")) || [];
      var connection;
      if (connections) {
          connection = connections.find(function (conn) {
              return conn.id = roomId;
          })
      }
      if (!connection) {
          conn = new RTCPeerConnection(servers);
          var data = {
              id: roomId,
              peer: conn
          }
          localStorage.removeItem("connections");
          localStorage.setItem("connections", JSON.stringify(connections));
      } else {
          conn = JSON.parse(connection.peer);
          conn.__proto__ = new RTCPeerConnection();
      }
  </code></pre>
  
  <p>This fails because of course you can't store <strong>proto</strong> of an object in localStorage (RTCPeerConnection). When I stringify/parse it peer attribute comes as an empty object. If I try a global variable, instead of localStorage, it always comes empty. I'd very appreciate any tip about this issue.                                              </p>