вебкамера там, туда-сюда

client/app/pages/gallery.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="grid grid-cols-[1fr_1fr] gap-2">
+    <template v-for="(group, id) in groupedConsumers" :key="id">
+      <GalleryCard
+        v-for="consumer in group"
+        :key="consumer.id"
+        :consumer="consumer"
+        @click="watch(consumer)"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Consumer } from '#shared/types'
+
+definePageMeta({
+  name: 'Gallery',
+})
+
+const { videoConsumers, shareConsumers } = useMediasoup()
+const fullscreenVideo = useFullscreenVideo()
+
+const groupedConsumers = computed<Partial<Record<string, Consumer[]>>>(() => {
+  if (fullscreenVideo.visible.value)
+    return {}
+
+  const consumers = [...videoConsumers.value, ...shareConsumers.value]
+
+  return Object.groupBy(consumers, (consumer) => {
+    return consumer.appData.socketId!
+  })
+})
+
+function watch(consumer: Consumer) {
+  fullscreenVideo.show(new MediaStream([consumer.raw.track]))
+}
+</script>

client/app/pages/preferences.vue

@@ -11,6 +11,7 @@
         option-label="label"
         option-value="deviceId"
         input-id="inputDevice"
+        placeholder="No input device"
         fluid
         :invalid="!inputDeviceExist"
       />
@@ -51,11 +52,28 @@
       Video
     </PrimeDivider>
 
-    <div>
-      <div class="text-sm mb-2">
-        Share FPS
-      </div>
+    <PrimeFloatLabel variant="on">
+      <PrimeSelect
+        v-model="videoDeviceId"
+        :options="videoInputs"
+        option-label="label"
+        option-value="deviceId"
+        input-id="videoDevice"
+        placeholder="No video device"
+        fluid
+        :invalid="!videoDeviceExist"
+      />
+      <label for="inputDevice">Input device</label>
+    </PrimeFloatLabel>
 
+    <PrimeDivider align="left">
+      Screen sharing
+    </PrimeDivider>
+
+    <div>
+      <p class="text-sm mb-2 text-center">
+        FPS
+      </p>
       <PrimeSelectButton v-model="shareFps" :options="[5, 30, 60]" fluid size="small" />
     </div>
 
@@ -118,10 +136,11 @@ definePageMeta({
 })
 const { isTauri, version, commitSha } = useApp()
 const { checking, checkForUpdates, lastUpdate } = useUpdater()
-const { audioInputs, audioOutputs } = useDevices()
+const { audioInputs, audioOutputs, videoInputs } = useDevices()
 const {
   inputDeviceId,
   outputDeviceId,
+  videoDeviceId,
   autoGainControl,
   noiseSuppression,
   echoCancellation,
@@ -129,6 +148,7 @@ const {
   toggleOutputHotkey,
   inputDeviceExist,
   outputDeviceExist,
+  videoDeviceExist,
   shareFps,
 } = usePreferences()