title: Peer to peer video streaming using webrt and node js and soket io remote video not rendering
body: <p>I am using this code <a href="https://bitbucket.org/webrtc/codelab" rel="nofollow">https://bitbucket.org/webrtc/codelab</a>. When I try to connect remote system it shows my web cam video in remote video box. Can anyone help in how RTCPeerConnection works? This is code.</p>
  
  <pre><code>var localStream, localPeerConnection, remotePeerConnection;
  
  var localVideo = document.getElementById("localVideo");
  var remoteVideo = document.getElementById("remoteVideo");
  
  var startButton = document.getElementById("startButton");
  var callButton = document.getElementById("callButton");
  var hangupButton = document.getElementById("hangupButton");
  startButton.disabled = false;
  callButton.disabled = true;
  hangupButton.disabled = true;
  startButton.onclick = start;
  callButton.onclick = call;
  hangupButton.onclick = hangup;
  
  function trace(text) {
    console.log((performance.now() / 1000).toFixed(3) + ": " + text);
  }
  
  function gotStream(stream){
    trace("Received local stream");
    localVideo.src = URL.createObjectURL(stream);
    localStream = stream;
    callButton.disabled = false;
  }
  
  function start() {
    trace("Requesting local stream");
    startButton.disabled = true;
    getUserMedia({audio:true, video:true}, gotStream,
      function(error) {
        trace("getUserMedia error: ", error);
      });
  }
  
  function call() {
    callButton.disabled = true;
    hangupButton.disabled = false;
    trace("Starting call");
  
    if (localStream.getVideoTracks().length &gt; 0) {
      trace('Using video device: ' + localStream.getVideoTracks()[0].label);
    }
    if (localStream.getAudioTracks().length &gt; 0) {
      trace('Using audio device: ' + localStream.getAudioTracks()[0].label);
    }
  
    var servers = null;
  
    localPeerConnection = new RTCPeerConnection(servers);
    trace("Created local peer connection object localPeerConnection");
    localPeerConnection.onicecandidate = gotLocalIceCandidate;
  
    remotePeerConnection = new RTCPeerConnection(servers);
    trace("Created remote peer connection object remotePeerConnection");
    remotePeerConnection.onicecandidate = gotRemoteIceCandidate;
    remotePeerConnection.onaddstream = gotRemoteStream;
  
    localPeerConnection.addStream(localStream);
    trace("Added localStream to localPeerConnection");
    localPeerConnection.createOffer(gotLocalDescription,handleError);
  }
  
  function gotLocalDescription(description){
    localPeerConnection.setLocalDescription(description);
    trace("Offer from localPeerConnection: \n" + description.sdp);
    remotePeerConnection.setRemoteDescription(description);
    remotePeerConnection.createAnswer(gotRemoteDescription,handleError);
  }
  
  function gotRemoteDescription(description){
    remotePeerConnection.setLocalDescription(description);
    trace("Answer from remotePeerConnection: \n" + description.sdp);
    localPeerConnection.setRemoteDescription(description);
  }
  
  function hangup() {
    trace("Ending call");
    localPeerConnection.close();
    remotePeerConnection.close();
    localPeerConnection = null;
    remotePeerConnection = null;
    hangupButton.disabled = true;
    callButton.disabled = false;
  }
  
  function gotRemoteStream(event){
    remoteVideo.src = URL.createObjectURL(event.stream);
    trace("Received remote stream");
  }
  
  function gotLocalIceCandidate(event){
    if (event.candidate) {
      remotePeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
      trace("Local ICE candidate: \n" + event.candidate.candidate);
    }
  }
  
  function gotRemoteIceCandidate(event){
    if (event.candidate) {
      localPeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
      trace("Remote ICE candidate: \n " + event.candidate.candidate);
    }
  }
  
  function handleError(){}
  </code></pre>