How to do video chat using webrtc in angular8 - css

Question

Hello I am trying to integrate video chat between two users in angular 8 Using webRTC but I am unable to do that.Is there any suggestion how will i do that in angula8 please help me out.
component.html
<div class="videoCall">
<video #localVideo class="self" playsinline autoplay></video>
<video #remoteVideo class="self" style="margin-left: 10px;" playsinline autoplay></video>
</div>
<div>
<button #startButton [disabled]="startButtonDisabled" (click)="start()">Start</button>
<button #callButton [disabled]="callButtonDisabled" (click)="call()">Call</button>
<button #hangupButton [disabled]="hangupButtonDisabled" (click)="hangup()">Hang Up</button>
</div>
componenet.ts
import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '#angular/core';
import * as signalR from "#aspnet/signalr";
import { VideoCallService } from '../../common/services/video-call.service';
// import{ConnectionManager} from '../right-connect/connectionManager.component';
import adapter from 'webrtc-adapter';
#Component({
selector: 'right-connect',
templateUrl: './right-connect.component.html',
styleUrls: ['./right-connect.component.scss']
})
export class RightConnectComponent implements AfterViewInit {
#ViewChild('startButton', {static: false}) startButton: ElementRef;
#ViewChild('callButton', {static: false}) callButton: ElementRef;
#ViewChild('hangupButton', {static: false}) hangupButton: ElementRef;
#ViewChild('localVideo', {static: false}) localVideo: ElementRef;
#ViewChild('remoteVideo', {static: false}) remoteVideo: ElementRef;
startButtonDisabled = false;
callButtonDisabled = true;
hangupButtonDisabled = true;
startTime;
localStream;
pc1;
pc2;
offerOptions = {
offerToReceiveAudio: 1,
offerToReceiveVideo: 1
};
ngAfterViewInit() {
this.localVideo.nativeElement.addEventListener('loadedmetadata', ()=> {
this.trace('Local video videoWidth: ' + this.localVideo.nativeElement.videoWidth +
'px, videoHeight: ' + this.localVideo.nativeElement.videoHeight + 'px');
});
this.remoteVideo.nativeElement.addEventListener('loadedmetadata', ()=> {
this.trace('Remote video videoWidth: ' + this.remoteVideo.nativeElement.videoWidth +
'px, videoHeight: ' + this.remoteVideo.nativeElement.videoHeight + 'px');
});
this.remoteVideo.nativeElement.onresize = ()=> {
this.trace('Remote video size changed to ' +
this.remoteVideo.nativeElement.videoWidth + 'x' + this.remoteVideo.nativeElement.videoHeight);
};
}
getName(pc) {
return (pc === this.pc1) ? 'pc1' : 'pc2';
}
getOtherPc(pc) {
return (pc === this.pc1) ? this.pc2 : this.pc1;
}
gotStream(stream) {
this.trace('Received local stream');
this.localVideo.nativeElement.srcObject = stream;
this.localStream = stream;
this.callButtonDisabled = false;
}
start() {
this.trace('Requesting local stream');
this.startButtonDisabled = true;
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
})
.then(this.gotStream.bind(this))
.catch(function(e) {
console.log('error', e);
alert('getUserMedia() error: ' + e.name);
});
}
call() {
this.callButtonDisabled = true;
this.hangupButtonDisabled = false;
this.trace('Starting call');
this.startTime = window.performance.now();
var videoTracks = this.localStream.getVideoTracks();
var audioTracks = this.localStream.getAudioTracks();
if (videoTracks.length > 0) {
this.trace('Using video device: ' + videoTracks[0].label);
}
if (audioTracks.length > 0) {
this.trace('Using audio device: ' + audioTracks[0].label);
}
var servers = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]};
this.pc1 = new RTCPeerConnection(servers);
this.trace('Created local peer connection object pc1');
/*this.pc1.onicecandidate = e => {
this.onIceCandidate(this.pc1, e);
};*/
this.pc1.addEventListener('icecandidate', (e: Event) => {
this.onIceCandidate(this.pc1, e);
});
this.pc2 = new RTCPeerConnection(servers);
this.trace('Created remote peer connection object pc2');
/*this.pc2.onicecandidate = e => {
this.onIceCandidate(this.pc2, e);
};*/
this.pc2.addEventListener('icecandidate', (e: Event) => {
this.onIceCandidate(this.pc2, e);
});
/*this.pc1.oniceconnectionstatechange = e => {
this.onIceStateChange(this.pc1, e);
};
this.pc2.oniceconnectionstatechange = e => {
this.onIceStateChange(this.pc2, e);
};*/
this.pc1.addEventListener('iceconnectionstatechange', (e: Event) => {
this.onIceStateChange(this.pc1, e);
});
this.pc2.addEventListener('iceconnectionstatechange', (e: Event) => {
this.onIceStateChange(this.pc2, e);
});
this.pc2.ontrack = this.gotRemoteStream.bind(this);
this.localStream.getTracks().forEach(
track => {
this.trace('add tracks to pc1');
this.pc1.addTrack(
track,
this.localStream
);
}
);
this.trace('Added local stream to pc1');
this.trace('pc1 createOffer start');
this.pc1.createOffer(
this.offerOptions
).then(
this.onCreateOfferSuccess.bind(this),
this.onCreateSessionDescriptionError.bind(this)
);
}
onCreateSessionDescriptionError(error) {
this.trace('Failed to create session description: ' + error.toString());
}
onCreateOfferSuccess(desc) {
this.trace('Offer from pc1\n' + desc.sdp);
this.trace('pc1 setLocalDescription start');
this.pc1.setLocalDescription(desc).then(
() => {
this.onSetLocalSuccess(this.pc1);
},
this.onSetSessionDescriptionError.bind(this)
);
this.trace('pc2 setRemoteDescription start');
this.pc2.setRemoteDescription(desc).then(
() => {
this.onSetRemoteSuccess(this.pc2);
},
this.onSetSessionDescriptionError.bind(this)
);
this.trace('pc2 createAnswer start');
// Since the 'remote' side has no media stream we need
// to pass in the right constraints in order for it to
// accept the incoming offer of audio and video.
this.pc2.createAnswer().then(
this.onCreateAnswerSuccess.bind(this),
this.onCreateSessionDescriptionError.bind(this)
);
}
onSetLocalSuccess(pc) {
this.trace(this.getName(pc) + ' setLocalDescription complete');
}
onSetRemoteSuccess(pc) {
this.trace(this.getName(pc) + ' setRemoteDescription complete');
}
onSetSessionDescriptionError(error) {
this.trace('Failed to set session description: ' + error.toString());
}
gotRemoteStream(e) {
if (this.remoteVideo.nativeElement.srcObject !== e.streams[0]) {
this.remoteVideo.nativeElement.srcObject = e.streams[0];
this.trace('pc2 received remote stream');
}
}
onCreateAnswerSuccess(desc) {
this.trace('Answer from pc2:\n' + desc.sdp);
this.trace('pc2 setLocalDescription start');
this.pc2.setLocalDescription(desc).then(
() => {
this.onSetLocalSuccess(this.pc2);
},
this.onSetSessionDescriptionError.bind(this)
);
this.trace('pc1 setRemoteDescription start');
this.pc1.setRemoteDescription(desc).then(
() => {
this.onSetRemoteSuccess(this.pc1);
},
this.onSetSessionDescriptionError.bind(this)
);
}
onIceCandidate(pc, event) {
this.getOtherPc(pc).addIceCandidate(event.candidate)
.then(
() => {
this.onAddIceCandidateSuccess(pc);
},
(err) => {
this.onAddIceCandidateError(pc, err);
}
);
this.trace(this.getName(pc) + ' ICE candidate: \n' + (event.candidate ?
event.candidate.candidate : '(null)'));
}
onAddIceCandidateSuccess(pc) {
this.trace(this.getName(pc) + ' addIceCandidate success');
}
onAddIceCandidateError(pc, error) {
this.trace(this.getName(pc) + ' failed to add ICE Candidate: ' + error.toString());
}
onIceStateChange(pc, event) {
if (pc) {
this.trace(this.getName(pc) + ' ICE state: ' + pc.iceConnectionState);
console.log('ICE state change event: ', event);
}
}
hangup() {
this.trace('Ending call');
this.pc1.close();
this.pc2.close();
this.pc1 = null;
this.pc2 = null;
this.hangupButtonDisabled = true;
this.callButtonDisabled = false;
}
trace(arg) {
var now = (window.performance.now() / 1000).toFixed(3);
console.log(now + ': ', arg);
}
}
component.scss
.videoCall{
display: flex;
.self{
width: 264px;
height: 298px;
border: 2px solid black;
}
.partner{
margin-left: 10px;
width: 264px;
height: 298px;
border: 2px solid black;
}
}
I am unable to call between two users. how will I do that. Or is there any other way to integrate video call in angualr 8 please suggest me. Please help me out
Thanks