From a2223529daee779e725b9134f092bc45c124e191 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Sat, 6 Aug 2022 10:05:43 +0300 Subject: [PATCH] Close transport, producer/consumer and reset room when we close the video call --- app.js | 25 +++++++++++---- public/bundle.js | 79 +++++++++++++++++++++++++++++++++++++++++------ public/index.html | 14 +++++++-- public/index.js | 79 +++++++++++++++++++++++++++++++++++++++++------ 4 files changed, 168 insertions(+), 29 deletions(-) diff --git a/app.js b/app.js index 245c5c8..ad8e50a 100644 --- a/app.js +++ b/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 ') - producer.close() - router[callId] = null + console.log('transport for this producer closed') + closeRoom(); }) // 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() - consumer.close() - router[callId] = null + closeRoom(); }) 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 diff --git a/public/bundle.js b/public/bundle.js index 519147f..0fa699c 100644 --- a/public/bundle.js +++ b/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 - producer = null - producerTransport = null - consumerTransport = null - device = undefined + resetCallSettings() // 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]); diff --git a/public/index.html b/public/index.html index ce0d73a..fb0f078 100644 --- a/public/index.html +++ b/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; + } @@ -55,9 +63,6 @@ - -
- +
+ +
diff --git a/public/index.js b/public/index.js index adfb76f..fd097cb 100644 --- a/public/index.js +++ b/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 - producer = null - producerTransport = null - consumerTransport = null - device = undefined + resetCallSettings() // 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) \ No newline at end of file +btnRecvSendTransport.addEventListener('click', goConnect) +btnCloseCall.addEventListener('click', closeCall) \ No newline at end of file