From fb255140e517cc1aa59bb449bea2e3c3a2794314 Mon Sep 17 00:00:00 2001 From: gparant Date: Sun, 3 May 2020 17:19:42 +0200 Subject: [PATCH] Add feature to mute or switch off cam --- front/dist/index.html | 11 +++--- front/dist/resources/style/style.css | 52 ++++------------------------ front/src/Phaser/Game/GameScene.ts | 4 +-- front/src/WebRtc/MediaManager.ts | 33 ++++++++++-------- front/src/WebRtc/SimplePeer.ts | 12 +++++-- 5 files changed, 41 insertions(+), 71 deletions(-) diff --git a/front/dist/index.html b/front/dist/index.html index c1b3eb52..85aced1e 100644 --- a/front/dist/index.html +++ b/front/dist/index.html @@ -12,9 +12,9 @@
- +
-
+
@@ -23,13 +23,10 @@
-
+
-
- -
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 4bcb70bc..58c32bb7 100644 --- a/front/dist/resources/style/style.css +++ b/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; - } } \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 8764e959..9666ff9c 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -26,8 +26,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ Layers : Array; Objects : Array; map: ITiledMap; - startX = (window.innerWidth / 2) / RESOLUTION; - startY = (window.innerHeight / 2) / RESOLUTION; + startX = 704;// 22 case + startY = 32; // 1 case constructor() { diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index a0b6c0b8..5ebbc0c7 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -16,11 +16,15 @@ export class MediaManager { video: videoConstraint }; getCameraPromise : Promise = 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 diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index 0e430326..3bff9580 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/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(); 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); + }) + } } \ No newline at end of file