add fullscreen button and aspect ratio selector

frontend/src/lib/components/AspectRatioSelect.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  let options: string[] = ['1:1', '16:9', '4:3', '3:2', '3:4', '9:16'];
+  export let aspectRatio: number = 1;
+  const dispatchEvent = createEventDispatcher();
+
+  function onChange(e: Event) {
+    const target = e.target as HTMLSelectElement;
+    const value = target.value;
+    const [width, height] = value.split(':').map((v) => parseInt(v));
+    aspectRatio = width / height;
+    dispatchEvent('change', aspectRatio);
+  }
+</script>
+
+<div class="relative">
+  <select
+    on:change={onChange}
+    title="Aspect Ratio"
+    class="border-1 block cursor-pointer rounded-md border-gray-800 border-opacity-50 bg-slate-100 bg-opacity-30 p-1 font-medium text-white"
+  >
+    {#each options as option, i}
+      <option value={option}>{option}</option>
+    {/each}
+  </select>
+</div>

frontend/src/lib/components/ImagePlayer.svelte

@@ -4,11 +4,14 @@
 
   import Button from '$lib/components/Button.svelte';
   import Floppy from '$lib/icons/floppy.svelte';
-  import { snapImage } from '$lib/utils';
+  import Expand from '$lib/icons/expand.svelte';
+  import { snapImage, expandWindow } from '$lib/utils';
 
   $: isLCMRunning = $lcmLiveStatus !== LCMLiveStatus.DISCONNECTED;
   $: console.log('isLCMRunning', isLCMRunning);
   let imageEl: HTMLImageElement;
+  let expandedWindow: Window;
+  let isExpanded = false;
   async function takeSnapshot() {
     if (isLCMRunning) {
       await snapImage(imageEl, {
@@ -19,6 +22,18 @@
       });
     }
   }
+  async function toggleFullscreen() {
+    if (isLCMRunning && !isExpanded) {
+      expandedWindow = expandWindow('/api/stream/' + $streamId);
+      expandedWindow.addEventListener('beforeunload', () => {
+        isExpanded = false;
+      });
+      isExpanded = true;
+    } else {
+      expandedWindow?.close();
+      isExpanded = false;
+    }
+  }
 </script>
 
 <div
@@ -26,12 +41,21 @@
 >
   <!-- svelte-ignore a11y-missing-attribute -->
   {#if isLCMRunning}
-    <img
-      bind:this={imageEl}
-      class="aspect-square w-full rounded-lg"
-      src={'/api/stream/' + $streamId}
-    />
+    {#if !isExpanded}
+      <img
+        bind:this={imageEl}
+        class="aspect-square w-full rounded-lg"
+        src={'/api/stream/' + $streamId}
+      />
+    {/if}
     <div class="absolute bottom-1 right-1">
+      <Button
+        on:click={toggleFullscreen}
+        title={'Expand Fullscreen'}
+        classList={'text-sm ml-auto text-white p-1 shadow-lg rounded-lg opacity-50'}
+      >
+        <Expand classList={''} />
+      </Button>
       <Button
         on:click={takeSnapshot}
         disabled={!isLCMRunning}

frontend/src/lib/components/MediaListSwitcher.svelte

@@ -1,21 +1,28 @@
 <script lang="ts">
   import { mediaDevices, mediaStreamActions } from '$lib/mediaStream';
   import Screen from '$lib/icons/screen.svelte';
+  import AspectRatioSelect from './AspectRatioSelect.svelte';
   import { onMount } from 'svelte';
 
   let deviceId: string = '';
+  let aspectRatio: number = 1;
+
+  onMount(() => {
+    deviceId = $mediaDevices[0].deviceId;
+  });
   $: {
-    console.log($mediaDevices);
+    console.log(deviceId);
   }
   $: {
-    console.log(deviceId);
+    console.log(aspectRatio);
   }
-  onMount(() => {
-    deviceId = $mediaDevices[0].deviceId;
-  });
 </script>
 
-<div class="flex items-center justify-center text-xs">
+<div class="flex items-center justify-center text-xs backdrop-blur-sm backdrop-grayscale">
+  <AspectRatioSelect
+    bind:aspectRatio
+    on:change={() => mediaStreamActions.switchCamera(deviceId, aspectRatio)}
+  />
   <button
     title="Share your screen"
     class="border-1 my-1 flex cursor-pointer gap-1 rounded-md border-gray-500 border-opacity-50 bg-slate-100 bg-opacity-30 p-1 font-medium text-white"
@@ -28,7 +35,7 @@
   {#if $mediaDevices}
     <select
       bind:value={deviceId}
-      on:change={() => mediaStreamActions.switchCamera(deviceId)}
+      on:change={() => mediaStreamActions.switchCamera(deviceId, aspectRatio)}
       id="devices-list"
       class="border-1 block cursor-pointer rounded-md border-gray-800 border-opacity-50 bg-slate-100 bg-opacity-30 p-1 font-medium text-white"
     >

frontend/src/lib/components/VideoInput.svelte

@@ -10,6 +10,7 @@
     mediaDevices
   } from '$lib/mediaStream';
   import MediaListSwitcher from './MediaListSwitcher.svelte';
+
   export let width = 512;
   export let height = 512;
   const size = { width, height };
@@ -32,6 +33,7 @@
   $: {
     console.log(selectedDevice);
   }
+
   onDestroy(() => {
     if (videoFrameCallbackId) videoEl.cancelVideoFrameCallback(videoFrameCallbackId);
   });
@@ -47,18 +49,15 @@
     }
     const videoWidth = videoEl.videoWidth;
     const videoHeight = videoEl.videoHeight;
-    let height0 = videoHeight;
-    let width0 = videoWidth;
-    let x0 = 0;
-    let y0 = 0;
-    if (videoWidth > videoHeight) {
-      width0 = videoHeight;
-      x0 = (videoWidth - videoHeight) / 2;
-    } else {
-      height0 = videoWidth;
-      y0 = (videoHeight - videoWidth) / 2;
-    }
-    ctx.drawImage(videoEl, x0, y0, width0, height0, 0, 0, size.width, size.height);
+    // scale down video to fit canvas,  size.width, size.height
+    const scale = Math.min(size.width / videoWidth, size.height / videoHeight);
+    const width0 = videoWidth * scale;
+    const height0 = videoHeight * scale;
+    const x0 = (size.width - width0) / 2;
+    const y0 = (size.height - height0) / 2;
+    ctx.clearRect(0, 0, size.width, size.height);
+    ctx.drawImage(videoEl, x0, y0, width0, height0);
+
     const blob = await new Promise<Blob>((resolve) => {
       canvasEl.toBlob(
         (blob) => {
@@ -78,14 +77,14 @@
 </script>
 
 <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">
+  <div class="relative z-10 flex aspect-square w-full items-center justify-center object-cover">
     {#if $mediaDevices.length > 0}
-      <div class="absolute bottom-0 right-0 z-10">
+      <div class="absolute bottom-0 right-0 z-10 w-full bg-slate-400 bg-opacity-40">
         <MediaListSwitcher />
       </div>
     {/if}
     <video
-      class="pointer-events-none aspect-square w-full object-cover"
+      class="pointer-events-none aspect-square w-full justify-center object-contain"
       bind:this={videoEl}
       on:loadeddata={() => {
         videoIsReady = true;

frontend/src/lib/icons/aspect.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let classList: string = '';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="16px" class={classList}>
+  <path
+    fill="currentColor"
+    d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"
+  />
+</svg>

frontend/src/lib/icons/expand.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let classList: string = '';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="1em" class={classList}>
+  <path
+    fill="currentColor"
+    d="M.3 89.5C.1 91.6 0 93.8 0 96V224 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64V224 96c0-35.3-28.7-64-64-64H64c-2.2 0-4.4 .1-6.5 .3c-9.2 .9-17.8 3.8-25.5 8.2C21.8 46.5 13.4 55.1 7.7 65.5c-3.9 7.3-6.5 15.4-7.4 24zM48 224H464l0 192c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16l0-192z"
+  />
+</svg>

frontend/src/lib/mediaStream.ts

@@ -1,5 +1,6 @@
-import { writable, type Writable, get } from 'svelte/store';
+import { writable, type Writable, type Readable, get, derived } from 'svelte/store';
 
+const BASE_HEIGHT = 720;
 export enum MediaStreamStatusEnum {
     INIT = "init",
     CONNECTED = "connected",
@@ -23,11 +24,17 @@ export const mediaStreamActions = {
                 console.error(err);
             });
     },
-    async start(mediaDevicedID?: string) {
+    async start(mediaDevicedID?: string, aspectRatio: number = 1) {
         const constraints = {
             audio: false,
             video: {
-                width: 1024, height: 1024, deviceId: mediaDevicedID
+                width: {
+                    ideal: BASE_HEIGHT * aspectRatio,
+                },
+                height: {
+                    ideal: BASE_HEIGHT,
+                },
+                deviceId: mediaDevicedID
             }
         };
 
@@ -36,6 +43,7 @@ export const mediaStreamActions = {
             .then((stream) => {
                 mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
                 mediaStream.set(stream);
+
             })
             .catch((err) => {
                 console.error(`${err.name}: ${err.message}`);
@@ -65,19 +73,33 @@ export const mediaStreamActions = {
             console.log(JSON.stringify(videoTrack.getConstraints(), null, 2));
             mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
             mediaStream.set(captureStream)
+
+            const capabilities = videoTrack.getCapabilities();
+            const aspectRatio = capabilities.aspectRatio;
+            console.log('Aspect Ratio Constraints:', aspectRatio);
         } catch (err) {
             console.error(err);
         }
 
     },
-    async switchCamera(mediaDevicedID: string) {
+    async switchCamera(mediaDevicedID: string, aspectRatio: number) {
+        console.log("Switching camera");
         if (get(mediaStreamStatus) !== MediaStreamStatusEnum.CONNECTED) {
             return;
         }
         const constraints = {
             audio: false,
-            video: { width: 1024, height: 1024, deviceId: mediaDevicedID }
+            video: {
+                width: {
+                    ideal: BASE_HEIGHT * aspectRatio,
+                },
+                height: {
+                    ideal: BASE_HEIGHT,
+                },
+                deviceId: mediaDevicedID
+            }
         };
+        console.log("Switching camera", constraints);
         await navigator.mediaDevices
             .getUserMedia(constraints)
             .then((stream) => {

frontend/src/lib/utils.ts

@@ -36,3 +36,46 @@ export function snapImage(imageEl: HTMLImageElement, info: IImageInfo) {
         console.log(err);
     }
 }
+
+export function expandWindow(steramURL: string): Window {
+    const html = `
+    <html>
+        <head>
+            <title>Real-Time Latent Consistency Model</title>
+            <style>
+                body {
+                    margin: 0;
+                    padding: 0;
+                    background-color: black;
+                }
+            </style>
+        </head>
+        <body>
+            <script>
+                let isFullscreen = false;
+                window.onkeydown = function(event) {
+                    switch (event.code) {
+                        case "Escape":
+                            window.close();
+                            break;
+                        case "Enter":
+                            if (isFullscreen) {
+                                document.exitFullscreen();
+                                isFullscreen = false;
+                            } else {
+                                document.documentElement.requestFullscreen();
+                                isFullscreen = true;
+                            }
+                            break;
+                    }
+                }
+            </script>
+
+            <img src="${steramURL}" style="width: 100%; height: 100%; object-fit: contain;" />
+        </body>
+    </html>
+    `;
+    const newWindow = window.open("", "_blank", "width=1024,height=1024,scrollbars=0,resizable=1,toolbar=0,menubar=0,location=0,directories=0,status=0") as Window;
+    newWindow.document.write(html);
+    return newWindow;
+}