Switching the video feedback in Svelte

front/src/Components/App.svelte

@@ -3,6 +3,7 @@
     import {menuIconVisible} from "../Stores/MenuStore";
     import {gameOverlayVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
+    import MyCamera from "./MyCamera.svelte";
 
 </script>
 
@@ -11,6 +12,7 @@
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
     {/if} -->
+        <MyCamera></MyCamera>
         <CameraControls></CameraControls>
     {/if}
 </div>

front/src/Components/MyCamera.svelte

@@ -0,0 +1,46 @@
+<script lang="typescript">
+    import {localStreamStore} from "../Stores/MediaStore";
+    import SoundMeterWidget from "./SoundMeterWidget.svelte";
+    import {onDestroy} from "svelte";
+
+    function srcObject(node, stream) {
+        node.srcObject = stream;
+        return {
+            update(newStream) {
+                if (node.srcObject != newStream) {
+                    node.srcObject = newStream
+                }
+            }
+        }
+    }
+
+    let stream : MediaStream|null;
+    /*$: {
+        if ($localStreamStore.type === 'success') {
+            stream = $localStreamStore.stream;
+        } else {
+            stream = null;
+        }
+    }*/
+
+    const unsubscribe = localStreamStore.subscribe(value => {
+        if (value.type === 'success') {
+            stream = value.stream;
+        } else {
+            stream = null;
+        }
+    });
+
+    onDestroy(unsubscribe);
+
+</script>
+
+
+<div>
+    <div class="video-container div-myCamVideo" class:hide={!$localStreamStore.constraints.video}>
+        <video class="myCamVideo" use:srcObject={$localStreamStore.stream} autoplay muted></video>
+        <!-- {#if stream}
+        <SoundMeterWidget stream={stream}></SoundMeterWidget>
+        {/if} -->
+    </div>
+</div>

front/src/Components/SoundMeterWidget.svelte

@@ -0,0 +1,36 @@
+<script lang="typescript">
+    import {SoundMeter} from "../Phaser/Components/SoundMeter";
+    import {onDestroy} from "svelte";
+
+    export let stream: MediaStream;
+    let volume = 0;
+
+    console.log('stream', stream);
+
+    if (stream.getAudioTracks().length > 0) {
+        const soundMeter = new SoundMeter();
+        soundMeter.connectToSource(stream, new AudioContext());
+
+        const timeout = setInterval(() => {
+            try{
+                volume = parseInt((soundMeter.getVolume() / 10).toFixed(0));
+                console.log(volume);
+            }catch(err){
+
+            }
+        }, 100);
+
+        onDestroy(() => {
+            clearInterval(timeout);
+        })
+    }
+</script>
+
+
+<div class="sound-progress" class:active={stream?.getAudioTracks().length > 0}>
+    <span class:active={volume > 1}></span>
+    <span class:active={volume > 2}></span>
+    <span class:active={volume > 3}></span>
+    <span class:active={volume > 4}></span>
+    <span class:active={volume > 5}></span>
+</div>