Update front mutli peer conncexion
authorgparant <g.parant@thecodingmachine.com>
Sun, 26 Apr 2020 15:42:49 +0000 (17:42 +0200)
committergparant <g.parant@thecodingmachine.com>
Sun, 26 Apr 2020 15:42:49 +0000 (17:42 +0200)
front/src/WebRtc/MediaManager.ts
front/src/WebRtc/SimplePeer.ts

index ac1e9bbbafab83881b109621f3c0caada1b0aaff..56e02d449a6801e9f33ca68ec465b3f7ea73aa28 100644 (file)
@@ -118,8 +118,8 @@ export class MediaManager {
      */
     addActiveVideo(userId : any){
         let elementRemoteVideo = document.getElementById("activeCam");
-        elementRemoteVideo.insertAdjacentHTML('beforeend', '<video id="myCamVideo'+userId+'" autoplay></video>');
+        elementRemoteVideo.insertAdjacentHTML('beforeend', '<video id="'+userId+'" autoplay></video>');
 
-        this.remoteVideo[userId] = document.getElementById('myCamVideo'+userId);
+        this.remoteVideo[userId] = document.getElementById(userId);
     }
 }
\ No newline at end of file
index c5656c3ba82f40f9eecfead53b8c4d1edb88bb9d..fabc876e0e8c60356f9b81cfb336e7878261dd56 100644 (file)
@@ -41,47 +41,61 @@ export class SimplePeer {
 
     /**
      *
+     * @param message
      */
     receiveWebrtcStart(message: string) {
         let data = JSON.parse(message);
 
         //create pear connexion of user stared
-        this.createPeerConnexion(data.usersId, data.initiator);
+        this.createPeerConnexion(data);
     }
 
     /**
      *
-     * @param userId
-     * @param initiator
+     * @param users
      */
-    createPeerConnexion(usersId : Array<string>, initiator : boolean = false) {
-        usersId.forEach((userId: any) => {
-            if(this.PeerConnexionArray[userId]){
+    createPeerConnexion(users : Array<any>) {
+        console.log("createPeerConnexion", users);
+        users.forEach((user: any) => {
+            if(this.PeerConnexionArray[user.userId]){
                 return;
             }
-            this.MediaManager.addActiveVideo(userId);
+            this.MediaManager.addActiveVideo(user.userId);
 
-            this.PeerConnexion = new Peer({initiator: initiator});
+            this.PeerConnexion = new Peer({initiator: user.initiator});
 
             this.PeerConnexion.on('signal', (data: any) => {
                 this.sendWebrtcSignal(data);
             });
 
             this.PeerConnexion.on('stream', (stream: MediaStream) => {
-                this.stream(userId, stream);
+                this.stream(user.userId, stream);
             });
 
-            this.PeerConnexionArray[userId] = this.PeerConnexion;
-            this.addMedia(userId);
+            this.PeerConnexionArray[user.userId] = this.PeerConnexion;
+            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);
+        });*/
     }
 
     /**
-     * permit to send signal
+     *
+     * @param userId
      * @param data
      */
-    sendWebrtcSignal(data: any) {
-        this.Connexion.sendWebrtcSignal(data, this.RoomId);
+    sendWebrtcSignal(data: any, userId : string) {
+        this.Connexion.sendWebrtcSignal(data, this.RoomId, userId);
     }
 
     /**