From 89816a13e4f3a553d4efe49c84af2c736a13e85b Mon Sep 17 00:00:00 2001 From: gparant Date: Sun, 19 Apr 2020 22:30:42 +0200 Subject: [PATCH] Fix video call --- front/src/WebRtc/MediaManager.ts | 26 ++++++++++ front/src/WebRtc/PeerConnexionManager.ts | 65 ++++++++++++------------ 2 files changed, 59 insertions(+), 32 deletions(-) diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index bab1c7c..605be96 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -54,32 +54,58 @@ export class MediaManager { this.cinemaClose.style.display = "none"; this.cinema.style.display = "block"; this.constraintsMedia.video = true; + this.localStream = null; + this.myCamVideo.srcObject = null; + this.getCamera(); } disabledCamera() { this.cinemaClose.style.display = "block"; this.cinema.style.display = "none"; this.constraintsMedia.video = false; + + this.myCamVideo.pause(); + if(this.localStream) { + this.localStream.getTracks().forEach((MediaStreamTrack: MediaStreamTrack) => { + if (MediaStreamTrack.kind === "video") { + MediaStreamTrack.stop(); + } + }); + } + this.localStream = null; + this.myCamVideo.srcObject = null; + this.getCamera(); } enabledMicrophone() { this.microphoneClose.style.display = "none"; this.microphone.style.display = "block"; this.constraintsMedia.audio = true; + this.getCamera(); } disabledMicrophone() { this.microphoneClose.style.display = "block"; this.microphone.style.display = "none"; this.constraintsMedia.audio = false; + if(this.localStream) { + this.localStream.getTracks().forEach((MediaStreamTrack: MediaStreamTrack) => { + if (MediaStreamTrack.kind === "audio") { + MediaStreamTrack.stop(); + } + }); + } + this.getCamera(); } //get camera getCamera() { this.getCameraPromise = navigator.mediaDevices.getUserMedia(this.constraintsMedia) .then((stream: MediaStream) => { + console.log("constraintsMedia", stream); this.localStream = stream; this.myCamVideo.srcObject = this.localStream; + this.myCamVideo.play(); }).catch((err) => { console.error(err); this.localStream = null; diff --git a/front/src/WebRtc/PeerConnexionManager.ts b/front/src/WebRtc/PeerConnexionManager.ts index e6b531a..f2b4b28 100644 --- a/front/src/WebRtc/PeerConnexionManager.ts +++ b/front/src/WebRtc/PeerConnexionManager.ts @@ -19,27 +19,27 @@ export class PeerConnexionManager { } createPeerConnection(data: any = null): Promise { - this.peerConnection = new RTCPeerConnection(); + return this.MediaManager.getCameraPromise.then(() => { + this.peerConnection = new RTCPeerConnection(); - //init all events peer connection - this.createEventPeerConnection(); + //init all events peer connection + this.createEventPeerConnection(); - this.MediaManager.getCameraPromise.then(() => { this.MediaManager.localStream.getTracks().forEach( - (track : MediaStreamTrack) => this.peerConnection.addTrack(track, this.MediaManager.localStream) + (track: MediaStreamTrack) => this.peerConnection.addTrack(track, this.MediaManager.localStream) ); - }); - //if no data, create offer - if (!data || !data.message) { - return this.createOffer(); - } + //if no data, create offer + if (!data || !data.message) { + return this.createOffer(); + } - let description = new RTCSessionDescription(data.message); - return this.peerConnection.setRemoteDescription(description).catch((err) => { - console.error("createPeerConnection => setRemoteDescription", err); - throw err; - }) + let description = new RTCSessionDescription(data.message); + return this.peerConnection.setRemoteDescription(description).catch((err) => { + console.error("createPeerConnection => setRemoteDescription", err); + throw err; + }); + }); } createOffer(): Promise { @@ -102,30 +102,31 @@ export class PeerConnexionManager { createEventPeerConnection(){ //define creator of offer - this.peerConnection.onicecandidate = (event: RTCPeerConnectionIceEvent) => { - let message = {message: event.candidate}; - if (!event.candidate) { + this.peerConnection.addEventListener('icecandidate', ({candidate}) => { + let message = {message: candidate}; + if (!candidate) { return; } this.WebRtcEventManager.emitIceCandidate(message); - }; + }); - this.peerConnection.ontrack = (e:RTCTrackEvent) => { - console.info('Event:track', e); - this.MediaManager.remoteVideo.srcObject = e.streams[0]; - this.MediaManager.myCamVideo.srcObject = e.streams[0]; - }; + this.peerConnection.addEventListener('iceconnectionstatechange', (e : Event) => { + console.info('oniceconnectionstatechange => iceConnectionState', this.peerConnection.iceConnectionState); + }); - this.peerConnection.onnegotiationneeded = (e : Event) => { + this.peerConnection.addEventListener('negotiationneeded', (e : Event) => { console.info("Event:negotiationneeded => call()", e); this.createOffer() - }; - this.peerConnection.oniceconnectionstatechange = (e) => { - console.info('ICE state change event: ', e); - }; - this.peerConnection.oniceconnectionstatechange = (e:Event) => { - console.info('oniceconnectionstatechange => iceConnectionState', this.peerConnection.iceConnectionState); - }; + }); + + this.peerConnection.addEventListener("track", (e:RTCTrackEvent) => { + console.info('Event:track', e); + if (this.MediaManager.remoteVideo.srcObject !== e.streams[0]) { + this.MediaManager.remoteVideo.srcObject = e.streams[0]; + console.log('pc1 received remote stream'); + } + }); + this.peerConnection.onicegatheringstatechange = () => { console.info('onicegatheringstatechange => iceConnectionState', this.peerConnection.iceConnectionState); }; -- 2.25.1