Add button to enter un visio

This commit is contained in:
gparant 2020-04-26 20:55:20 +02:00
parent 707931724f
commit b49c012319
7 changed files with 91 additions and 12 deletions

View File

@ -30,5 +30,8 @@
</div>
</div>
</div>
<div id="phone-open" class="phone-open">
<img src="resources/logos/phone-open.svg">
</div>
</body>
</html>

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<g>
<path class="st0" d="M163.2,351.1c-2.4-23.4-1.1-46.7,3.9-69.2c2.6-11-2.1-23.8-9.4-29.6l-36.8-39.7C142.5,160,170,126.2,216.8,95
l45.1,27.2c9,7.3,21.3,9.1,32,4.4c21.2-9.5,43.7-15.4,67.2-17.7c16.9-1.7,29.3-16.8,27.6-33.7L381.5,5
c-1.7-16.9-16.8-29.3-33.7-27.6C154-2.8,12.4,170.8,32.1,364.5c1.7,16.9,16.8,29.3,33.7,27.6l69.9-7.1
C152.5,383.1,164.9,368,163.2,351.1z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 804 B

View File

@ -111,4 +111,43 @@ video:nth-child(3):nth-last-child(1) {
top: calc(48px - 32px);
left: calc(48px - 35px);
position: relative;
}
.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

@ -15,7 +15,6 @@ export interface GameManagerInterface {
status : number;
SimplePeer: SimplePeerInterface;
createCurrentPlayer() : void;
startWebRtc() : void;
shareUserPosition(ListMessageUserPosition : ListMessageUserPositionInterface): void;
}
export class GameManager implements GameManagerInterface {
@ -62,10 +61,6 @@ export class GameManager implements GameManagerInterface {
this.status = StatusGameManagerEnum.CURRENT_USER_CREATED;
}
startWebRtc() : void {
this.SimplePeer.startWebRtc();
}
/**
* Share position in game
* @param ListMessageUserPosition

View File

@ -253,7 +253,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
//init colision
this.physics.add.collider(this.CurrentPlayer, player, (CurrentPlayer: CurrentGamerInterface, MapPlayer: GamerInterface) => {
CurrentPlayer.say("Hello, how are you ? ");
this.GameManager.startWebRtc();
this.GameManager.SimplePeer.activePhone();
});
}
}

View File

@ -1,25 +1,23 @@
export class MediaManager {
localStream: MediaStream;
remoteStream: MediaStream;
remoteVideo: Array<any> = new Array<any>();
myCamVideo: any;
cinemaClose: any = null;
cinema: any = null;
microphoneClose: any = null;
microphone: any = null;
constraintsMedia = {audio: true, video: true};
constraintsMedia = {audio: false, video: true};
getCameraPromise : Promise<any> = null;
constructor() {
this.myCamVideo = document.getElementById('myCamVideo');
this.microphoneClose = document.getElementById('microphone-close');
this.microphoneClose.addEventListener('click', (e: any) => {
e.preventDefault();
this.enabledMicrophone();
//update tracking
});
this.microphone = document.getElementById('microphone');
this.microphone.addEventListener('click', (e: any) => {
e.preventDefault();
@ -42,7 +40,9 @@ export class MediaManager {
this.enabledCamera();
this.enabledMicrophone();
}
activeVisio(){
let webRtc = document.getElementById('webRtc');
webRtc.classList.add('active');
}
@ -91,6 +91,18 @@ export class MediaManager {
}
}
getElementActivePhone(){
return document.getElementById('phone-open');
}
activePhoneOpen(){
return this.getElementActivePhone().classList.add("active");
}
disablePhoneOpen(){
return this.getElementActivePhone().classList.remove("active");
}
//get camera
getCamera() {
return this.getCameraPromise = navigator.mediaDevices.getUserMedia(this.constraintsMedia)

View File

@ -3,7 +3,8 @@ import {MediaManager} from "./MediaManager";
let Peer = require('simple-peer');
export interface SimplePeerInterface {
startWebRtc(): void;
activePhone(): void;
disablePhone(): void;
}
export class SimplePeer {
@ -16,13 +17,18 @@ export class SimplePeer {
constructor(Connexion: ConnexionInterface, roomId: string = "test-webrtc") {
this.Connexion = Connexion;
this.RoomId = roomId;
this.MediaManager = new MediaManager();
this.MediaManager.getElementActivePhone().addEventListener("click", () => {
this.startWebRtc();
this.disablePhone();
});
}
/**
* server has two person connected, start the meet
*/
startWebRtc() {
this.MediaManager = new MediaManager();
this.MediaManager.activeVisio();
return this.MediaManager.getCamera().then((stream: MediaStream) => {
this.MediaManager.localStream = stream;
//send message to join a room
@ -126,4 +132,12 @@ export class SimplePeer {
addMedia (userId : any) {
this.PeerConnexionArray[userId].addStream(this.MediaManager.localStream) // <- add streams to peer dynamically
}
activePhone(){
this.MediaManager.activePhoneOpen();
}
disablePhone(){
this.MediaManager.disablePhoneOpen();
}
}