Ionic 5 : Webrtc remote video not displaying - ionic-framework

Question

import { Component, OnInit, ElementRef, ViewChild } from '#angular/core';
import { Socket } from 'ngx-socket-io';
import { ToastController } from '#ionic/angular';
import { AppointmentService } from 'src/app/services/appointment.service';
#Component({
selector: 'app-videocall',
templateUrl: './videocall.page.html',
styleUrls: ['./videocall.page.scss'],
})
export class VideocallPage implements OnInit {
#ViewChild('localVideo', { static: true }) localVideo: ElementRef;
#ViewChild('remoteVideo', { static: true }) remoteVideo: ElementRef;
consultationRoomId: any;
callBtn: any;
muteBtn: any;
localStream: MediaStream;
remoteStream: MediaStream;
rtcPeerConnection: RTCPeerConnection;
constructor(public socket: Socket, private toastCtrl: ToastController, private appoint: AppointmentService,
private elRef: ElementRef) { }
ngOnInit() {
this.callBtn = document.getElementById("call");
this.muteBtn = document.getElementById("mute");
var endBtn = document.getElementById("end");
var divConsultingRoom = document.getElementById("consultingRoom");
var iceServers = {
'iceServers': [
{ urls: 'stun:stun.services.mozilla.com' },
{ urls: 'stun:stun.l.google.com:19302' },
{ urls: 'stun:stun01.sipphone.com' },
{ urls: 'stun:stun.ekiga.net' },
{ urls: 'stun:stun.fwdnet.net' },
{ urls: 'stun:stun.ideasip.com' },
{ urls: 'stun:stun.iptel.org' },
{ urls: 'stun:stun.rixtelecom.se' },
{ urls: 'stun:stun.schlund.de' },
{ urls: 'stun:stun.l.google.com:19302' },
{ urls: 'stun:stun1.l.google.com:19302' },
{ urls: 'stun:stun2.l.google.com:19302' },
{ urls: 'stun:stun3.l.google.com:19302' },
{ urls: 'stun:stun4.l.google.com:19302' },
{ urls: 'stun:stunserver.org' },
{ urls: 'stun:stun.softjoys.com' },
{ urls: 'stun:stun.voiparound.com' },
{ urls: 'stun:stun.voipbuster.com' },
{ urls: 'stun:stun.voipstunt.com' },
{ urls: 'stun:stun.voxgratia.org' },
{ urls: 'stun:stun.xten.com' },
{
urls: 'turn:192.158.29.39:3478?transport=udp',
credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
username: '28224511:1379330808'
},
{
urls: 'turn:192.158.29.39:3478?transport=tcp',
credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
username: '28224511:1379330808'
}
]
}
var streamConstraints = { audio: true, video: true };
var isCaller;
//this.consultationRoomId = this.appoint.getConsultationId();
this.consultationRoomId = '1234';
this.socket.connect();
this.socket.on('created', (room) => {
//debugger;
alert('Starting consultation');
navigator.mediaDevices.getUserMedia(streamConstraints).then((stream) => {
this.localStream = stream;
this.localVideo.nativeElement.srcObject = stream;
isCaller = true;
}).catch(function (err) {
console.log('An error ocurred when accessing media devices', err);
});
});
this.socket.on('joined', (room) => {
alert('Joining consultation');
navigator.mediaDevices.getUserMedia(streamConstraints).then((stream) => {
this.localStream = stream;
this.localVideo.nativeElement.srcObject = stream;
this.socket.emit('ready', this.consultationRoomId);
}).catch(function (err) {
console.log('An error ocurred when accessing media devices', err);
});
});
this.socket.on('disconnect', (room) => {
console.log('Doctor has ended the consultation>>>' + room);
});
this.socket.on('candidate', (event) => {
var candidate = new RTCIceCandidate({
sdpMLineIndex: event.label,
candidate: event.candidate
});
this.rtcPeerConnection.addIceCandidate(candidate);
});
this.socket.on('ready', () => {
if (isCaller) {
this.rtcPeerConnection = new RTCPeerConnection(iceServers);
this.rtcPeerConnection.onicecandidate = this.onIceCandidate;
this.rtcPeerConnection.ontrack = this.onAddStream;
this.rtcPeerConnection.addTrack(this.localStream.getTracks()[0], this.localStream);
this.rtcPeerConnection.addTrack(this.localStream.getTracks()[1], this.localStream);
this.rtcPeerConnection.createOffer()
.then(sessionDescription => {
this.rtcPeerConnection.setLocalDescription(sessionDescription);
this.socket.emit('offer', {
type: 'offer',
sdp: sessionDescription,
room: this.consultationRoomId
});
})
.catch(error => {
console.log(error)
})
}
});
this.socket.on('offer', (event) => {
if (!isCaller) {
this.rtcPeerConnection = new RTCPeerConnection(iceServers);
this.rtcPeerConnection.onicecandidate = this.onIceCandidate;
this.rtcPeerConnection.ontrack = this.onAddStream;
this.rtcPeerConnection.addTrack(this.localStream.getTracks()[0], this.localStream);
this.rtcPeerConnection.addTrack(this.localStream.getTracks()[1], this.localStream);
this.rtcPeerConnection.setRemoteDescription(new RTCSessionDescription(event));
this.rtcPeerConnection.createAnswer()
.then(sessionDescription => {
this.rtcPeerConnection.setLocalDescription(sessionDescription);
this.socket.emit('answer', {
type: 'answer',
sdp: sessionDescription,
room: this.consultationRoomId
});
})
.catch(error => {
console.log(error)
})
}
});
this.socket.on('answer', (event) => {
console.log("on answer>>>>" + event);
this.rtcPeerConnection.setRemoteDescription(new RTCSessionDescription(event));
})
}
call() {
//this.divConsultingRoom.style = "display: block;";
this.socket.emit('create or join', this.consultationRoomId);
}
mute() {
if (this.muteBtn.innerHTML == "Mute") {
this.localStream.getAudioTracks()[0].enabled = false;
this.muteBtn.innerHTML = "Unmute";
}
else {
this.localStream.getAudioTracks()[0].enabled = true;
this.muteBtn.innerHTML = "Mute";
}
}
end() {
this.socket.emit('disconnect', this.consultationRoomId);
}
onIceCandidate = (event) => {
if (event.candidate) {
console.log('sending ice candidate');
this.socket.emit('candidate', {
type: 'candidate',
label: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid,
candidate: event.candidate.candidate,
room: this.consultationRoomId
})
}
}
onAddStream = (event) => {
this.remoteVideo.nativeElement.srcObject = event.streams[0];
this.remoteStream = event.streams[0];
}
}
Below is the HTML page as well
<ion-content>
<div id="consultingRoom">
<video id="localVideo" #localVideo inline autoplay></video>
<video id="remoteVideo" #remoteVideo inline autoplay></video>
</div>
<ion-button id="call" color="primary" (click)="call()">Call</ion-button>
<ion-button id="mute" color="secondary" (click)="mute()">Mute</ion-button>
<ion-button id="end" color="tertiary" (click)="end()">End</ion-button>
</ion-content>
The event.streams[0] object in addStreamMethod shows the remote MediaStream with receiver's id but the remoteVideo element on front end is still blank.
The signalling server is a node socket server running on AWS EC2 instance.
Below is the debug for remote Media Stream
RemoteMediaStream console debug
Below is the webrtc internals logs from Chrome
9/3/2020, 4:39:00 PM
transceiverAdded
9/3/2020, 4:39:00 PM
transceiverAdded
9/3/2020, 4:39:00 PM
createOffer
options: {offerToReceiveVideo: -1, offerToReceiveAudio: -1, voiceActivityDetection: true, iceRestart: false}
9/3/2020, 4:39:00 PM negotiationneeded
9/3/2020, 4:39:00 PM
createOfferOnSuccess
9/3/2020, 4:39:00 PM
setLocalDescription
9/3/2020, 4:39:00 PM
transceiverModified
9/3/2020, 4:39:00 PM
transceiverModified
9/3/2020, 4:39:00 PM
signalingstatechange
9/3/2020, 4:39:00 PM setLocalDescriptionOnSuccess
9/3/2020, 4:39:00 PM
icegatheringstatechange
9/3/2020, 4:39:00 PM
icecandidate (host)
9/3/2020, 4:39:00 PM
icecandidate (host)
9/3/2020, 4:39:00 PM
icecandidate (host)
9/3/2020, 4:39:00 PM
icecandidate (host)
9/3/2020, 4:39:00 PM
icecandidate (host)
9/3/2020, 4:39:00 PM
icecandidate (host)
9/3/2020, 4:39:00 PM
icecandidate (host)
9/3/2020, 4:39:00 PM
icecandidate (host)
9/3/2020, 4:39:00 PM
icecandidateerror
9/3/2020, 4:39:00 PM
icecandidateerror
9/3/2020, 4:39:00 PM
icecandidateerror
9/3/2020, 4:39:00 PM
icecandidateerror
9/3/2020, 4:39:00 PM
icecandidate (srflx)
9/3/2020, 4:39:00 PM
icecandidate (srflx)
9/3/2020, 4:39:00 PM
setRemoteDescription
9/3/2020, 4:39:00 PM
icecandidate (srflx)
9/3/2020, 4:39:00 PM
transceiverModified
9/3/2020, 4:39:00 PM
transceiverModified
9/3/2020, 4:41:38 PM
signalingstatechange
9/3/2020, 4:41:38 PM setRemoteDescriptionOnSuccess
9/3/2020, 4:41:39 PM
icecandidate (srflx)
9/3/2020, 4:41:39 PM
icecandidate (srflx)
9/3/2020, 4:41:39 PM
icecandidate (srflx)
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidate (srflx)
9/3/2020, 4:41:39 PM
icecandidate (srflx)
9/3/2020, 4:41:39 PM
icecandidate (srflx)
9/3/2020, 4:41:39 PM
icecandidate (srflx)
9/3/2020, 4:41:39 PM
icecandidate (srflx)
9/3/2020, 4:41:39 PM
icecandidate (srflx)
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icecandidateerror
9/3/2020, 4:41:39 PM
icegatheringstatechange
complete
9/3/2020, 4:41:39 PM
addIceCandidate (host)
9/3/2020, 4:41:39 PM
addIceCandidate (host)
9/3/2020, 4:41:39 PM
iceconnectionstatechange
checking
9/3/2020, 4:41:39 PM
addIceCandidate (host)
9/3/2020, 4:41:39 PM
iceconnectionstatechange (legacy)
checking
9/3/2020, 4:41:39 PM
connectionstatechange
connecting
9/3/2020, 4:41:39 PM
addIceCandidate (host)
9/3/2020, 4:41:39 PM
addIceCandidate (host)
9/3/2020, 4:41:39 PM
addIceCandidate (host)
9/3/2020, 4:41:39 PM
addIceCandidate (srflx)
9/3/2020, 4:41:39 PM
addIceCandidate (srflx)
9/3/2020, 4:41:54 PM
iceconnectionstatechange
disconnected
9/3/2020, 4:41:54 PM
iceconnectionstatechange (legacy)
failed
9/3/2020, 4:41:54 PM
connectionstatechange
failed
Currently I am only testing on browser, have not tested on Android and IOS yet
Please let me know what am I missing?