Improvement feature circle discussion (#977)

* Improvment circle discussion
 - Change to lissen start event of WebRTC connection

* Update help allow navigator and waring message
 - Show warning message.
 - Use help camera allow setting to show modal and help user.
 - Change feature to show the modal only when user have need the information on allow navigator access

* Create soud for video discussion

front/dist/index.tmpl.html

@@ -48,20 +48,27 @@
                     <div id="activeCam" class="activeCam">
                         <div id="div-myCamVideo" class="video-container">
                             <video id="myCamVideo" autoplay muted></video>
+                            <div id="mySoundMeter" class="sound-progress">
+                                <span></span>
+                                <span></span>
+                                <span></span>
+                                <span></span>
+                                <span></span>
+                            </div>
                         </div>
                     </div>
                     <div class="btn-cam-action">
-                        <div id="btn-micro" class="btn-micro">
+                        <div id="btn-monitor" class="btn-monitor">
-                            <img id="microphone" src="resources/logos/microphone.svg">
+                            <img id="monitor" src="resources/logos/monitor.svg">
-                            <img id="microphone-close" src="resources/logos/microphone-close.svg">
+                            <img id="monitor-close" src="resources/logos/monitor-close.svg">
                         </div>
                         <div id="btn-video" class="btn-video">
                             <img id="cinema" src="resources/logos/cinema.svg">
                             <img id="cinema-close" src="resources/logos/cinema-close.svg">
                         </div>
-                        <div id="btn-monitor" class="btn-monitor">
+                        <div id="btn-micro" class="btn-micro">
-                            <img id="monitor" src="resources/logos/monitor.svg">
+                            <img id="microphone" src="resources/logos/microphone.svg">
-                            <img id="monitor-close" src="resources/logos/monitor-close.svg">
+                            <img id="microphone-close" src="resources/logos/microphone-close.svg">
                         </div>
                     </div>
 

front/dist/resources/html/EnableCameraScene.html

@@ -48,7 +48,7 @@
         text-align: center;
         margin: 0;
         position: absolute;
-        top: 44vh;
+        top: 40vh;
         width: 100%;
     }
     #enableCameraScene button {

front/dist/resources/html/helpCameraSettings.html

@@ -60,6 +60,9 @@
         font-size: 8px;
         margin: 0px 20px;
     }
+    #helpCameraSettings section p a{
+        font-size: 8px;
+    }
     #helpCameraSettings section p.err{
         color: #ff0000;
     }
@@ -95,6 +98,10 @@
         <p>If you prefer to continue without allowing camera and microphone access, click on Continue</p>
         <p id='browserHelpSetting'></p>
     </section>
+    <!--<section class="text-center">
+        <p>If your problem persist, please contact us: <a id="mailto" href="mailto:workadventure@thecodingmachine.com?subject=Support camera and microphone settings" target="_blank"> workadventure@thecodingmachine.com</a>.</p>
+    </section>-->
+    </section>
     <section class="action">
         <a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
         <button type="submit" id="helpCameraSettingsFormContinue">Continue</button>

front/dist/resources/style/mobile-style.scss

@@ -23,27 +23,17 @@
   }
 
   .btn-cam-action {
+    min-width: 150px;
+
     &:hover{
       transform: translateY(20px);
     }
     div {
+      margin: 0 1%;
       &:hover {
         background-color: #666;
       }
-
+      margin-bottom: 30px;
-      bottom: 30px;
-
-      &.btn-micro {
-        right: 0;
-      }
-
-      &.btn-monitor {
-        right: 130px;
-      }
-
-      &.btn-video {
-        right: 65px;
-      }
     }
   }
 

front/dist/resources/style/style.css

@@ -98,7 +98,7 @@ body .message-info.warning{
 }
 
 .video-container button.report:hover {
-    width: 150px;
+    width: 160px;
 }
 
 .video-container button.report img{
@@ -126,6 +126,7 @@ body .message-info.warning{
 
 .video-container video{
     height: 100%;
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
 }
 
 .video-container video:focus{
@@ -141,7 +142,7 @@ body .message-info.warning{
     right: 15px;
     bottom: 30px;
     border-radius: 15px 15px 15px 15px;
-    max-height: 200px;
+    max-height: 20%;
 }
 
 video#myCamVideo{
@@ -153,19 +154,60 @@ video#myCamVideo{
     /*height: 113px;*/
 }
 
+.sound-progress{
+    display: none;
+    position: absolute;
+    right: 14px;
+    top: calc(50% - 5px);
+}
+.sound-progress.active{
+    display: table-column;
+}
+.sound-progress span{
+    position: absolute;
+    color: black;
+    background-color: #00000020;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+}
+.sound-progress span.active{
+    background-color: #00c3ff66
+}
+.sound-progress span:nth-child(1){
+    top: calc(50% + 20px);
+}
+.sound-progress span:nth-child(2){
+    top: calc(50% + 10px);
+}
+.sound-progress span:nth-child(3){
+    top: calc(50% - 0px);
+}
+.sound-progress span:nth-child(4){
+    top: calc(50% - 10px);
+}
+.sound-progress span:nth-child(5){
+    top: calc(50% - 20px);
+}
 
 .btn-cam-action {
     pointer-events: all;
     position: absolute;
-    bottom: 0px;
+    display: inline-flex;
-    right: 0px;
+    bottom: 10px;
-    width: 450px;
+    right: 15px;
-    height: 150px;
+    width: 15vw;
+    height: 40px;
+    text-align: center;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    justify-items: center;
 }
 /*btn animation*/
 .btn-cam-action div{
     cursor: url('/resources/logos/cursor_pointer.png'), pointer;
-    position: absolute;
+    /*position: absolute;*/
     border: solid 0px black;
     width: 44px;
     height: 44px;
@@ -174,7 +216,8 @@ video#myCamVideo{
     border-radius: 48px;
     transform: translateY(20px);
     transition-timing-function: ease-in-out;
-    bottom: 20px;
+    margin-bottom: 20px;
+    margin: 0 4%;
 }
 .btn-cam-action div.disabled {
     background: #d75555;
@@ -193,17 +236,17 @@ video#myCamVideo{
 .btn-micro{
     pointer-events: auto;
     transition: all .3s;
-    right: 44px;
+    /*right: 44px;*/
 }
 .btn-video{
     pointer-events: auto;
     transition: all .25s;
-    right: 134px;
+    /*right: 134px;*/
 }
 .btn-monitor{
     pointer-events: auto;
     transition: all .2s;
-    right: 224px;
+    /*right: 224px;*/
 }
 .btn-copy{
     pointer-events: auto;
@@ -497,7 +540,7 @@ input[type=range]:focus::-ms-fill-upper {
     position: absolute;
     width: 100%;
     height: 100%;
-    pointer-events: none;
+    pointer-events: all;
     /* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */
 }
 
@@ -533,7 +576,7 @@ input[type=range]:focus::-ms-fill-upper {
 .sidebar {
     flex: 0 0 25%;
     display: flex;
-    pointer-events: none;
+    pointer-events: all;
 }
 
 .sidebar > div {
@@ -547,6 +590,10 @@ input[type=range]:focus::-ms-fill-upper {
     margin: 0%;
 }
 
+.sidebar > div video {
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
+}
+
 /* Let's make sure videos are vertically centered if they need to be cropped */
 .media-container {
     display: flex;
@@ -1111,17 +1158,34 @@ div.action{
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 }
+div.action.info,
+div.action.warning,
+div.action.danger{
+    transition: all 1s ease;
+    animation: mymove 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: ease-in-out;
+}
 div.action p.action-body{
+    cursor: url('/resources/logos/cursor_pointer.png'), pointer;
     padding: 10px;
     background-color: #2d2d2dba;
     color: #fff;
     font-size: 14px;
     font-weight: 500;
     text-align: center;
-    max-width: 250px;
+    max-width: 350px;
-    margin-left: calc(50% - 125px);
+    margin-left: calc(50% - 175px);
     border-radius: 15px;
 }
+div.action.warning p.action-body{
+    background-color: #ff9800eb;
+    color: #000;
+}
+div.action.danger p.action-body{
+    background-color: #da0000e3;
+    color: #000;
+}
 .popUpElement{
     font-family: 'Press Start 2P';
     text-align: left;

front/dist/static/images/favicons/manifest.json

@@ -1,41 +1,149 @@
 {
- "name": "App",
+    "short_name": "WA",
- "icons": [
+    "name": "WorkAdventure",
-  {
+    "icons": [
-   "src": "\/android-icon-36x36.png",
+        {
-   "sizes": "36x36",
+            "src": "/static/images/favicons/apple-icon-57x57.png",
-   "type": "image\/png",
+            "sizes": "57x57",
-   "density": "0.75"
+            "type": "image\/png"
-  },
+        },
-  {
+        {
-   "src": "\/android-icon-48x48.png",
+            "src": "/static/images/favicons/apple-icon-60x60.png",
-   "sizes": "48x48",
+            "sizes": "60x60",
-   "type": "image\/png",
+            "type": "image\/png"
-   "density": "1.0"
+        },
-  },
+        {
-  {
+            "src": "/static/images/favicons/apple-icon-72x72.png",
-   "src": "\/android-icon-72x72.png",
+            "sizes": "72x72",
-   "sizes": "72x72",
+            "type": "image\/png"
-   "type": "image\/png",
+        },
-   "density": "1.5"
+        {
-  },
+            "src": "/static/images/favicons/apple-icon-76x76.png",
-  {
+            "sizes": "76x76",
-   "src": "\/android-icon-96x96.png",
+            "type": "image\/png"
-   "sizes": "96x96",
+        },
-   "type": "image\/png",
+        {
-   "density": "2.0"
+            "src": "/static/images/favicons/apple-icon-114x114.png",
-  },
+            "sizes": "114x114",
-  {
+            "type": "image\/png"
-   "src": "\/android-icon-144x144.png",
+        },
-   "sizes": "144x144",
+        {
-   "type": "image\/png",
+            "src": "/static/images/favicons/apple-icon-120x120.png",
-   "density": "3.0"
+            "sizes": "120x120",
-  },
+            "type": "image\/png"
-  {
+        },
-   "src": "\/android-icon-192x192.png",
+        {
-   "sizes": "192x192",
+            "src": "/static/images/favicons/apple-icon-144x144.png",
-   "type": "image\/png",
+            "sizes": "144x144",
-   "density": "4.0"
+            "type": "image\/png"
-  }
+        },
- ]
+        {
+            "src": "/static/images/favicons/apple-icon-152x152.png",
+            "sizes": "152x152",
+            "type": "image\/png"
+        },
+        {
+            "src": "/static/images/favicons/apple-icon-180x180.png",
+            "sizes": "180x180",
+            "type": "image\/png"
+        },
+        {
+            "src": "/static/images/favicons/android-icon-36x36.png",
+            "sizes": "36x36",
+            "type": "image\/png",
+            "density": "0.75"
+        },
+        {
+            "src": "/static/images/favicons/android-icon-48x48.png",
+            "sizes": "48x48",
+            "type": "image\/png",
+            "density": "1.0"
+        },
+        {
+            "src": "/static/images/favicons/android-icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image\/png",
+            "density": "1.5"
+        },
+
+        {
+            "src": "/static/images/favicons/favicon-16x16.png",
+            "sizes": "16x16",
+            "type": "image\/png",
+            "density": "1"
+        },
+        {
+            "src": "/static/images/favicons/favicon-32x32.png",
+            "sizes": "32x32",
+            "type": "image\/png",
+            "density": "1.5"
+        },
+        {
+            "src": "/static/images/favicons/favicon-96x96.png",
+            "sizes": "96x96",
+            "type": "image\/png",
+            "density": "2.0"
+        },
+
+        {
+            "src": "/static/images/favicons/android-icon-36x36.png",
+            "sizes": "36x36",
+            "type": "image\/png",
+            "density": "1"
+        },
+        {
+            "src": "/static/images/favicons/android-icon-48x48.png",
+            "sizes": "48x48",
+            "type": "image\/png",
+            "density": "1"
+        },
+        {
+            "src": "/static/images/favicons/android-icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image\/png",
+            "density": "1.5"
+        },
+        {
+            "src": "/static/images/favicons/android-icon-96x96.png",
+            "sizes": "96x96",
+            "type": "image\/png",
+            "density": "2.0"
+        },
+        {
+            "src": "/static/images/favicons/android-icon-144x144.png",
+            "sizes": "144x144",
+            "type": "image\/png",
+            "density": "3.0"
+        },
+        {
+            "src": "/static/images/favicons/android-icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image\/png",
+            "density": "4.0"
+        }
+    ],
+    "start_url": "/",
+    "background_color": "#000000",
+    "display_override": ["window-control-overlay", "minimal-ui"],
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#000000",
+    "shortcuts": [
+      {
+        "name": "WorkAdventures",
+        "short_name": "WA",
+        "description": "WorkAdventure application",
+        "url": "/",
+        "icons": [{ "src": "/static/images/favicons/android-icon-192x192.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "WorkAdventure application",
+    "screenshots": [],
+    "related_applications": [{
+        "platform": "web",
+        "url": "https://workadventu.re"
+      }, {
+        "platform": "play",
+        "url": "https://play.workadventu.re"
+    }]
 }

front/src/Phaser/Game/GameManager.ts

@@ -89,10 +89,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
-        if (!localUserStore.getHelpCameraSettingsShown()) {
-            scenePlugin.launch(HelpCameraSettingsSceneName);//700
-        }
     }
     
     public gameSceneIsCreated(scene: GameScene) {

front/src/Phaser/Game/GameScene.ts

@@ -1200,7 +1200,7 @@ ${escapedMessage}
      * @param delta The delta time in ms since the last frame. This is a smoothed and capped value based on the FPS rate.
      */
     update(time: number, delta: number) : void {
-        mediaManager.setLastUpdateScene();
+        mediaManager.updateScene();
         this.currentTick = time;
         this.CurrentPlayer.moveUser(delta);
 

front/src/Phaser/Login/EnableCameraScene.ts

@@ -247,8 +247,7 @@ export class EnableCameraScene extends Phaser.Scene {
 
     update(time: number, delta: number): void {
         this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
-
+        mediaManager.updateScene();
-        mediaManager.setLastUpdateScene();
 
         const middleX = this.getMiddleX();
         this.tweens.add({

front/src/Phaser/Menu/HelpCameraSettingsScene.ts

@@ -21,7 +21,6 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
     }
 
     create(){
-        localUserStore.setHelpCameraSettingsShown();
         this.createHelpCameraSettings();
     }
 
@@ -31,6 +30,9 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
         this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
         this.helpCameraSettingsElement.addListener('click');
         this.helpCameraSettingsElement.on('click',  (event:MouseEvent) => {
+            if((event?.target as HTMLInputElement).id === 'mailto') {
+                return;
+            }
             event.preventDefault();
             if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') {
                 window.location.reload();
@@ -39,18 +41,27 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
             }
         });
 
-        if(!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video){
+        if(!localUserStore.getHelpCameraSettingsShown() && (!mediaManager.constraintsMedia.audio || !mediaManager.constraintsMedia.video)){
             this.openHelpCameraSettingsOpened();
+            localUserStore.setHelpCameraSettingsShown();
         }
+
+        mediaManager.setHelpCameraSettingsCallBack(() => {
+            this.openHelpCameraSettingsOpened();
+        });
     }
 
     private openHelpCameraSettingsOpened(): void{
         HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
         this.helpCameraSettingsOpened = true;
-        if(window.navigator.userAgent.includes('Firefox')){
+        try{
-            HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
+            if(window.navigator.userAgent.includes('Firefox')){
-        }else if(window.navigator.userAgent.includes('Chrome')){
+                HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
-            HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
+            }else if(window.navigator.userAgent.includes('Chrome')){
+                HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
+            }
+        }catch(err) {
+            console.error('openHelpCameraSettingsOpened => getElementByIdOrFail => error', err);
         }
         const middleY = this.getMiddleY();
         const middleX = this.getMiddleX();
@@ -66,13 +77,13 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
 
     private closeHelpCameraSettingsOpened(): void{
         const middleX = this.getMiddleX();
-        const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
+        /*const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
         helpCameraSettingsInfo.innerText = '';
-        helpCameraSettingsInfo.style.display = 'none';
+        helpCameraSettingsInfo.style.display = 'none';*/
         this.helpCameraSettingsOpened = false;
         this.tweens.add({
             targets: this.helpCameraSettingsElement,
-            y: -400,
+            y: -1000,
             x: middleX,
             duration: 1000,
             ease: 'Power3',
@@ -89,15 +100,17 @@ export class HelpCameraSettingsScene extends Phaser.Scene {
     }
 
     update(time: number, delta: number): void {
-        const middleX = this.getMiddleX();
+        if(this.helpCameraSettingsOpened){
-        const middleY = this.getMiddleY();
+            const middleX = this.getMiddleX();
-        this.tweens.add({
+            const middleY = this.getMiddleY();
-            targets: this.helpCameraSettingsElement,
+            this.tweens.add({
-            x: middleX,
+                targets: this.helpCameraSettingsElement,
-            y: middleY,
+                x: middleX,
-            duration: 1000,
+                y: middleY,
-            ease: 'Power3'
+                duration: 1000,
-        });
+                ease: 'Power3'
+            });
+        }
     }
 
     public onResize(ev: UIEvent): void {

front/src/WebRtc/LayoutManager.ts

@@ -346,7 +346,7 @@ class LayoutManager {
         userInputManager.addSpaceEventListner(callBack);
     }
 
-    public removeActionButton(id: string, userInputManager: UserInputManager){
+    public removeActionButton(id: string, userInputManager?: UserInputManager){
         //delete previous element
         const previousDiv = this.actionButtonInformation.get(id);
         if(previousDiv){
@@ -354,10 +354,45 @@ class LayoutManager {
             this.actionButtonInformation.delete(id);
         }
         const previousEventCallback = this.actionButtonTrigger.get(id);
-        if(previousEventCallback){
+        if(previousEventCallback && userInputManager){
             userInputManager.removeSpaceEventListner(previousEventCallback);
         }
     }
+
+    public addInformation(id: string, text: string,  callBack?: Function, userInputManager?: UserInputManager){
+        //delete previous element
+        for ( const [key, value] of this.actionButtonInformation ) {
+            this.removeActionButton(key, userInputManager);
+        }
+
+        //create div and text html component
+        const p = document.createElement('p');
+        p.classList.add('action-body');
+        p.innerText = text;
+
+        const div = document.createElement('div');
+        div.classList.add('action');
+        div.classList.add(id);
+        div.id = id;
+        div.appendChild(p);
+
+        this.actionButtonInformation.set(id, div);
+
+        const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
+        mainContainer.appendChild(div);
+        //add trigger action
+        if(callBack){
+            div.onpointerdown = () => {
+                callBack();
+                this.removeActionButton(id, userInputManager);
+            };
+        }
+
+        //remove it after 10 sec
+        setTimeout(() => {
+            this.removeActionButton(id, userInputManager);
+        }, 10000)
+    }
 }
 
 const layoutManager = new LayoutManager();

front/src/WebRtc/MediaManager.ts

@@ -4,6 +4,8 @@ import {discussionManager, SendMessageCallback} from "./DiscussionManager";
 import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
 import {localUserStore} from "../Connexion/LocalUserStore";
 import {UserSimplePeerInterface} from "./SimplePeer";
+import {SoundMeter} from "../Phaser/Components/SoundMeter";
+
 declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
 let videoConstraint: boolean|MediaTrackConstraints = {
@@ -26,6 +28,7 @@ export type StartScreenSharingCallback = (media: MediaStream) => void;
 export type StopScreenSharingCallback = (media: MediaStream) => void;
 export type ReportCallback = (message: string) => void;
 export type ShowReportCallBack = (userId: string, userName: string|undefined) => void;
+export type HelpCameraSettingsCallBack = () => void;
 
 // TODO: Split MediaManager in 2 classes: MediaManagerUI (in charge of HTML) and MediaManager (singleton in charge of the camera only)
 export class MediaManager {
@@ -40,6 +43,7 @@ export class MediaManager {
     microphoneClose: HTMLImageElement;
     microphone: HTMLImageElement;
     webrtcInAudio: HTMLAudioElement;
+    mySoundMeterElement: HTMLDivElement;
     private webrtcOutAudio: HTMLAudioElement;
     constraintsMedia : MediaStreamConstraints = {
         audio: audioConstraint,
@@ -49,6 +53,8 @@ export class MediaManager {
     startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
     stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
+    helpCameraSettingsCallBacks : Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
+    
     private microphoneBtn: HTMLDivElement;
     private cinemaBtn: HTMLDivElement;
     private monitorBtn: HTMLDivElement;
@@ -63,6 +69,12 @@ export class MediaManager {
 
     private triggerCloseJistiFrame : Map<String, Function> = new Map<String, Function>();
 
+    private userInputManager?: UserInputManager;
+
+    private mySoundMeter?: SoundMeter|null;
+    private soundMeters: Map<string, SoundMeter> = new Map<string, SoundMeter>();
+    private soundMeterElements: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
+
     constructor() {
 
         this.myCamVideo = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
@@ -121,10 +133,16 @@ export class MediaManager {
         this.pingCameraStatus();
 
         this.checkActiveUser(); //todo: desactivated in case of bug
+
+        this.mySoundMeterElement = (HtmlUtils.getElementByIdOrFail('mySoundMeter'));
+        this.mySoundMeterElement.childNodes.forEach((value: ChildNode, index) => {
+            this.mySoundMeterElement.children.item(index)?.classList.remove('active');
+        });
     }
 
-    public setLastUpdateScene(){
+    public updateScene(){
         this.lastUpdateScene = new Date();
+        this.updateSoudMeter();
     }
 
     public blurCamera() {
@@ -225,6 +243,10 @@ export class MediaManager {
         }).catch((err) => {
             console.error(err);
             this.disableCameraStyle();
+
+            layoutManager.addInformation('warning', 'Camera access denied. Click here and check navigators permissions.', () => {
+                this.showHelpCameraSettingsCallBack();
+            }, this.userInputManager);
         });
     }
 
@@ -253,6 +275,10 @@ export class MediaManager {
         }).catch((err) => {
             console.error(err);
             this.disableMicrophoneStyle();
+
+            layoutManager.addInformation('warning', 'Microphone access denied. Click here and check navigators permissions.', () => {
+                this.showHelpCameraSettingsCallBack();
+            }, this.userInputManager);
         });
     }
 
@@ -324,6 +350,10 @@ export class MediaManager {
             this.monitorClose.style.display = "block";
             this.monitor.style.display = "none";
             this.monitorBtn.classList.remove("enabled");
+
+            layoutManager.addInformation('warning', 'Screen sharing access denied. Click here and check navigators permissions.', () => {
+                this.showHelpCameraSettingsCallBack();
+            }, this.userInputManager);
         });
 
     }
@@ -402,13 +432,14 @@ export class MediaManager {
             }
         }
 
-        return this.getLocalStream().catch(() => {
+        return this.getLocalStream().catch((err) => {
-            console.info('Error get camera, trying with video option at null');
+            console.info('Error get camera, trying with video option at null =>', err);
             this.disableCameraStyle();
             return this.getLocalStream().then((stream : MediaStream) => {
                 this.hasCamera = false;
                 return stream;
             }).catch((err) => {
+                this.disableMicrophoneStyle();
                 console.info("error get media ", this.constraintsMedia.video, this.constraintsMedia.audio, err);
                 throw err;
             });
@@ -425,6 +456,13 @@ export class MediaManager {
         return navigator.mediaDevices.getUserMedia(this.constraintsMedia).then((stream : MediaStream) => {
             this.localStream = stream;
             this.myCamVideo.srcObject = this.localStream;
+
+            //init sound meter
+            this.mySoundMeter = null;
+            if(this.constraintsMedia.audio){
+                this.mySoundMeter = new SoundMeter();
+                this.mySoundMeter.connectToSource(stream, new AudioContext());
+            }
             return stream;
         }).catch((err: Error) => {
             throw err;
@@ -451,6 +489,7 @@ export class MediaManager {
                 track.stop();
             }
         }
+        this.mySoundMeter?.stop();
     }
 
     setCamera(id: string): Promise<MediaStream> {
@@ -496,6 +535,13 @@ export class MediaManager {
                 </button>
                 <video id="${userId}" autoplay></video>
                 <img src="resources/logos/blockSign.svg" id="blocking-${userId}" class="block-logo">
+                <div id="soundMeter-${userId}" class="sound-progress">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
             </div>
         `;
 
@@ -585,6 +631,12 @@ export class MediaManager {
             throw `Unable to find video for ${userId}`;
         }
         remoteVideo.srcObject = stream;
+
+        //sound metter
+        const soundMeter = new SoundMeter();
+        soundMeter.connectToSource(stream, new AudioContext());
+        this.soundMeters.set(userId, soundMeter);
+        this.soundMeterElements.set(userId, HtmlUtils.getElementByIdOrFail<HTMLImageElement>('soundMeter-'+userId));
     }
     addStreamRemoteScreenSharing(userId: string, stream : MediaStream){
         // In the case of screen sharing (going both ways), we may need to create the HTML element if it does not exist yet
@@ -600,6 +652,10 @@ export class MediaManager {
         layoutManager.remove(userId);
         this.remoteVideo.delete(userId);
 
+        this.soundMeters.get(userId)?.stop();
+        this.soundMeters.delete(userId);
+        this.soundMeterElements.delete(userId);
+
         //permit to remove user in discussion part
         this.removeParticipant(userId);
     }
@@ -717,6 +773,7 @@ export class MediaManager {
     }
 
     public setUserInputManager(userInputManager : UserInputManager){
+        this.userInputManager = userInputManager;
         discussionManager.setUserInputManager(userInputManager);
     }
     //check if user is active
@@ -739,6 +796,57 @@ export class MediaManager {
     public setShowReportModalCallBacks(callback: ShowReportCallBack){
         this.showReportModalCallBacks.add(callback);
     }
+
+    public setHelpCameraSettingsCallBack(callback: HelpCameraSettingsCallBack){
+        this.helpCameraSettingsCallBacks.add(callback);
+    }
+
+    private showHelpCameraSettingsCallBack(){
+        for(const callBack of this.helpCameraSettingsCallBacks){
+            callBack();
+        }
+    }
+
+    updateSoudMeter(){
+        try{
+            const volume = parseInt(((this.mySoundMeter ? this.mySoundMeter.getVolume() : 0) / 10).toFixed(0));
+            this.setVolumeSoundMeter(volume, this.mySoundMeterElement);
+            
+            for(const indexUserId of this.soundMeters.keys()){
+                const soundMeter = this.soundMeters.get(indexUserId);
+                const soundMeterElement = this.soundMeterElements.get(indexUserId);
+                if(!soundMeter || !soundMeterElement){
+                    return;
+                }
+                const volumeByUser = parseInt((soundMeter.getVolume() / 10).toFixed(0));
+                this.setVolumeSoundMeter(volumeByUser, soundMeterElement);
+            }
+        }catch(err){
+            //console.error(err);
+        }
+    }
+
+    private setVolumeSoundMeter(volume: number, element: HTMLDivElement){
+        if(volume <= 0 && !element.classList.contains('active')){
+            return;
+        }
+        element.classList.remove('active');
+        if(volume <= 0){
+            return;
+        }
+        element.classList.add('active');
+        element.childNodes.forEach((value: ChildNode, index) => {
+            const elementChildre = element.children.item(index);
+            if(!elementChildre){
+                return;
+            }
+            elementChildre.classList.remove('active');
+            if((index +1) > volume){
+                return;
+            }
+            elementChildre.classList.add('active');
+        });
+    }
 }
 
 export const mediaManager = new MediaManager();

front/src/WebRtc/SimplePeer.ts

@@ -82,15 +82,11 @@ export class SimplePeer {
         });
 
         mediaManager.showGameOverlay();
-        mediaManager.getCamera().then(() => {
+        mediaManager.getCamera().finally(() => {
-
             //receive message start
             this.Connection.receiveWebrtcStart((message: UserSimplePeerInterface) => {
                 this.receiveWebrtcStart(message);
             });
-
-        }).catch((err) => {
-            console.error("err", err);
         });
 
         this.Connection.disconnectMessage((data: WebRtcDisconnectMessageInterface): void => {