screen sharing

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,