Update Client show error correctly

app.js

@@ -223,18 +223,18 @@ peers.on('connection', async (socket) => {
       const callId = socketDetails[socket.id];
       console.log(`[createWebRtcTransport] socket ${socket.id} | sender ${sender} | callId ${callId}`);
       if (sender) {
-        if (!videoCalls[callId].receiverProducerTransport && !isInitiator(callId, socket.id)) {
+        if (!isInitiator(callId, socket.id)) {
           videoCalls[callId].receiverProducerTransport = await createWebRtcTransportLayer(callId, callback);
-        } else if (!videoCalls[callId].initiatorProducerTransport && isInitiator(callId, socket.id)) {
+        } else if (isInitiator(callId, socket.id)) {
           videoCalls[callId].initiatorProducerTransport = await createWebRtcTransportLayer(callId, callback);
         } else {
           console.log(`producerTransport has already been defined | callId ${callId}`);
           callback(null);
         }
       } else if (!sender) {
-        if (!videoCalls[callId].receiverConsumerTransport && !isInitiator(callId, socket.id)) {
+        if (!isInitiator(callId, socket.id)) {
           videoCalls[callId].receiverConsumerTransport = await createWebRtcTransportLayer(callId, callback);
-        } else if (!videoCalls[callId].initiatorConsumerTransport && isInitiator(callId, socket.id)) {
+        } else if (isInitiator(callId, socket.id)) {
           videoCalls[callId].initiatorConsumerTransport = await createWebRtcTransportLayer(callId, callback);
         }
       }
@@ -260,6 +260,7 @@ peers.on('connection', async (socket) => {
       isInitiator(callId, socket.id)
         ? await videoCalls[callId].initiatorProducerTransport.connect({ dtlsParameters })
         : await videoCalls[callId].receiverProducerTransport.connect({ dtlsParameters });
+
     } catch (error) {
       console.log(`ERROR | transport-connect | callId ${socketDetails[socket.id]} | ${error.message}`);
     }
@@ -290,8 +291,8 @@ peers.on('connection', async (socket) => {
 
           videoCalls[callId].receiverVideoProducer.on('transportclose', () => {
             const callId = socketDetails[socket.id];
-            console.log('transport for this producer closed', callId);
-            closeCall(callId);
+            console.log('[receiverVideoProducer] transport for this producer closed', callId);
+            // closeCall(callId);
           });
 
           // Send back to the client the Producer's id
@@ -311,8 +312,8 @@ peers.on('connection', async (socket) => {
 
           videoCalls[callId].initiatorVideoProducer.on('transportclose', () => {
             const callId = socketDetails[socket.id];
-            console.log('transport for this producer closed', callId);
-            closeCall(callId);
+            console.log('[initiatorVideoProducer] transport for this producer closed', callId);
+            // closeCall(callId);
           });
 
           callback &&
@@ -333,8 +334,8 @@ peers.on('connection', async (socket) => {
 
           videoCalls[callId].receiverAudioProducer.on('transportclose', () => {
             const callId = socketDetails[socket.id];
-            console.log('transport for this producer closed', callId);
-            closeCall(callId);
+            console.log('[receiverAudioProducer] transport for this producer closed', callId);
+            // closeCall(callId);
           });
 
           // Send back to the client the Producer's id
@@ -354,8 +355,8 @@ peers.on('connection', async (socket) => {
 
           videoCalls[callId].initiatorAudioProducer.on('transportclose', () => {
             const callId = socketDetails[socket.id];
-            console.log('transport for this producer closed', callId);
-            closeCall(callId);
+            console.log('[initiatorAudioProducer] transport for this producer closed', callId);
+            // closeCall(callId);
           });
 
           // Send back to the client the Producer's id
@@ -369,8 +370,8 @@ peers.on('connection', async (socket) => {
       const socketToEmit = isInitiator(callId, socket.id)
         ? videoCalls[callId].receiverSocket
         : videoCalls[callId].initiatorSocket;
+      socketToEmit.emit('new-producer', { callId });
 
-      socketToEmit.emit('new-producer', { callId, kind });
     } catch (error) {
       console.log(`ERROR | transport-produce | callId ${socketDetails[socket.id]} | ${error.message}`);
     }

public/bundle.js

@@ -20453,9 +20453,9 @@ setTimeout(() => {
       if (IS_PRODUCER && urlParams.get('testing') === 'true') { getLocalStream() }
     })
 
-    socket.on('new-producer', ({ callId, kind }) => {
-      console.log(`🟢 new-producer | callId: ${callId} | kind: ${kind} | Ready to consume`);
-      connectRecvTransport();
+    socket.on('new-producer', ({ callId }) => {
+      console.log(`🟢 new-producer | callId: ${callId} | Ready to consume`);
+      consume()
     })
   }
   
@@ -20735,8 +20735,6 @@ const connectSendTransport = async () => {
   // Enable Close call button
   const closeCallBtn = document.getElementById('btnCloseCall');
   closeCallBtn.removeAttribute('disabled');
-
-  createRecvTransport();
 }
 
 const createRecvTransport = async () => {
@@ -20776,8 +20774,7 @@ const createRecvTransport = async () => {
         errback(error)
       }
     })
-    // We call it in new-rpoducer, we don't need it here anymore
-    // connectRecvTransport()
+    connectRecvTransport()
   })
 }
 
@@ -20833,7 +20830,7 @@ const connectRecvTransport = async () => {
       console.log('remoteVideo PLAY')
     })
     .catch((error) => {
-      displayError(`remoteVideo PLAY ERROR | ${error.message}`)
+      console.log(`remoteVideo PLAY ERROR | ${error.message}`)
     })
   })
 }
@@ -20910,31 +20907,31 @@ const closeCall = () => {
   resetCallSettings()
 }
 
-// const consume = async (kind) => {
-//   console.log(`[consume] kind: ${kind}`)
-//   console.log('createRecvTransport Consumer')
-//   await socket.emit('createWebRtcTransport', { sender: false, callId, dispatcher: true }, ({ params }) => {
-//     if (params.error) {
-//       console.log('createRecvTransport | createWebRtcTransport | Error', params.error)
-//       return
-//     }
-//     consumerTransport = device.createRecvTransport(params)
-//     consumerTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
-//       try {
-//         await socket.emit('transport-recv-connect', {
-//           dtlsParameters,
-//         })
-//         callback()
-//       } catch (error) {
-//         errback(error)
-//       }
-//     })
+const consume = async () => {
+  console.log('[consume]')
+  console.log('createRecvTransport Consumer')
+  await socket.emit('createWebRtcTransport', { sender: false, callId, dispatcher: true }, ({ params }) => {
+    if (params.error) {
+      console.log('createRecvTransport | createWebRtcTransport | Error', params.error)
+      return
+    }
+    consumerTransport = device.createRecvTransport(params)
+    consumerTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
+      try {
+        await socket.emit('transport-recv-connect', {
+          dtlsParameters,
+        })
+        callback()
+      } catch (error) {
+        errback(error)
+      }
+    })
     
-//     connectRecvTransport()
-//   })
-// }
+    connectRecvTransport()
+  })
+}
 
 btnLocalVideo.addEventListener('click', getLocalStream)
-// btnRecvSendTransport.addEventListener('click', consume)
+btnRecvSendTransport.addEventListener('click', consume)
 btnCloseCall.addEventListener('click', closeCall)
 },{"./config":94,"mediasoup-client":66,"socket.io-client":82}]},{},[95]);

public/index.html

@@ -75,7 +75,7 @@
                         </td>
                         <td>
                             <div id="sharedBtns">
-                                <!-- <button id="btnRecvSendTransport">Consume</button> -->
+                                <button id="btnRecvSendTransport">Consume</button>
                                 <button id="remoteSoundControl">Unmute</button>
                             </div>
                         </td>

public/index.js

@@ -95,9 +95,9 @@ setTimeout(() => {
       if (IS_PRODUCER && urlParams.get('testing') === 'true') { getLocalStream() }
     })
 
-    socket.on('new-producer', ({ callId, kind }) => {
-      console.log(`🟢 new-producer | callId: ${callId} | kind: ${kind} | Ready to consume`);
-      connectRecvTransport();
+    socket.on('new-producer', ({ callId }) => {
+      console.log(`🟢 new-producer | callId: ${callId} | Ready to consume`);
+      consume()
     })
   }
   
@@ -377,8 +377,6 @@ const connectSendTransport = async () => {
   // Enable Close call button
   const closeCallBtn = document.getElementById('btnCloseCall');
   closeCallBtn.removeAttribute('disabled');
-
-  createRecvTransport();
 }
 
 const createRecvTransport = async () => {
@@ -418,8 +416,7 @@ const createRecvTransport = async () => {
         errback(error)
       }
     })
-    // We call it in new-rpoducer, we don't need it here anymore
-    // connectRecvTransport()
+    connectRecvTransport()
   })
 }
 
@@ -475,7 +472,7 @@ const connectRecvTransport = async () => {
       console.log('remoteVideo PLAY')
     })
     .catch((error) => {
-      displayError(`remoteVideo PLAY ERROR | ${error.message}`)
+      console.log(`remoteVideo PLAY ERROR | ${error.message}`)
     })
   })
 }
@@ -552,30 +549,30 @@ const closeCall = () => {
   resetCallSettings()
 }
 
-// const consume = async (kind) => {
-//   console.log(`[consume] kind: ${kind}`)
-//   console.log('createRecvTransport Consumer')
-//   await socket.emit('createWebRtcTransport', { sender: false, callId, dispatcher: true }, ({ params }) => {
-//     if (params.error) {
-//       console.log('createRecvTransport | createWebRtcTransport | Error', params.error)
-//       return
-//     }
-//     consumerTransport = device.createRecvTransport(params)
-//     consumerTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
-//       try {
-//         await socket.emit('transport-recv-connect', {
-//           dtlsParameters,
-//         })
-//         callback()
-//       } catch (error) {
-//         errback(error)
-//       }
-//     })
+const consume = async () => {
+  console.log('[consume]')
+  console.log('createRecvTransport Consumer')
+  await socket.emit('createWebRtcTransport', { sender: false, callId, dispatcher: true }, ({ params }) => {
+    if (params.error) {
+      console.log('createRecvTransport | createWebRtcTransport | Error', params.error)
+      return
+    }
+    consumerTransport = device.createRecvTransport(params)
+    consumerTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
+      try {
+        await socket.emit('transport-recv-connect', {
+          dtlsParameters,
+        })
+        callback()
+      } catch (error) {
+        errback(error)
+      }
+    })
     
-//     connectRecvTransport()
-//   })
-// }
+    connectRecvTransport()
+  })
+}
 
 btnLocalVideo.addEventListener('click', getLocalStream)
-// btnRecvSendTransport.addEventListener('click', consume)
+btnRecvSendTransport.addEventListener('click', consume)
 btnCloseCall.addEventListener('click', closeCall)