- Need Audio Video Inputs
+ Camera/Microphone access needed
Permission denied
You must allow camera and microphone access in your browser.
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index 2a41e17e..7af1014b 100644
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/front/src/Phaser/Game/GameManager.ts
@@ -2,6 +2,7 @@ import {GameScene} from "./GameScene";
import {connectionManager} from "../../Connexion/ConnectionManager";
import {Room} from "../../Connexion/Room";
import {MenuScene, MenuSceneName} from "../Menu/MenuScene";
+import {HelpCameraSettingsScene, HelpCameraSettingsSceneName} from "../Menu/HelpCameraSettingsScene";
import {LoginSceneName} from "../Login/LoginScene";
import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
import {EnableCameraSceneName} from "../Login/EnableCameraScene";
@@ -78,6 +79,7 @@ export class GameManager {
console.log('starting '+ (this.currentGameSceneName || this.startRoom.id))
scenePlugin.start(this.currentGameSceneName || this.startRoom.id);
scenePlugin.launch(MenuSceneName);
+ scenePlugin.launch(HelpCameraSettingsSceneName);//700
}
public gameSceneIsCreated(scene: GameScene) {
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index daa4d394..b9b8e3fe 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -102,7 +102,6 @@ interface DeleteGroupEventInterface {
}
const defaultStartLayerName = 'start';
-const helpCameraSettings = 'helpCameraSettings';
export class GameScene extends ResizableScene implements CenterListener {
Terrains : Array;
@@ -130,8 +129,6 @@ export class GameScene extends ResizableScene implements CenterListener {
// A promise that will resolve when the "create" method is called (signaling loading is ended)
private createPromise: Promise;
private createPromiseResolve!: (value?: void | PromiseLike) => void;
- private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement; //#700
- private helpCameraSettingsOpened: boolean = false; //#700
MapUrlFile: string;
RoomId: string;
@@ -212,7 +209,6 @@ export class GameScene extends ResizableScene implements CenterListener {
this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32});
this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
- this.load.html(helpCameraSettings, 'resources/html/helpCameraSettings.html'); //#700
addLoader(this);
}
@@ -550,30 +546,10 @@ export class GameScene extends ResizableScene implements CenterListener {
//init user position and play trigger to check layers properties
this.gameMap.setPosition(this.CurrentPlayer.x, this.CurrentPlayer.y);
-
- // #700
- const middleX = (window.innerWidth / 3) - (370*0.85);
- this.helpCameraSettingsElement = this.add.dom(middleX, -800, undefined, {overflow: 'scroll'}).createFromCache(helpCameraSettings);
- this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
- this.helpCameraSettingsElement.addListener('click');
- this.helpCameraSettingsElement.on('click', (event:MouseEvent) => {
- event.preventDefault();
- if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') {
- window.location.reload();
- }else if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormContinue') {
- this.closeHelpCameraSettingsOpened();
- }
- });
- if(this.helpCameraSettingsElement.parent){
- (this.helpCameraSettingsElement.parent as HTMLDivElement).style.overflow = 'scroll';
- }
-
- if(!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video){
- this.openHelpCameraSettingsOpened(); //#700
- }
});
}
+
//todo: into dedicated classes
private initCirclesCanvas(): void {
// Let's generate the circle for the group delimiter
@@ -994,44 +970,42 @@ export class GameScene extends ResizableScene implements CenterListener {
*/
update(time: number, delta: number) : void {
mediaManager.setLastUpdateScene();
- if(!this.helpCameraSettingsOpened) {
- this.currentTick = time;
- this.CurrentPlayer.moveUser(delta);
+ this.currentTick = time;
+ this.CurrentPlayer.moveUser(delta);
- // Let's handle all events
- while (this.pendingEvents.length !== 0) {
- const event = this.pendingEvents.dequeue();
- switch (event.type) {
- case "InitUserPositionEvent":
- this.doInitUsersPosition(event.event);
- break;
- case "AddPlayerEvent":
- this.doAddPlayer(event.event);
- break;
- case "RemovePlayerEvent":
- this.doRemovePlayer(event.userId);
- break;
- case "UserMovedEvent":
- this.doUpdatePlayerPosition(event.event);
- break;
- case "GroupCreatedUpdatedEvent":
- this.doShareGroupPosition(event.event);
- break;
- case "DeleteGroupEvent":
- this.doDeleteGroup(event.groupId);
- break;
- }
+ // Let's handle all events
+ while (this.pendingEvents.length !== 0) {
+ const event = this.pendingEvents.dequeue();
+ switch (event.type) {
+ case "InitUserPositionEvent":
+ this.doInitUsersPosition(event.event);
+ break;
+ case "AddPlayerEvent":
+ this.doAddPlayer(event.event);
+ break;
+ case "RemovePlayerEvent":
+ this.doRemovePlayer(event.userId);
+ break;
+ case "UserMovedEvent":
+ this.doUpdatePlayerPosition(event.event);
+ break;
+ case "GroupCreatedUpdatedEvent":
+ this.doShareGroupPosition(event.event);
+ break;
+ case "DeleteGroupEvent":
+ this.doDeleteGroup(event.groupId);
+ break;
}
- // Let's move all users
- const updatedPlayersPositions = this.playersPositionInterpolator.getUpdatedPositions(time);
- updatedPlayersPositions.forEach((moveEvent: HasMovedEvent, userId: number) => {
- const player: RemotePlayer | undefined = this.MapPlayersByKey.get(userId);
- if (player === undefined) {
- throw new Error('Cannot find player with ID "' + userId + '"');
- }
- player.updatePosition(moveEvent);
- });
}
+ // Let's move all users
+ const updatedPlayersPositions = this.playersPositionInterpolator.getUpdatedPositions(time);
+ updatedPlayersPositions.forEach((moveEvent: HasMovedEvent, userId: number) => {
+ const player: RemotePlayer | undefined = this.MapPlayersByKey.get(userId);
+ if (player === undefined) {
+ throw new Error('Cannot find player with ID "' + userId + '"');
+ }
+ player.updatePosition(moveEvent);
+ });
}
/**
@@ -1276,53 +1250,4 @@ export class GameScene extends ResizableScene implements CenterListener {
});
}
}
-
- //#700
- private openHelpCameraSettingsOpened(): void{
- HtmlUtils.getElementByIdOrFail('webRtcSetup').style.display = 'none';
- this.helpCameraSettingsOpened = true;
- let middleY = (window.innerHeight / 3) - 275;
- if(middleY < 0){
- middleY = 0;
- }
- let middleX = (window.innerWidth / 3) - 50;
- if(middleX < 0){
- middleX = 0;
- }
- if(window.navigator.userAgent.includes('Firefox')){
- HtmlUtils.getElementByIdOrFail('browserHelpSetting').innerHTML ='
';
- }else if(window.navigator.userAgent.includes('Chrome')){
- HtmlUtils.getElementByIdOrFail('browserHelpSetting').innerHTML ='
';
- }
- this.tweens.add({
- targets: this.helpCameraSettingsElement,
- y: this.startY - (370/2),
- x: this.startX - (400/2),
- duration: 1000,
- ease: 'Power3',
- overflow: 'scroll'
- });
- }
-
- private closeHelpCameraSettingsOpened(): void{
- const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
- helpCameraSettingsInfo.innerText = '';
- helpCameraSettingsInfo.style.display = 'none';
- this.helpCameraSettingsOpened = false;
- this.tweens.add({
- targets: this.helpCameraSettingsElement,
- y: -400,
- duration: 1000,
- ease: 'Power3',
- overflow: 'scroll'
- });
- }
-
- private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
- //Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.
- //To prevent this, we put a 'hidden' attribute on the root element, we remove it only after the init is done.
- setTimeout(() => {
- (menuElement.getChildByID(rootDomId) as HTMLElement).hidden = false;
- }, 250);
- }
}
diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index 3354d931..515e1852 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -279,17 +279,4 @@ export class EnableCameraScene extends Phaser.Scene {
}
this.updateWebCamName();
}
-
- private reset(){
- this.textField.destroy();
- this.pressReturnField.destroy();
- this.cameraNameField.destroy();
- this.microphoneNameField.destroy();
- this.arrowRight.destroy();
- this.arrowLeft.destroy();
- this.arrowUp.destroy();
- this.arrowDown.destroy();
- this.soundMeterSprite.destroy();
- this.input.keyboard.removeAllKeys();
- }
}
diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
new file mode 100644
index 00000000..5a3e6380
--- /dev/null
+++ b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
@@ -0,0 +1,96 @@
+import {mediaManager} from "../../WebRtc/MediaManager";
+import {HtmlUtils} from "../../WebRtc/HtmlUtils";
+
+export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene';
+const helpCameraSettings = 'helpCameraSettings';
+/**
+ * The scene that show how to permit Camera and Microphone access if there are not already allowed
+ */
+export class HelpCameraSettingsScene extends Phaser.Scene {
+ private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement;
+ private helpCameraSettingsOpened: boolean = false;
+
+ constructor() {
+ super({key: HelpCameraSettingsSceneName});
+ }
+
+ preload() {
+ this.load.html(helpCameraSettings, 'resources/html/helpCameraSettings.html');
+ }
+
+ create(){
+ this.createHelpCameraSettings();
+ }
+
+ private createHelpCameraSettings() : void {
+ const middleX = (window.innerWidth / 3) - (370*0.85);
+ this.helpCameraSettingsElement = this.add.dom(middleX, -800, undefined, {overflow: 'scroll'}).createFromCache(helpCameraSettings);
+ this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
+ this.helpCameraSettingsElement.addListener('click');
+ this.helpCameraSettingsElement.on('click', (event:MouseEvent) => {
+ event.preventDefault();
+ if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') {
+ window.location.reload();
+ }else if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormContinue') {
+ this.closeHelpCameraSettingsOpened();
+ }
+ });
+ if(this.helpCameraSettingsElement.parent){
+ (this.helpCameraSettingsElement.parent as HTMLDivElement).style.overflow = 'scroll';
+ }
+
+ if(!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video){
+ this.openHelpCameraSettingsOpened();
+ }
+ }
+
+ private openHelpCameraSettingsOpened(): void{
+ HtmlUtils.getElementByIdOrFail('webRtcSetup').style.display = 'none';
+ this.helpCameraSettingsOpened = true;
+ let middleY = (window.innerHeight / 3) - (495);
+ if(middleY < 0){
+ middleY = 0;
+ }
+ let middleX = (window.innerWidth / 3) - (370*0.85);
+ if(middleX < 0){
+ middleX = 0;
+ }
+ if(window.navigator.userAgent.includes('Firefox')){
+ HtmlUtils.getElementByIdOrFail('browserHelpSetting').innerHTML ='';
+ }else if(window.navigator.userAgent.includes('Chrome')){
+ HtmlUtils.getElementByIdOrFail('browserHelpSetting').innerHTML ='';
+ }
+ this.tweens.add({
+ targets: this.helpCameraSettingsElement,
+ y: middleY,
+ x: middleX,
+ duration: 1000,
+ ease: 'Power3',
+ overflow: 'scroll'
+ });
+ }
+
+ private closeHelpCameraSettingsOpened(): void{
+ const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
+ helpCameraSettingsInfo.innerText = '';
+ helpCameraSettingsInfo.style.display = 'none';
+ this.helpCameraSettingsOpened = false;
+ this.tweens.add({
+ targets: this.helpCameraSettingsElement,
+ y: -400,
+ duration: 1000,
+ ease: 'Power3',
+ overflow: 'scroll'
+ });
+ }
+
+ private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
+ //Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.
+ //To prevent this, we put a 'hidden' attribute on the root element, we remove it only after the init is done.
+ setTimeout(() => {
+ (menuElement.getChildByID(rootDomId) as HTMLElement).hidden = false;
+ }, 250);
+ }
+
+}
+
diff --git a/front/src/index.ts b/front/src/index.ts
index 8b0a83b6..1b8b7205 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -12,6 +12,7 @@ import {ResizableScene} from "./Phaser/Login/ResizableScene";
import {EntryScene} from "./Phaser/Login/EntryScene";
import {coWebsiteManager} from "./WebRtc/CoWebsiteManager";
import {MenuScene} from "./Phaser/Menu/MenuScene";
+import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
import {localUserStore} from "./Connexion/LocalUserStore";
import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
@@ -78,7 +79,7 @@ const config: GameConfig = {
width: width / RESOLUTION,
height: height / RESOLUTION,
parent: "game",
- scene: [EntryScene, LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene],
+ scene: [EntryScene, LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene],
zoom: RESOLUTION,
fps: fps,
dom: {