From 85ab0a231fe637496ed7ba2f006c6031029ad1ce Mon Sep 17 00:00:00 2001
From: gparant <g.parant@thecodingmachine.com>
Date: Sun, 3 May 2020 14:29:45 +0200
Subject: [PATCH] Fix style cam

---
 front/dist/resources/style/style.css | 15 +++++++++++----
 front/src/WebRtc/MediaManager.ts     | 19 +++++++++++++++++--
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 049c3d1d..4bcb70bc 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -1,3 +1,7 @@
+video{
+    -webkit-transform: scaleX(-1);
+    transform: scaleX(-1);
+}
 .webrtc{
     display: none;
     position: absolute;
@@ -11,15 +15,18 @@
 .webrtc, .activeCam{}
 .activeCam video{
     position: absolute;
-    width: 300px;
-    height: 20%;
+    height: 25%;
     top: 10px;
-    right: 10px;
     margin: 5px;
+    right: -100px;
+    transition: all 0.2s ease;
+}
+.activeCam:hover video{
+    right: 10px;
 }
 .activeCam video#myCamVideo{
     width: 200px;
-    height: 100px;
+    height: 113px;
 }
 
 /*CSS size for 2 - 3 elements*/
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 4a875af2..a0b6c0b8 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -1,3 +1,8 @@
+const videoConstraint: {width : any, height: any, facingMode : string} = {
+    width: { ideal: 1280 },
+    height: { ideal: 720 },
+    facingMode: "user"
+};
 export class MediaManager {
     localStream: MediaStream;
     remoteVideo: Array<any> = new Array<any>();
@@ -6,7 +11,10 @@ export class MediaManager {
     cinema: any = null;
     microphoneClose: any = null;
     microphone: any = null;
-    constraintsMedia = {audio: true, video: true};
+    constraintsMedia : {audio : any, video : any} = {
+        audio: true,
+        video: videoConstraint
+    };
     getCameraPromise : Promise<any> = null;
 
     constructor() {
@@ -47,7 +55,7 @@ export class MediaManager {
     enabledCamera() {
         this.cinemaClose.style.display = "none";
         this.cinema.style.display = "block";
-        this.constraintsMedia.video = true;
+        this.constraintsMedia.video = videoConstraint;
         this.localStream = null;
         this.myCamVideo.srcObject = null;
     }
@@ -106,6 +114,13 @@ export class MediaManager {
             .then((stream: MediaStream) => {
                 this.localStream = stream;
                 this.myCamVideo.srcObject = this.localStream;
+
+                //TODO resize remote cam
+                /*console.log(this.localStream.getTracks());
+                let videoMediaStreamTrack =  this.localStream.getTracks().find((media : MediaStreamTrack) => media.kind === "video");
+                let {width, height} = videoMediaStreamTrack.getSettings();
+                console.info(`${width}x${height}`); // 6*/
+
                 return stream;
             }).catch((err) => {
                 console.error(err);