Close transport, producer/consumer and reset room when we close the video call

app.js

@@ -157,9 +157,8 @@ peers.on('connection', async socket => {
     console.log(`[transport-produce] Producer ID: ${producer.id} | kind: ${producer.kind}`)
 
     producer.on('transportclose', ({ callId }) => {
-      console.log('transport for this producer closed ')
+      console.log('transport for this producer closed')
-      producer.close()
+      closeRoom();
-      router[callId] = null
     })
 
     // Send back to the client the Producer's id
@@ -190,9 +189,7 @@ peers.on('connection', async socket => {
 
         consumer.on('transportclose', () => {
           console.log('transport close from consumer')
-          producer.close()
+          closeRoom();
-          consumer.close()
-          router[callId] = null
         })
 
         consumer.on('producerclose', () => {
@@ -227,6 +224,22 @@ peers.on('connection', async socket => {
   })
 })
 
+const closeRoom = () => {
+    // Close transport for producer/consumer
+  // https://mediasoup.org/documentation/v3/mediasoup-client/api/#Transport-methods
+  producerTransport.close()
+  consumerTransport.close()
+
+  // Close producer and consumer
+  // https://mediasoup.org/documentation/v3/mediasoup-client/api/#producer-close
+  // https://mediasoup.org/documentation/v3/mediasoup-client/api/#consumer-closed
+  producer.close()
+  consumer.close()
+
+  // Reset room
+  router[callId] = null
+}
+
 const createWebRtcTransportLayer = async (callId, callback) => {
   try {
     // https://mediasoup.org/documentation/v3/mediasoup/api/#WebRtcTransportOptions

public/bundle.js

@@ -20703,7 +20703,7 @@ if (IS_PRODUCER === true) {
         asset_id: ASSET_ID,
         account_id: ACCOUNT_ID,
       })
-    );
+    )
   
     hub.on('video', (data) => {
       const parsedData = JSON.parse(data);
@@ -20720,17 +20720,10 @@ if (IS_PRODUCER === true) {
       }
 
       if (parsedData.type === 'notify-end') {
-        // NOT WORKING
-        localVideo.srcObject = null
-        remoteVideo.srcObject = null
         console.log('[VIDEO] notify-end | IS_PRODUCER', IS_PRODUCER, 'callId', callId);
         // socket.emit('transportclose')
         socket.emit('transportclose')
-        consumer = null
+        resetCallSettings()
-        producer = null
-        producerTransport = null
-        consumerTransport = null
-        device = undefined
         // socket.destroy()
       }
     })
@@ -20969,6 +20962,10 @@ const connectSendTransport = async () => {
     'video',
     JSON.stringify(answer)
   );
+
+  // Enable Close call button
+  const closeCallBtn = document.getElementById('btnCloseCall');
+  closeCallBtn.removeAttribute('disabled');
 }
 
 const createRecvTransport = async () => {
@@ -21012,6 +21009,16 @@ const createRecvTransport = async () => {
   })
 }
 
+const resetCallSettings = () => {
+  localVideo.srcObject = null
+  remoteVideo.srcObject = null
+  consumer = null
+  producer = null
+  producerTransport = null
+  consumerTransport = null
+  device = undefined
+}
+
 const connectRecvTransport = async () => {
   console.log('connectRecvTransport');
   // for consumer, we need to tell the server first
@@ -21048,6 +21055,58 @@ const connectRecvTransport = async () => {
   })
 }
 
+const closeCall = () => {
+  console.log('closeCall');
+
+  // hub.emit(
+  //   'ars',
+  //   JSON.stringify({
+  //     ars: true,
+  //     asset_id: ASSET_ID,
+  //     account_id: ACCOUNT_ID,
+  //   })
+  // );
+
+  // hub.emit(
+  //   'video',
+  //   JSON.stringify(answer)
+  // );
+
+  // {
+  //   origin_asset_id: client41.AppData.getUser().asset.id,
+  //   dest_asset_id: answerJsonResponse.origin_asset_id,
+  //   type: 'notify-end', 
+  //   video_call_id: answerJsonResponse.video_call_id
+  // }
+
+  // const answer = {
+  //   origin_asset_id: ASSET_ID,
+  //   dest_asset_id: originAssetId || parseInt(urlParams.get('dest_asset_id')),
+  //   type: 'notify-answer',
+  //   origin_asset_priority: 1,
+  //   origin_asset_type_name: originAssetTypeName,
+  //   origin_asset_name: originAssetName,
+  //   video_call_id: callId,
+  //   answer: 'accepted', // answer: 'rejected'
+  // };
+
+  // Emit 'notify-end' to Hub so the consumer will know to close the video
+  const notifyEnd = {
+    origin_asset_id: ASSET_ID,
+    dest_asset_id: originAssetId || parseInt(urlParams.get('dest_asset_id')),
+    type: 'notify-end', 
+    video_call_id: callId
+  }
+  console.log('notifyEnd', notifyEnd)
+  hub.emit('video', JSON.stringify(notifyEnd))
+
+  // Disable Close call button
+  const closeCallBtn = document.getElementById('btnCloseCall')
+  closeCallBtn.setAttribute('disabled', '')
+  resetCallSettings()
+}
+
 btnLocalVideo.addEventListener('click', getLocalStream)
-btnRecvSendTransport.addEventListener('click', goConnect)
+btnRecvSendTransport.addEventListener('click', goConnect)
+btnCloseCall.addEventListener('click', closeCall)
 },{"./config":95,"mediasoup-client":67,"socket.io-client":83}]},{},[96]);

public/index.html

@@ -21,6 +21,14 @@
             display: flex;
             justify-content: center;
         }
+
+        #closeCallBtn {
+            padding: 5;
+            background-color: papayawhip;
+            display: flex;
+            justify-content: center;
+            width: 736px;
+        }
     </style>
   </head>
   <body>
@@ -55,9 +63,6 @@
                                 <button id="btnRecvSendTransport">Consume</button>
                             </div>
                         </td>
-                        <td class="remoteColumn">
-                            <div id="videoContainer"></div>
-                        </td>
                     </tr>
                     <!-- <tr>
                         <td colspan="2">
@@ -85,6 +90,9 @@
                     </tr> -->
                 </tbody>
             </table>
+            <div id="closeCallBtn">
+                <button id="btnCloseCall" disabled>Close Call</button>
+            </div>
         </div>
     </body>
   </body>

public/index.js

@@ -44,7 +44,7 @@ if (IS_PRODUCER === true) {
         asset_id: ASSET_ID,
         account_id: ACCOUNT_ID,
       })
-    );
+    )
   
     hub.on('video', (data) => {
       const parsedData = JSON.parse(data);
@@ -61,17 +61,10 @@ if (IS_PRODUCER === true) {
       }
 
       if (parsedData.type === 'notify-end') {
-        // NOT WORKING
-        localVideo.srcObject = null
-        remoteVideo.srcObject = null
         console.log('[VIDEO] notify-end | IS_PRODUCER', IS_PRODUCER, 'callId', callId);
         // socket.emit('transportclose')
         socket.emit('transportclose')
-        consumer = null
+        resetCallSettings()
-        producer = null
-        producerTransport = null
-        consumerTransport = null
-        device = undefined
         // socket.destroy()
       }
     })
@@ -310,6 +303,10 @@ const connectSendTransport = async () => {
     'video',
     JSON.stringify(answer)
   );
+
+  // Enable Close call button
+  const closeCallBtn = document.getElementById('btnCloseCall');
+  closeCallBtn.removeAttribute('disabled');
 }
 
 const createRecvTransport = async () => {
@@ -353,6 +350,16 @@ const createRecvTransport = async () => {
   })
 }
 
+const resetCallSettings = () => {
+  localVideo.srcObject = null
+  remoteVideo.srcObject = null
+  consumer = null
+  producer = null
+  producerTransport = null
+  consumerTransport = null
+  device = undefined
+}
+
 const connectRecvTransport = async () => {
   console.log('connectRecvTransport');
   // for consumer, we need to tell the server first
@@ -389,5 +396,57 @@ const connectRecvTransport = async () => {
   })
 }
 
+const closeCall = () => {
+  console.log('closeCall');
+
+  // hub.emit(
+  //   'ars',
+  //   JSON.stringify({
+  //     ars: true,
+  //     asset_id: ASSET_ID,
+  //     account_id: ACCOUNT_ID,
+  //   })
+  // );
+
+  // hub.emit(
+  //   'video',
+  //   JSON.stringify(answer)
+  // );
+
+  // {
+  //   origin_asset_id: client41.AppData.getUser().asset.id,
+  //   dest_asset_id: answerJsonResponse.origin_asset_id,
+  //   type: 'notify-end', 
+  //   video_call_id: answerJsonResponse.video_call_id
+  // }
+
+  // const answer = {
+  //   origin_asset_id: ASSET_ID,
+  //   dest_asset_id: originAssetId || parseInt(urlParams.get('dest_asset_id')),
+  //   type: 'notify-answer',
+  //   origin_asset_priority: 1,
+  //   origin_asset_type_name: originAssetTypeName,
+  //   origin_asset_name: originAssetName,
+  //   video_call_id: callId,
+  //   answer: 'accepted', // answer: 'rejected'
+  // };
+
+  // Emit 'notify-end' to Hub so the consumer will know to close the video
+  const notifyEnd = {
+    origin_asset_id: ASSET_ID,
+    dest_asset_id: originAssetId || parseInt(urlParams.get('dest_asset_id')),
+    type: 'notify-end', 
+    video_call_id: callId
+  }
+  console.log('notifyEnd', notifyEnd)
+  hub.emit('video', JSON.stringify(notifyEnd))
+
+  // Disable Close call button
+  const closeCallBtn = document.getElementById('btnCloseCall')
+  closeCallBtn.setAttribute('disabled', '')
+  resetCallSettings()
+}
+
 btnLocalVideo.addEventListener('click', getLocalStream)
-btnRecvSendTransport.addEventListener('click', goConnect)
+btnRecvSendTransport.addEventListener('click', goConnect)
+btnCloseCall.addEventListener('click', closeCall)