diff --git a/app.js b/app.js index 860dae3..520ae55 100644 --- a/app.js +++ b/app.js @@ -149,7 +149,7 @@ peers.on('connection', async socket => { }) // see client's socket.emit('transport-produce', ...) - socket.on('transport-produce', async ({ kind, rtpParameters, appData }) => { + socket.on('transport-produce', async ({ kind, rtpParameters, appData }, callback) => { // call produce based on the prameters from the client producer = await producerTransport.produce({ kind, @@ -157,6 +157,10 @@ peers.on('connection', async socket => { }) console.log(`[transport-produce] Producer ID: ${producer.id} | kind: ${producer.kind}`) + // If we have multiple producers/consumers on the same room + // We need to notify all the consumers of the room + // --- code --- + producer.on('transportclose', () => { console.log('transport for this producer closed', callId) @@ -167,6 +171,15 @@ peers.on('connection', async socket => { router[callId].close() delete router[callId] }) + + try { + // Send back to the client the Producer's id + callback({ + id: producer.id + }) + } catch (error) { + console.log(`ERROR | transport-produce | ${error}`) + } }) // see client's socket.emit('transport-recv-connect', ...) @@ -196,8 +209,8 @@ peers.on('connection', async socket => { // https://mediasoup.org/documentation/v3/mediasoup/api/#router-close router[callId].close() delete router[callId] - producer.close() - consumer.close() + // producer.close() + // consumer.close() }) consumer.on('producerclose', () => { @@ -206,8 +219,8 @@ peers.on('connection', async socket => { // https://mediasoup.org/documentation/v3/mediasoup/api/#router-close router[callId].close() delete router[callId] - producer.close() - consumer.close() + // producer.close() + // consumer.close() }) // from the consumer extract the following params diff --git a/public/bundle.js b/public/bundle.js index 0b0166f..60078b4 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20653,8 +20653,8 @@ module.exports = yeast; },{}],95:[function(require,module,exports){ module.exports = { hubAddress: 'https://hub.dev.linx.safemobile.com/', - // mediasoupAddress: 'https://video.safemobile.org/mediasoup', - mediasoupAddress: 'http://localhost:3000/mediasoup', + mediasoupAddress: 'https://video.safemobile.org/mediasoup', + // mediasoupAddress: 'http://localhost:3000/mediasoup', } },{}],96:[function(require,module,exports){ const io = require('socket.io-client') @@ -20866,6 +20866,7 @@ const getRtpCapabilities = () => { } const createSendTransport = () => { + // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true socket.emit('createWebRtcTransport', { sender: true, callId }, ({ params }) => { @@ -20876,7 +20877,7 @@ const createSendTransport = () => { return } - console.log(params) + console.log('params', params) // creates a new WebRTC Transport to send media // based on the server's producer transport params @@ -20903,7 +20904,7 @@ const createSendTransport = () => { }) producerTransport.on('produce', async (parameters, callback, errback) => { - console.log(parameters) + console.log('produce', parameters) try { // tell the server to create a Producer @@ -20915,56 +20916,59 @@ const createSendTransport = () => { rtpParameters: parameters.rtpParameters, appData: parameters.appData, }, ({ id }) => { + console.log('[transport-produce] callback | id', id); // Tell the transport that parameters were transmitted and provide it with the // server side producer's id. callback({ id }) }) } catch (error) { + console.log('ERROR | produce |', error); errback(error) } }) - connectSendTransport() }) } const connectSendTransport = async () => { + console.log('[connectSendTransport]'); // we now call produce() to instruct the producer transport // to send media to the Router // https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce // this action will trigger the 'connect' and 'produce' events above producer = await producerTransport.produce(params) + + setTimeout(() => { + producer.on('trackended', () => { + console.log('track ended') + // close video track + }) + + producer.on('transportclose', () => { + console.log('transport ended') + // close video track + }) + + // Enable Close call button + const closeCallBtn = document.getElementById('btnCloseCall'); + closeCallBtn.removeAttribute('disabled'); - producer.on('trackended', () => { - console.log('track ended') - // close video track - }) - - producer.on('transportclose', () => { - console.log('transport ended') - // close video track - }) - - 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: ASSET_TYPE, - origin_asset_name: ASSET_NAME, - video_call_id: callId, - answer: 'accepted', // answer: 'rejected' - }; - console.log('SEND answer', answer); - - hub.emit( - 'video', - JSON.stringify(answer) - ); - - // Enable Close call button - const closeCallBtn = document.getElementById('btnCloseCall'); - closeCallBtn.removeAttribute('disabled'); + 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: ASSET_TYPE, + origin_asset_name: ASSET_NAME, + video_call_id: callId, + answer: 'accepted', // answer: 'rejected' + }; + console.log('SEND answer', answer); + hub.emit( + 'video', + JSON.stringify(answer) + ); + }, 7000); } const createRecvTransport = async () => { @@ -21009,7 +21013,6 @@ const createRecvTransport = async () => { } const resetCallSettings = () => { - socket.emit('transportclose', { callId }) localVideo.srcObject = null remoteVideo.srcObject = null consumer = null @@ -21057,12 +21060,12 @@ const connectRecvTransport = async () => { const closeCall = () => { console.log('closeCall'); - + // 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', + 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) @@ -21072,7 +21075,7 @@ const closeCall = () => { const closeCallBtn = document.getElementById('btnCloseCall') closeCallBtn.setAttribute('disabled', '') - // Reset settings and send closeTransport to video server + // Reset settings resetCallSettings() } diff --git a/public/index.js b/public/index.js index affb71b..b2028e0 100644 --- a/public/index.js +++ b/public/index.js @@ -207,6 +207,7 @@ const getRtpCapabilities = () => { } const createSendTransport = () => { + // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true socket.emit('createWebRtcTransport', { sender: true, callId }, ({ params }) => { @@ -217,7 +218,7 @@ const createSendTransport = () => { return } - console.log(params) + console.log('params', params) // creates a new WebRTC Transport to send media // based on the server's producer transport params @@ -244,7 +245,7 @@ const createSendTransport = () => { }) producerTransport.on('produce', async (parameters, callback, errback) => { - console.log(parameters) + console.log('produce', parameters) try { // tell the server to create a Producer @@ -256,56 +257,59 @@ const createSendTransport = () => { rtpParameters: parameters.rtpParameters, appData: parameters.appData, }, ({ id }) => { + console.log('[transport-produce] callback | id', id); // Tell the transport that parameters were transmitted and provide it with the // server side producer's id. callback({ id }) }) } catch (error) { + console.log('ERROR | produce |', error); errback(error) } }) - connectSendTransport() }) } const connectSendTransport = async () => { + console.log('[connectSendTransport]'); // we now call produce() to instruct the producer transport // to send media to the Router // https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce // this action will trigger the 'connect' and 'produce' events above producer = await producerTransport.produce(params) + + setTimeout(() => { + producer.on('trackended', () => { + console.log('track ended') + // close video track + }) + + producer.on('transportclose', () => { + console.log('transport ended') + // close video track + }) + + // Enable Close call button + const closeCallBtn = document.getElementById('btnCloseCall'); + closeCallBtn.removeAttribute('disabled'); - producer.on('trackended', () => { - console.log('track ended') - // close video track - }) - - producer.on('transportclose', () => { - console.log('transport ended') - // close video track - }) - - 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: ASSET_TYPE, - origin_asset_name: ASSET_NAME, - video_call_id: callId, - answer: 'accepted', // answer: 'rejected' - }; - console.log('SEND answer', answer); - - hub.emit( - 'video', - JSON.stringify(answer) - ); - - // Enable Close call button - const closeCallBtn = document.getElementById('btnCloseCall'); - closeCallBtn.removeAttribute('disabled'); + 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: ASSET_TYPE, + origin_asset_name: ASSET_NAME, + video_call_id: callId, + answer: 'accepted', // answer: 'rejected' + }; + console.log('SEND answer', answer); + hub.emit( + 'video', + JSON.stringify(answer) + ); + }, 7000); } const createRecvTransport = async () => {