screen sharing

client/app/composables/use-app.ts

@@ -65,7 +65,7 @@ export const useApp = createGlobalState(() => {
     await muteInput()
 
     await signaling.socket.value?.emitWithAck('updateClient', {
-      outputMuted: false,
+      outputMuted: true,
     })
 
     toast.add({ severity: 'info', summary: 'Sound muted', closable: false, life: 1000 })

client/app/composables/use-fullscreen-video.ts

@@ -0,0 +1,51 @@
+import { createGlobalState, useEventListener } from '@vueuse/core'
+
+export const useFullscreenVideo = createGlobalState(() => {
+  const videoEl = shallowRef<HTMLVideoElement>()
+
+  const visible = computed(() => !!videoEl.value)
+
+  async function show(stream: MediaStream) {
+    if (videoEl.value) {
+      videoEl.value.srcObject = stream
+    }
+    else {
+      const el = document.createElement('video')
+      el.srcObject = stream
+      el.autoplay = true
+      el.playsInline = true
+      el.controls = false
+      el.muted = true
+      // el.style.position = 'fixed'
+      // el.style.top = '0'
+      // el.style.left = '0'
+      // el.style.width = '1px'
+      // el.style.height = '1px'
+      // el.style.opacity = '0'
+      // el.style.pointerEvents = 'none'
+
+      document.body.appendChild(el)
+
+      videoEl.value = el
+    }
+
+    await videoEl.value.requestFullscreen()
+  }
+
+  function hide() {
+    videoEl.value?.remove()
+  }
+
+  useEventListener(document, 'fullscreenchange', () => {
+    if (!document.fullscreenElement && videoEl.value) {
+      videoEl.value?.remove()
+      videoEl.value = undefined
+    }
+  })
+
+  return {
+    visible,
+    show,
+    hide,
+  }
+})

client/app/composables/use-mediasoup.ts

@@ -1,7 +1,7 @@
-import type { ChadClient } from '#shared/types'
 import type { MediaKind, ProducerOptions } from 'mediasoup-client/types'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
+import { useDevices } from '~/composables/use-devices'
 import { usePreferences } from '~/composables/use-preferences'
 import { useSignaling } from '~/composables/use-signaling'
 
@@ -26,6 +26,7 @@ export const useMediasoup = createSharedComposable(() => {
   const signaling = useSignaling()
   const { addClient, removeClient } = useClients()
   const preferences = usePreferences()
+  const { getShareStream } = useDevices()
 
   const device = shallowRef<mediasoupClient.Device>()
   const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
@@ -213,8 +214,6 @@ export const useMediasoup = createSharedComposable(() => {
 
       consumer.pause()
 
-      console.log(consumerId)
-
       triggerRef(consumers)
     })
 
@@ -230,10 +229,6 @@ export const useMediasoup = createSharedComposable(() => {
     })
   }, { immediate: true, flush: 'sync' })
 
-  function getClientConsumers(socketId: ChadClient['socketId']) {
-    return consumers.value.values().filter(consumer => consumer.appData.socketId === socketId)
-  }
-
   async function enableProducer(type: ProducerType, options: ProducerOptions) {
     const producer = getProducerByType(type)
 
@@ -322,13 +317,7 @@ export const useMediasoup = createSharedComposable(() => {
     if (!device.value)
       return
 
-    const stream = await navigator.mediaDevices.getDisplayMedia({
-      audio: false,
-      video: {
-        displaySurface: 'monitor',
-        frameRate: { max: 30 },
-      },
-    })
+    const stream = await getShareStream()
 
     const track = stream.getVideoTracks()[0]
 
@@ -442,7 +431,6 @@ export const useMediasoup = createSharedComposable(() => {
     micProducer,
     cameraProducer,
     shareProducer,
-    getClientConsumers,
     pauseProducer,
     resumeProducer,
     enableShare,