From 575054fe4f1d56f23b1b4d9550d31637d8289674 Mon Sep 17 00:00:00 2001 From: gparant Date: Sat, 25 Apr 2020 20:29:03 +0200 Subject: [PATCH] Fix multi video --- front/dist/index.html | 5 ++- front/dist/resources/style/style.css | 47 +++++++++++++++++++++++----- front/src/WebRtc/MediaManager.ts | 14 +++++++-- front/src/WebRtc/SimplePeer.ts | 21 +++++++------ 4 files changed, 65 insertions(+), 22 deletions(-) diff --git a/front/dist/index.html b/front/dist/index.html index 656c903b..4b628398 100644 --- a/front/dist/index.html +++ b/front/dist/index.html @@ -11,10 +11,9 @@
-
- +
-
+
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 4c27c584..71b948bd 100644 --- 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 e8666066..ac1e9bbb 100644 --- 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 = new Array(); myCamVideo: any; cinemaClose: any = null; cinema: any = null; @@ -11,7 +11,6 @@ export class MediaManager { getCameraPromise : Promise = 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', ''); + + 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 966254be..c5656c3b 100644 --- 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