screen sharing

client/app/composables/use-mediasoup.ts

@@ -1,4 +1,5 @@
 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 { usePreferences } from '~/composables/use-preferences'
@@ -25,7 +26,6 @@ export const useMediasoup = createSharedComposable(() => {
   const signaling = useSignaling()
   const { addClient, removeClient } = useClients()
   const preferences = usePreferences()
-  const { me } = useAuth()
 
   const device = shallowRef<mediasoupClient.Device>()
   const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
@@ -158,7 +158,7 @@ export const useMediasoup = createSharedComposable(() => {
           producerId,
           kind,
           rtpParameters,
-          streamId: `${socketId}-${appData.share ? 'share' : 'mic-webcam'}`,
+          streamId: `${socketId}-${appData.source === 'share' ? 'share' : 'mic-webcam'}`,
           appData: { ...appData, socketId },
         })
 
@@ -234,16 +234,62 @@ export const useMediasoup = createSharedComposable(() => {
     return consumers.value.values().filter(consumer => consumer.appData.socketId === socketId)
   }
 
-  async function enableMic() {
-    if (micProducer.value)
+  async function enableProducer(type: ProducerType, options: ProducerOptions) {
+    const producer = getProducerByType(type)
+
+    if (producer.value)
       return
 
     if (!device.value || !sendTransport.value)
       return
 
-    if (!device.value.canProduce('audio'))
+    if (!options.track)
       return
 
+    if (!device.value.canProduce(options.track.kind as MediaKind))
+      return
+
+    producer.value = await sendTransport.value.produce(options)
+
+    producers.value.set(producer.value.id, producer.value)
+    triggerRef(producers)
+    triggerRef(producer)
+
+    producer.value.on('transportclose', () => {
+      micProducer.value = undefined
+    })
+
+    producer.value.on('trackended', () => {
+      disableProducer(type)
+    })
+  }
+
+  async function disableProducer(type: ProducerType) {
+    const producer = getProducerByType(type)
+
+    if (!signaling.socket.value || !producer.value)
+      return
+
+    producers.value.delete(producer.value.id)
+
+    try {
+      producer.value.close()
+
+      await signaling.socket.value.emitWithAck('closeProducer', {
+        producerId: producer.value.id,
+      })
+    }
+    catch {
+    }
+    finally {
+      triggerRef(producers)
+      triggerRef(producer)
+    }
+
+    producer.value = undefined
+  }
+
+  async function enableMic() {
     const stream = await navigator.mediaDevices.getUserMedia({
       audio: {
         deviceId: { exact: preferences.inputDeviceId.value },
@@ -258,7 +304,7 @@ export const useMediasoup = createSharedComposable(() => {
     if (!track)
       return
 
-    micProducer.value = await sendTransport.value.produce({
+    await enableProducer('microphone', {
       track,
       codecOptions: {
         opusStereo: true,
@@ -266,41 +312,41 @@ export const useMediasoup = createSharedComposable(() => {
         opusFec: false, // Фиксит пакет лос
       },
     })
-
-    producers.value.set(micProducer.value.id, micProducer.value)
-    triggerRef(producers)
-    triggerRef(micProducer)
-
-    micProducer.value.on('transportclose', () => {
-      micProducer.value = undefined
-    })
-
-    micProducer.value.on('trackended', () => {
-      disableMic()
-    })
   }
 
   async function disableMic() {
-    if (!signaling.socket.value || !micProducer.value)
+    await disableProducer('microphone')
+  }
+
+  async function enableShare() {
+    if (!device.value)
       return
 
-    producers.value.delete(micProducer.value.id)
+    const stream = await navigator.mediaDevices.getDisplayMedia({
+      audio: false,
+      video: {
+        displaySurface: 'monitor',
+        frameRate: { max: 30 },
+      },
+    })
 
-    try {
-      micProducer.value.close()
+    const track = stream.getVideoTracks()[0]
 
-      await signaling.socket.value.emitWithAck('closeProducer', {
-        producerId: micProducer.value.id,
-      })
-    }
-    catch {
-    }
-    finally {
-      triggerRef(producers)
-      triggerRef(micProducer)
-    }
+    if (!track)
+      return
 
-    micProducer.value = undefined
+    await enableProducer('share', {
+      track,
+      codec: device.value.rtpCapabilities.codecs?.find(
+        c => c.mimeType.toLowerCase() === 'video/h264',
+      ),
+      codecOptions: {
+        videoGoogleStartBitrate: 1000,
+      },
+      appData: {
+        source: 'share',
+      },
+    })
   }
 
   async function pauseProducer(type: ProducerType) {
@@ -371,18 +417,6 @@ export const useMediasoup = createSharedComposable(() => {
     }
   }
 
-  watch(
-    preferences.inputDeviceId,
-    async (inputDeviceId) => {
-      await disableMic()
-
-      if (!inputDeviceId)
-        return
-
-      await enableMic()
-    },
-  )
-
   watch([
     preferences.inputDeviceId,
     preferences.echoCancellation,
@@ -411,5 +445,7 @@ export const useMediasoup = createSharedComposable(() => {
     getClientConsumers,
     pauseProducer,
     resumeProducer,
+    enableShare,
+    disableProducer,
   }
 })