_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding borders, centering camera, fixing small bug on resize when no camera is enabled

Browse Source
This commit is contained in:
David Négrier 2020-06-24 17:46:41 +02:00
parent 253108eba0
commit b3c18702bb
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
front/dist/resources/style/style.css vendored
View File

@ -218,6 +218,7 @@ video{
margin-right: auto; margin-right: auto;
height: 50%; height: 50%;
width: 50%; width: 50%;
border: white 6px solid;
} }
.webrtcsetup .background-img { .webrtcsetup .background-img {
position: relative; position: relative;
@ -226,6 +227,8 @@ video{
height: 60%; height: 60%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
top: 50%;
transform: translateY(-50%);
} }
#myCamVideoSetup { #myCamVideoSetup {
width: 100%; width: 100%;

12
front/src/Phaser/Login/EnableCameraScene.ts
View File

@ -36,7 +36,7 @@ export class EnableCameraScene extends Phaser.Scene {
private soundMeter: SoundMeter; private soundMeter: SoundMeter;
private soundMeterSprite: SoundMeterSprite; private soundMeterSprite: SoundMeterSprite;
private microphoneNameField: TextField; private microphoneNameField: TextField;
private repositionCallback: (this: Window, ev: UIEvent) => any; private repositionCallback: (this: Window, ev: UIEvent) => void;
constructor() { constructor() {
super({ super({
@ -164,6 +164,7 @@ export class EnableCameraScene extends Phaser.Scene {
div.srcObject = stream; div.srcObject = stream;
this.soundMeter.connectToSource(stream, new window.AudioContext()); this.soundMeter.connectToSource(stream, new window.AudioContext());
this.soundMeterSprite.setVisible(true);
this.updateWebCamName(); this.updateWebCamName();
} }
@ -217,14 +218,17 @@ export class EnableCameraScene extends Phaser.Scene {
} }
private reposition(): void { private reposition(): void {
const div = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup'); let div = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
const bounds = div.getBoundingClientRect(); let bounds = div.getBoundingClientRect();
if (!div.srcObject) {
div = this.getElementByIdOrFail<HTMLVideoElement>('webRtcSetup');
bounds = div.getBoundingClientRect();
}
this.cameraNameField.y = bounds.top / RESOLUTION - 8; this.cameraNameField.y = bounds.top / RESOLUTION - 8;
this.soundMeterSprite.x = this.game.renderer.width / 2 - this.soundMeterSprite.getWidth() / 2; this.soundMeterSprite.x = this.game.renderer.width / 2 - this.soundMeterSprite.getWidth() / 2;
this.soundMeterSprite.y = bounds.bottom / RESOLUTION + 16; this.soundMeterSprite.y = bounds.bottom / RESOLUTION + 16;
this.soundMeterSprite.setVisible(true);
this.microphoneNameField.y = this.soundMeterSprite.y + 22; this.microphoneNameField.y = this.soundMeterSprite.y + 22;