From 89816a13e4f3a553d4efe49c84af2c736a13e85b Mon Sep 17 00:00:00 2001
From: gparant <g.parant@thecodingmachine.com>
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 | 67 ++++++++++++------------
 2 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index bab1c7c8..605be965 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 e6b531a9..f2b4b284 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<any> {
-        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();
+            }
+
+            let description = new RTCSessionDescription(data.message);
+            return this.peerConnection.setRemoteDescription(description).catch((err) => {
+                console.error("createPeerConnection => setRemoteDescription", err);
+                throw err;
+            });
         });
-
-        //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;
-        })
     }
 
     createOffer(): Promise<any> {
@@ -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);
         };