update

client/app/composables/use-mediasoup.ts

@@ -165,6 +165,8 @@ export const useMediasoup = createSharedComposable(() => {
         if (producerPaused)
           consumer.pause()
 
+        console.log('newConsumer', consumer.paused)
+
         consumer.on('transportclose', () => {
           if (consumers.value.delete(consumer.id))
             triggerRef(consumers)
@@ -283,7 +285,6 @@ export const useMediasoup = createSharedComposable(() => {
       return
 
     producers.value.delete(micProducer.value.id)
-    triggerRef(producers)
 
     try {
       micProducer.value.close()
@@ -294,6 +295,9 @@ export const useMediasoup = createSharedComposable(() => {
     }
     catch {
     }
+    finally {
+      triggerRef(producers)
+    }
 
     micProducer.value = undefined
   }
@@ -304,21 +308,25 @@ export const useMediasoup = createSharedComposable(() => {
 
     const producer = getProducerByType(type)
 
-    if (!producer)
+    if (!producer.value)
       return
 
-    if (producer.paused)
+    if (producer.value.paused)
       return
 
     try {
-      producer.pause()
+      producer.value.pause()
 
       await signaling.socket.value.emitWithAck('pauseProducer', {
-        producerId: producer.id,
+        producerId: producer.value.id,
       })
     }
     catch {
-      producer.resume()
+      producer.value.resume()
+    }
+    finally {
+      triggerRef(producers)
+      triggerRef(producer)
     }
   }
 
@@ -328,18 +336,22 @@ export const useMediasoup = createSharedComposable(() => {
 
     const producer = getProducerByType(type)
 
-    if (!producer)
+    if (!producer.value)
       return
 
     try {
-      producer.resume()
+      producer.value.resume()
 
       await signaling.socket.value.emitWithAck('resumeProducer', {
-        producerId: producer.id,
+        producerId: producer.value.id,
       })
     }
     catch {
-      producer.pause()
+      producer.value.pause()
+    }
+    finally {
+      triggerRef(producers)
+      triggerRef(producer)
     }
   }
 
@@ -350,11 +362,11 @@ export const useMediasoup = createSharedComposable(() => {
   function getProducerByType(type: ProducerType) {
     switch (type) {
       case 'microphone':
-        return micProducer.value
+        return micProducer
       case 'camera':
-        return cameraProducer.value
+        return cameraProducer
       case 'share':
-        return shareProducer.value
+        return shareProducer
     }
   }