Add feature to mute or switch off cam

This commit is contained in:
gparant 2020-05-03 17:19:42 +02:00
parent c48073b908
commit fb255140e5
5 changed files with 41 additions and 71 deletions

11
front/dist/index.html vendored
View File

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

View File

@ -21,7 +21,7 @@ video{
right: -100px; right: -100px;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.activeCam:hover video{ .webrtc:hover .activeCam video{
right: 10px; right: 10px;
} }
.activeCam video#myCamVideo{ .activeCam video#myCamVideo{
@ -58,7 +58,7 @@ video{
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
bottom: 20px; bottom: 20px;
} }
.webrtc:hover .btn-cam-action.active div{ .webrtc:hover .btn-cam-action div{
transform: translateY(0); transform: translateY(0);
} }
.btn-cam-action div:hover{ .btn-cam-action div:hover{
@ -68,60 +68,20 @@ video{
} }
.btn-micro{ .btn-micro{
transition: all .3s; transition: all .3s;
left: 168px; right: 10px;
} }
.btn-video{ .btn-video{
transition: all .2s; transition: all .2s;
left: 84px; right: 114px;
} }
.btn-call{ /*.btn-call{
transition: all .1s; transition: all .1s;
left: 0px; left: 0px;
} }*/
.btn-cam-action div img{ .btn-cam-action div img{
height: 32px; height: 32px;
width: 40px; width: 40px;
top: calc(48px - 32px); top: calc(48px - 32px);
left: calc(48px - 35px); left: calc(48px - 35px);
position: relative; 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;
}
} }

View File

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

View File

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

View File

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