enable screen sharing

frontend/src/lib/components/MediaListSwitcher.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { mediaDevices, mediaStreamActions } from '$lib/mediaStream';
+  import Screen from '$lib/icons/screen.svelte';
   import { onMount } from 'svelte';
 
   let deviceId: string = '';
@@ -14,13 +15,20 @@
   });
 </script>
 
-<div class="text-xs">
+<div class="flex items-center justify-center text-xs">
+  <button
+    title="Share your screen"
+    class="border-1 my-1 block cursor-pointer rounded-md border-gray-500 border-opacity-50 bg-slate-100 bg-opacity-30 p-[2px] font-medium text-white"
+    on:click={() => mediaStreamActions.startScreenCapture()}
+  >
+    <Screen classList={'w-100'} />
+  </button>
   {#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"
+      class="border-1 block cursor-pointer rounded-md border-gray-800 border-opacity-50 bg-slate-100 bg-opacity-30 p-[2px] font-medium text-white"
     >
       {#each $mediaDevices as device, i}
         <option value={device.deviceId}>{device.label}</option>

frontend/src/lib/components/VideoInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import 'rvfc-polyfill';
-  import { onDestroy } from 'svelte';
+
+  import { onDestroy, onMount } from 'svelte';
   import {
     mediaStreamStatus,
     MediaStreamStatusEnum,
@@ -11,10 +12,20 @@
   import MediaListSwitcher from './MediaListSwitcher.svelte';
 
   let videoEl: HTMLVideoElement;
+  let canvasEl: HTMLCanvasElement;
+  let ctx: CanvasRenderingContext2D;
   let videoFrameCallbackId: number;
-  const WIDTH = 512;
-  const HEIGHT = 512;
+  const WIDTH = 768;
+  const HEIGHT = 768;
+  // ajust the throttle time to your needs
+  const THROTTLE_TIME = 1000 / 15;
   let selectedDevice: string = '';
+
+  onMount(() => {
+    ctx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
+    canvasEl.width = WIDTH;
+    canvasEl.height = HEIGHT;
+  });
   $: {
     console.log(selectedDevice);
   }
@@ -25,8 +36,22 @@
   $: if (videoEl) {
     videoEl.srcObject = $mediaStream;
   }
+  let lastMillis = 0;
   async function onFrameChange(now: DOMHighResTimeStamp, metadata: VideoFrameCallbackMetadata) {
-    const blob = await grapBlobImg();
+    if (now - lastMillis < THROTTLE_TIME) {
+      videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
+      return;
+    }
+    const videoWidth = videoEl.videoWidth;
+    const videoHeight = videoEl.videoHeight;
+    const blob = await grapCropBlobImg(
+      videoEl,
+      videoWidth / 2 - WIDTH / 2,
+      videoHeight / 2 - HEIGHT / 2,
+      WIDTH,
+      HEIGHT
+    );
+
     onFrameChangeStore.set({ blob });
     videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
   }
@@ -34,24 +59,17 @@
   $: if ($mediaStreamStatus == MediaStreamStatusEnum.CONNECTED) {
     videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
   }
-  async function grapBlobImg() {
-    const canvas = new OffscreenCanvas(WIDTH, HEIGHT);
-    const videoW = videoEl.videoWidth;
-    const videoH = videoEl.videoHeight;
-    const aspectRatio = WIDTH / HEIGHT;
+  async function grapCropBlobImg(
+    video: HTMLVideoElement,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ) {
+    const canvas = new OffscreenCanvas(width, height);
 
     const ctx = canvas.getContext('2d') as OffscreenCanvasRenderingContext2D;
-    ctx.drawImage(
-      videoEl,
-      videoW / 2 - (videoH * aspectRatio) / 2,
-      0,
-      videoH * aspectRatio,
-      videoH,
-      0,
-      0,
-      WIDTH,
-      HEIGHT
-    );
+    ctx.drawImage(video, x, y, width, height, 0, 0, width, height);
     const blob = await canvas.convertToBlob({ type: 'image/jpeg', quality: 1 });
     return blob;
   }
@@ -60,7 +78,7 @@
 <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">
+      <div class="absolute bottom-0 right-0 z-10">
         <MediaListSwitcher />
       </div>
     {/if}
@@ -72,6 +90,8 @@
       muted
       loop
     ></video>
+    <canvas bind:this={canvasEl} class="absolute left-0 top-0 aspect-square w-full object-cover"
+    ></canvas>
   </div>
   <div class="absolute left-0 top-0 flex aspect-square w-full items-center justify-center">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 448" class="w-40 p-5 opacity-20">

frontend/src/lib/icons/screen.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let classList: string = '';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -32 576 576" height="16px" class={classList}>
+  <path
+    fill="currentColor"
+    d="M64 0A64 64 0 0 0 0 64v288a64 64 0 0 0 64 64h176l-10.7 32H160a32 32 0 1 0 0 64h256a32 32 0 1 0 0-64h-69.3L336 416h176a64 64 0 0 0 64-64V64a64 64 0 0 0-64-64H64zm448 64v288H64V64h448z"
+  />
+</svg>

frontend/src/lib/mediaStream.ts

@@ -43,6 +43,33 @@ export const mediaStreamActions = {
                 mediaStream.set(null);
             });
     },
+    async startScreenCapture() {
+        const displayMediaOptions = {
+            video: {
+                displaySurface: "window",
+            },
+            audio: false,
+            surfaceSwitching: "include"
+        };
+
+
+        let captureStream = null;
+
+        try {
+            captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+            const videoTrack = captureStream.getVideoTracks()[0];
+
+            console.log("Track settings:");
+            console.log(JSON.stringify(videoTrack.getSettings(), null, 2));
+            console.log("Track constraints:");
+            console.log(JSON.stringify(videoTrack.getConstraints(), null, 2));
+            mediaStreamStatus.set(MediaStreamStatusEnum.CONNECTED);
+            mediaStream.set(captureStream)
+        } catch (err) {
+            console.error(err);
+        }
+
+    },
     async switchCamera(mediaDevicedID: string) {
         if (get(mediaStreamStatus) !== MediaStreamStatusEnum.CONNECTED) {
             return;