front update

2025-10-09 04:42:34 +06:00
parent 7cd4ff72d4
commit 196aa36970
26 changed files with 1049 additions and 324 deletions
--- a/client/app/composables/use-mediasoup.ts
+++ b/client/app/composables/use-mediasoup.ts
@@ -1,8 +1,8 @@
 import type { ChadClient, RemoteClient } from '#shared/types'
-import type { Socket } from 'socket.io-client'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
-import { io } from 'socket.io-client'
+import { usePreferences } from '~/composables/use-preferences'
+import { useSignaling } from '~/composables/use-signaling'

 const ICE_SERVERS: RTCIceServer[] = [
  { urls: 'stun:stun.l.google.com:19302' },
@@ -18,9 +18,8 @@ const ICE_SERVERS: RTCIceServer[] = [
 ]

 export const useMediasoup = createSharedComposable(() => {
-  const state = useGlobalState()
-
-  const socket = shallowRef<Socket>()
+  const preferences = usePreferences()
+  const signaling = useSignaling()

  const device = shallowRef<mediasoupClient.Device>()
  const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
@@ -31,47 +30,118 @@ export const useMediasoup = createSharedComposable(() => {
  const webcamProducer = shallowRef<mediasoupClient.types.Producer>()
  const shareProducer = shallowRef<mediasoupClient.types.Producer>()

+  const clients = shallowRef<ChadClient[]>([])
+
  const consumers = shallowRef<Map<string, mediasoupClient.types.Consumer>>(new Map())
  const producers = shallowRef<Map<string, mediasoupClient.types.Producer>>(new Map())

-  watch(socket, (socket, prevSocket) => {
-    if (prevSocket) {
-      prevSocket.close()
-
-      dispose()
-    }
-
-    if (!socket) {
+  watch(signaling.socket, (socket) => {
+    if (!socket)
      return
-    }
-
-    socket.onAny((event, ...args) => {
-      console.log('[onAny]', event, args)
-    })
-
-    socket.onAnyOutgoing((event, ...args) => {
-      console.log('[onAnyOutgoing]', event, args)
-    })

    socket.on('connect', async () => {
-      if (!state.username.value)
-        state.username.value = socket.id!
+      if (!signaling.socket.value)
+        return

-      await join()
+      device.value = new mediasoupClient.Device()
+      rtpCapabilities.value = await signaling.socket.value.emitWithAck('getRtpCapabilities')
+
+      await device.value.load({ routerRtpCapabilities: rtpCapabilities.value! })
+
+      // Send transport
+      {
+        const transportInfo = await signaling.socket.value.emitWithAck('createTransport', { producing: true, consuming: false })
+        sendTransport.value = device.value.createSendTransport({
+          ...transportInfo,
+          iceServers: [
+            ...ICE_SERVERS,
+            ...(transportInfo.iceServers ?? []),
+          ],
+        })
+
+        sendTransport.value.on('connect', async ({ dtlsParameters }, callback, errback) => {
+          try {
+            await signaling.socket.value!.emitWithAck('connectTransport', {
+              transportId: sendTransport.value!.id,
+              dtlsParameters,
+            })
+
+            callback()
+          }
+          catch (error) {
+            if (error instanceof Error) {
+              errback(error)
+            }
+          }
+        })
+
+        sendTransport.value.on('produce', async ({ kind, rtpParameters, appData }, callback, errback) => {
+          try {
+            const { id } = await signaling.socket.value!.emitWithAck('produce', {
+              transportId: sendTransport.value!.id,
+              kind,
+              rtpParameters,
+              appData,
+            })
+            callback({ id })
+          }
+          catch (error) {
+            if (error instanceof Error) {
+              errback(error)
+            }
+          }
+        })
+      }
+
+      // Recv Transport
+      {
+        const transportInfo = await signaling.socket.value.emitWithAck('createTransport', { producing: false, consuming: true })
+        recvTransport.value = device.value.createRecvTransport({
+          ...transportInfo,
+          iceServers: [
+            ...ICE_SERVERS,
+            ...(transportInfo.iceServers ?? []),
+          ],
+        })
+
+        recvTransport.value.on('connect', async ({ dtlsParameters }, callback, errback) => {
+          try {
+            await signaling.socket.value!.emitWithAck('connectTransport', {
+              transportId: recvTransport.value!.id,
+              dtlsParameters,
+            })
+
+            callback()
+          }
+          catch (error) {
+            if (error instanceof Error) {
+              errback(error)
+            }
+          }
+        })
+      }
+
+      clients.value = (await signaling.socket.value.emitWithAck('join', {
+        username: preferences.username.value,
+        rtpCapabilities: rtpCapabilities.value,
+      })).map(transformClient)
+
+      await enableMic()
    })

    socket.on('newPeer', (client) => {
-      state.clients.value.push(transformClient(client))
+      clients.value.push(transformClient(client))
+      triggerRef(clients)
    })

    socket.on('peerClosed', (id) => {
-      state.clients.value = state.clients.value.filter(client => client.id !== id)
+      clients.value = clients.value.filter(client => client.id !== id)
    })

    socket.on(
      'newConsumer',
      async (
-        { id, producerId, kind, rtpParameters, peerId, appData, producerPaused },
+        { id, producerId, kind, rtpParameters, peerId: clientId, appData },
        cb,
      ) => {
        if (!recvTransport.value)
@@ -82,30 +152,18 @@ export const useMediasoup = createSharedComposable(() => {
          producerId,
          kind,
          rtpParameters,
-          streamId: `${peerId}-${appData.share ? 'share' : 'mic-webcam'}`,
-          appData: { ...appData, peerId },
+          streamId: `${clientId}-${appData.share ? 'share' : 'mic-webcam'}`,
+          appData: { ...appData, clientId },
        })

        consumer.on('transportclose', () => {
-          console.log('consumer on transportclose')
          consumers.value.delete(consumer.id)
          triggerRef(consumers)
-
-          const client = state.clientByIdMap.value[peerId as string]
-
-          if (!client)
-            return
-
-          client.consumerIds = client.consumerIds.filter(id => id !== consumer.id)
        })

        consumers.value.set(consumer.id, consumer)
        triggerRef(consumers)

-        console.log(consumer)
-
-        state.clientByIdMap.value[peerId]!.consumerIds.push(consumer.id)
-
        cb()
      },
    )
@@ -115,8 +173,6 @@ export const useMediasoup = createSharedComposable(() => {
      async (
        { consumerId },
      ) => {
-        console.log('socket on consumerClosed')
-
        const consumer = consumers.value.get(consumerId)

        if (!consumer)
@@ -124,13 +180,6 @@ export const useMediasoup = createSharedComposable(() => {

        consumers.value.delete(consumer.id)
        triggerRef(consumers)
-
-        const client = state.clientByIdMap.value[(consumer.appData.peerId || consumer.appData.socketId) as string]
-
-        if (!client)
-          return
-
-        client.consumerIds = client.consumerIds.filter(id => id !== consumer.id)
      },
    )

@@ -143,97 +192,8 @@ export const useMediasoup = createSharedComposable(() => {
    })
  }, { immediate: true, flush: 'sync' })

-  onScopeDispose(() => {
-    socket.value?.close()
-  })
-
-  async function join() {
-    if (!socket.value)
-      return
-
-    device.value = new mediasoupClient.Device()
-    rtpCapabilities.value = await socket.value.emitWithAck('getRtpCapabilities')
-
-    await device.value.load({ routerRtpCapabilities: rtpCapabilities.value! })
-
-    // Send transport
-    {
-      const transportInfo = await socket.value.emitWithAck('createTransport', { producing: true, consuming: false })
-      sendTransport.value = device.value.createSendTransport({
-        ...transportInfo,
-        iceServers: [
-          ...ICE_SERVERS,
-          ...(transportInfo.iceServers ?? []),
-        ],
-      })
-
-      sendTransport.value.on('connect', async ({ dtlsParameters }, callback, errback) => {
-        try {
-          await socket.value!.emitWithAck('connectTransport', {
-            transportId: sendTransport.value!.id,
-            dtlsParameters,
-          })
-
-          callback()
-        }
-        catch (error) {
-          if (error instanceof Error) {
-            errback(error)
-          }
-        }
-      })
-
-      sendTransport.value.on('produce', async ({ kind, rtpParameters, appData }, callback, errback) => {
-        try {
-          const { id } = await socket.value!.emitWithAck('produce', {
-            transportId: sendTransport.value!.id,
-            kind,
-            rtpParameters,
-            appData,
-          })
-          callback({ id })
-        }
-        catch (error) {
-          if (error instanceof Error) {
-            errback(error)
-          }
-        }
-      })
-    }
-
-    // Recv Transport
-    {
-      const transportInfo = await socket.value.emitWithAck('createTransport', { producing: false, consuming: true })
-      recvTransport.value = device.value.createRecvTransport({
-        ...transportInfo,
-        iceServers: [
-          ...ICE_SERVERS,
-          ...(transportInfo.iceServers ?? []),
-        ],
-      })
-
-      recvTransport.value.on('connect', async ({ dtlsParameters }, callback, errback) => {
-        try {
-          await socket.value!.emitWithAck('connectTransport', {
-            transportId: recvTransport.value!.id,
-            dtlsParameters,
-          })
-
-          callback()
-        }
-        catch (error) {
-          if (error instanceof Error) {
-            errback(error)
-          }
-        }
-      })
-    }
-
-    const result = await socket.value.emitWithAck('join', { username: state.username.value, rtpCapabilities: rtpCapabilities.value })
-
-    state.clients.value = (result as RemoteClient[]).map(transformClient)
-
-    await enableMic()
+  function getClientConsumers(clientId: ChadClient['id']) {
+    return consumers.value.values().filter(consumer => consumer.appData.clientId === clientId)
  }

  async function enableMic() {
@@ -281,7 +241,7 @@ export const useMediasoup = createSharedComposable(() => {
  }

  async function disableMic() {
-    if (!micProducer.value)
+    if (!signaling.socket.value || !micProducer.value)
      return

    producers.value.delete(micProducer.value.id)
@@ -290,7 +250,7 @@ export const useMediasoup = createSharedComposable(() => {
    try {
      micProducer.value.close()

-      await socket.value?.emitWithAck('closeProducer', {
+      await signaling.socket.value.emitWithAck('closeProducer', {
        producerId: micProducer.value.id,
      })
    }
@@ -301,13 +261,13 @@ export const useMediasoup = createSharedComposable(() => {
  }

  async function muteMic() {
-    if (!micProducer.value)
+    if (!signaling.socket.value || !micProducer.value)
      return

    try {
      micProducer.value.pause()

-      await socket.value?.emitWithAck('pauseProducer', {
+      await signaling.socket.value.emitWithAck('pauseProducer', {
        producerId: micProducer.value.id,
      })
    }
@@ -316,13 +276,13 @@ export const useMediasoup = createSharedComposable(() => {
  }

  async function unmuteMic() {
-    if (!micProducer.value)
+    if (!signaling.socket.value || !micProducer.value)
      return

    try {
-      micProducer.value?.resume()
+      micProducer.value.resume()

-      await socket.value?.emitWithAck('resumeProducer', {
+      await signaling.socket.value.emitWithAck('resumeProducer', {
        producerId: micProducer.value.id,
      })
    }
@@ -330,24 +290,17 @@ export const useMediasoup = createSharedComposable(() => {
    }
  }

+  async function init() {
+    signaling.connect()
+  }
+
  function transformClient(client: RemoteClient): ChadClient {
    return {
      ...client,
-      isMe: client.id === socket.value!.id,
-      consumerIds: [],
+      isMe: client.id === signaling.socket.value!.id,
    }
  }

-  function init() {
-    if (socket.value)
-      return
-
-    socket.value = io('https://api.koptilnya.xyz/webrtc', {
-      path: '/chad/ws',
-      transports: ['websocket'],
-    })
-  }
-
  function dispose() {
    device.value = undefined
    rtpCapabilities.value = undefined
@@ -360,21 +313,22 @@ export const useMediasoup = createSharedComposable(() => {

    consumers.value = new Map()
    producers.value = new Map()
-
-    state.reset()
  }

  return {
    init,
+    clients,
    consumers,
    producers,
    sendTransport,
    recvTransport,
-    socket,
    rtpCapabilities,
    device,
    micProducer,
    webcamProducer,
    shareProducer,
+    getClientConsumers,
+    muteMic,
+    unmuteMic,
  }
 })