projects / libreadventure.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 89db855)
Fix multi video
authorgparant <g.parant@thecodingmachine.com>
Sat, 25 Apr 2020 18:29:03 +0000 (20:29 +0200)
committergparant <g.parant@thecodingmachine.com>
Sat, 25 Apr 2020 18:29:03 +0000 (20:29 +0200)
front/dist/index.html patch | blob | blame | history
front/dist/resources/style/style.css patch | blob | blame | history
front/src/WebRtc/MediaManager.ts patch | blob | blame | history
front/src/WebRtc/SimplePeer.ts patch | blob | blame | history

diff --git a/front/dist/index.html b/front/dist/index.html
index 656c903b00464c5d36b30dea51669cfcbeca0d6e..4b6283987c5fe8bc7ebab056ac67b18b97c93459 100644 (file)
--- a/front/dist/index.html
+++ b/front/dist/index.html
@@ -11,10 +11,9 @@
     <body style="margin: 0">
         <script src="bundle.js"></script>
         <div id="webRtc" class="webrtc">
-            <div class="activeCam">
-                <video id="activeCamVideo" autoplay></video>
+            <div id="activeCam" class="activeCam">
             </div>
-            <div id="myCam" class="myCam active">
+            <div id="myCam" class="myCam">
                 <video id="myCamVideo" autoplay></video>
             </div>
             <div class="btn-cam-action active">
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 4c27c5843116427262c70661303d77663ba296be..71b948bd634d895ee4b00172fa3efccf0ea8182f 100644 (file)
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -4,12 +4,6 @@
 .webrtc.active{
     display: block;
 }
-.myCam{
-    display: none;
-}
-.myCam.active{
-    display: block;
-}
 .webrtc, .activeCam{
     position: absolute;
     left: 0;
@@ -18,10 +12,48 @@
     height: 100%;
     background: black;
 }
-.webrtc video{
+.activeCam video{
+    position: absolute;
     width: 100%;
     height: 100%;
 }
+
+/*CSS size for 2 - 3 elements*/
+video:nth-child(1):nth-last-child(3),
+video:nth-child(2):nth-last-child(2),
+video:nth-child(3):nth-last-child(1),
+video:nth-child(1):nth-last-child(2),
+video:nth-child(2):nth-last-child(1){
+    width: 50%;
+}
+video:nth-child(1):nth-last-child(3),
+video:nth-child(2):nth-last-child(2),
+video:nth-child(3):nth-last-child(1){
+    height: 50%;
+}
+
+/*CSS position for 2 elements*/
+video:nth-child(1):nth-last-child(2){
+    left: 0;
+}
+video:nth-child(2):nth-last-child(1){
+    left: 50%;
+}
+
+/*CSS position for 3 elements*/
+video:nth-child(1):nth-last-child(3){
+    top: 0;
+    left: 0;
+}
+video:nth-child(2):nth-last-child(2){
+    top: 0;
+    left: 50%;
+}
+video:nth-child(3):nth-last-child(1) {
+    top: 50%;
+    left: 25%;
+}
+
 .myCam{
     height: 200px;
     width: 300px;
@@ -33,6 +65,7 @@
     max-height: 17%;
     max-width: 17%;
     opacity: 1;
+    display: block;
     transition: opacity 1s;
 }
 .myCam video{
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index e8666066ecdc188d3613c9e2b87e2c203349415e..ac1e9bbbafab83881b109621f3c0caada1b0aaff 100644 (file)
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -1,7 +1,7 @@
 export class MediaManager {
     localStream: MediaStream;
     remoteStream: MediaStream;
-    remoteVideo: any;
+    remoteVideo: Array<any> = new Array<any>();
     myCamVideo: any;
     cinemaClose: any = null;
     cinema: any = null;
@@ -11,7 +11,6 @@ export class MediaManager {
     getCameraPromise : Promise<any> = null;
 
     constructor() {
-        this.remoteVideo = document.getElementById('activeCamVideo');
         this.myCamVideo = document.getElementById('myCamVideo');
 
         this.microphoneClose = document.getElementById('microphone-close');
@@ -112,4 +111,15 @@ export class MediaManager {
                 throw err;
             });
     }
+
+    /**
+     *
+     * @param userId
+     */
+    addActiveVideo(userId : any){
+        let elementRemoteVideo = document.getElementById("activeCam");
+        elementRemoteVideo.insertAdjacentHTML('beforeend', '<video id="myCamVideo'+userId+'" autoplay></video>');
+
+        this.remoteVideo[userId] = document.getElementById('myCamVideo'+userId);
+    }
 }
\ No newline at end of file
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index 966254be61e6eb7403a0eddda6551b74460e9387..c5656c3ba82f40f9eecfead53b8c4d1edb88bb9d 100644 (file)
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -26,15 +26,14 @@ export class SimplePeer {
             this.Connexion.sendWebrtcRomm(this.RoomId);
 
             //receive message start
-            this.Connexion.receiveWebrtcStart((message : string) => {
+            this.Connexion.receiveWebrtcStart((message: string) => {
                 this.receiveWebrtcStart(message);
             });
 
             //receive signal by gemer
-            this.Connexion.receiveWebrtcSignal((message : string) => {
+            this.Connexion.receiveWebrtcSignal((message: string) => {
                 this.receiveWebrtcSignal(message);
             });
-
         }).catch((err) => {
             console.error(err);
         });
@@ -60,6 +59,8 @@ export class SimplePeer {
             if(this.PeerConnexionArray[userId]){
                 return;
             }
+            this.MediaManager.addActiveVideo(userId);
+
             this.PeerConnexion = new Peer({initiator: initiator});
 
             this.PeerConnexion.on('signal', (data: any) => {
@@ -67,7 +68,7 @@ export class SimplePeer {
             });
 
             this.PeerConnexion.on('stream', (stream: MediaStream) => {
-                this.stream(stream);
+                this.stream(userId, stream);
             });
 
             this.PeerConnexionArray[userId] = this.PeerConnexion;
@@ -96,17 +97,17 @@ export class SimplePeer {
     }
 
     /**
-     * permit stream video
+     *
+     * @param userId
      * @param stream
      */
-    stream(stream: MediaStream) {
-        this.MediaManager.remoteStream = stream;
-        this.MediaManager.remoteVideo.srcObject = this.MediaManager.remoteStream;
+    stream(userId : any, stream: MediaStream) {
+        this.MediaManager.remoteVideo[userId].srcObject = stream;
     }
 
     /**
-     * Permit to update stream
-     * @param stream
+     *
+     * @param userId
      */
      addMedia (userId : any) {
          this.PeerConnexionArray[userId].addStream(this.MediaManager.localStream) // <- add streams to peer dynamically
Unnamed repository; edit this file 'description' to name the repository.