front update

client/app/app.vue

@@ -1,24 +1,7 @@
 <template>
-  <PrimeProgressSpinner v-if="initializing" />
-
-  <template v-for="(s, producerId) in streams" :key="producerId">
-    <PrimeChip :label="producerId" />
-    <audio
-      :ref="(el) => onAudioRef(el as HTMLAudioElement, s)"
-      autoplay
-      controls
-      style="display: none;"
-    />
-  </template>
+  <NuxtPage />
 </template>
 
 <script lang="ts" setup>
-const { initializing, connected, streams } = useMediasoup()
-
-function onAudioRef(ref: HTMLAudioElement, stream: MediaStream) {
-  if (!ref)
-    return
-
-  ref.srcObject = stream
-}
+useMediasoup()
 </script>

client/app/assets/styles/main.scss

@@ -1,5 +1,13 @@
+
 html,
 body {
   font-family: 'Inter', sans-serif;
-  font-size: 14px;
+  font-size: 16px;
+
+  height: 100%;
+  overflow: hidden;
+}
+
+#__nuxt {
+  height: 100%;
 }

client/app/assets/styles/primeicons.css

@@ -0,0 +1 @@
+@import 'primeicons/primeicons.css';

client/app/assets/styles/tailwind.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "tailwindcss-primeui";

client/app/components.d.ts

@@ -8,9 +8,27 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    PrimeAccordion: typeof import('primevue/accordion')['default']
+    PrimeAccordionContent: typeof import('primevue/accordioncontent')['default']
+    PrimeAccordionHeader: typeof import('primevue/accordionheader')['default']
+    PrimeAccordionPanel: typeof import('primevue/accordionpanel')['default']
+    PrimeAvatar: typeof import('primevue/avatar')['default']
+    PrimeBadge: typeof import('primevue/badge')['default']
     PrimeButton: typeof import('primevue/button')['default']
-    PrimeChip: typeof import('primevue/chip')['default']
-    PrimeProgressSpinner: typeof import('primevue/progressspinner')['default']
+    PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
+    PrimeCard: typeof import('primevue/card')['default']
+    PrimeContextMenu: typeof import('primevue/contextmenu')['default']
+    PrimeDivider: typeof import('primevue/divider')['default']
+    PrimeDrawer: typeof import('primevue/drawer')['default']
+    PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
+    PrimeInputText: typeof import('primevue/inputtext')['default']
+    PrimeMenu: typeof import('primevue/menu')['default']
+    PrimeOverlayBadge: typeof import('primevue/overlaybadge')['default']
+    PrimePopover: typeof import('primevue/popover')['default']
+    PrimeScrollPanel: typeof import('primevue/scrollpanel')['default']
+    PrimeSlider: typeof import('primevue/slider')['default']
+    PrimeTag: typeof import('primevue/tag')['default']
+    PrimeToolbar: typeof import('primevue/toolbar')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

client/app/components/ClientRow.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="flex items-center gap-3 py-3">
+    <PrimeAvatar icon="pi pi-user" size="small" />
+
+    <div class="flex-1">
+      <div class="text-sm leading-5 font-medium text-color whitespace-nowrap overflow-ellipsis">
+        {{ client.username }}
+      </div>
+      <div class="mt-1 text-xs leading-5 text-muted-color">
+        {{ client.id }}
+      </div>
+    </div>
+
+    <PrimeBadge severity="secondary" value="Muted" />
+
+    <PrimeButton icon="pi pi-ellipsis-h" text size="small" @click="menuRef?.toggle" />
+
+    <PrimeMenu ref="menu" popup :model="menuItems" style="translate: calc(-100% + 2rem) 0.5rem">
+      <template #start>
+        <div class="px-4 py-3">
+          <div class="flex justify-between">
+            <span>Volume</span>
+            <span>{{ volume }}</span>
+          </div>
+          <PrimeSlider v-model="volume" class="mt-4" :min="0" :max="100" :step="5" />
+        </div>
+      </template>
+    </PrimeMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Client } from '#shared/types'
+import type { MenuItem } from 'primevue/menuitem'
+
+defineProps<{
+  client: Client
+}>()
+
+const menuRef = useTemplateRef('menu')
+const volume = ref(100)
+
+const menuItems: MenuItem[] = [
+  {
+    label: 'Mute',
+    icon: 'pi pi-headphones',
+  },
+  {
+    label: 'DM',
+    icon: 'pi pi-comment',
+    disabled: true,
+  },
+]
+</script>

client/app/composables/use-global-state.ts

@@ -0,0 +1,18 @@
+import type { Client } from '#shared/types'
+import { createGlobalState, useLocalStorage } from '@vueuse/core'
+
+export const useGlobalState = createGlobalState(() => {
+  const username = useLocalStorage<string>('username', '')
+
+  const clients = shallowRef<Client[]>([])
+
+  function reset() {
+    clients.value = []
+  }
+
+  return {
+    username,
+    clients,
+    reset,
+  }
+})

client/app/composables/use-mediasoup.ts

@@ -1,6 +1,5 @@
-import type { type Consumer, Producer } from 'mediasoup-client/types'
 import type { Socket } from 'socket.io-client'
-import { createGlobalState } from '@vueuse/core'
+import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
 import { io } from 'socket.io-client'
 
@@ -17,175 +16,362 @@ const ICE_SERVERS: RTCIceServer[] = [
   { urls: 'stun:stun4.l.google.com:5349' },
 ]
 
-export const useMediasoup = createGlobalState(() => {
-  const socket: Socket = io('https://api.koptilnya.xyz/webrtc', {
-    path: '/chad/ws',
-    transports: ['websocket'],
-  })
+export const useMediasoup = createSharedComposable(() => {
+  const state = useGlobalState()
 
-  const initializing = ref(false)
-  const connected = ref(false)
-  const streams = shallowRef<Record<Consumer['id'], MediaStream>>({})
-  let device: mediasoupClient.Device
-  let sendTransport: mediasoupClient.types.Transport
-  let recvTransport: mediasoupClient.types.Transport
+  const socket = shallowRef<Socket>()
 
-  socket.on('producers', async (producers) => {
-    watch(connected, async () => {
-      if (!connected.value)
-        return
+  const device = shallowRef<mediasoupClient.Device>()
+  const rtpCapabilities = shallowRef<mediasoupClient.types.RtpCapabilities>()
+  const sendTransport = shallowRef<mediasoupClient.types.Transport>()
+  const recvTransport = shallowRef<mediasoupClient.types.Transport>()
 
-      for (const producer of producers) {
-        await consume(producer.producerId)
-      }
-    }, { immediate: true })
-  })
+  const micProducer = shallowRef<mediasoupClient.types.Producer>()
+  const webcamProducer = shallowRef<mediasoupClient.types.Producer>()
+  const shareProducer = shallowRef<mediasoupClient.types.Producer>()
 
-  socket.on('newProducer', async ({ producerId }) => {
-    await consume(producerId)
-  })
+  const producers = shallowRef<Map<string, mediasoupClient.types.Producer>>(new Map())
+  const consumers = shallowRef<Map<string, mediasoupClient.types.Consumer>>(new Map())
 
-  socket.on('producerClosed', async (producerId: Producer['id']) => {
-    delete streams.value[producerId]
+  //
+  // socket.on('producers', async (producers) => {
+  //   watch(connected, async () => {
+  //     if (!connected.value)
+  //       return
+  //
+  //     for (const producer of producers) {
+  //       await consume(producer.producerId)
+  //     }
+  //   }, { immediate: true })
+  // })
+  //
+  // socket.on('newProducer', async ({ producerId }) => {
+  //   await consume(producerId)
+  // })
+  //
+  // socket.on('producerClosed', async (producerId: Producer['id']) => {
+  //   delete streams.value[producerId]
+  //
+  //   triggerRef(streams)
+  // })
+  //
+  // async function consume(producerId: number) {
+  //   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,
+  //     id: params.consumerId,
+  //   })
+  //
+  //   const stream = new MediaStream([consumer.track])
+  //
+  //   streams.value[producerId] = stream
+  //
+  //   triggerRef(streams)
+  // }
 
-    triggerRef(streams)
-  })
+  watch(socket, (socket, prevSocket) => {
+    if (prevSocket) {
+      prevSocket.close()
 
-  async function consume(producerId: number) {
-    const params = await socket.emitWithAck('consume', {
-      producerId,
-      transportId: recvTransport.id,
-      rtpCapabilities: device.rtpCapabilities,
-    })
+      dispose()
+      state.reset()
+    }
 
-    if (params?.error) {
-      console.error('consume error:', params.error)
+    if (!socket) {
       return
     }
 
-    const consumer = await recvTransport.consume({
-      ...params,
-      id: params.consumerId,
+    socket.onAny((event, ...args) => {
+      console.log('[onAny]', event, args)
     })
 
-    const stream = new MediaStream([consumer.track])
-
-    streams.value[producerId] = 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,
-      iceServers: [
-        ...ICE_SERVERS,
-        ...(params.iceServers ?? []),
-      ],
+    socket.onAnyOutgoing((event, ...args) => {
+      console.log('[onAnyOutgoing]', event, args)
     })
 
-    sendTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
-      try {
-        await socket.emitWithAck('connectTransport', {
-          transportId: sendTransport.id,
-          dtlsParameters,
-        })
+    socket.on('connect', () => {
+      if (!state.username.value)
+        state.username.value = socket.id!
 
-        callback()
-      }
-      catch (error) {
-        if (error instanceof Error) {
-          errback(error)
-        }
-      }
+      join()
     })
 
-    sendTransport.on('produce', async ({ kind, rtpParameters }, callback, errback) => {
-      try {
-        const { producerId } = await socket.emitWithAck('produce', {
-          transportId: sendTransport.id,
+    socket.on('newPeer', (client) => {
+      state.clients.value.push(client)
+      triggerRef(state.clients)
+    })
+
+    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,
+      ) => {
+        console.log({ id, producerId, kind, rtpParameters, peerId, appData }, 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 },
         })
-        callback({ id: producerId })
-      }
-      catch (error) {
-        if (error instanceof Error) {
-          errback(error)
-        }
-      }
+
+        consumers.value.set(consumer.id, consumer)
+        triggerRef(consumers)
+
+        consumer.on('transportclose', () => {
+          consumers.value.delete(consumer.id)
+          triggerRef(consumers)
+        })
+      },
+    )
+
+    socket.on('disconnect', () => {
+      sendTransport.value?.close()
+      sendTransport.value = undefined
+
+      recvTransport.value?.close()
+      recvTransport.value = undefined
     })
+  }, { immediate: true, flush: 'sync' })
+
+  onBeforeUnmount(() => {
+    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
+
+    await enableMic()
   }
 
-  async function publishMic() {
-    const devices = await navigator.mediaDevices.enumerateDevices()
-    console.log(devices)
+  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]
 
-    await sendTransport.produce({ track })
-  }
-
-  async function createRecvTransport() {
-    const params = await socket.emitWithAck('createTransport')
-    recvTransport = device.createRecvTransport({
-      ...params,
-      iceServers: [
-        ...ICE_SERVERS,
-        ...(params.iceServers ?? []),
-      ],
+    micProducer.value = await sendTransport.value.produce({
+      track,
+      codecOptions: {
+        opusStereo: true,
+        opusDtx: true, // Меньше пакетов летит когда тишина
+        opusFec: false, // Фиксит пакет лос
+      },
     })
 
-    recvTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
-      try {
-        await socket.emitWithAck('connectTransport', {
-          transportId: recvTransport.id,
-          dtlsParameters,
-        })
+    producers.value.set(micProducer.value.id, micProducer.value)
+    triggerRef(producers)
 
-        callback()
-      }
-      catch (error) {
-        if (error instanceof Error) {
-          errback(error)
-        }
-      }
+    micProducer.value.on('transportclose', () => {
+      micProducer.value = undefined
+    })
+
+    micProducer.value.on('trackended', () => {
+      disableMic()
     })
   }
 
-  (async () => {
-    if (initializing.value || connected.value)
+  async function disableMic() {
+    if (!micProducer.value)
       return
 
-    initializing.value = true
-    connected.value = false
+    producers.value.delete(micProducer.value.id)
+    triggerRef(producers)
 
-    await loadDevice()
-    await createSendTransport()
-    await createRecvTransport()
-    await publishMic()
+    try {
+      micProducer.value.close()
 
-    initializing.value = false
-    connected.value = true
-  })()
+      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 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()
+  }
 
   return {
-    initializing,
-    connected,
-    streams,
+    init,
+    sendTransport,
+    recvTransport,
+    socket,
+    rtpCapabilities,
+    device,
+    producers,
+    consumers,
+    micProducer,
+    webcamProducer,
+    shareProducer,
   }
 })

client/app/middleware/02.auth.global.ts

@@ -0,0 +1,19 @@
+export default defineNuxtRouteMiddleware((to, from) => {
+  const { username } = useGlobalState()
+
+  if (!username.value && to.name !== 'Login') {
+    console.log('yes')
+    return navigateTo({ name: 'Login' })
+  }
+
+  if (!username.value)
+    return
+
+  const { init } = useMediasoup()
+
+  init()
+
+  if (to.name === 'Login') {
+    return navigateTo('/')
+  }
+})

client/app/pages/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="grid grid-cols-2 h-screen">
+    <div class="flex flex-col shadow-xl overflow-y-hidden">
+      <div class="flex items-center bg-surface-950 border-b-2 border-surface-800 px-3 py-3">
+        <h1>
+          Шальные сиськи 18+
+        </h1>
+
+        <div class="inline-flex gap-2 ml-auto">
+          <PrimeButton icon="pi pi-headphones" text size="large" />
+          <PrimeButton icon="pi pi-microphone" text size="large" />
+        </div>
+      </div>
+
+      <div v-auto-animate class="p-3 overflow-y-auto flex-1 bg-surface-900 overflow-hidden divide-y divide-surface-800">
+        <ClientRow v-for="client of clients" :key="client.id" :client="client" />
+      </div>
+    </div>
+  </div>
+
+  <audio v-for="[id, producer] in Array.from(producers)" :key="id" :ref="(el) => onAudioRef(el, producer)" />
+
+  <PrimeBadge class="fixed top-3 right-3" severity="success" />
+</template>
+
+<script setup lang="ts">
+import type { Producer } from 'mediasoup-client/types'
+import { vAutoAnimate } from '@formkit/auto-animate'
+
+const { clients } = useGlobalState()
+const { producers } = useMediasoup()
+
+function onAudioRef(ref: HTMLAudioElement, producer: Producer) {
+  if (!ref || !producer.track)
+    return
+
+  console.log(onAudioRef)
+
+  const stream = new MediaStream()
+
+  stream.addTrack(producer.track)
+
+  ref.srcObject = stream
+
+  ref.play()
+}
+</script>

client/app/pages/login.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="w-full h-full flex justify-center items-center">
+    <PrimeCard class="w-2/5">
+      <template #content>
+        <form class="flex flex-col gap-3" @submit.prevent="submit">
+          <PrimeInputText v-model="username" type="text" placeholder="Username" />
+
+          <PrimeButton size="large" icon="pi pi-arrow-right" icon-pos="right" label="Let's go" :disabled="!username" type="submit" />
+        </form>
+      </template>
+    </PrimeCard>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'Login',
+  layout: 'login',
+})
+
+const { username } = useGlobalState()
+const { init } = useMediasoup()
+
+async function submit() {
+  if (!username.value)
+    return
+
+  await navigateTo('/')
+}
+</script>