title: WebRTC - Streaming only works when one of the two refresh page
body: <p>I'm building a WebRTC application using Socket.IO as my signaling.</p>
  
  <p>I'm assuming that only two clients will be the page at the same time (that's why I skipped a lot of validations), I just wanted to jump right into WebRTC.</p>
  
  <p>The application works fine, the only problem is that in order for it to work, one of the two clients has to refresh the page.</p>
  
  <p>What I'm trying to do is that, the second client will be the one who calls the first client.</p>
  
  <p>The first client enters the page, he will only be able to see himself, when the second client enters, then the exchange of description begins. That works fine, (I did log into the console and it seems like everything is happening as it's supposed to happen).</p>
  
  <p>And like I said, the only problem is that when the second client enters, one of the two has to refresh the page in order to see both video streams.</p>
  
  <p>This is my code: </p>
  
  <pre><code>var socket = io.connect(window.location.host);
  
  var peerConf = {
      "iceServers": [{
          "url": "stun:stun3.l.google.com:19302"
      }]
  };
  
  var peerConnection = new RTCPeerConnection(peerConf);
  peerConnection.onicecandidate = (event) =&gt; {
      if(event.candidate != null) {
          socket.emit('answerer', {
              type: 'ice',
              candidate: event.candidate
          });
      } else {
          console.log("All ICE Candidates have been received and sent to the other peer.");
      }
  };
  
  var startCall = (isCaller) =&gt; {
      if(isCaller) {
          peerConnection.createOffer()
              .then((desc) =&gt; {
                  peerConnection.setLocalDescription(desc)
                      .then(() =&gt; {
                          console.log("Local description has been set successfully!");
                          socket.emit('caller', {
                              type: 'sdp',
                              description: desc
                          });
                      })
                      .catch((errLocal) =&gt; {
                          console.log("Error setting local description: \n" + errLocal);
                      });
              })
              .catch((errOffer) =&gt; {
                  console.log("Error creating offer: \n" + errOffer);
              });
      }
  };
  
  navigator.getUserMedia({
      //audio: true,
      video: true
  }, (stream) =&gt; {
      var localvideo = document.getElementById('localVideo');
      var remoteVideo = document.getElementById('remoteVideo');
  
      localvideo.src = window.URL.createObjectURL(stream);
  
      peerConnection.addStream(stream);
      peerConnection.onaddstream = (eventRemoteStream) =&gt; {
          remoteVideo.src = window.URL.createObjectURL(eventRemoteStream.stream);
      };
  
  }, (err) =&gt; {
      console.log("An error has occured: " + err);
  });
  
  socket.on('connected', (data) =&gt; {
      console.log(data.message);
  
      // The second client to connect will be the caller.
      if(data.clients == 2) {
          startCall(true);
      }
  });
  
  socket.on('answering', (data) =&gt; {
      switch(data.type) {
          case 'sdp':
              peerConnection.setRemoteDescription(new RTCSessionDescription(data.description))
                  .then(() =&gt; {
                      console.log("Connection has been established successfully! :D");
                  })
                  .catch((errRemoteAnswering) =&gt; {
                      console.log("Error setting remote description on answering: \n" + errRemoteAnswering);
                  });
              break;
          case 'ice': 
              peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate));
              break;
      }
  });
  
  socket.on('calling', (data) =&gt; {
      switch(data.type) {
          case 'sdp': 
              peerConnection.setRemoteDescription(new RTCSessionDescription(data.description))
                  .then(() =&gt; {
                      if(data.description.type == 'offer') {
                          peerConnection.createAnswer()
                              .then((answerDesc) =&gt; {
                                  peerConnection.setLocalDescription(answerDesc)
                                      .then(() =&gt; {
                                          socket.emit('answerer', {
                                              type: 'sdp',
                                              description: answerDesc
                                          });
                                      })
                                      .catch((errLocalAns) =&gt; {
                                          console.log("Error setting local description on answering: \n" + errLocalAns);
                                      });
                              })
                              .catch((errAnswer) =&gt; {
                                  console.log("Error creating answer: \n" + errAnswer);
                              });
                      }
                  })
                  .catch((errRemote) =&gt; {
                      console.log("Error setting remote description on calling: \n" + errRemote);
                  });
              break;
      }
  });
  </code></pre>
  
  <p>I don't know if I'm missing something, or if something is placed where it shouldn't.</p>
  
  <p>I really hope you guys can give me a hand.
  Thanks in advance. :)</p>