title: Remote Video stream not showing up at all
body: <p>I have been trying to get the remote video stream to show up using .ontrack which is under the peer connection function in my code. Until now the .ontrack only fires on the caller side while on the callee it does not even when the function is called.</p>
  
  <p>The log that checks if .ontrack fires would state "Got Remote Stream" but only on the caller side which might be the problem here but I'm not sure why would the other party not go into the IF statement that holds the .ontrack when it does not have the event.stream[0] which the statement is checking for. </p>
  
  <p>I have added the console logs from both Caller and Callee below. Not shown in the images is that after a while the candidates would show null but both users are still connected.</p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>'use strict';
  
  var isInitiator;
  var configuration = {
    iceServers: [
      {
        urls: 'stun:stun.l.google.com:19302'
      }
    ]
  };
  var pc = new RTCPeerConnection(configuration);
  
  // Define action buttons.
  const callButton = document.getElementById('callButton');
  const hangupButton = document.getElementById('hangupButton');
  
  /////////////////////////////////////////////
  
  window.room = prompt('Enter room name:');
  
  var socket = io.connect();
  
  if (room !== '') {
    console.log('Message from client: Asking to join room ' + room);
    socket.emit('create or join', room);
  }
  
  socket.on('created', function(room) {
    console.log('Created room ' + room);
    isInitiator = true;
    startVideo();
  });
  
  socket.on('full', function(room) {
    console.log('Message from client: Room ' + room + ' is full :^(');
  });
  
  socket.on('joined', function(room) {
    console.log('joined: ' + room);
    startVideo();
    callButton.disabled = true;
  });
  
  socket.on('log', function(array) {
    console.log.apply(console, array);
  });
  
  ////////////////////////////////////////////////
  
  async function sendMessage(message) {
    console.log('Client sending message: ', message);
    await socket.emit('message', message);
  }
  
  // This client receives a message
  socket.on('message', async function(message) {
    try {
      if (message.type === 'offer') {
        await pc.setRemoteDescription(new RTCSessionDescription(message));
        await pc
          .setLocalDescription(await pc.createAnswer())
          .then(function() {
            sendMessage(pc.localDescription);
          })
          .catch(function(err) {
            console.log(err.name + ': ' + err.message);
          });
        createPeerConnection();
      } else if (message.type === 'answer') {
        await pc.setRemoteDescription(new RTCSessionDescription(message));
      } else if (message.type === 'candidate') {
        await pc.addIceCandidate(candidate);
      }
    } catch (err) {
      console.error(err);
    }
  });
  
  ////////////////////////////////////////////////////
  
  const localVideo = document.querySelector('#localVideo');
  const remoteVideo = document.querySelector('#remoteVideo');
  
  // Set up initial action buttons status: disable call and hangup.
  callButton.disabled = true;
  hangupButton.disabled = true;
  
  // Add click event handlers for buttons.
  callButton.addEventListener('click', callStart);
  hangupButton.addEventListener('click', hangupCall);
  
  function startVideo() {
    navigator.mediaDevices
      .getUserMedia({
        audio: true,
        video: true
      })
      .then(function(stream) {
        localVideo.srcObject = stream;
        stream.getTracks().forEach(track =&gt; pc.addTrack(track, stream));
      })
      .catch(function(err) {
        console.log('getUserMedia() error: ' + err.name);
      });
    callButton.disabled = false;
  }
  
  async function callStart() {
    createPeerConnection();
    callButton.disabled = true;
    hangupButton.disabled = false;
    if (isInitiator) {
      console.log('Sending offer to peer');
      await pc
        .setLocalDescription(await pc.createOffer())
        .then(function() {
          sendMessage(pc.localDescription);
        })
        .catch(function(err) {
          console.log(err.name + ': ' + err.message);
        });
    }
  }
  
  /////////////////////////////////////////////////////////
  
  function createPeerConnection() {
    try {
      pc.ontrack = event =&gt; {
        if (remoteVideo.srcObject !== event.streams[0]) {
          remoteVideo.srcObject = event.streams[0];
          console.log('Got remote stream');
        }
      };
      pc.onicecandidate = ({ candidate }) =&gt; sendMessage({ candidate });
      console.log('Created RTCPeerConnnection');
    } catch (e) {
      console.log('Failed to create PeerConnection, exception: ' + e.message);
      alert('Cannot create RTCPeerConnection object.');
      return;
    }
  }
  
  function hangupCall() {
    pc.close();
    pc = null;
    callButton.disabled = false;
    hangupButton.disabled = true;
    console.log('Call Ended');
  }
  </code></pre>
  
  <p><strong>index.js</strong> </p>
  
  <pre><code>'use strict';
  
  var express = require('express');
  var app = (module.exports.app = express());
  var path = require('path');
  
  var server = require('http').createServer(app);
  var io = require('socket.io')(server);
  const PORT_NO = process.env.APP_PORT || 3000;
  server.listen(PORT_NO);
  
  app.get('/', function(request, response) {
    response.sendFile(path.resolve('./index.html'));
  });
  
  app.use(express.static('.'));
  io.on('connection', socket =&gt; {
    function log() {
      const array = ['Message from server:'];
      for (let i = 0; i &lt; arguments.length; i++) {
        array.push(arguments[i]);
      }
      socket.emit('log', array);
    }
  
    socket.on('message', message =&gt; {
      log('Got message:', message);
      socket.broadcast.emit('message', message);
    });
  
    socket.on('create or join', room =&gt; {
      var clientsInRoom = io.sockets.adapter.rooms[room];
      var numClients = clientsInRoom
        ? Object.keys(clientsInRoom.sockets).length
        : 0;
  
      // max two clients
      if (numClients === 2) {
        socket.emit('full', room);
        return;
      }
  
      log('Room ' + room + ' now has ' + (numClients + 1) + ' client(s)');
  
      if (numClients === 0) {
        socket.join(room);
        log('Client ID ' + socket.id + ' created room ' + room);
        socket.emit('created', room, socket.id);
      } else {
        log('Client ID ' + socket.id + ' joined room ' + room);
        io.sockets.in(room).emit('join', room);
        socket.join(room);
        socket.emit('joined', room, socket.id);
        io.sockets.in(room).emit('ready');
      }
    });
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ATCaA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ATCaA.png" alt="Callee side (in Safari) "></a></p>
  
  <p><a href="https://i.stack.imgur.com/WohBz.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WohBz.jpg" alt="Caller side (in Firefox) "></a></p>