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