video switcher

frontend/src/lib/components/MediaListSwitcher.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { mediaDevices, mediaStreamActions } from '$lib/mediaStream';
+  import { onMount } from 'svelte';
+
+  let deviceId: string = '';
+  $: {
+    console.log($mediaDevices);
+  }
+  $: {
+    console.log(deviceId);
+  }
+  onMount(() => {
+    deviceId = $mediaDevices[0].deviceId;
+  });
+</script>
+
+<div class="text-xs">
+  {#if $mediaDevices}
+    <select
+      bind:value={deviceId}
+      on:change={() => mediaStreamActions.switchCamera(deviceId)}
+      id="devices-list"
+      class="border-1 cursor-pointer rounded-md border-gray-500 border-opacity-50 bg-slate-100 bg-opacity-30 p-1 font-medium text-white"
+    >
+      {#each $mediaDevices as device, i}
+        <option value={device.deviceId}>{device.label}</option>
+      {/each}
+    </select>
+  {/if}
+</div>

frontend/src/lib/components/VideoInput.svelte

@@ -5,14 +5,19 @@
     mediaStreamStatus,
     MediaStreamStatusEnum,
     onFrameChangeStore,
-    mediaStream
+    mediaStream,
+    mediaDevices
   } from '$lib/mediaStream';
+  import MediaListSwitcher from './MediaListSwitcher.svelte';
 
   let videoEl: HTMLVideoElement;
   let videoFrameCallbackId: number;
   const WIDTH = 512;
   const HEIGHT = 512;
-
+  let selectedDevice: string = '';
+  $: {
+    console.log(selectedDevice);
+  }
   onDestroy(() => {
     if (videoFrameCallbackId) videoEl.cancelVideoFrameCallback(videoFrameCallbackId);
   });
@@ -20,7 +25,6 @@
   $: if (videoEl) {
     videoEl.srcObject = $mediaStream;
   }
-
   async function onFrameChange(now: DOMHighResTimeStamp, metadata: VideoFrameCallbackMetadata) {
     const blob = await grapBlobImg();
     onFrameChangeStore.set({ blob });
@@ -55,8 +59,13 @@
 
 <div class="relative mx-auto max-w-lg overflow-hidden rounded-lg border border-slate-300">
   <div class="relative z-10 aspect-square w-full object-cover">
+    {#if $mediaDevices.length > 0}
+      <div class="absolute bottom-0 right-0">
+        <MediaListSwitcher />
+      </div>
+    {/if}
     <video
-      class="aspect-square w-full object-cover"
+      class="pointer-events-none aspect-square w-full object-cover"
       bind:this={videoEl}
       playsinline
       autoplay

frontend/src/lib/mediaStream.ts

@@ -1,4 +1,4 @@
-import { writable, type Writable } from 'svelte/store';
+import { writable, type Writable, get } from 'svelte/store';
 
 export enum MediaStreamStatusEnum {
     INIT = "init",
@@ -44,6 +44,9 @@ export const mediaStreamActions = {
             });
     },
     async switchCamera(mediaDevicedID: string) {
+        if (get(mediaStreamStatus) !== MediaStreamStatusEnum.CONNECTED) {
+            return;
+        }
         const constraints = {
             audio: false,
             video: { width: 1024, height: 1024, deviceId: mediaDevicedID }