webRTC order and signaling server

Question

So I am trying to set up a webRTC video connection through a signaling server with socket.io. I have gotten past setLocalDescription which allows me to get the ice candidates, which I believe from reading is the right way, but how do I add the ice candidates. I see that I have to use something like the following: myPeerConnection.addIceCandidate(RTCIceCandidate); but do I add this to both my remote and local peer connection? Do i send the evt.candidates to my signaling server and add them there? and If so, how? the variable for adding to peer connection isn't global. I've been working on this for a few days now and I think I'm at the point where I just need a guide, something better than the tutorials online, and I've looked at all i can find.

This is the code attached to my html: client.js

var socket = io.connect();

var myPeerConnection;
var remotePeerConnection;
var offer;

var PeerConnectionWindow = (window.RTCPeerConnection || window.mozRTCPeerConnection 
|| window.webkitRTCPeerConnection || window.msRTCPeerConnection);
var SessionDescription = (window.RTCSessionDescription || window.mozRTCSessionDescription 
|| window.webkitRTCSessionDescription || window.msRTCSessionDescription);


    function hasUserMedia() { 
   //check if the browser supports the WebRTC 
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia || navigator.msGetUserMedia); 
}




if (hasUserMedia()) {

   var configuration = { 
      "iceServers": [{ "url": "stun:stun.1.google.com:19302" }] 
   }; 

   myPeerConnection = new PeerConnectionWindow(configuration);
   console.log(myPeerConnection);

   remotePeerConnection = new PeerConnectionWindow(configuration);
   console.log(remotePeerConnection);

   myPeerConnection.createOffer(gotDescription, onError);

   myPeerConnection.onicecandidate = function(evt){
      if(event.candidate){
         socket.emit('ice', JSON.stringify({'ice': evt.candidate}));
         remotePeerConnection.addIceCandidate(evt.candidate);
         console.log("connected my to remote");
      }
   };

   remotePeerConnection.onicecandidate = function(evt){
      if(event.candidate){
         socket.emit('ice', JSON.stringify({'ice': evt.candidate}));
         myPeerConnection.addIceCandidate(evt.candidate);
         console.log("connected my to remote");
      }
   };

   remotePeerConnection.onaddstream = function (evt) {
      console.log("on added stream");
      var remoteVid = document.getElementById('remote'); 

      remoteVid.src = window.URL.createObjectURL(evt.stream);
   }

   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
   || navigator.mozGetUserMedia || navigator.msGetUserMedia; 
   //enabling video and audio channels 
   navigator.getUserMedia({ video: true, audio: true }, function (stream) {  
      var video = document.getElementById('local');  
      // //inserting our stream to the video tag     
      video.src = window.URL.createObjectURL(stream);
      myPeerConnection.addStream(stream); 
   }, onError); 
} else { 
   alert("WebRTC is not supported"); 
}

function gotDescription(desc) {
   offer = desc
   myPeerConnection.setLocalDescription(offer, myPeerConnLocalDescSet, onError);
   socket.emit('description', JSON.stringify({'sdp': desc}));
}

function onError(err){
   console.log(err);
}

function myPeerConnLocalDescSet(){
   remotePeerConnection.setRemoteDescription(offer, remotePeerConnRemoteDescSet,onError);
}

function remotePeerConnRemoteDescSet(){
   remotePeerConnection.createAnswer(onAnswerCreated, onError);
}

function onAnswerCreated(description){
   answer = description;
   remotePeerConnection.setLocalDescription(answer, remotePeerLocalDescSet,onError);
}

function remotePeerLocalDescSet(){
   myPeerConnection.setRemoteDescription(answer, myPeerRemoteDescSet,onError);
}

function myPeerRemoteDescSet(){
   console.log('did we get it?');
}

and this is my signaling server: server.js

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);



app.get('/', function(req, res){
   res.sendFile(__dirname + '/index.html');
});

app.use(express.static(__dirname + '/'));

server.listen(process.env.PORT || 3000, function(){
  console.log('listening on *:3000');
});


io.sockets.on('connection', function(socket){
    console.log("in the socket on server");

    socket.on('disconnect', function(){
        console.log('user disconnected');
    });
    socket.on('description', function(data){
        console.log(data);
    });
    socket.on('ice', function(data){
        // Do I attempt to add the candidate here like so?: myPeerConnection.addIceCandidate(new RTCIceCandidate(data));
    });
});

UPDATE

So it looks like everything flows in terms of order so I updated my code. Now I only need help with how to exchange the SDP information between the two peers. What I have now is them being sent to Socket.io to be picked up and applied by both parties...right? Does someone have some example code of how this is done they can show me with an explanation. Please and thank you for helping!

Answer 1

So I found out how to communicate with socket.io through some basic tutorials if anyone was interested but most importantly I discovered that the order for webrtc is super important. After having the right code and calls the peer-to-peer was still not being completed and that's because ONADDSTREAM HAS TO BE CALLED ON THE REMOTE AND ADDSTREAM ON THE LOCAL BEFORE YOU CREATE THE OFFER

That's for anyone else who wasted a few hours on such simple ish.