From: gparant <g.parant@thecodingmachine.com>
Date: Sun, 26 Apr 2020 17:12:01 +0000 (+0200)
Subject: Web visio, add and remove video element
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=d7d7be9ed0a4c4a30ede92adcdc9af95480203d5;p=libreadventure.git

Web visio, add and remove video element
---

diff --git a/back/src/Controller/IoSocketController.ts b/back/src/Controller/IoSocketController.ts
index cd715bb..4290685 100644
--- a/back/src/Controller/IoSocketController.ts
+++ b/back/src/Controller/IoSocketController.ts
@@ -85,7 +85,6 @@ export class IoSocketController{
                 (socket as ExSocketInterface).roomId = data.roomId;
 
                 //if two persone in room share
-                console.log("nb user => " + data.roomId, this.Io.sockets.adapter.rooms[data.roomId].length);
                 if(this.Io.sockets.adapter.rooms[data.roomId].length < 2) {
                     return;
                 }
@@ -93,25 +92,36 @@ export class IoSocketController{
 
                 //send start at one client to initialise offer webrtc
                 //send all users in room to create PeerConnection in front
-                let clientsId = clients.reduce((tabs : Array<any>, client: ExtWebSocket) => {
-                    if(!client.userId){
-                        return tabs;
-                    }
-                    tabs.push(client.userId);
-                    return tabs;
-                }, []);
                 clients.forEach((client: ExtWebSocket, index : number) => {
-                    client.emit('webrtc-start', JSON.stringify({
-                        usersId: clientsId.filter((userId : any) => userId !== client.userId),
-                        initiator : index === 0
-                    }));
+
+                    let clientsId = clients.reduce((tabs : Array<any>, clientId: ExtWebSocket, indexClientId: number) => {
+                        if(!clientId.userId || clientId.userId === client.userId){
+                            return tabs;
+                        }
+                        tabs.push({
+                            userId: clientId.userId,
+                            initiator : index <= indexClientId
+                        });
+                        return tabs;
+                    }, []);
+
+                    client.emit('webrtc-start', JSON.stringify(clientsId));
                 });
             });
 
             socket.on('webrtc-signal', (message : string) => {
                 let data : any = JSON.parse(message);
-                console.info('webrtc-signal', message);
-                socket.to(data.roomId).emit('webrtc-signal',  message);
+
+                //send only at user
+                let clients: Array<any> = Object.values(this.Io.sockets.sockets);
+                for(let i = 0; i < clients.length; i++){
+                    let client : ExtWebSocket = clients[i];
+                    if(client.userId !== data.receiverId){
+                        continue
+                    }
+                    client.emit('webrtc-signal',  message);
+                    break;
+                }
             });
         });
     }
diff --git a/front/src/Connexion.ts b/front/src/Connexion.ts
index 35dbd06..a9c10df 100644
--- a/front/src/Connexion.ts
+++ b/front/src/Connexion.ts
@@ -129,7 +129,7 @@ export interface ConnexionInterface {
     /*webrtc*/
     sendWebrtcRomm(roomId: string): void;
 
-    sendWebrtcSignal(signal: any, roomId: string, userId?: string): void;
+    sendWebrtcSignal(signal: any, roomId: string, userId?: string, receiverId?: string): void;
 
     receiveWebrtcSignal(callBack: Function): void;
 
@@ -230,9 +230,10 @@ export class Connexion implements ConnexionInterface {
         });
     }
 
-    sendWebrtcSignal(signal: any, roomId: string, userId? : string ) {
+    sendWebrtcSignal(signal: any, roomId: string, userId? : string, receiverId? : string) {
         this.socket.emit(EventMessage.WEBRTC_SIGNAL, JSON.stringify({
             userId: userId ? userId : this.userId,
+            receiverId: receiverId ? receiverId : this.userId,
             roomId: roomId,
             signal: signal
         }));
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 56e02d4..7363f15 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -116,10 +116,22 @@ export class MediaManager {
      *
      * @param userId
      */
-    addActiveVideo(userId : any){
+    addActiveVideo(userId : string){
         let elementRemoteVideo = document.getElementById("activeCam");
         elementRemoteVideo.insertAdjacentHTML('beforeend', '<video id="'+userId+'" autoplay></video>');
 
-        this.remoteVideo[userId] = document.getElementById(userId);
+        this.remoteVideo[(userId as any)] = document.getElementById(userId);
+    }
+
+    /**
+     *
+     * @param userId
+     */
+    removeActiveVideo(userId : string){
+        let element = document.getElementById(userId);
+        if(!element){
+            return;
+        }
+        element.remove();
     }
 }
\ No newline at end of file
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index fabc876..a410906 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -7,7 +7,6 @@ export class SimplePeer {
     MediaManager: MediaManager;
     RoomId: string;
 
-    PeerConnexion: any;
     PeerConnexionArray: Array<any> = new Array<any>();
 
     constructor(Connexion: ConnexionInterface, roomId: string = "test-webrtc") {
@@ -55,38 +54,35 @@ export class SimplePeer {
      * @param users
      */
     createPeerConnexion(users : Array<any>) {
-        console.log("createPeerConnexion", users);
         users.forEach((user: any) => {
             if(this.PeerConnexionArray[user.userId]){
                 return;
             }
             this.MediaManager.addActiveVideo(user.userId);
 
-            this.PeerConnexion = new Peer({initiator: user.initiator});
+            this.PeerConnexionArray[user.userId] = new Peer({initiator: user.initiator});
 
-            this.PeerConnexion.on('signal', (data: any) => {
-                this.sendWebrtcSignal(data);
+            this.PeerConnexionArray[user.userId].on('signal', (data: any) => {
+                this.sendWebrtcSignal(data, user.userId);
             });
 
-            this.PeerConnexion.on('stream', (stream: MediaStream) => {
+            this.PeerConnexionArray[user.userId].on('stream', (stream: MediaStream) => {
                 this.stream(user.userId, stream);
             });
 
-            this.PeerConnexionArray[user.userId] = this.PeerConnexion;
+            this.PeerConnexionArray[user.userId].on('close', () => {
+                this.closeConnexion(user.userId);
+            });
+
             this.addMedia(user.userId);
         });
 
-        /*let elements = document.getElementById("activeCam");
-        console.log("element.childNodes", elements.childNodes);
-        elements.childNodes.forEach((element : any) => {
-            if(!element.id){
-                return;
-            }
-            if(users.find((user) => user.userId === element.id)){
-                return;
-            }
-            elements.removeChild(element);
-        });*/
+    }
+
+    closeConnexion(userId : string){
+        // @ts-ignore
+        this.PeerConnexionArray[userId] = null;
+        this.MediaManager.removeActiveVideo(userId)
     }
 
     /**
@@ -95,7 +91,7 @@ export class SimplePeer {
      * @param data
      */
     sendWebrtcSignal(data: any, userId : string) {
-        this.Connexion.sendWebrtcSignal(data, this.RoomId, userId);
+        this.Connexion.sendWebrtcSignal(data, this.RoomId, null, userId);
     }
 
     /**