chad/client/app/composables/use-mediasoup.ts

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'

const ICE_SERVERS: RTCIceServer[] = [
  { urls: 'stun:stun.l.google.com:19302' },
  { urls: 'stun:stun.l.google.com:5349' },
  { urls: 'stun:stun1.l.google.com:3478' },
  { urls: 'stun:stun1.l.google.com:5349' },
  { urls: 'stun:stun2.l.google.com:19302' },
  { urls: 'stun:stun2.l.google.com:5349' },
  { urls: 'stun:stun3.l.google.com:3478' },
  { urls: 'stun:stun3.l.google.com:5349' },
  { urls: 'stun:stun4.l.google.com:19302' },
  { urls: 'stun:stun4.l.google.com:5349' },
]

export const useMediasoup = createSharedComposable(() => {
  const state = useGlobalState()

  const socket = shallowRef<Socket>()

  const device = shallowRef<mediasoupClient.Device>()
  const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
  const sendTransport = shallowRef<mediasoupClient.types.Transport>()
  const recvTransport = shallowRef<mediasoupClient.types.Transport>()

  const micProducer = shallowRef<mediasoupClient.types.Producer>()
  const webcamProducer = shallowRef<mediasoupClient.types.Producer>()
  const shareProducer = shallowRef<mediasoupClient.types.Producer>()

  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) {
      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!

      await join()
    })

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

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

    socket.on(
      'newConsumer',
      async (
        { id, producerId, kind, rtpParameters, peerId, appData, producerPaused },
        cb,
      ) => {
        if (!recvTransport.value)
          return

        const consumer = await recvTransport.value.consume({
          id,
          producerId,
          kind,
          rtpParameters,
          streamId: `${peerId}-${appData.share ? 'share' : 'mic-webcam'}`,
          appData: { ...appData, peerId },
        })

        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()
      },
    )

    socket.on(
      'consumerClosed',
      async (
        { consumerId },
      ) => {
        console.log('socket on consumerClosed')

        const consumer = consumers.value.get(consumerId)

        if (!consumer)
          return

        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)
      },
    )

    socket.on('disconnect', () => {
      sendTransport.value?.close()
      sendTransport.value = undefined

      recvTransport.value?.close()
      recvTransport.value = undefined
    })
  }, { 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()
  }

  async function enableMic() {
    if (micProducer.value)
      return

    if (!device.value || !sendTransport.value)
      return

    if (!device.value.canProduce('audio'))
      return

    const stream = await navigator.mediaDevices.getUserMedia({
      audio: {
        autoGainControl: false,
        noiseSuppression: true,
        echoCancellation: false,
        channelCount: 2,
      },
    })
    const track = stream.getAudioTracks()[0]

    if (!track)
      return

    micProducer.value = await sendTransport.value.produce({
      track,
      codecOptions: {
        opusStereo: true,
        opusDtx: true, // Меньше пакетов летит когда тишина
        opusFec: false, // Фиксит пакет лос
      },
    })

    producers.value.set(micProducer.value.id, micProducer.value)
    triggerRef(producers)

    micProducer.value.on('transportclose', () => {
      micProducer.value = undefined
    })

    micProducer.value.on('trackended', () => {
      disableMic()
    })
  }

  async function disableMic() {
    if (!micProducer.value)
      return

    producers.value.delete(micProducer.value.id)
    triggerRef(producers)

    try {
      micProducer.value.close()

      await socket.value?.emitWithAck('closeProducer', {
        producerId: micProducer.value.id,
      })
    }
    catch {
    }

    micProducer.value = undefined
  }

  async function muteMic() {
    if (!micProducer.value)
      return

    try {
      micProducer.value.pause()

      await socket.value?.emitWithAck('pauseProducer', {
        producerId: micProducer.value.id,
      })
    }
    catch {
    }
  }

  async function unmuteMic() {
    if (!micProducer.value)
      return

    try {
      micProducer.value?.resume()

      await socket.value?.emitWithAck('resumeProducer', {
        producerId: micProducer.value.id,
      })
    }
    catch {
    }
  }

  function transformClient(client: RemoteClient): ChadClient {
    return {
      ...client,
      isMe: client.id === socket.value!.id,
      consumerIds: [],
    }
  }

  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
    sendTransport.value = undefined
    recvTransport.value = undefined

    micProducer.value = undefined
    webcamProducer.value = undefined
    shareProducer.value = undefined

    consumers.value = new Map()
    producers.value = new Map()

    state.reset()
  }

  return {
    init,
    consumers,
    producers,
    sendTransport,
    recvTransport,
    socket,
    rtpCapabilities,
    device,
    micProducer,
    webcamProducer,
    shareProducer,
  }
})