screen sharing

client/app/pages/index.vue

@@ -1,15 +1,49 @@
 <template>
-  <div class="flex items-center justify-center">
-    <PrimeCard>
-      <template #content>
-        The chat is under development.
-      </template>
-    </PrimeCard>
+  <div>
+    <div class="flex items-center justify-center">
+      <PrimeCard>
+        <template #content>
+          The chat is under development.
+        </template>
+      </PrimeCard>
+    </div>
+
+    <video
+      v-if="!!shareConsumer"
+      ref="shareVideo"
+      class="w-full aspect-video border border-surface-700 rounded mt-6 cursor-pointer"
+      autoplay
+      playsinline
+      @click="toFullscreen"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { unrefElement } from '@vueuse/core'
+
 definePageMeta({
   name: 'Index',
 })
+
+const shareVideoRef = useTemplateRef('shareVideo')
+
+const { consumers } = useMediasoup()
+
+const shareConsumer = computed(() => {
+  return consumers.value.values().find(consumer => consumer.kind === 'video' && consumer.appData?.source === 'share')
+})
+
+watchEffect(() => {
+  if (!shareVideoRef.value || !shareConsumer.value)
+    return
+
+  const stream = new MediaStream([shareConsumer.value.track])
+
+  unrefElement(shareVideoRef)!.srcObject = stream
+})
+
+function toFullscreen() {
+  unrefElement(shareVideoRef)?.requestFullscreen()
+}
 </script>

client/app/pages/preferences.vue

@@ -106,6 +106,7 @@ definePageMeta({
 })
 const { isTauri, version, commitSha } = useApp()
 const { checking, checkForUpdates, lastUpdate } = useUpdater()
+const { audioInputs, audioOutputs } = useDevices()
 const {
   inputDeviceId,
   outputDeviceId,
@@ -116,8 +117,6 @@ const {
   toggleOutputHotkey,
   inputDeviceExist,
   outputDeviceExist,
-  audioInputs,
-  audioOutputs,
 } = usePreferences()
 
 const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)