WebRTC ontrack is not called

Question

I feel stuck with WebRTC. I am just trying a dummy peer to peer connection but remote connection doesn't receieve anything. The issue is that function ontrack is not fired and I have no clue why? How can I make it work?

It doesn't work on Chromium and Firefox both

var localVideo = document.querySelector('#local'),
    remoteVideo = document.querySelector('#remote'),
    localConnection,remoteConnection;

if (hasUserMedia()){
   navigator.getUserMedia({video: true, audio:false},function(stream){
      localVideo.srcObject = stream;

      if (hasRTCPeerConnection()){
        startPeerConnection(stream);
      } else {
        alert("WebRTC not supported!");
      }
   },function(error){
     alert("Camera capture failed!")
   });
}  else {
  alert("WebRTC not supported!");
}

function startPeerConnection(stream){
  var configuration ={
    offerToReceiveAudio: true,
    offerToReceiveVideo: true
  }
  localConnection = new RTCPeerConnection(configuration);
  remoteConnection = new RTCPeerConnection(configuration);
   stream.getTracks().forEach(
   function(track) {
     localConnection.addTrack(
       track,
       stream
     );
   }
);

  remoteConnection.ontrack = function(e){
    remoteVideo.srcObject = e.streams[0];
  };

  localConnection.onicecandidate = function(event){
    if (event.candidate){
      remoteConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
    }
  };

  remoteConnection.onicecandidate = function(event){
    if (event.candidate){
      localConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
    }
  };

  localConnection.createOffer(function(offer){
    localConnection.setLocalDescription(offer);
    remoteConnection.setRemoteDescription(offer);

    remoteConnection.createAnswer(function(offer){
      remoteConnection.setLocalDescription(offer);
      localConnection.setRemoteDescription(offer);
    });
  });
}

Answer 1

I have made some correction on your code and now it works.Also I have changed callbacks with promises.

var localVideo = document.querySelector('#local'),
remoteVideo = document.querySelector('#remote'),
localConnection, remoteConnection;

navigator.getUserMedia({video: true, audio: false}, function (stream) {
    localVideo.srcObject = stream;
    startPeerConnection(stream);
}, function (error) {
    alert("Camera capture failed!")
});


function startPeerConnection(stream) {
    var configuration = {
        offerToReceiveAudio: true,
        offerToReceiveVideo: true
    }
    localConnection = new RTCPeerConnection({configuration: configuration, iceServers: []});
    remoteConnection = new RTCPeerConnection(configuration);
    stream.getTracks().forEach(
        function (track) {
            localConnection.addTrack(
                track,
                stream
            );
        }
    );

    remoteConnection.ontrack = function (e) {
        remoteVideo.srcObject = e.streams[0];
    };


    // Set up the ICE candidates for the two peers

    localConnection.onicecandidate = e => !e.candidate
        || remoteConnection.addIceCandidate(e.candidate)
            .catch(e => {
                console.error(e)
            });

    remoteConnection.onicecandidate = e => !e.candidate
        || localConnection.addIceCandidate(e.candidate)
            .catch(e => {
                console.error(e)
            });

    localConnection.createOffer()
        .then(offer => localConnection.setLocalDescription(offer))
        .then(() => remoteConnection.setRemoteDescription(localConnection.localDescription))
        .then(() => remoteConnection.createAnswer())
        .then(answer => remoteConnection.setLocalDescription(answer))
        .then(() => localConnection.setRemoteDescription(remoteConnection.localDescription))
        .catch(e => {
            console.error(e)
        });
}