Pfthb

RTCPeerConnection gets established and receives the clients reply which is 'answer' but does not show the remote video stream. The console log is shown below

console.log

From the log, the offer is sent to the peer which the peer sends back an answer that is console logged to display that it did actually send the answer back. I would greatly appreciate if you could take a look at my code pasted below and advise me how to go about rectifying it.

'use strict';

var localStream;
var remoteStream;
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('joined', function(room) 
 console.log('joined: ' + room);
 startVideo();
);

socket.on('log', function(array) 
 console.log.apply(console, array);
);

////////////////////////////////////////////////

function sendMessage(message) 
 socket.emit('message', message);


// This client receives a message
socket.on('message', function(message) 
 if (message.type === 'offer') 
 pc.setRemoteDescription(message);
 console.log('Sending answer to peer.');
 pc.createAnswer().then(
 setLocalAndSendMessage,
 onCreateSessionDescriptionError
 );
 else if (message.type === 'answer') 
 console.log('This is to check if answer was returned');
 remoteStream = event.stream;
 remoteVideo.srcObject = remoteStream;
 pc.setRemoteDescription(message);
 else if (message.type === 'candidate') 
 pc.addIceCandidate(candidate);
 
);

////////////////////////////////////////////////////

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(gotStream)
 .catch(function(e) 
 alert('getUserMedia() error: ' + e.name);
 );


function gotStream(stream) 
 localVideo.srcObject = stream;
 localStream = stream;
 callButton.disabled = false;


function callStart() 
 createPeerConnection();
 callButton.disabled = true;
 hangupButton.disabled = false;
 if (isInitiator) 
 console.log('Sending offer to peer');
 pc.createOffer(setLocalAndSendMessage, handleCreateOfferError);
 


/////////////////////////////////////////////////////////

function createPeerConnection() 
 try 
 pc.onicecandidate = ( candidate ) => sendMessage( candidate );
 pc.ontrack = event => 
 if (remoteVideo.srcObject) return;
 remoteVideo.srcObject = event.stream;
 ;
 console.log('Created RTCPeerConnnection');
 catch (e) 
 console.log('Failed to create PeerConnection, exception: ' + e.message);
 alert('Cannot create RTCPeerConnection object.');
 return;
 


function handleCreateOfferError(event) 
 console.log('createOffer() error: ', event);


function setLocalAndSendMessage(sessionDescription) 
 console.log('setLocalAndSendMessage sending message', sessionDescription);
 pc.setLocalDescription(sessionDescription);
 sendMessage(sessionDescription);


function onCreateSessionDescriptionError(error) 
 console.log('Failed to create session description: ' + error.toString());


function hangupCall() 
 pc.close();
 pc = null;