Not receiving video, onicecandidate is not executing

Question

So I was following this tutorial to learn how to implement a WebRTC server-client setup. Once I got that working I wanted to split the client into two parts, one sender and one receiver. Now they can establish a connection with each other but the receiver never gets the stream from the sender.

I managed to determine that the code flow between the original code and split versions remains the same, except that neither peer executes the onicecandidate event.

According to this I need to explicitly include OfferToReceiveAudio: true and OfferToReceiveVideo: true since I'm using Chrome, which I did but it didn't seem to make any difference.

Currently, they both receive SDP from each other, there is a local and remote description in the peerConnection, and iceGatheringState is "new" but iceConnectionState is "checking" (unlike the second link where he states it should also be "new")

How come they aren't exchanging ICE candidates when it's split in two like this?

Sender.js

const HTTPSPort = 3434;
const domain = '127.0.0.1';
const wssHost = 'wss://' + domain + ':' + HTTPSPort + '/websocket/';

// Feed settings
const video = true;
const audio = true;
const constraints = { "audio": audio, "video": video };

var videoContainer = null, feed = null,
 pC = null, wsc = new WebSocket(wssHost),
 pCConfig = [
  { 'url': 'stun:stun.services.mozilla.com' },
  { 'url': 'stun:stun.l.google.com:19302' }
 ];

function pageReady() {
 // Check browser WebRTC availability
 navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
  videoContainer = document.getElementById('videoFeed');

  // Get the feed and show it in the local video element
  feed = stream;
  videoContainer.srcObject = feed;
 }).catch(function () {
  alert("Sorry, your browser does not support WebRTC!");
 });
}

wsc.onmessage = function (evt) {
 if (!pC) {
  // Initiate peerConnection
  pC = new RTCPeerConnection(pCConfig);

  // Send any ice candidates to the other peer
  pC.onicecandidate = onIceCandidateHandler;

  pC.addStream(feed);
 }

 // Read the message
 var signal = JSON.parse(evt.data);
 if (signal.sdp) {
  log('Received SDP from remote peer.');
  pC.setRemoteDescription(new RTCSessionDescription(signal.sdp));

  answerCall();
 } else if (signal.candidate) {
  log('Received ICECandidate from remote peer.');
  pC.addIceCandidate(new RTCIceCandidate(signal.candidate));
 }
};

function answerCall() {
 pC.createAnswer().then(function (answer) {
  var ans = new RTCSessionDescription(answer);
  pC.setLocalDescription(ans).then(function () {
   wsc.send(JSON.stringify({ 'sdp': ans }));
  }).catch(errorHandler);
 }).catch(errorHandler);
}

function onIceCandidateHandler(evt) {
 if (!evt || !evt.candidate) return;

 wsc.send(JSON.stringify({ 'candidate': evt.candidate }));
};

Receiver.js

const HTTPSPort = 3434;
const domain = '127.0.0.1';
const wssHost = 'wss://' + domain + ':' + HTTPSPort + '/websocket/';

var remoteVideo = null,
 pC = null, wsc = new WebSocket(wssHost),
 pCConfig = [
  { 'url': 'stun:stun.services.mozilla.com' },
  { 'url': 'stun:stun.l.google.com:19302' }
 ],
 mediaConstraints = {
  mandatory: {
   OfferToReceiveAudio: true,
   OfferToReceiveVideo: true
  }
 };

function pageReady() {
 remoteVideo = document.getElementById('remoteVideo');
 icebutton = document.getElementById('checkICE');
 icebutton.addEventListener('click', function (evt) {
  console.log(pC);
 })
};

wsc.onopen = function () {
 // Initiates peerConnection
 pC = new RTCPeerConnection(pCConfig);

 // Send any ICE candidates to the other peer
 pC.onicecandidate = onIceCandidateHandler;

 // Once remote stream arrives, show it in the remote video element
 pC.onaddstream = onAddStreamHandler;

 // Offer a connection to the server
 createAndSendOffer();
};

function createAndSendOffer() {
 pC.createOffer(mediaConstraints).then(function (offer) {
  var off = new RTCSessionDescription(offer);
  pC.setLocalDescription(off).then(function () {
   wsc.send(JSON.stringify({ 'sdp': off }));
  }).catch(errorHandler);
 }).catch(errorHandler);
}

wsc.onmessage = function (evt) {
 // Read the message
 var signal = JSON.parse(evt.data);

 if (signal.sdp) {
  console.log('Received SDP from remote peer.');
  pC.setRemoteDescription(new RTCSessionDescription(signal.sdp));
 } else if (signal.candidate) {
  console.log('Received ICECandidate from remote peer.');
  pC.addIceCandidate(new RTCIceCandidate(signal.candidate));
 }
};

function onIceCandidateHandler(evt) {
 if (!evt || !evt.candidate) return;

 wsc.send(JSON.stringify({ 'candidate': evt.candidate }));
};

function onAddStreamHandler(evt) {
 // Set remote video stream as source for remote video HTML element
 remoteVideo.srcObject = evt.stream;
};

Answer 1

You forgot iceServers. Change

pCConfig = [
    { 'url': 'stun:stun.services.mozilla.com' },
    { 'url': 'stun:stun.l.google.com:19302' }
];

to

pCConfig = {
    iceServers: [
        { urls: 'stun:stun.l.google.com:19302' }
    ]
};

Additionally:

• url has been deprecated, use urls.
• The mozilla stun server has been decommissioned, so save yourself some time and exclude it.
• mandatory and OfferToReceiveAudio have been deprecated. Use offerToReceiveAudio.
• mandatory and OfferToReceiveVideo have been deprecated. Use offerToReceiveVideo.

Tips

Kudos for using promises (unlike the tutorial)! Note you can return them to flatten things:

function createAndSendOffer() {
    return pC.createOffer(mediaConstraints).then(function (offer) {
        return pC.setLocalDescription(offer);
    })
    .then(function () {
        wsc.send(JSON.stringify({ sdp: pC.localDescription }));
    })
    .catch(errorHandler);
}