Add feature to mute or switch off cam

front/dist/index.html

@@ -12,9 +12,9 @@
         <script src="bundle.js"></script>
         <div id="webRtc" class="webrtc">
             <div id="activeCam" class="activeCam">
-                <video id="myCamVideo" autoplay></video>
+                <video id="myCamVideo" autoplay muted></video>
             </div>
-            <div class="btn-cam-action active">
+            <div class="btn-cam-action">
                 <div class="btn-micro">
                     <img id="microphone" src="resources/logos/microphone.svg">
                     <img id="microphone-close" src="resources/logos/microphone-close.svg">
@@ -23,13 +23,10 @@
                     <img id="cinema" src="resources/logos/cinema.svg">
                     <img id="cinema-close" src="resources/logos/cinema-close.svg">
                 </div>
-                <div class="btn-call">
+                <!--<div class="btn-call">
                     <img src="resources/logos/phone.svg">
-                </div>
+                </div>-->
             </div>
         </div>
-        <div id="phone-open" class="phone-open">
-            <img src="resources/logos/phone-open.svg">
-        </div>
     </body>
 </html>

front/dist/resources/style/style.css

@@ -21,7 +21,7 @@ video{
     right: -100px;
     transition: all 0.2s ease;
 }
-.activeCam:hover video{
+.webrtc:hover .activeCam video{
     right: 10px;
 }
 .activeCam video#myCamVideo{
@@ -58,7 +58,7 @@ video{
     transition-timing-function: ease-in-out;
     bottom: 20px;
 }
-.webrtc:hover .btn-cam-action.active div{
+.webrtc:hover .btn-cam-action div{
     transform: translateY(0);
 }
 .btn-cam-action div:hover{
@@ -68,60 +68,20 @@ video{
 }
 .btn-micro{
     transition: all .3s;
-    left: 168px;
+    right: 10px;
 }
 .btn-video{
     transition: all .2s;
-    left: 84px;
+    right: 114px;
 }
-.btn-call{
+/*.btn-call{
     transition: all .1s;
     left: 0px;
-}
+}*/
 .btn-cam-action div img{
     height: 32px;
     width: 40px;
     top: calc(48px - 32px);
     left: calc(48px - 35px);
     position: relative;
-}
-
-/*Phone Animation*/
-.phone-open{
-    position: absolute;
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    left: calc(50% - 70px);
-    padding: 20px;
-    bottom: 20px;
-    box-shadow: 2px 2px 24px #444;
-    background-color: green;
-    opacity: 0;
-    transition: all .4s ease-in-out;
-}
-.phone-open.active{
-    opacity: 1;
-    animation-name: phone-move;
-    animation-duration: 0.4s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-}
-.phone-open:hover{
-    animation: none;
-    cursor: pointer;
-}
-@keyframes phone-move {
-    0%   {
-        left: calc(50% - 70px);
-        bottom: 20px;
-    }
-    25% {
-        left: calc(50% - 65px);
-        bottom: 15px;
-    }
-    25% {
-        left: calc(50% - 75px);
-        bottom: 25px;
-    }
 }

front/src/Phaser/Game/GameScene.ts

@@ -26,8 +26,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
     Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>;
     Objects : Array<Phaser.Physics.Arcade.Sprite>;
     map: ITiledMap;
-    startX = (window.innerWidth / 2) / RESOLUTION;
-    startY = (window.innerHeight / 2) / RESOLUTION;
+    startX = 704;// 22 case
+    startY = 32; // 1 case
 
 
     constructor() {

front/src/WebRtc/MediaManager.ts

@@ -16,11 +16,15 @@ export class MediaManager {
         video: videoConstraint
     };
     getCameraPromise : Promise<any> = null;
+    updatedLocalStreamCallBack : Function;
+
+    constructor(updatedLocalStreamCallBack : Function) {
+        this.updatedLocalStreamCallBack = updatedLocalStreamCallBack;
 
-    constructor() {
         this.myCamVideo = document.getElementById('myCamVideo');
-        this.microphoneClose = document.getElementById('microphone-close');
 
+        this.microphoneClose = document.getElementById('microphone-close');
+        this.microphoneClose.style.display = "none";
         this.microphoneClose.addEventListener('click', (e: any) => {
             e.preventDefault();
             this.enabledMicrophone();
@@ -34,6 +38,7 @@ export class MediaManager {
         });
 
         this.cinemaClose = document.getElementById('cinema-close');
+        this.cinemaClose.style.display = "none";
         this.cinemaClose.addEventListener('click', (e: any) => {
             e.preventDefault();
             this.enabledCamera();
@@ -58,6 +63,9 @@ export class MediaManager {
         this.constraintsMedia.video = videoConstraint;
         this.localStream = null;
         this.myCamVideo.srcObject = null;
+        this.getCamera().then((stream) => {
+            this.updatedLocalStreamCallBack(stream);
+        });
     }
 
     disabledCamera() {
@@ -75,12 +83,18 @@ export class MediaManager {
         }
         this.localStream = null;
         this.myCamVideo.srcObject = null;
+        this.getCamera().then((stream) => {
+            this.updatedLocalStreamCallBack(stream);
+        });
     }
 
     enabledMicrophone() {
         this.microphoneClose.style.display = "none";
         this.microphone.style.display = "block";
         this.constraintsMedia.audio = true;
+        this.getCamera().then((stream) => {
+            this.updatedLocalStreamCallBack(stream);
+        });
     }
 
     disabledMicrophone() {
@@ -94,18 +108,9 @@ export class MediaManager {
                 }
             });
         }
-    }
-
-    getElementActivePhone(){
-        return document.getElementById('phone-open');
-    }
-
-    activePhoneOpen(){
-        return this.getElementActivePhone().classList.add("active");
-    }
-
-    disablePhoneOpen(){
-        return this.getElementActivePhone().classList.remove("active");
+        this.getCamera().then((stream) => {
+            this.updatedLocalStreamCallBack(stream);
+        });
     }
 
     //get camera

front/src/WebRtc/SimplePeer.ts

@@ -17,7 +17,9 @@ export class SimplePeer {
     constructor(Connexion: ConnexionInterface, WebRtcRoomId: string = "test-webrtc") {
         this.Connexion = Connexion;
         this.WebRtcRoomId = WebRtcRoomId;
-        this.MediaManager = new MediaManager();
+        this.MediaManager = new MediaManager((stream : MediaStream) => {
+            this.updatedLocalStream();
+        });
         this.PeerConnexionArray = new Array<any>();
 
         this.initialise();
@@ -100,7 +102,7 @@ export class SimplePeer {
                     {
                         urls: 'turn:numb.viagenie.ca',
                         username: 'g.parant@thecodingmachine.com',
-                        credential: 'Muzuvo$6'
+                        credential: 'itcugcOHxle9Acqi$'
                     },
                 ]
             },
@@ -202,4 +204,10 @@ export class SimplePeer {
             console.error(`addMedia => addMedia => ${userId}`, e);
         }
     }
+
+    updatedLocalStream(){
+        this.Users.forEach((user) => {
+            this.addMedia(user.userId);
+        })
+    }
 }