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

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

View File

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

View File

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