Погнали

closes #1

client/app/composables/use-mediasoup.ts

@@ -0,0 +1,122 @@
+import type { Socket } from 'socket.io-client'
+import { createGlobalState } from '@vueuse/core'
+import * as mediasoupClient from 'mediasoup-client'
+import { io } from 'socket.io-client'
+
+export const useMediasoup = createGlobalState(() => {
+  const socket: Socket = io('http://localhost:1337', {
+    transports: ['websocket'],
+  })
+
+  const initializing = ref(false)
+  const connected = ref(false)
+  const streams = shallowRef<MediaStream[]>([])
+  let device: mediasoupClient.Device
+  let sendTransport: mediasoupClient.types.Transport
+  let recvTransport: mediasoupClient.types.Transport
+
+  socket.on('newProducer', async ({ producerId }) => {
+    const params = await socket.emitWithAck('consume', {
+      producerId,
+      transportId: recvTransport.id,
+      rtpCapabilities: device.rtpCapabilities,
+    })
+
+    if (params?.error) {
+      console.error('consume error:', params.error)
+      return
+    }
+
+    const consumer = await recvTransport.consume(params)
+    const stream = new MediaStream([consumer.track])
+
+    streams.value.push(stream)
+    triggerRef(streams)
+  })
+
+  async function loadDevice() {
+    device = new mediasoupClient.Device()
+    const rtpCapabilities = await socket.emitWithAck('getRtpCapabilities')
+    await device.load({ routerRtpCapabilities: rtpCapabilities })
+  }
+
+  async function createSendTransport() {
+    const params = await socket.emitWithAck('createTransport')
+    sendTransport = device.createSendTransport(params)
+
+    sendTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
+      try {
+        await socket.emitWithAck('connectTransport', {
+          transportId: sendTransport.id,
+          dtlsParameters,
+        })
+
+        callback()
+      }
+      catch (err) {
+        errback(err)
+      }
+    })
+
+    sendTransport.on('produce', async ({ kind, rtpParameters }, callback, errback) => {
+      try {
+        const { id } = await socket.emitWithAck('produce', {
+          transportId: sendTransport.id,
+          kind,
+          rtpParameters,
+        })
+        callback({ id })
+      }
+      catch (err) {
+        errback(err)
+      }
+    })
+  }
+
+  async function publishMic() {
+    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+    const track = stream.getAudioTracks()[0]
+
+    await sendTransport.produce({ track })
+  }
+
+  async function createRecvTransport() {
+    const params = await socket.emitWithAck('createTransport')
+    recvTransport = device.createRecvTransport(params)
+
+    recvTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
+      try {
+        await socket.emitWithAck('connectTransport', {
+          transportId: recvTransport.id,
+          dtlsParameters,
+        })
+
+        callback()
+      }
+      catch (err) {
+        errback(err)
+      }
+    })
+  }
+
+  (async () => {
+    if (initializing.value || connected.value)
+      return
+
+    initializing.value = true
+    connected.value = false
+
+    await loadDevice()
+    await createSendTransport()
+    await createRecvTransport()
+    await publishMic()
+
+    initializing.value = false
+    connected.value = true
+  })()
+
+  return {
+    connected,
+    streams,
+  }
+})