From d633eec92fa1504eb99ef08894f83cfd2498ef23 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Tue, 13 Dec 2022 10:28:45 +0200 Subject: [PATCH 01/57] Add socket info --- app.js | 48 ++++++++++++++++++++++-------------------------- 1 file changed, 22 insertions(+), 26 deletions(-) diff --git a/app.js b/app.js index 8b33249..73e8418 100644 --- a/app.js +++ b/app.js @@ -15,19 +15,21 @@ const mediasoup = require('mediasoup'); let worker /** - * videoCalls - * |-> Router - * |-> Producer - * |-> Consumer - * |-> Producer Transport - * |-> Consumer Transport * + * videoCalls - Dictionary of Object(s) * '': { - * router: Router, - * producer: Producer, - * producerTransport: Producer Transport, - * consumer: Consumer, - * consumerTransport: Consumer Transport + * router: Router, router + * initiatorAudioProducer: Producer, + * initiatorVideoProducer: Producer, + * receiverVideoProducer: Producer, producerVideo + * receiverAudioProducer: Producer, producerAudio + * initiatorProducerTransport: Producer Transport, + * receiverProducerTransport: Producer Transport, producerTransport + * initiatorConsumerVideo: Consumer, consumerVideo + * initiatorConsumerAudio: Consumer, consumerAudio + * initiatorConsumerTransport: Consumer Transport consumerTransport + * initiatorSockerId + * receiverSocketId * } * **/ @@ -141,20 +143,6 @@ const mediaCodecs = [ 'x-google-start-bitrate' : 1000 } } -// { -// kind: 'audio', -// mimeType: 'audio/opus', -// clockRate: 48000, -// channels: 2, -// }, -// { -// kind: 'video', -// mimeType: 'video/VP8', -// clockRate: 90000, -// parameters: { -// 'x-google-start-bitrate': 1000, -// }, -// }, ]; const closeCall = (callId) => { @@ -212,9 +200,11 @@ peers.on('connection', async socket => { console.log('[createRoom] callId', callId); videoCalls[callId] = { router: await worker.createRouter({ mediaCodecs }) } console.log(`[createRoom] Router ID: ${videoCalls[callId].router.id}`); + videoCalls[callId].initiatorSockerId = socket.id + } else { + videoCalls[callId].receiverSocketId = socket.id } socketDetails[socket.id] = callId; - // rtpCapabilities is set for callback console.log('[getRtpCapabilities] callId', callId); callbackResponse = { @@ -223,6 +213,7 @@ peers.on('connection', async socket => { } else { console.log(`[createRoom] missing callId ${callId}`); } + console.log('🔴 isInitiator(callId, socket.id)', isInitiator(callId, socket.id)); } catch (error) { console.log(`ERROR | createRoom | callId ${callId} | ${error.message}`); } finally { @@ -470,6 +461,11 @@ const consumeAudio = async (callId, rtpCapabilities) => { } } +const isInitiator = async (callId, socketId) => { + if (videoCalls[callId].initiatorSockerId === socketId) return true; + else return false +} + /* - Called from at event 'createWebRtcTransport' and assigned to the consumer or producer transport - It will return parameters, these are required for the client to create the RecvTransport -- 2.37.1 From 92fbecc36a39e8bb5239710e465d60891eb0fb9f Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Tue, 13 Dec 2022 13:04:43 +0200 Subject: [PATCH 02/57] Set initiatorSocketId to be dispatcher --- app.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/app.js b/app.js index 73e8418..4115016 100644 --- a/app.js +++ b/app.js @@ -200,9 +200,9 @@ peers.on('connection', async socket => { console.log('[createRoom] callId', callId); videoCalls[callId] = { router: await worker.createRouter({ mediaCodecs }) } console.log(`[createRoom] Router ID: ${videoCalls[callId].router.id}`); - videoCalls[callId].initiatorSockerId = socket.id - } else { videoCalls[callId].receiverSocketId = socket.id + } else { + videoCalls[callId].initiatorSockerId = socket.id } socketDetails[socket.id] = callId; // rtpCapabilities is set for callback @@ -453,6 +453,10 @@ const consumeAudio = async (callId, rtpCapabilities) => { console.log('producer of consumer closed', callId); closeCall(callId); }); + + if(isInitiator(callId, sockId)) { + + } return { id: videoCalls[callId].consumerAudio.id, producerId: videoCalls[callId].producerAudio.id, @@ -461,9 +465,8 @@ const consumeAudio = async (callId, rtpCapabilities) => { } } -const isInitiator = async (callId, socketId) => { - if (videoCalls[callId].initiatorSockerId === socketId) return true; - else return false +const isInitiator = (callId, socketId) => { + return (videoCalls[callId].initiatorSockerId === socketId); } /* -- 2.37.1 From 3ca555ef9ef3ed3557052e765bee68779313d338 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Tue, 13 Dec 2022 13:23:15 +0200 Subject: [PATCH 03/57] Set initiatorSocketId to be dispatcher --- app.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app.js b/app.js index 4115016..5f82515 100644 --- a/app.js +++ b/app.js @@ -453,10 +453,6 @@ const consumeAudio = async (callId, rtpCapabilities) => { console.log('producer of consumer closed', callId); closeCall(callId); }); - - if(isInitiator(callId, sockId)) { - - } return { id: videoCalls[callId].consumerAudio.id, producerId: videoCalls[callId].producerAudio.id, -- 2.37.1 From 695964d342e2541002388a2ff908492cc8fd4947 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Wed, 14 Dec 2022 09:55:45 +0200 Subject: [PATCH 04/57] Refactor code to use initiator/receiver --- app.js | 420 ++++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 312 insertions(+), 108 deletions(-) diff --git a/app.js b/app.js index 5f82515..4df1e47 100644 --- a/app.js +++ b/app.js @@ -148,13 +148,13 @@ const mediaCodecs = [ const closeCall = (callId) => { try { if (callId && videoCalls[callId]) { - videoCalls[callId].producerVideo?.close(); - videoCalls[callId].producerAudio?.close(); - videoCalls[callId].consumerVideo?.close(); - videoCalls[callId].consumerAudio?.close(); + videoCalls[callId].receiverVideoProducer?.close(); + videoCalls[callId].receiverAudioProducer?.close(); + videoCalls[callId].initiatorConsumerVideo?.close(); + videoCalls[callId].initiatorConsumerAudio?.close(); - videoCalls[callId]?.consumerTransport?.close(); - videoCalls[callId]?.producerTransport?.close(); + videoCalls[callId]?.initiatorConsumerTransport?.close(); + videoCalls[callId]?.receiverProducerTransport?.close(); videoCalls[callId]?.router?.close(); delete videoCalls[callId]; } else { @@ -234,19 +234,33 @@ peers.on('connection', async socket => { const callId = socketDetails[socket.id]; console.log(`[createWebRtcTransport] sender ${sender} | callId ${callId}`); if (sender) { - if (!videoCalls[callId].producerTransport) { - videoCalls[callId].producerTransport = await createWebRtcTransportLayer(callId, callback); + if(!videoCalls[callId].receiverProducerTransport && !isInitiator(callId, socket.id)) { + videoCalls[callId].receiverProducerTransport = await createWebRtcTransportLayer(callId, callback); + } else if(!videoCalls[callId].initiatorProducerTransport && isInitiator(callId, socket.id)) { + videoCalls[callId].initiatorProducerTransport = await createWebRtcTransportLayer(callId, callback); } else { console.log(`producerTransport has already been defined | callId ${callId}`); callback(null); } + + // if (!videoCalls[callId].producerTransport) { + // videoCalls[callId].producerTransport = await createWebRtcTransportLayer(callId, callback); + // } else { + // console.log(`producerTransport has already been defined | callId ${callId}`); + // callback(null); + // } } else if (!sender) { - if (!videoCalls[callId].consumerTransport) { - videoCalls[callId].consumerTransport = await createWebRtcTransportLayer(callId, callback); - } else { - console.log(`consumerTransport has already been defined | callId ${callId}`); - callback(null); + if(!videoCalls[callId].receiverConsumerTransport && !isInitiator(callId, socket.id)) { + videoCalls[callId].receiverConsumerTransport = await createWebRtcTransportLayer(callId, callback); + } else if(!videoCalls[callId].initiatorConsumerTransport && isInitiator(callId, socket.id)) { + videoCalls[callId].initiatorConsumerTransport = await createWebRtcTransportLayer(callId, callback); } + // if (!videoCalls[callId].consumerTransport) { + // videoCalls[callId].consumerTransport = await createWebRtcTransportLayer(callId, callback); + // } else { + // console.log(`consumerTransport has already been defined | callId ${callId}`); + // callback(null); + // } } } catch (error) { console.log(`ERROR | createWebRtcTransport | callId ${socketDetails[socket.id]} | sender ${sender} | ${error.message}`); @@ -264,7 +278,12 @@ peers.on('connection', async socket => { if (typeof dtlsParameters === 'string') dtlsParameters = JSON.parse(dtlsParameters); console.log(`[transport-connect] socket.id ${socket.id} | callId ${callId}`); - await videoCalls[callId].producerTransport.connect({ dtlsParameters }); + if (!isInitiator(callId, socket.id)) { + await videoCalls[callId].receiverProducerTransport.connect({ dtlsParameters }); + } else { + await videoCalls[callId].initiatorProducerTransport.connect({ dtlsParameters }); + } + // await videoCalls[callId].producerTransport.connect({ dtlsParameters }); } catch (error) { console.log(`ERROR | transport-connect | callId ${socketDetails[socket.id]} | ${error.message}`); } @@ -285,42 +304,93 @@ peers.on('connection', async socket => { console.log('rtpParameters', rtpParameters); if (kind === 'video') { - videoCalls[callId].producerVideo = await videoCalls[callId].producerTransport.produce({ - kind, - rtpParameters, - }); - + if (!isInitiator()) { + videoCalls[callId].receiverVideoProducer = await videoCalls[callId].receiverProducerTransport.produce({ + kind, + rtpParameters, + }); + // videoCalls[callId].producerVideo = await videoCalls[callId].producerTransport.produce({ + // kind, + // rtpParameters, + // }); + + console.log(`[transport-produce] receiverVideoProducer Producer ID: ${videoCalls[callId].receiverVideoProducer.id} | kind: ${videoCalls[callId].receiverVideoProducer.kind}`); - console.log(`[transport-produce] Producer ID: ${videoCalls[callId].producerVideo.id} | kind: ${videoCalls[callId].producerVideo.kind}`); - - videoCalls[callId].producerVideo.on('transportclose', () => { - const callId = socketDetails[socket.id]; - console.log('transport for this producer closed', callId) - closeCall(callId); - }); + videoCalls[callId].receiverVideoProducer.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport for this producer closed', callId) + closeCall(callId); + }); + // videoCalls[callId].producerVideo.on('transportclose', () => { + // const callId = socketDetails[socket.id]; + // console.log('transport for this producer closed', callId) + // closeCall(callId); + // }); - // Send back to the client the Producer's id - callback && callback({ - id: videoCalls[callId].producerVideo.id - }); + // Send back to the client the Producer's id + callback && callback({ + id: videoCalls[callId].receiverVideoProducer.id + }); + // // Send back to the client the Producer's id + // callback && callback({ + // id: videoCalls[callId].producerVideo.id + // }); + } else { + videoCalls[callId].initiatorVideoProducer = await videoCalls[callId].initiatorProducerTransport.produce({ + kind, + rtpParameters, + }); + + console.log(`[transport-produce] initiatorVideoProducer Producer ID: ${videoCalls[callId].initiatorVideoProducer.id} | kind: ${videoCalls[callId].initiatorVideoProducer.kind}`); + + videoCalls[callId].initiatorVideoProducer.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport for this producer closed', callId) + closeCall(callId); + }); + + callback && callback({ + id: videoCalls[callId].initiatorVideoProducer.id + }); + } } else if (kind === 'audio') { - videoCalls[callId].producerAudio = await videoCalls[callId].producerTransport.produce({ - kind, - rtpParameters, - }); + if (!isInitiator()) { + videoCalls[callId].receiverAudioProducer = await videoCalls[callId].receiverProducerTransport.produce({ + kind, + rtpParameters, + }); - console.log(`[transport-produce] Producer ID: ${videoCalls[callId].producerAudio.id} | kind: ${videoCalls[callId].producerAudio.kind}`); - - videoCalls[callId].producerAudio.on('transportclose', () => { - const callId = socketDetails[socket.id]; - console.log('transport for this producer closed', callId) - closeCall(callId); - }); + console.log(`[transport-produce] receiverAudioProducer Producer ID: ${videoCalls[callId].receiverAudioProducer.id} | kind: ${videoCalls[callId].receiverAudioProducer.kind}`); + + videoCalls[callId].receiverAudioProducer.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport for this producer closed', callId) + closeCall(callId); + }); - // Send back to the client the Producer's id - callback && callback({ - id: videoCalls[callId].producerAudio.id - }); + // Send back to the client the Producer's id + callback && callback({ + id: videoCalls[callId].receiverAudioProducer.id + }); + } else { + videoCalls[callId].initiatorAudioProducer = await videoCalls[callId].initiatorProducerTransport.produce({ + kind, + rtpParameters, + }); + + console.log(`[transport-produce] initiatorAudioProducer Producer ID: ${videoCalls[callId].initiatorAudioProducer.id} | kind: ${videoCalls[callId].initiatorAudioProducer.kind}`); + + videoCalls[callId].initiatorAudioProducer.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport for this producer closed', callId) + closeCall(callId); + }); + + // Send back to the client the Producer's id + callback && callback({ + id: videoCalls[callId].initiatorAudioProducer.id + }); + } } } catch (error) { console.log(`ERROR | transport-produce | callId ${socketDetails[socket.id]} | ${error.message}`); @@ -335,7 +405,12 @@ peers.on('connection', async socket => { try { const callId = socketDetails[socket.id]; console.log(`[transport-recv-connect] socket.id ${socket.id} | callId ${callId}`); - await videoCalls[callId].consumerTransport.connect({ dtlsParameters }); + // await videoCalls[callId].consumerTransport.connect({ dtlsParameters }); + if(!isInitiator(callId, socket.id)) { + await videoCalls[callId].receiverConsumerTransport.connect({ dtlsParameters }); + } else if(isInitiator(callId, socket.id)) { + await videoCalls[callId].initiatorConsumerTransport.connect({ dtlsParameters }); + } } catch (error) { console.log(`ERROR | transport-recv-connect | callId ${socketDetails[socket.id]} | ${error.message}`); } @@ -354,30 +429,50 @@ peers.on('connection', async socket => { const callId = socketDetails[socket.id]; console.log('[consume] callId', callId); + let canConsumeVideo, canConsumeAudio; + if (isInitiator(callId, socket.id)) { + canConsumeVideo = !!videoCalls[callId].receiverVideoProducer && !!videoCalls[callId].router.canConsume({ + producerId: videoCalls[callId].receiverVideoProducer.id, + rtpCapabilities + }); + // const canConsumeVideo = !!videoCalls[callId].producerVideo && !!videoCalls[callId].router.canConsume({ + // producerId: videoCalls[callId].producerVideo.id, + // rtpCapabilities + // }) - const canConsumeVideo = !!videoCalls[callId].producerVideo && !!videoCalls[callId].router.canConsume({ - producerId: videoCalls[callId].producerVideo.id, - rtpCapabilities - }) + canConsumeAudio = !!videoCalls[callId].receiverAudioProducer && !!videoCalls[callId].router.canConsume({ + producerId: videoCalls[callId].receiverAudioProducer.id, + rtpCapabilities + }); + // const canConsumeAudio = !!videoCalls[callId].producerAudio && !!videoCalls[callId].router.canConsume({ + // producerId: videoCalls[callId].producerAudio.id, + // rtpCapabilities + // }) - const canConsumeAudio = !!videoCalls[callId].producerAudio && !!videoCalls[callId].router.canConsume({ - producerId: videoCalls[callId].producerAudio.id, - rtpCapabilities - }) + } else { + canConsumeVideo = !!videoCalls[callId].initiatorVideoProducer && !!videoCalls[callId].router.canConsume({ + producerId: videoCalls[callId].initiatorVideoProducer.id, + rtpCapabilities + }); + canConsumeAudio = !!videoCalls[callId].initiatorAudioProducer && !!videoCalls[callId].router.canConsume({ + producerId: videoCalls[callId].initiatorAudioProducer.id, + rtpCapabilities + }); + } console.log('[consume] canConsumeVideo', canConsumeVideo); console.log('[consume] canConsumeAudio', canConsumeAudio); if (canConsumeVideo && !canConsumeAudio) { - console.log('1'); - const videoParams = await consumeVideo(callId, rtpCapabilities) - console.log('videoParams', videoParams); + const videoParams = await consumeVideo(callId, socket.id, rtpCapabilities) callback({ videoParams, audioParams: null }); } else if (canConsumeVideo && canConsumeAudio) { - console.log('2'); - const videoParams = await consumeVideo(callId, rtpCapabilities) - const audioParams = await consumeAudio(callId, rtpCapabilities) + const videoParams = await consumeVideo(callId, socket.id, rtpCapabilities) + const audioParams = await consumeAudio(callId, socket.id, rtpCapabilities) callback({ videoParams, audioParams }); + } else if (!canConsumeVideo && canConsumeAudio) { + const audioParams = await consumeAudio(callId, socket.id, rtpCapabilities) + callback({ videoParams: null, audioParams }); } else { console.log(`[consume] Can't consume | callId ${callId}`); callback(null); @@ -396,68 +491,177 @@ peers.on('connection', async socket => { try { const callId = socketDetails[socket.id]; console.log(`[consumer-resume] callId ${callId}`) - await videoCalls[callId].consumerVideo.resume(); - await videoCalls[callId].consumerAudio.resume(); + + if (isInitiator(callId, socket.id)) { + await videoCalls[callId].initiatorConsumerVideo.resume(); + await videoCalls[callId].initiatorConsumerAudio.resume(); + } else { + await videoCalls[callId].receiverConsumerVideo.resume(); + await videoCalls[callId].receiverConsumerAudio.resume(); + } + // await videoCalls[callId].consumerVideo.resume(); + // await videoCalls[callId].consumerAudio.resume(); } catch (error) { console.log(`ERROR | consumer-resume | callId ${socketDetails[socket.id]} | ${error.message}`); } }); }); -const consumeVideo = async (callId, rtpCapabilities) => { - videoCalls[callId].consumerVideo = await videoCalls[callId].consumerTransport.consume({ - producerId: videoCalls[callId].producerVideo.id, - rtpCapabilities, - paused: true, - }); +const consumeVideo = async (callId, socketId, rtpCapabilities) => { - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose - videoCalls[callId].consumerVideo.on('transportclose', () => { - const callId = socketDetails[socket.id]; - console.log('transport close from consumer', callId); - closeCall(callId); - }); + if(isInitiator(callId, socketId)) { + videoCalls[callId].initiatorConsumerVideo = await videoCalls[callId].initiatorConsumerTransport.consume({ + producerId: videoCalls[callId].receiverVideoProducer.id, + rtpCapabilities, + paused: true, + }); + + // videoCalls[callId].consumerVideo = await videoCalls[callId].consumerTransport.consume({ + // producerId: videoCalls[callId].producerVideo.id, + // rtpCapabilities, + // paused: true, + // }); - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose - videoCalls[callId].consumerVideo.on('producerclose', () => { - const callId = socketDetails[socket.id]; - console.log('producer of consumer closed', callId); - closeCall(callId); - }); + // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose + videoCalls[callId].initiatorConsumerVideo.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport close from consumer', callId); + closeCall(callId); + }); - return { - id: videoCalls[callId].consumerVideo.id, - producerId: videoCalls[callId].producerVideo.id, - kind: 'video', - rtpParameters: videoCalls[callId].consumerVideo.rtpParameters, + // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose + // videoCalls[callId].consumerVideo.on('transportclose', () => { + // const callId = socketDetails[socket.id]; + // console.log('transport close from consumer', callId); + // closeCall(callId); + // }); + + // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose + videoCalls[callId].initiatorConsumerVideo.on('producerclose', () => { + const callId = socketDetails[socket.id]; + console.log('producer of consumer closed', callId); + closeCall(callId); + }); + + // // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose + // videoCalls[callId].consumerVideo.on('producerclose', () => { + // const callId = socketDetails[socket.id]; + // console.log('producer of consumer closed', callId); + // closeCall(callId); + // }); + + return { + id: videoCalls[callId].initiatorConsumerVideo.id, + producerId: videoCalls[callId].receiverVideoProducer.id, + kind: 'video', + rtpParameters: videoCalls[callId].initiatorConsumerVideo.rtpParameters, + } + // return { + // id: videoCalls[callId].consumerVideo.id, + // producerId: videoCalls[callId].producerVideo.id, + // kind: 'video', + // rtpParameters: videoCalls[callId].consumerVideo.rtpParameters, + // } + } else { + videoCalls[callId].receiverConsumerVideo = await videoCalls[callId].receiverConsumerTransport.consume({ + producerId: videoCalls[callId].initiatorVideoProducer.id, + rtpCapabilities, + paused: true, + }); + + videoCalls[callId].receiverConsumerVideo.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport close from consumer', callId); + closeCall(callId); + }); + + videoCalls[callId].receiverConsumerVideo.on('producerclose', () => { + const callId = socketDetails[socket.id]; + console.log('producer of consumer closed', callId); + closeCall(callId); + }); + + return { + id: videoCalls[callId].receiverConsumerVideo.id, + producerId: videoCalls[callId].initiatorVideoProducer.id, + kind: 'video', + rtpParameters: videoCalls[callId].receiverConsumerVideo.rtpParameters, + } } } -const consumeAudio = async (callId, rtpCapabilities) => { - videoCalls[callId].consumerAudio = await videoCalls[callId].consumerTransport.consume({ - producerId: videoCalls[callId].producerAudio.id, - rtpCapabilities, - paused: true, - }); +const consumeAudio = async (callId, socketId, rtpCapabilities) => { + if(isInitiator(callId, socketId)) { + videoCalls[callId].initiatorConsumerAudio = await videoCalls[callId].initiatorConsumerTransport.consume({ + producerId: videoCalls[callId].receiverAudioProducer.id, + rtpCapabilities, + paused: true, + }); - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose - videoCalls[callId].consumerAudio.on('transportclose', () => { - const callId = socketDetails[socket.id]; - console.log('transport close from consumer', callId); - closeCall(callId); - }); + // videoCalls[callId].consumerAudio = await videoCalls[callId].consumerTransport.consume({ + // producerId: videoCalls[callId].producerAudio.id, + // rtpCapabilities, + // paused: true, + // }); - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose - videoCalls[callId].consumerAudio.on('producerclose', () => { - const callId = socketDetails[socket.id]; - console.log('producer of consumer closed', callId); - closeCall(callId); - }); - return { - id: videoCalls[callId].consumerAudio.id, - producerId: videoCalls[callId].producerAudio.id, - kind: 'audio', - rtpParameters: videoCalls[callId].consumerAudio.rtpParameters, + // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose + videoCalls[callId].initiatorConsumerAudio.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport close from consumer', callId); + closeCall(callId); + }); + + // // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose + // videoCalls[callId].consumerAudio.on('transportclose', () => { + // const callId = socketDetails[socket.id]; + // console.log('transport close from consumer', callId); + // closeCall(callId); + // }); + + // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose + videoCalls[callId].initiatorConsumerAudio.on('producerclose', () => { + const callId = socketDetails[socket.id]; + console.log('producer of consumer closed', callId); + closeCall(callId); + }); + // // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose + // videoCalls[callId].consumerAudio.on('producerclose', () => { + // const callId = socketDetails[socket.id]; + // console.log('producer of consumer closed', callId); + // closeCall(callId); + // }); + + return { + id: videoCalls[callId].initiatorConsumerAudio.id, + producerId: videoCalls[callId].receiverAudioProducer.id, + kind: 'audio', + rtpParameters: videoCalls[callId].initiatorConsumerAudio.rtpParameters, + } + } else { + videoCalls[callId].receiverConsumerAudio = await videoCalls[callId].receiverConsumerTransport.consume({ + producerId: videoCalls[callId].initiatorAudioProducer.id, + rtpCapabilities, + paused: true, + }); + + videoCalls[callId].receiverConsumerAudio.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport close from consumer', callId); + closeCall(callId); + }); + + videoCalls[callId].receiverConsumerAudio.on('producerclose', () => { + const callId = socketDetails[socket.id]; + console.log('producer of consumer closed', callId); + closeCall(callId); + }); + + return { + id: videoCalls[callId].receiverConsumerAudio.id, + producerId: videoCalls[callId].initiatorAudioProducer.id, + kind: 'audio', + rtpParameters: videoCalls[callId].receiverConsumerAudio.rtpParameters, + } } } -- 2.37.1 From d1eb7afc3a8ab1697b0a7d584ff49b38a566b50e Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Wed, 14 Dec 2022 10:15:34 +0200 Subject: [PATCH 05/57] Added logs on createRoom on videoCalls --- app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app.js b/app.js index 4df1e47..e25d00d 100644 --- a/app.js +++ b/app.js @@ -214,6 +214,7 @@ peers.on('connection', async socket => { console.log(`[createRoom] missing callId ${callId}`); } console.log('🔴 isInitiator(callId, socket.id)', isInitiator(callId, socket.id)); + console.log('🟩 videoCalls[callId]', JSON.stringify(videoCalls[callId])); } catch (error) { console.log(`ERROR | createRoom | callId ${callId} | ${error.message}`); } finally { -- 2.37.1 From d324528d5290587f5090a21c5a0f2554b6796607 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Wed, 14 Dec 2022 11:05:40 +0200 Subject: [PATCH 06/57] Added logs on transport-produce --- app.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/app.js b/app.js index e25d00d..4a6fb98 100644 --- a/app.js +++ b/app.js @@ -297,15 +297,16 @@ peers.on('connection', async socket => { */ socket.on('transport-produce', async ({ kind, rtpParameters, appData }, callback) => { try { - const callId = socketDetails[socket.id]; - if (typeof rtpParameters === 'string') rtpParameters = JSON.parse(rtpParameters); - - console.log(`[transport-produce] kind: ${kind} | socket.id: ${socket.id} | callId: ${callId}`); - console.log('kind', kind); - console.log('rtpParameters', rtpParameters); - + const callId = socketDetails[socket.id]; + if (typeof rtpParameters === 'string') rtpParameters = JSON.parse(rtpParameters); + + console.log(`[transport-produce] kind: ${kind} | socket.id: ${socket.id} | callId: ${callId}`); + console.log('kind', kind); + console.log('rtpParameters', rtpParameters); + console.log('isInitiator()', isInitiator()); if (kind === 'video') { if (!isInitiator()) { + console.log('----------1'); videoCalls[callId].receiverVideoProducer = await videoCalls[callId].receiverProducerTransport.produce({ kind, rtpParameters, @@ -337,6 +338,7 @@ peers.on('connection', async socket => { // id: videoCalls[callId].producerVideo.id // }); } else { + console.log('----------2'); videoCalls[callId].initiatorVideoProducer = await videoCalls[callId].initiatorProducerTransport.produce({ kind, rtpParameters, -- 2.37.1 From f8fcfb316569ebff27e5781c6ff4f72c1b37bbf6 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Wed, 14 Dec 2022 11:33:16 +0200 Subject: [PATCH 07/57] Fix isInitiator in transport-produce --- app.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 4a6fb98..a64718c 100644 --- a/app.js +++ b/app.js @@ -303,9 +303,9 @@ peers.on('connection', async socket => { console.log(`[transport-produce] kind: ${kind} | socket.id: ${socket.id} | callId: ${callId}`); console.log('kind', kind); console.log('rtpParameters', rtpParameters); - console.log('isInitiator()', isInitiator()); + console.log('isInitiator()', isInitiator(callId, socket.id)); if (kind === 'video') { - if (!isInitiator()) { + if (!isInitiator(callId, socket.id)) { console.log('----------1'); videoCalls[callId].receiverVideoProducer = await videoCalls[callId].receiverProducerTransport.produce({ kind, @@ -357,7 +357,7 @@ peers.on('connection', async socket => { }); } } else if (kind === 'audio') { - if (!isInitiator()) { + if (!isInitiator(callId, socket.id)) { videoCalls[callId].receiverAudioProducer = await videoCalls[callId].receiverProducerTransport.produce({ kind, rtpParameters, -- 2.37.1 From c1fe524ec7aa1798f8df74abd3032320cfd2d0bc Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Wed, 14 Dec 2022 11:57:19 +0200 Subject: [PATCH 08/57] LINXD-2270: Remove commented code; Update comments/logs --- app.js | 117 ++++++--------------------------------------------------- 1 file changed, 12 insertions(+), 105 deletions(-) diff --git a/app.js b/app.js index a64718c..9b7d365 100644 --- a/app.js +++ b/app.js @@ -52,13 +52,8 @@ const httpsServer = https.createServer(options, app); const io = new Server(httpsServer, { allowEIO3: true, - origins: ["*:*"], - // allowRequest: (req, next) => { - // console.log('req', req); - // next(null, true) - // } + origins: ["*:*"] }); -// const io = new Server(server, { origins: '*:*', allowEIO3: true }); httpsServer.listen(process.env.PORT, () => { console.log('Video server listening on port:', process.env.PORT); @@ -213,8 +208,6 @@ peers.on('connection', async socket => { } else { console.log(`[createRoom] missing callId ${callId}`); } - console.log('🔴 isInitiator(callId, socket.id)', isInitiator(callId, socket.id)); - console.log('🟩 videoCalls[callId]', JSON.stringify(videoCalls[callId])); } catch (error) { console.log(`ERROR | createRoom | callId ${callId} | ${error.message}`); } finally { @@ -224,7 +217,7 @@ peers.on('connection', async socket => { /* - Client emits a request to create server side Transport - - Depending on the sender, producerTransport or consumerTransport is created on that router + - Depending on the sender, a producer or consumer is created is created on that router - It will return parameters, these are required for the client to create the RecvTransport from the client. - If the client is producer(sender: true) then it will use parameters for device.createSendTransport(params) @@ -243,25 +236,12 @@ peers.on('connection', async socket => { console.log(`producerTransport has already been defined | callId ${callId}`); callback(null); } - - // if (!videoCalls[callId].producerTransport) { - // videoCalls[callId].producerTransport = 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)) { videoCalls[callId].receiverConsumerTransport = await createWebRtcTransportLayer(callId, callback); } else if(!videoCalls[callId].initiatorConsumerTransport && isInitiator(callId, socket.id)) { videoCalls[callId].initiatorConsumerTransport = await createWebRtcTransportLayer(callId, callback); } - // if (!videoCalls[callId].consumerTransport) { - // videoCalls[callId].consumerTransport = await createWebRtcTransportLayer(callId, callback); - // } else { - // console.log(`consumerTransport has already been defined | callId ${callId}`); - // callback(null); - // } } } catch (error) { console.log(`ERROR | createWebRtcTransport | callId ${socketDetails[socket.id]} | sender ${sender} | ${error.message}`); @@ -284,38 +264,29 @@ peers.on('connection', async socket => { } else { await videoCalls[callId].initiatorProducerTransport.connect({ dtlsParameters }); } - // await videoCalls[callId].producerTransport.connect({ dtlsParameters }); } catch (error) { console.log(`ERROR | transport-connect | callId ${socketDetails[socket.id]} | ${error.message}`); } }); /* - - The event sent by the client (PRODUCER) after successfully connecting to producerTransport - - For the router with the id callId, we make produce on producerTransport + - The event sent by the client (PRODUCER) after successfully connecting to receiverProducerTransport/initiatorProducerTransport + - For the router with the id callId, we make produce on receiverProducerTransport/initiatorProducerTransport - Create the handler on producer at the 'transportclose' event */ - socket.on('transport-produce', async ({ kind, rtpParameters, appData }, callback) => { - try { - const callId = socketDetails[socket.id]; - if (typeof rtpParameters === 'string') rtpParameters = JSON.parse(rtpParameters); - - console.log(`[transport-produce] kind: ${kind} | socket.id: ${socket.id} | callId: ${callId}`); - console.log('kind', kind); - console.log('rtpParameters', rtpParameters); - console.log('isInitiator()', isInitiator(callId, socket.id)); + socket.on('transport-produce', async ({ kind, rtpParameters, appData }, callback) => { + try { + const callId = socketDetails[socket.id]; + if (typeof rtpParameters === 'string') rtpParameters = JSON.parse(rtpParameters); + + console.log(`[transport-produce] kind: ${kind} | socket.id: ${socket.id} | callId: ${callId}`); if (kind === 'video') { if (!isInitiator(callId, socket.id)) { - console.log('----------1'); videoCalls[callId].receiverVideoProducer = await videoCalls[callId].receiverProducerTransport.produce({ kind, rtpParameters, }); - // videoCalls[callId].producerVideo = await videoCalls[callId].producerTransport.produce({ - // kind, - // rtpParameters, - // }); - + console.log(`[transport-produce] receiverVideoProducer Producer ID: ${videoCalls[callId].receiverVideoProducer.id} | kind: ${videoCalls[callId].receiverVideoProducer.kind}`); videoCalls[callId].receiverVideoProducer.on('transportclose', () => { @@ -323,27 +294,17 @@ peers.on('connection', async socket => { console.log('transport for this producer closed', callId) closeCall(callId); }); - // videoCalls[callId].producerVideo.on('transportclose', () => { - // const callId = socketDetails[socket.id]; - // console.log('transport for this producer closed', callId) - // closeCall(callId); - // }); // Send back to the client the Producer's id callback && callback({ id: videoCalls[callId].receiverVideoProducer.id }); - // // Send back to the client the Producer's id - // callback && callback({ - // id: videoCalls[callId].producerVideo.id - // }); } else { - console.log('----------2'); videoCalls[callId].initiatorVideoProducer = await videoCalls[callId].initiatorProducerTransport.produce({ kind, rtpParameters, }); - + console.log(`[transport-produce] initiatorVideoProducer Producer ID: ${videoCalls[callId].initiatorVideoProducer.id} | kind: ${videoCalls[callId].initiatorVideoProducer.kind}`); videoCalls[callId].initiatorVideoProducer.on('transportclose', () => { @@ -438,19 +399,10 @@ peers.on('connection', async socket => { producerId: videoCalls[callId].receiverVideoProducer.id, rtpCapabilities }); - // const canConsumeVideo = !!videoCalls[callId].producerVideo && !!videoCalls[callId].router.canConsume({ - // producerId: videoCalls[callId].producerVideo.id, - // rtpCapabilities - // }) - canConsumeAudio = !!videoCalls[callId].receiverAudioProducer && !!videoCalls[callId].router.canConsume({ producerId: videoCalls[callId].receiverAudioProducer.id, rtpCapabilities }); - // const canConsumeAudio = !!videoCalls[callId].producerAudio && !!videoCalls[callId].router.canConsume({ - // producerId: videoCalls[callId].producerAudio.id, - // rtpCapabilities - // }) } else { canConsumeVideo = !!videoCalls[callId].initiatorVideoProducer && !!videoCalls[callId].router.canConsume({ @@ -518,12 +470,6 @@ const consumeVideo = async (callId, socketId, rtpCapabilities) => { rtpCapabilities, paused: true, }); - - // videoCalls[callId].consumerVideo = await videoCalls[callId].consumerTransport.consume({ - // producerId: videoCalls[callId].producerVideo.id, - // rtpCapabilities, - // paused: true, - // }); // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose videoCalls[callId].initiatorConsumerVideo.on('transportclose', () => { @@ -532,13 +478,6 @@ const consumeVideo = async (callId, socketId, rtpCapabilities) => { closeCall(callId); }); - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose - // videoCalls[callId].consumerVideo.on('transportclose', () => { - // const callId = socketDetails[socket.id]; - // console.log('transport close from consumer', callId); - // closeCall(callId); - // }); - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose videoCalls[callId].initiatorConsumerVideo.on('producerclose', () => { const callId = socketDetails[socket.id]; @@ -546,25 +485,12 @@ const consumeVideo = async (callId, socketId, rtpCapabilities) => { closeCall(callId); }); - // // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose - // videoCalls[callId].consumerVideo.on('producerclose', () => { - // const callId = socketDetails[socket.id]; - // console.log('producer of consumer closed', callId); - // closeCall(callId); - // }); - return { id: videoCalls[callId].initiatorConsumerVideo.id, producerId: videoCalls[callId].receiverVideoProducer.id, kind: 'video', rtpParameters: videoCalls[callId].initiatorConsumerVideo.rtpParameters, } - // return { - // id: videoCalls[callId].consumerVideo.id, - // producerId: videoCalls[callId].producerVideo.id, - // kind: 'video', - // rtpParameters: videoCalls[callId].consumerVideo.rtpParameters, - // } } else { videoCalls[callId].receiverConsumerVideo = await videoCalls[callId].receiverConsumerTransport.consume({ producerId: videoCalls[callId].initiatorVideoProducer.id, @@ -601,12 +527,6 @@ const consumeAudio = async (callId, socketId, rtpCapabilities) => { paused: true, }); - // videoCalls[callId].consumerAudio = await videoCalls[callId].consumerTransport.consume({ - // producerId: videoCalls[callId].producerAudio.id, - // rtpCapabilities, - // paused: true, - // }); - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose videoCalls[callId].initiatorConsumerAudio.on('transportclose', () => { const callId = socketDetails[socket.id]; @@ -614,25 +534,12 @@ const consumeAudio = async (callId, socketId, rtpCapabilities) => { closeCall(callId); }); - // // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose - // videoCalls[callId].consumerAudio.on('transportclose', () => { - // const callId = socketDetails[socket.id]; - // console.log('transport close from consumer', callId); - // closeCall(callId); - // }); - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose videoCalls[callId].initiatorConsumerAudio.on('producerclose', () => { const callId = socketDetails[socket.id]; console.log('producer of consumer closed', callId); closeCall(callId); }); - // // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose - // videoCalls[callId].consumerAudio.on('producerclose', () => { - // const callId = socketDetails[socket.id]; - // console.log('producer of consumer closed', callId); - // closeCall(callId); - // }); return { id: videoCalls[callId].initiatorConsumerAudio.id, -- 2.37.1 From 4b0c06e0b0d3eb0e008b00186d8e8ad1459f0da9 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 02:02:38 +0200 Subject: [PATCH 09/57] Added socket id to createWebRtcTransport --- app.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index 9b7d365..7934240 100644 --- a/app.js +++ b/app.js @@ -226,7 +226,7 @@ peers.on('connection', async socket => { socket.on('createWebRtcTransport', async ({ sender }, callback) => { try { const callId = socketDetails[socket.id]; - console.log(`[createWebRtcTransport] sender ${sender} | callId ${callId}`); + console.log(`[createWebRtcTransport] socket ${socket.id} | sender ${sender} | callId ${callId}`); if (sender) { if(!videoCalls[callId].receiverProducerTransport && !isInitiator(callId, socket.id)) { videoCalls[callId].receiverProducerTransport = await createWebRtcTransportLayer(callId, callback); @@ -258,7 +258,7 @@ peers.on('connection', async socket => { const callId = socketDetails[socket.id]; if (typeof dtlsParameters === 'string') dtlsParameters = JSON.parse(dtlsParameters); - console.log(`[transport-connect] socket.id ${socket.id} | callId ${callId}`); + console.log(`[transport-connect] socket ${socket.id} | callId ${callId}`); if (!isInitiator(callId, socket.id)) { await videoCalls[callId].receiverProducerTransport.connect({ dtlsParameters }); } else { @@ -279,7 +279,7 @@ peers.on('connection', async socket => { const callId = socketDetails[socket.id]; if (typeof rtpParameters === 'string') rtpParameters = JSON.parse(rtpParameters); - console.log(`[transport-produce] kind: ${kind} | socket.id: ${socket.id} | callId: ${callId}`); + console.log(`[transport-produce] kind: ${kind} | socket: ${socket.id} | callId: ${callId}`); if (kind === 'video') { if (!isInitiator(callId, socket.id)) { videoCalls[callId].receiverVideoProducer = await videoCalls[callId].receiverProducerTransport.produce({ @@ -368,7 +368,7 @@ peers.on('connection', async socket => { socket.on('transport-recv-connect', async ({ dtlsParameters }) => { try { const callId = socketDetails[socket.id]; - console.log(`[transport-recv-connect] socket.id ${socket.id} | callId ${callId}`); + console.log(`[transport-recv-connect] socket ${socket.id} | callId ${callId}`); // await videoCalls[callId].consumerTransport.connect({ dtlsParameters }); if(!isInitiator(callId, socket.id)) { await videoCalls[callId].receiverConsumerTransport.connect({ dtlsParameters }); -- 2.37.1 From acd6025f591620fc7aa2378ac3234b62f7717356 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 02:07:01 +0200 Subject: [PATCH 10/57] Update --- app.js | 5 ++++- public/index.js | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/app.js b/app.js index 7934240..d1f07e9 100644 --- a/app.js +++ b/app.js @@ -223,8 +223,11 @@ peers.on('connection', async socket => { - If the client is producer(sender: true) then it will use parameters for device.createSendTransport(params) - If the client is a consumer(sender: false) then it will use parameters for device.createRecvTransport(params) */ - socket.on('createWebRtcTransport', async ({ sender }, callback) => { + socket.on('createWebRtcTransport', async (data, callback) => { try { + console.log('createWebRtcTransport-----------------------data', data); + const { sender } = data + console.log('createWebRtcTransport-----------------------sender', sender); const callId = socketDetails[socket.id]; console.log(`[createWebRtcTransport] socket ${socket.id} | sender ${sender} | callId ${callId}`); if (sender) { diff --git a/public/index.js b/public/index.js index 86b9d90..9233a51 100644 --- a/public/index.js +++ b/public/index.js @@ -222,7 +222,7 @@ const createSendTransport = () => { console.log('[createSendTransport'); // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true - socket.emit('createWebRtcTransport', { sender: true, callId }, (value) => { + socket.emit('createWebRtcTransport', { sender: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); -- 2.37.1 From d29def364c929a45d52d7935a17b826e980d93c7 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 02:10:10 +0200 Subject: [PATCH 11/57] Update --- public/bundle.js | 3 ++- public/index.js | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/public/bundle.js b/public/bundle.js index 82ddb74..3559de4 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20580,7 +20580,8 @@ const createSendTransport = () => { console.log('[createSendTransport'); // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true - socket.emit('createWebRtcTransport', { sender: true, callId }, (value) => { + console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); + socket.emit('createWebRtcTransport', { sender: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); diff --git a/public/index.js b/public/index.js index 9233a51..042f327 100644 --- a/public/index.js +++ b/public/index.js @@ -222,6 +222,7 @@ const createSendTransport = () => { console.log('[createSendTransport'); // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true + console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); socket.emit('createWebRtcTransport', { sender: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); -- 2.37.1 From 0a6985f9b9173bb1c9d6034a94d9bc8ea8b9fcc0 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 02:12:22 +0200 Subject: [PATCH 12/57] Update --- public/bundle.js | 2 +- public/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 3559de4..c1cad51 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20581,7 +20581,7 @@ const createSendTransport = () => { // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); - socket.emit('createWebRtcTransport', { sender: true }, (value) => { + socket.emit('createWebRtcTransport', { sender: 'true' }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); diff --git a/public/index.js b/public/index.js index 042f327..cad9d46 100644 --- a/public/index.js +++ b/public/index.js @@ -223,7 +223,7 @@ const createSendTransport = () => { // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); - socket.emit('createWebRtcTransport', { sender: true }, (value) => { + socket.emit('createWebRtcTransport', { sender: 'true' }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); -- 2.37.1 From 44c8d9b8eebcb2ee11eabd1d7582178d0cd77953 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 02:15:26 +0200 Subject: [PATCH 13/57] Update --- public/bundle.js | 2 +- public/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index c1cad51..b512efb 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20581,7 +20581,7 @@ const createSendTransport = () => { // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); - socket.emit('createWebRtcTransport', { sender: 'true' }, (value) => { + socket.emit('createWebRtcTransport', { sender: 'true', test: '123' }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); diff --git a/public/index.js b/public/index.js index cad9d46..36ad539 100644 --- a/public/index.js +++ b/public/index.js @@ -223,7 +223,7 @@ const createSendTransport = () => { // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); - socket.emit('createWebRtcTransport', { sender: 'true' }, (value) => { + socket.emit('createWebRtcTransport', { sender: 'true', test: '123' }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); -- 2.37.1 From 5687569bc10581ee07bb67b925f361bbdd48631e Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 10:47:13 +0200 Subject: [PATCH 14/57] Update --- public/bundle.js | 2 +- public/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index b512efb..320a832 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20581,7 +20581,7 @@ const createSendTransport = () => { // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); - socket.emit('createWebRtcTransport', { sender: 'true', test: '123' }, (value) => { + socket.emit('createWebRtcTransport', { sender: 'true123', test: '123', sender1: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); diff --git a/public/index.js b/public/index.js index 36ad539..669feee 100644 --- a/public/index.js +++ b/public/index.js @@ -223,7 +223,7 @@ const createSendTransport = () => { // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); - socket.emit('createWebRtcTransport', { sender: 'true', test: '123' }, (value) => { + socket.emit('createWebRtcTransport', { sender: 'true123', test: '123', sender1: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); -- 2.37.1 From bf6522166468f891ffbb104895fa9d6a4493d137 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 10:54:25 +0200 Subject: [PATCH 15/57] Update --- app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app.js b/app.js index d1f07e9..a03e3b0 100644 --- a/app.js +++ b/app.js @@ -225,6 +225,7 @@ peers.on('connection', async socket => { */ socket.on('createWebRtcTransport', async (data, callback) => { try { + console.log('🟥 WARNING', JSON.stringify(data)); console.log('createWebRtcTransport-----------------------data', data); const { sender } = data console.log('createWebRtcTransport-----------------------sender', sender); -- 2.37.1 From 5abcddc115b3294ecd106ad3d55bd7d18a7d4677 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 11:02:08 +0200 Subject: [PATCH 16/57] Update --- app.js | 2 +- public/bundle.js | 3 ++- public/index.js | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index a03e3b0..4054eed 100644 --- a/app.js +++ b/app.js @@ -223,7 +223,7 @@ peers.on('connection', async socket => { - If the client is producer(sender: true) then it will use parameters for device.createSendTransport(params) - If the client is a consumer(sender: false) then it will use parameters for device.createRecvTransport(params) */ - socket.on('createWebRtcTransport', async (data, callback) => { + socket.on('createWebRtcTransport1', async (data, callback) => { try { console.log('🟥 WARNING', JSON.stringify(data)); console.log('createWebRtcTransport-----------------------data', data); diff --git a/public/bundle.js b/public/bundle.js index 320a832..9fffb31 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20581,7 +20581,8 @@ const createSendTransport = () => { // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); - socket.emit('createWebRtcTransport', { sender: 'true123', test: '123', sender1: true }, (value) => { + // const data1 = { sender: 'true123', test: '123', sender1: true }; + socket.emit('createWebRtcTransport1', { sender: 'true123', test: '123', sender1: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); diff --git a/public/index.js b/public/index.js index 669feee..3d4c7e4 100644 --- a/public/index.js +++ b/public/index.js @@ -223,7 +223,8 @@ const createSendTransport = () => { // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); - socket.emit('createWebRtcTransport', { sender: 'true123', test: '123', sender1: true }, (value) => { + // const data1 = { sender: 'true123', test: '123', sender1: true }; + socket.emit('createWebRtcTransport1', { sender: 'true123', test: '123', sender1: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); -- 2.37.1 From dc9c91fccc86f160e2a36ae3780f73b0c2c1b50b Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 11:10:30 +0200 Subject: [PATCH 17/57] Update --- app.js | 2 +- public/bundle.js | 2 +- public/index.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 4054eed..a03e3b0 100644 --- a/app.js +++ b/app.js @@ -223,7 +223,7 @@ peers.on('connection', async socket => { - If the client is producer(sender: true) then it will use parameters for device.createSendTransport(params) - If the client is a consumer(sender: false) then it will use parameters for device.createRecvTransport(params) */ - socket.on('createWebRtcTransport1', async (data, callback) => { + socket.on('createWebRtcTransport', async (data, callback) => { try { console.log('🟥 WARNING', JSON.stringify(data)); console.log('createWebRtcTransport-----------------------data', data); diff --git a/public/bundle.js b/public/bundle.js index 9fffb31..3328d11 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20582,7 +20582,7 @@ const createSendTransport = () => { // this is a call from Producer, so sender = true console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); // const data1 = { sender: 'true123', test: '123', sender1: true }; - socket.emit('createWebRtcTransport1', { sender: 'true123', test: '123', sender1: true }, (value) => { + socket.emit('createWebRtcTransport', { sender: 'true123', test: '123', sender1: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); diff --git a/public/index.js b/public/index.js index 3d4c7e4..9ee21ad 100644 --- a/public/index.js +++ b/public/index.js @@ -224,7 +224,7 @@ const createSendTransport = () => { // this is a call from Producer, so sender = true console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); // const data1 = { sender: 'true123', test: '123', sender1: true }; - socket.emit('createWebRtcTransport1', { sender: 'true123', test: '123', sender1: true }, (value) => { + socket.emit('createWebRtcTransport', { sender: 'true123', test: '123', sender1: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); -- 2.37.1 From 5ba1f765859316ee4d89d05d000351512c3d12ae Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 11:23:10 +0200 Subject: [PATCH 18/57] Update --- app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.js b/app.js index a03e3b0..f9d3a52 100644 --- a/app.js +++ b/app.js @@ -226,7 +226,7 @@ peers.on('connection', async socket => { socket.on('createWebRtcTransport', async (data, callback) => { try { console.log('🟥 WARNING', JSON.stringify(data)); - console.log('createWebRtcTransport-----------------------data', data); + console.log('createWebRtcTransport-----------------------data', data, 'socketid', socket.id); const { sender } = data console.log('createWebRtcTransport-----------------------sender', sender); const callId = socketDetails[socket.id]; -- 2.37.1 From f95014218814cda5abebd74987972ec62590a2d7 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 11:28:57 +0200 Subject: [PATCH 19/57] Update --- public/bundle.js | 11 +++++++---- public/index.js | 11 +++++++---- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 3328d11..21ec9b0 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20694,10 +20694,13 @@ const connectSendTransport = async () => { }; console.log('SEND answer', answer); - hub.emit( - 'video', - JSON.stringify(answer) - ); + setTimeout(() => { + console.log(`🟩 EMIT`); + hub.emit( + 'video', + JSON.stringify(answer) + ); + }, 10000); // Enable Close call button const closeCallBtn = document.getElementById('btnCloseCall'); diff --git a/public/index.js b/public/index.js index 9ee21ad..c161a23 100644 --- a/public/index.js +++ b/public/index.js @@ -336,10 +336,13 @@ const connectSendTransport = async () => { }; console.log('SEND answer', answer); - hub.emit( - 'video', - JSON.stringify(answer) - ); + setTimeout(() => { + console.log(`🟩 EMIT`); + hub.emit( + 'video', + JSON.stringify(answer) + ); + }, 10000); // Enable Close call button const closeCallBtn = document.getElementById('btnCloseCall'); -- 2.37.1 From e0bc4642cbc7f0b6d55d0685b07da100fa558ce4 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 11:31:26 +0200 Subject: [PATCH 20/57] Update --- public/bundle.js | 2 +- public/config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 21ec9b0..ae7d0d2 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20353,7 +20353,7 @@ module.exports = yeast; },{}],94:[function(require,module,exports){ module.exports = { hubAddress: 'https://hub.dev.linx.safemobile.com/', - mediasoupAddress: 'https://video.safemobile.org', + mediasoupAddress: 'https://testing.video.safemobile.org', } },{}],95:[function(require,module,exports){ const io = require('socket.io-client') diff --git a/public/config.js b/public/config.js index fa3612f..f631fc8 100644 --- a/public/config.js +++ b/public/config.js @@ -1,4 +1,4 @@ module.exports = { hubAddress: 'https://hub.dev.linx.safemobile.com/', - mediasoupAddress: 'https://video.safemobile.org', + mediasoupAddress: 'https://testing.video.safemobile.org', } \ No newline at end of file -- 2.37.1 From 9634aac15380ab240a2f3e962e9df158c9e2c105 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 11:59:10 +0200 Subject: [PATCH 21/57] Update --- app.js | 7 ++----- public/bundle.js | 4 +--- public/index.js | 4 +--- 3 files changed, 4 insertions(+), 11 deletions(-) diff --git a/app.js b/app.js index f9d3a52..533110a 100644 --- a/app.js +++ b/app.js @@ -223,12 +223,9 @@ peers.on('connection', async socket => { - If the client is producer(sender: true) then it will use parameters for device.createSendTransport(params) - If the client is a consumer(sender: false) then it will use parameters for device.createRecvTransport(params) */ - socket.on('createWebRtcTransport', async (data, callback) => { + socket.on('createWebRtcTransport', async ({ sender }, callback) => { try { - console.log('🟥 WARNING', JSON.stringify(data)); - console.log('createWebRtcTransport-----------------------data', data, 'socketid', socket.id); - const { sender } = data - console.log('createWebRtcTransport-----------------------sender', sender); + console.log('🟥', JSON.stringify(sender), socket.id); const callId = socketDetails[socket.id]; console.log(`[createWebRtcTransport] socket ${socket.id} | sender ${sender} | callId ${callId}`); if (sender) { diff --git a/public/bundle.js b/public/bundle.js index ae7d0d2..6617061 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20580,9 +20580,7 @@ const createSendTransport = () => { console.log('[createSendTransport'); // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true - console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); - // const data1 = { sender: 'true123', test: '123', sender1: true }; - socket.emit('createWebRtcTransport', { sender: 'true123', test: '123', sender1: true }, (value) => { + socket.emit('createWebRtcTransport', { sender: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); diff --git a/public/index.js b/public/index.js index c161a23..8af28c4 100644 --- a/public/index.js +++ b/public/index.js @@ -222,9 +222,7 @@ const createSendTransport = () => { console.log('[createSendTransport'); // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true - console.log('EMIT sender: true!!!!!!!!!!!!!!!!!!!!'); - // const data1 = { sender: 'true123', test: '123', sender1: true }; - socket.emit('createWebRtcTransport', { sender: 'true123', test: '123', sender1: true }, (value) => { + socket.emit('createWebRtcTransport', { sender: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); -- 2.37.1 From 449724537eaa5fcfd0909a6b22ee82a42ccad8c9 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 12:01:20 +0200 Subject: [PATCH 22/57] Update --- public/bundle.js | 11 ++++------- public/index.js | 11 ++++------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 6617061..a6eb0ec 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20692,13 +20692,10 @@ const connectSendTransport = async () => { }; console.log('SEND answer', answer); - setTimeout(() => { - console.log(`🟩 EMIT`); - hub.emit( - 'video', - JSON.stringify(answer) - ); - }, 10000); + hub.emit( + 'video', + JSON.stringify(answer) + ); // Enable Close call button const closeCallBtn = document.getElementById('btnCloseCall'); diff --git a/public/index.js b/public/index.js index 8af28c4..9233a51 100644 --- a/public/index.js +++ b/public/index.js @@ -334,13 +334,10 @@ const connectSendTransport = async () => { }; console.log('SEND answer', answer); - setTimeout(() => { - console.log(`🟩 EMIT`); - hub.emit( - 'video', - JSON.stringify(answer) - ); - }, 10000); + hub.emit( + 'video', + JSON.stringify(answer) + ); // Enable Close call button const closeCallBtn = document.getElementById('btnCloseCall'); -- 2.37.1 From c174e92e3c70a429cc5c366814af1133f670c8b8 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 13:33:13 +0200 Subject: [PATCH 23/57] Update --- app.js | 2 +- public/bundle.js | 25 ++++++++++++++++++++++++- public/index.js | 25 ++++++++++++++++++++++++- 3 files changed, 49 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 533110a..4275835 100644 --- a/app.js +++ b/app.js @@ -225,7 +225,7 @@ peers.on('connection', async socket => { */ socket.on('createWebRtcTransport', async ({ sender }, callback) => { try { - console.log('🟥', JSON.stringify(sender), socket.id); + console.log('🟥', socket.id, JSON.stringify(sender)); const callId = socketDetails[socket.id]; console.log(`[createWebRtcTransport] socket ${socket.id} | sender ${sender} | callId ${callId}`); if (sender) { diff --git a/public/bundle.js b/public/bundle.js index a6eb0ec..62f84c4 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20811,8 +20811,31 @@ const closeCall = () => { resetCallSettings() } +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() + }) +} btnLocalVideo.addEventListener('click', getLocalStream) -btnRecvSendTransport.addEventListener('click', goConnect) +btnRecvSendTransport.addEventListener('click', consume) btnCloseCall.addEventListener('click', closeCall) },{"./config":94,"mediasoup-client":66,"socket.io-client":82}]},{},[95]); diff --git a/public/index.js b/public/index.js index 9233a51..4d3a530 100644 --- a/public/index.js +++ b/public/index.js @@ -453,7 +453,30 @@ const closeCall = () => { resetCallSettings() } +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() + }) +} btnLocalVideo.addEventListener('click', getLocalStream) -btnRecvSendTransport.addEventListener('click', goConnect) +btnRecvSendTransport.addEventListener('click', consume) btnCloseCall.addEventListener('click', closeCall) \ No newline at end of file -- 2.37.1 From b606a720303c5a7e03b28cf7cc53bbf00f581e87 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 13:43:55 +0200 Subject: [PATCH 24/57] Update --- public/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/index.js b/public/index.js index 4d3a530..ebe7f3c 100644 --- a/public/index.js +++ b/public/index.js @@ -410,6 +410,8 @@ const connectRecvTransport = async () => { return } + console.log(`[connectRecvTransport] consume params ${params}`); + // Then consume with the local consumer transport // which creates a consumer consumer = await consumerTransport.consume({ -- 2.37.1 From dafbc486ad727cc66e5263c6fbfd90084cdd972a Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 14:00:16 +0200 Subject: [PATCH 25/57] Update --- app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app.js b/app.js index 4275835..72605ab 100644 --- a/app.js +++ b/app.js @@ -390,9 +390,9 @@ peers.on('connection', async socket => { */ socket.on('consume', async ({ rtpCapabilities }, callback) => { try { - console.log(`[consume] rtpCapabilities: ${JSON.stringify(rtpCapabilities)}`); - const callId = socketDetails[socket.id]; + console.log(`[consume] socket ${socket.id} | callId ${callId} | rtpCapabilities: ${JSON.stringify(rtpCapabilities)}`); + console.log('[consume] callId', callId); let canConsumeVideo, canConsumeAudio; if (isInitiator(callId, socket.id)) { -- 2.37.1 From fe792f93b64a545ac3e4791e3831855341175a4a Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 14:10:07 +0200 Subject: [PATCH 26/57] Update --- public/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/index.js b/public/index.js index ebe7f3c..3c26a29 100644 --- a/public/index.js +++ b/public/index.js @@ -405,10 +405,10 @@ const connectRecvTransport = async () => { rtpCapabilities: device.rtpCapabilities, callId }, async ({ params }) => { - if (params.error) { - console.log('Cannot Consume') - return - } + // if (params.error) { + // console.log('Cannot Consume') + // return + // } console.log(`[connectRecvTransport] consume params ${params}`); -- 2.37.1 From a31e646e2b16171f9e60dd6501f0075a1d54f3f9 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 14:10:26 +0200 Subject: [PATCH 27/57] Update --- public/bundle.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 62f84c4..dd777ae 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20763,10 +20763,12 @@ const connectRecvTransport = async () => { rtpCapabilities: device.rtpCapabilities, callId }, async ({ params }) => { - if (params.error) { - console.log('Cannot Consume') - return - } + // if (params.error) { + // console.log('Cannot Consume') + // return + // } + + console.log(`[connectRecvTransport] consume params ${params}`); // Then consume with the local consumer transport // which creates a consumer -- 2.37.1 From 2ddeb4baaa592d3c5ff2c6e3040729911154430d Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Fri, 16 Dec 2022 14:13:11 +0200 Subject: [PATCH 28/57] Update --- app.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app.js b/app.js index 72605ab..d705b63 100644 --- a/app.js +++ b/app.js @@ -428,6 +428,7 @@ peers.on('connection', async socket => { callback({ videoParams, audioParams }); } else if (!canConsumeVideo && canConsumeAudio) { const audioParams = await consumeAudio(callId, socket.id, rtpCapabilities) + console.log('-----------', { videoParams: null, audioParams }); callback({ videoParams: null, audioParams }); } else { console.log(`[consume] Can't consume | callId ${callId}`); -- 2.37.1 From 2fbb355fea7730f5904b14b0f98345e90bce5c98 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 11:19:51 +0200 Subject: [PATCH 29/57] Update --- app.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app.js b/app.js index d705b63..e4e130c 100644 --- a/app.js +++ b/app.js @@ -428,8 +428,9 @@ peers.on('connection', async socket => { callback({ videoParams, audioParams }); } else if (!canConsumeVideo && canConsumeAudio) { const audioParams = await consumeAudio(callId, socket.id, rtpCapabilities) - console.log('-----------', { videoParams: null, audioParams }); - callback({ videoParams: null, audioParams }); + const data = { videoParams: null, audioParams }; + console.log('-----------======= data', data); + callback(data); } else { console.log(`[consume] Can't consume | callId ${callId}`); callback(null); -- 2.37.1 From 2c375c01ea5d580cd708f3c9ffb35176873e66df Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 11:21:02 +0200 Subject: [PATCH 30/57] Update --- public/bundle.js | 37 +++++++++++++++++++------------------ public/index.js | 37 +++++++++++++++++++------------------ 2 files changed, 38 insertions(+), 36 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index dd777ae..8d5cf8a 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20762,32 +20762,33 @@ const connectRecvTransport = async () => { await socket.emit('consume', { rtpCapabilities: device.rtpCapabilities, callId - }, async ({ params }) => { + }, async (data) => { + console.log(`[consume] data ${data}`); // if (params.error) { // console.log('Cannot Consume') // return // } - console.log(`[connectRecvTransport] consume params ${params}`); + // console.log(`[connectRecvTransport] consume params ${params}`); - // Then consume with the local consumer transport - // which creates a consumer - consumer = await consumerTransport.consume({ - id: params.id, - producerId: params.producerId, - kind: params.kind, - rtpParameters: params.rtpParameters - }) + // // Then consume with the local consumer transport + // // which creates a consumer + // consumer = await consumerTransport.consume({ + // id: params.id, + // producerId: params.producerId, + // kind: params.kind, + // rtpParameters: params.rtpParameters + // }) - // destructure and retrieve the video track from the producer - const { track } = consumer + // // destructure and retrieve the video track from the producer + // const { track } = consumer - let stream = new MediaStream() - stream.addTrack(track) - // stream.removeTrack(track) - remoteVideo.srcObject = stream - socket.emit('consumer-resume') - console.log('consumer', consumer); + // let stream = new MediaStream() + // stream.addTrack(track) + // // stream.removeTrack(track) + // remoteVideo.srcObject = stream + // socket.emit('consumer-resume') + // console.log('consumer', consumer); }) } diff --git a/public/index.js b/public/index.js index 3c26a29..acf316f 100644 --- a/public/index.js +++ b/public/index.js @@ -404,32 +404,33 @@ const connectRecvTransport = async () => { await socket.emit('consume', { rtpCapabilities: device.rtpCapabilities, callId - }, async ({ params }) => { + }, async (data) => { + console.log(`[consume] data ${data}`); // if (params.error) { // console.log('Cannot Consume') // return // } - console.log(`[connectRecvTransport] consume params ${params}`); + // console.log(`[connectRecvTransport] consume params ${params}`); - // Then consume with the local consumer transport - // which creates a consumer - consumer = await consumerTransport.consume({ - id: params.id, - producerId: params.producerId, - kind: params.kind, - rtpParameters: params.rtpParameters - }) + // // Then consume with the local consumer transport + // // which creates a consumer + // consumer = await consumerTransport.consume({ + // id: params.id, + // producerId: params.producerId, + // kind: params.kind, + // rtpParameters: params.rtpParameters + // }) - // destructure and retrieve the video track from the producer - const { track } = consumer + // // destructure and retrieve the video track from the producer + // const { track } = consumer - let stream = new MediaStream() - stream.addTrack(track) - // stream.removeTrack(track) - remoteVideo.srcObject = stream - socket.emit('consumer-resume') - console.log('consumer', consumer); + // let stream = new MediaStream() + // stream.addTrack(track) + // // stream.removeTrack(track) + // remoteVideo.srcObject = stream + // socket.emit('consumer-resume') + // console.log('consumer', consumer); }) } -- 2.37.1 From dfa175d0c7132bcdc9b8e966367a495c57929a38 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 11:22:28 +0200 Subject: [PATCH 31/57] Update --- public/bundle.js | 2 +- public/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 8d5cf8a..8132287 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20763,7 +20763,7 @@ const connectRecvTransport = async () => { rtpCapabilities: device.rtpCapabilities, callId }, async (data) => { - console.log(`[consume] data ${data}`); + console.log(`[consume] data ${JSON.stringify(data)}`); // if (params.error) { // console.log('Cannot Consume') // return diff --git a/public/index.js b/public/index.js index acf316f..cb1541d 100644 --- a/public/index.js +++ b/public/index.js @@ -405,7 +405,7 @@ const connectRecvTransport = async () => { rtpCapabilities: device.rtpCapabilities, callId }, async (data) => { - console.log(`[consume] data ${data}`); + console.log(`[consume] data ${JSON.stringify(data)}`); // if (params.error) { // console.log('Cannot Consume') // return -- 2.37.1 From 782683c3e2fb3c39d3a06d579dea8f586cf3595b Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 11:24:19 +0200 Subject: [PATCH 32/57] Update --- public/bundle.js | 5 +++-- public/index.js | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 8132287..0882739 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20762,8 +20762,9 @@ const connectRecvTransport = async () => { await socket.emit('consume', { rtpCapabilities: device.rtpCapabilities, callId - }, async (data) => { - console.log(`[consume] data ${JSON.stringify(data)}`); + }, async ({videoParams, audioParams}) => { + console.log(`[consume] videoParams ${videoParams}`); + console.log(`[consume] audioParams ${audioParams}`); // if (params.error) { // console.log('Cannot Consume') // return diff --git a/public/index.js b/public/index.js index cb1541d..34ae630 100644 --- a/public/index.js +++ b/public/index.js @@ -404,8 +404,9 @@ const connectRecvTransport = async () => { await socket.emit('consume', { rtpCapabilities: device.rtpCapabilities, callId - }, async (data) => { - console.log(`[consume] data ${JSON.stringify(data)}`); + }, async ({videoParams, audioParams}) => { + console.log(`[consume] videoParams ${videoParams}`); + console.log(`[consume] audioParams ${audioParams}`); // if (params.error) { // console.log('Cannot Consume') // return -- 2.37.1 From 0731090b0e53c4fed048572d07323aa261b8770e Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 11:26:08 +0200 Subject: [PATCH 33/57] Update --- public/bundle.js | 42 ++++++++++++++++++++---------------------- public/index.js | 42 ++++++++++++++++++++---------------------- 2 files changed, 40 insertions(+), 44 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 0882739..4102964 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20765,31 +20765,29 @@ const connectRecvTransport = async () => { }, async ({videoParams, audioParams}) => { console.log(`[consume] videoParams ${videoParams}`); console.log(`[consume] audioParams ${audioParams}`); - // if (params.error) { - // console.log('Cannot Consume') - // return - // } + if (!audioParams) { + console.log('Cannot Consume audio') + return + } - // console.log(`[connectRecvTransport] consume params ${params}`); + // Then consume with the local consumer transport + // which creates a consumer + consumer = await consumerTransport.consume({ + id: audioParams.id, + producerId: audioParams.producerId, + kind: audioParams.kind, + rtpParameters: audioParams.rtpParameters + }) - // // Then consume with the local consumer transport - // // which creates a consumer - // consumer = await consumerTransport.consume({ - // id: params.id, - // producerId: params.producerId, - // kind: params.kind, - // rtpParameters: params.rtpParameters - // }) + // destructure and retrieve the video track from the producer + const { track } = consumer - // // destructure and retrieve the video track from the producer - // const { track } = consumer - - // let stream = new MediaStream() - // stream.addTrack(track) - // // stream.removeTrack(track) - // remoteVideo.srcObject = stream - // socket.emit('consumer-resume') - // console.log('consumer', consumer); + let stream = new MediaStream() + stream.addTrack(track) + // stream.removeTrack(track) + remoteVideo.srcObject = stream + socket.emit('consumer-resume') + console.log('consumer', consumer); }) } diff --git a/public/index.js b/public/index.js index 34ae630..bc7b573 100644 --- a/public/index.js +++ b/public/index.js @@ -407,31 +407,29 @@ const connectRecvTransport = async () => { }, async ({videoParams, audioParams}) => { console.log(`[consume] videoParams ${videoParams}`); console.log(`[consume] audioParams ${audioParams}`); - // if (params.error) { - // console.log('Cannot Consume') - // return - // } + if (!audioParams) { + console.log('Cannot Consume audio') + return + } - // console.log(`[connectRecvTransport] consume params ${params}`); + // Then consume with the local consumer transport + // which creates a consumer + consumer = await consumerTransport.consume({ + id: audioParams.id, + producerId: audioParams.producerId, + kind: audioParams.kind, + rtpParameters: audioParams.rtpParameters + }) - // // Then consume with the local consumer transport - // // which creates a consumer - // consumer = await consumerTransport.consume({ - // id: params.id, - // producerId: params.producerId, - // kind: params.kind, - // rtpParameters: params.rtpParameters - // }) + // destructure and retrieve the video track from the producer + const { track } = consumer - // // destructure and retrieve the video track from the producer - // const { track } = consumer - - // let stream = new MediaStream() - // stream.addTrack(track) - // // stream.removeTrack(track) - // remoteVideo.srcObject = stream - // socket.emit('consumer-resume') - // console.log('consumer', consumer); + let stream = new MediaStream() + stream.addTrack(track) + // stream.removeTrack(track) + remoteVideo.srcObject = stream + socket.emit('consumer-resume') + console.log('consumer', consumer); }) } -- 2.37.1 From bb4cd756f3100cfa1dac2756e0ff7170793ac5a0 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 11:29:24 +0200 Subject: [PATCH 34/57] Update --- app.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app.js b/app.js index e4e130c..c60c76d 100644 --- a/app.js +++ b/app.js @@ -451,11 +451,13 @@ peers.on('connection', async socket => { console.log(`[consumer-resume] callId ${callId}`) if (isInitiator(callId, socket.id)) { + console.log(`[consumer-resume] isInitiator true`); await videoCalls[callId].initiatorConsumerVideo.resume(); await videoCalls[callId].initiatorConsumerAudio.resume(); } else { - await videoCalls[callId].receiverConsumerVideo.resume(); - await videoCalls[callId].receiverConsumerAudio.resume(); + console.log(`[consumer-resume] isInitiator false`); + (videoCalls[callId].receiverConsumerVideo) && await videoCalls[callId].receiverConsumerVideo.resume(); + (videoCalls[callId].receiverConsumerVideo) && await videoCalls[callId].receiverConsumerAudio.resume(); } // await videoCalls[callId].consumerVideo.resume(); // await videoCalls[callId].consumerAudio.resume(); -- 2.37.1 From b15357d089098c13a35be292e225e8e266e7f71c Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 12:01:21 +0200 Subject: [PATCH 35/57] Update --- public/bundle.js | 56 ++++++++++++++++++++++++++++-------------------- public/index.js | 56 ++++++++++++++++++++++++++++-------------------- 2 files changed, 66 insertions(+), 46 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 4102964..2e91197 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20763,32 +20763,42 @@ const connectRecvTransport = async () => { rtpCapabilities: device.rtpCapabilities, callId }, async ({videoParams, audioParams}) => { - console.log(`[consume] videoParams ${videoParams}`); - console.log(`[consume] audioParams ${audioParams}`); - if (!audioParams) { - console.log('Cannot Consume audio') - return - } - - // Then consume with the local consumer transport - // which creates a consumer - consumer = await consumerTransport.consume({ - id: audioParams.id, - producerId: audioParams.producerId, - kind: audioParams.kind, - rtpParameters: audioParams.rtpParameters - }) - - // destructure and retrieve the video track from the producer - const { track } = consumer + console.log(`[consume] 🟩 videoParams`, videoParams) + console.log(`[consume] 🟩 audioParams`, audioParams) + console.log('[consume] 🟩 consumerTransport', consumerTransport) let stream = new MediaStream() - stream.addTrack(track) - // stream.removeTrack(track) - remoteVideo.srcObject = stream - socket.emit('consumer-resume') - console.log('consumer', consumer); + // Maybe the unit does not produce video or audio, so we must only consume what is produced + if (videoParams) { + stream.addTrack(await getVideoTrask(videoParams)) + } else { + console.log('❗ Don\'t have VIDEO stream to consume'); + } + + if (audioParams) { + let audioTrack = await getAudioTrask(audioParams) + stream.addTrack(audioTrack) + } else { + console.log('❗ Don\'t have AUDIO stream to consume'); + // const soundElement = document.getElementById('sound'); + // soundElement.remove(); + } + + socket.emit('consumer-resume') + + let remoteVideo = document.getElementById('remoteVideo') + remoteVideo.srcObject = stream + remoteVideo.setAttribute('autoplay', true) + remoteVideo.setAttribute('muted', false) + + remoteVideo.play() + .then(() => { + console.log('remoteVideo PLAY') + }) + .catch((error) => { + displayError(`remoteVideo PLAY ERROR | ${error.message}`) + }) }) } diff --git a/public/index.js b/public/index.js index bc7b573..027a149 100644 --- a/public/index.js +++ b/public/index.js @@ -405,32 +405,42 @@ const connectRecvTransport = async () => { rtpCapabilities: device.rtpCapabilities, callId }, async ({videoParams, audioParams}) => { - console.log(`[consume] videoParams ${videoParams}`); - console.log(`[consume] audioParams ${audioParams}`); - if (!audioParams) { - console.log('Cannot Consume audio') - return - } - - // Then consume with the local consumer transport - // which creates a consumer - consumer = await consumerTransport.consume({ - id: audioParams.id, - producerId: audioParams.producerId, - kind: audioParams.kind, - rtpParameters: audioParams.rtpParameters - }) - - // destructure and retrieve the video track from the producer - const { track } = consumer + console.log(`[consume] 🟩 videoParams`, videoParams) + console.log(`[consume] 🟩 audioParams`, audioParams) + console.log('[consume] 🟩 consumerTransport', consumerTransport) let stream = new MediaStream() - stream.addTrack(track) - // stream.removeTrack(track) - remoteVideo.srcObject = stream - socket.emit('consumer-resume') - console.log('consumer', consumer); + // Maybe the unit does not produce video or audio, so we must only consume what is produced + if (videoParams) { + stream.addTrack(await getVideoTrask(videoParams)) + } else { + console.log('❗ Don\'t have VIDEO stream to consume'); + } + + if (audioParams) { + let audioTrack = await getAudioTrask(audioParams) + stream.addTrack(audioTrack) + } else { + console.log('❗ Don\'t have AUDIO stream to consume'); + // const soundElement = document.getElementById('sound'); + // soundElement.remove(); + } + + socket.emit('consumer-resume') + + let remoteVideo = document.getElementById('remoteVideo') + remoteVideo.srcObject = stream + remoteVideo.setAttribute('autoplay', true) + remoteVideo.setAttribute('muted', false) + + remoteVideo.play() + .then(() => { + console.log('remoteVideo PLAY') + }) + .catch((error) => { + displayError(`remoteVideo PLAY ERROR | ${error.message}`) + }) }) } -- 2.37.1 From 825ded83c2056d9a06d30662354dd1606d60c042 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 12:13:48 +0200 Subject: [PATCH 36/57] Update --- public/bundle.js | 53 ++++++++++++++++++++++++++++++++++++++++++++++++ public/index.js | 53 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 106 insertions(+) diff --git a/public/bundle.js b/public/bundle.js index 2e91197..3e37dea 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20381,6 +20381,8 @@ let producerVideo let producerAudio let consumer let originAssetId +let consumerVideo // local consumer video(consumer not transport) +let consumerAudio // local consumer audio(consumer not transport) // https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions // https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce @@ -20802,6 +20804,57 @@ const connectRecvTransport = async () => { }) } +const getVideoTrask = async (videoParams) => { + consumerVideo = await consumerTransport.consume({ + id: videoParams.id, + producerId: videoParams.producerId, + kind: videoParams.kind, + rtpParameters: videoParams.rtpParameters + }) + + consumerVideo.on('transportclose', () => { + console.log('transport closed so consumer closed') + }) + + return consumerVideo.track +} + +const getAudioTrask = async (audioParams) => { + consumerAudio = await consumerTransport.consume({ + id: audioParams.id, + producerId: audioParams.producerId, + kind: audioParams.kind, + rtpParameters: audioParams.rtpParameters + }) + + consumerAudio.on('transportclose', () => { + console.log('transport closed so consumer closed') + }) + + const audioTrack = consumerAudio.track + + audioTrack.applyConstraints({ + audio: { + advanced: [ + { + echoCancellation: {exact: true} + }, + { + autoGainControl: {exact: true} + }, + { + noiseSuppression: {exact: true} + }, + { + highpassFilter: {exact: true} + } + ] + } + }) + + return audioTrack +} + const closeCall = () => { console.log('closeCall'); diff --git a/public/index.js b/public/index.js index 027a149..f8d888e 100644 --- a/public/index.js +++ b/public/index.js @@ -23,6 +23,8 @@ let producerVideo let producerAudio let consumer let originAssetId +let consumerVideo // local consumer video(consumer not transport) +let consumerAudio // local consumer audio(consumer not transport) // https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions // https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce @@ -444,6 +446,57 @@ const connectRecvTransport = async () => { }) } +const getVideoTrask = async (videoParams) => { + consumerVideo = await consumerTransport.consume({ + id: videoParams.id, + producerId: videoParams.producerId, + kind: videoParams.kind, + rtpParameters: videoParams.rtpParameters + }) + + consumerVideo.on('transportclose', () => { + console.log('transport closed so consumer closed') + }) + + return consumerVideo.track +} + +const getAudioTrask = async (audioParams) => { + consumerAudio = await consumerTransport.consume({ + id: audioParams.id, + producerId: audioParams.producerId, + kind: audioParams.kind, + rtpParameters: audioParams.rtpParameters + }) + + consumerAudio.on('transportclose', () => { + console.log('transport closed so consumer closed') + }) + + const audioTrack = consumerAudio.track + + audioTrack.applyConstraints({ + audio: { + advanced: [ + { + echoCancellation: {exact: true} + }, + { + autoGainControl: {exact: true} + }, + { + noiseSuppression: {exact: true} + }, + { + highpassFilter: {exact: true} + } + ] + } + }) + + return audioTrack +} + const closeCall = () => { console.log('closeCall'); -- 2.37.1 From 4978e8d51f9eeba56545142fcdcfd69a2c503cbd Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 12:22:21 +0200 Subject: [PATCH 37/57] Update --- public/bundle.js | 3 ++- public/index.html | 3 +++ public/index.js | 3 ++- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 3e37dea..cbceb17 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20775,10 +20775,11 @@ const connectRecvTransport = async () => { if (videoParams) { stream.addTrack(await getVideoTrask(videoParams)) } else { - console.log('❗ Don\'t have VIDEO stream to consume'); + console.log('❗ Have VIDEO stream to consume'); } if (audioParams) { + console.log('❗ Have AUDIO stream to consume'); let audioTrack = await getAudioTrask(audioParams) stream.addTrack(audioTrack) } else { diff --git a/public/index.html b/public/index.html index 71e0467..adfe778 100644 --- a/public/index.html +++ b/public/index.html @@ -59,6 +59,9 @@ +
+ sound-image +
diff --git a/public/index.js b/public/index.js index f8d888e..0d6298b 100644 --- a/public/index.js +++ b/public/index.js @@ -417,10 +417,11 @@ const connectRecvTransport = async () => { if (videoParams) { stream.addTrack(await getVideoTrask(videoParams)) } else { - console.log('❗ Don\'t have VIDEO stream to consume'); + console.log('❗ Have VIDEO stream to consume'); } if (audioParams) { + console.log('❗ Have AUDIO stream to consume'); let audioTrack = await getAudioTrask(audioParams) stream.addTrack(audioTrack) } else { -- 2.37.1 From 72136132ba7c9aaa0ae5bce5ada2fe3df1d8dd7c Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 12:25:14 +0200 Subject: [PATCH 38/57] Update --- public/images/favicon.ico | Bin 0 -> 4286 bytes public/images/volume-high.png | Bin 0 -> 493 bytes public/images/volume-mute.png | Bin 0 -> 418 bytes public/index.html | 2 +- 4 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 public/images/favicon.ico create mode 100644 public/images/volume-high.png create mode 100644 public/images/volume-mute.png diff --git a/public/images/favicon.ico b/public/images/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..6172c2bb941ddc47a67562d9812f138d9a4ded0e GIT binary patch literal 4286 zcmeHL`BRfu6ixquPJd|KaDmc_iVD>c1(8Ltw6Z8#ahD2Obvnh3iYRuOu~Y@cZJau` zbwN>F+UihHKpjUdVHK1>LO?(Wk_55<30a`0_q{KPAa+KX&UBm+=8@!m-+SlWbI-l+ z3nI~5^y};_Vt+*!-Vuq0h(w}sG-yf`K!eTmAG&t;ZD9x#B9YZ>!kh6%gV)OgX7a2V z7LyTHQ#XIlKL1+`Jr*_*{d*2U0O8Bj-s+)4yp>n(b{ksmTsf%x)3W{(`&WzJ*=-1y93LN$JJHPsnwhV z*Vkl5cc+G9OA0!LU`$O;9|pBMv>B+lzGWmluvL#9DYO zA1h}2VSnN_XjMweGhuhMp-Fle5{kRBU^Z&Y;~_8GK<@(}5r+|niXx&yT0;!bZMHQ zS635{IGYaPP&QXc}Zq!Mm0 z9^UuI$<(Phv}+^O3I+MS8w{Tf)&m-()!4jr0mq)};e;~>ebG{zPM*<1O!-{m=RDY^2t|= zA_Z*iQwMfsK@e%M8|?}?&K*6BkO^bqJ7xruH^-3<&8V-IaBSwaNUtf#yK)J-r1b#4v@3}o@6*Ny36mKVCX3%=7Q|b>jrR&Kb z^;9n!?Af}B*M-09X#AYAhxk_^e&te{8-n@MJaOYvCX9M5l=asLdp_+E0QrNpke6p; z*Sa;N{|L;TJRaB5Pg5`IfWA$Q<3H|30C8aB@V7~LBK-~0;wa8vRuT=3q5vIjZ8&ux z1;OK7c}=J7+zyShmG^}wayjBxE#o~N3 z`a64VuB+ubuztZjl#_X$bkw7|IGudq&NT~hABD>&_EOxP4)60Cpx&=jsqp*BO}Lls zOS%Q3C_jwOr`zak*WgrID#vEM>;T2hH0!mUD?;xRI5ZK5gwLsOk&l@UnLiyv(igEj z?vRO2II(vM#k2<6))HR-LjN&xE!0nP=vowyJMW?o)aYrK=qrOa=o~gk4=kHAh~Pm&M@X@dO?(s}tty zSu|4V9MP#&{jgc@v*U9eST5+yRn*rZF*cg(5bEiUtc6F>@EAW(jb~rT;67u0hUu+t%5`vH zHCk0T&sJlx&?(F4UV4_LdkuO$P9HjeBj4?^d5zAw=i==fd*Am=7nTb{M+fydp+^hP zS7!dXtvO%dK>dOBh?=rB>}*Xuv_dE2=F literal 0 HcmV?d00001 diff --git a/public/images/volume-high.png b/public/images/volume-high.png new file mode 100644 index 0000000000000000000000000000000000000000..812224a7b8ecda5468faa781011a27761c2a9b15 GIT binary patch literal 493 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjEa{HEjtmSN`?>!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBD8ZKG?d}4kf#9d}?s_1_ zS>O>_45Sml_(QhSc_8Dxr;B5V$MLsQtho+32((T9VpnB-@t&K&#*Y`Plvww+-};?( zgu8>wY~BIpA1}Tz)tPO!Xqj*%W$l;zw6yZie-kIk9{>3|n(3IsakG*YMT=zvHZidW zl=AQBILVx`q%E5{@;p=U&0Wk-LkjjczNtQNW{bAyo$HH4Crq_je(Ne9v)ifivbC@F zt?|u~VhCBf&ZG8{kN(H$^{dq`HgIp_{j+9yZgaCs@y&B)ykYBJ%c;Kix^ukF>XG?e zX33ME4}|t@v8y^dLp)dU_HCD14oT6GV!&@#--J}=HkdjL< zW14mC;Qr;}$Lg1ue&}3s7U*@=64!{5l*E!$tK_0oAjM#0U}U6gXsByw7Ghv#WnyY& rWUOsqU}a!%aM>AP5F=^G%}>cptHiBg!|#$Fpaup{S3j3^P6!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBD8ZKG?d}4kf#9d}?s_1_ zS>O>_45Sml_(QhSc_3qnr;B5V$MLsQ4Y>{*@VGLcb*-AHx6{e1X!5#q)2g3zEDdhI ze$dNsn`g6bDaX&r4v*~Zwmn^D8LIRkE3=My-hn;I*QPSCJ?Nc&d&X=Aui!h(C+58L zzogCFadL*YQo$<5q-)1L8@M-QFea%AMyinn6=&yH( zN%>d2_KKRP++r=4EaMLDSEc29H~jMduzH`dq5V2Lu7(3kBmTOs0lHVU#5JNMC9x#c zD!C{XNHG{07#Zmr8tNLFg&3GwnV49anra&uSQ!|&7tYp2(U6;;l9^VCTZ5U7@
- sound-image + sound-image
-- 2.37.1 From dd264e39ea8234dd4a40a7cb04e739102228cef1 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 12:25:42 +0200 Subject: [PATCH 39/57] Update --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index ea1eb3c..adfe778 100644 --- a/public/index.html +++ b/public/index.html @@ -60,7 +60,7 @@
- sound-image + sound-image
-- 2.37.1 From 6379e1ae346217fa3c7375674a679a238eb8ab46 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 12:27:24 +0200 Subject: [PATCH 40/57] Update --- public/index.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index adfe778..c5fc365 100644 --- a/public/index.html +++ b/public/index.html @@ -59,9 +59,7 @@
-
- sound-image -
+
-- 2.37.1 From 898cc0cbf2bd1a238fad7b49acc8988ba72eb702 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 12:30:25 +0200 Subject: [PATCH 41/57] Update --- public/bundle.js | 6 ++++++ public/index.js | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/public/bundle.js b/public/bundle.js index cbceb17..68203f4 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20384,6 +20384,12 @@ let originAssetId let consumerVideo // local consumer video(consumer not transport) let consumerAudio // local consumer audio(consumer not transport) +const remoteSoundControl = document.getElementById('remoteSoundControl'); + +remoteSoundControl.addEventListener('click', function handleClick() { + btn.textContent = 'Button clicked'; +}); + // https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions // https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce let videoParams = { diff --git a/public/index.js b/public/index.js index 0d6298b..55efbf3 100644 --- a/public/index.js +++ b/public/index.js @@ -26,6 +26,12 @@ let originAssetId let consumerVideo // local consumer video(consumer not transport) let consumerAudio // local consumer audio(consumer not transport) +const remoteSoundControl = document.getElementById('remoteSoundControl'); + +remoteSoundControl.addEventListener('click', function handleClick() { + btn.textContent = 'Button clicked'; +}); + // https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions // https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce let videoParams = { -- 2.37.1 From 714fe0ec5e39b0e0254b148c809cf267f2967a14 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 12:31:39 +0200 Subject: [PATCH 42/57] Update --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index c5fc365..bf75988 100644 --- a/public/index.html +++ b/public/index.html @@ -59,9 +59,9 @@
-
+
-- 2.37.1 From 28059144cf5e1e3d69669ca6c1585ad91b96ea10 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 12:33:19 +0200 Subject: [PATCH 43/57] Update --- public/bundle.js | 15 ++++++++++++++- public/index.js | 15 ++++++++++++++- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 68203f4..ccd5897 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20387,7 +20387,20 @@ let consumerAudio // local consumer audio(consumer not transport) const remoteSoundControl = document.getElementById('remoteSoundControl'); remoteSoundControl.addEventListener('click', function handleClick() { - btn.textContent = 'Button clicked'; + console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); + remoteSoundControl.textContent = 'Button clicked'; + // let soundElementIcon = document.getElementById('sound') + // if (isSoundOn) { + // soundElementIcon.src = noSoundImage + // soundElementIcon.alt = 'no-sound-image' + // isSoundOn = false + // vid.muted = !isSoundOn + // } else { + // soundElementIcon.src = soundImage + // soundElementIcon.alt = 'sound-image' + // isSoundOn = true + // vid.muted = !isSoundOn + // } }); // https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions diff --git a/public/index.js b/public/index.js index 55efbf3..520fbe7 100644 --- a/public/index.js +++ b/public/index.js @@ -29,7 +29,20 @@ let consumerAudio // local consumer audio(consumer not transport) const remoteSoundControl = document.getElementById('remoteSoundControl'); remoteSoundControl.addEventListener('click', function handleClick() { - btn.textContent = 'Button clicked'; + console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); + remoteSoundControl.textContent = 'Button clicked'; + // let soundElementIcon = document.getElementById('sound') + // if (isSoundOn) { + // soundElementIcon.src = noSoundImage + // soundElementIcon.alt = 'no-sound-image' + // isSoundOn = false + // vid.muted = !isSoundOn + // } else { + // soundElementIcon.src = soundImage + // soundElementIcon.alt = 'sound-image' + // isSoundOn = true + // vid.muted = !isSoundOn + // } }); // https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions -- 2.37.1 From 2ada7b66db55dfe2996534881dccb743b1dfb3a0 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 12:39:22 +0200 Subject: [PATCH 44/57] Update --- public/bundle.js | 21 ++++++++------------- public/index.html | 2 +- public/index.js | 21 ++++++++------------- 3 files changed, 17 insertions(+), 27 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index ccd5897..a137082 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20385,22 +20385,17 @@ let consumerVideo // local consumer video(consumer not transport) let consumerAudio // local consumer audio(consumer not transport) const remoteSoundControl = document.getElementById('remoteSoundControl'); +remoteSoundControl.defaultMuted = true remoteSoundControl.addEventListener('click', function handleClick() { console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); - remoteSoundControl.textContent = 'Button clicked'; - // let soundElementIcon = document.getElementById('sound') - // if (isSoundOn) { - // soundElementIcon.src = noSoundImage - // soundElementIcon.alt = 'no-sound-image' - // isSoundOn = false - // vid.muted = !isSoundOn - // } else { - // soundElementIcon.src = soundImage - // soundElementIcon.alt = 'sound-image' - // isSoundOn = true - // vid.muted = !isSoundOn - // } + if (remoteSoundControl.textContent === 'Unmute') { + vid.muted = false + remoteSoundControl.textContent = 'Mute'; + } else { + vid.muted = true + remoteSoundControl.textContent = 'Unmute'; + } }); // https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions diff --git a/public/index.html b/public/index.html index bf75988..9e54055 100644 --- a/public/index.html +++ b/public/index.html @@ -48,7 +48,7 @@
- +
diff --git a/public/index.js b/public/index.js index 520fbe7..1b1de28 100644 --- a/public/index.js +++ b/public/index.js @@ -27,22 +27,17 @@ let consumerVideo // local consumer video(consumer not transport) let consumerAudio // local consumer audio(consumer not transport) const remoteSoundControl = document.getElementById('remoteSoundControl'); +remoteSoundControl.defaultMuted = true remoteSoundControl.addEventListener('click', function handleClick() { console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); - remoteSoundControl.textContent = 'Button clicked'; - // let soundElementIcon = document.getElementById('sound') - // if (isSoundOn) { - // soundElementIcon.src = noSoundImage - // soundElementIcon.alt = 'no-sound-image' - // isSoundOn = false - // vid.muted = !isSoundOn - // } else { - // soundElementIcon.src = soundImage - // soundElementIcon.alt = 'sound-image' - // isSoundOn = true - // vid.muted = !isSoundOn - // } + if (remoteSoundControl.textContent === 'Unmute') { + vid.muted = false + remoteSoundControl.textContent = 'Mute'; + } else { + vid.muted = true + remoteSoundControl.textContent = 'Unmute'; + } }); // https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions -- 2.37.1 From 968da6ea9852ceb7f98d764de1b7bf27d0f9ff7d Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 12:40:54 +0200 Subject: [PATCH 45/57] Update --- public/bundle.js | 4 ++-- public/index.html | 2 +- public/index.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index a137082..28e6a0d 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20390,10 +20390,10 @@ remoteSoundControl.defaultMuted = true remoteSoundControl.addEventListener('click', function handleClick() { console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); if (remoteSoundControl.textContent === 'Unmute') { - vid.muted = false + remoteSoundControl.muted = false remoteSoundControl.textContent = 'Mute'; } else { - vid.muted = true + remoteSoundControl.muted = true remoteSoundControl.textContent = 'Unmute'; } }); diff --git a/public/index.html b/public/index.html index 9e54055..8079794 100644 --- a/public/index.html +++ b/public/index.html @@ -48,7 +48,7 @@
- +
diff --git a/public/index.js b/public/index.js index 1b1de28..e6f3423 100644 --- a/public/index.js +++ b/public/index.js @@ -32,10 +32,10 @@ remoteSoundControl.defaultMuted = true remoteSoundControl.addEventListener('click', function handleClick() { console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); if (remoteSoundControl.textContent === 'Unmute') { - vid.muted = false + remoteSoundControl.muted = false remoteSoundControl.textContent = 'Mute'; } else { - vid.muted = true + remoteSoundControl.muted = true remoteSoundControl.textContent = 'Unmute'; } }); -- 2.37.1 From 33e30339f25a73cef92fe85f413bf6c44b731e95 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 13:12:49 +0200 Subject: [PATCH 46/57] Update --- public/bundle.js | 9 +++++---- public/index.js | 9 +++++---- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 28e6a0d..bc8ef92 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20368,6 +20368,7 @@ const ASSET_NAME = urlParams.get('assetName') || null; const ASSET_TYPE = urlParams.get('assetType') || null; let callId = parseInt(urlParams.get('callId')) || null; const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false +let remoteVideo = document.getElementById('remoteVideo') console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER) console.log('🟩 config', config) @@ -20390,10 +20391,10 @@ remoteSoundControl.defaultMuted = true remoteSoundControl.addEventListener('click', function handleClick() { console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); if (remoteSoundControl.textContent === 'Unmute') { - remoteSoundControl.muted = false + remoteVideo.muted = false remoteSoundControl.textContent = 'Mute'; } else { - remoteSoundControl.muted = true + remoteVideo.muted = true remoteSoundControl.textContent = 'Unmute'; } }); @@ -20787,9 +20788,10 @@ const connectRecvTransport = async () => { // Maybe the unit does not produce video or audio, so we must only consume what is produced if (videoParams) { + console.log('❗ Have VIDEO stream to consume'); stream.addTrack(await getVideoTrask(videoParams)) } else { - console.log('❗ Have VIDEO stream to consume'); + console.log('❗ Don\'t have AUDIO stream to consume'); } if (audioParams) { @@ -20804,7 +20806,6 @@ const connectRecvTransport = async () => { socket.emit('consumer-resume') - let remoteVideo = document.getElementById('remoteVideo') remoteVideo.srcObject = stream remoteVideo.setAttribute('autoplay', true) remoteVideo.setAttribute('muted', false) diff --git a/public/index.js b/public/index.js index e6f3423..b764412 100644 --- a/public/index.js +++ b/public/index.js @@ -10,6 +10,7 @@ const ASSET_NAME = urlParams.get('assetName') || null; const ASSET_TYPE = urlParams.get('assetType') || null; let callId = parseInt(urlParams.get('callId')) || null; const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false +let remoteVideo = document.getElementById('remoteVideo') console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER) console.log('🟩 config', config) @@ -32,10 +33,10 @@ remoteSoundControl.defaultMuted = true remoteSoundControl.addEventListener('click', function handleClick() { console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); if (remoteSoundControl.textContent === 'Unmute') { - remoteSoundControl.muted = false + remoteVideo.muted = false remoteSoundControl.textContent = 'Mute'; } else { - remoteSoundControl.muted = true + remoteVideo.muted = true remoteSoundControl.textContent = 'Unmute'; } }); @@ -429,9 +430,10 @@ const connectRecvTransport = async () => { // Maybe the unit does not produce video or audio, so we must only consume what is produced if (videoParams) { + console.log('❗ Have VIDEO stream to consume'); stream.addTrack(await getVideoTrask(videoParams)) } else { - console.log('❗ Have VIDEO stream to consume'); + console.log('❗ Don\'t have AUDIO stream to consume'); } if (audioParams) { @@ -446,7 +448,6 @@ const connectRecvTransport = async () => { socket.emit('consumer-resume') - let remoteVideo = document.getElementById('remoteVideo') remoteVideo.srcObject = stream remoteVideo.setAttribute('autoplay', true) remoteVideo.setAttribute('muted', false) -- 2.37.1 From 381e6650624f14b8e4e26fece2021a322ee49e32 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 13:14:34 +0200 Subject: [PATCH 47/57] Update --- public/bundle.js | 5 +++-- public/index.js | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index bc8ef92..e3ff0d7 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20368,7 +20368,9 @@ const ASSET_NAME = urlParams.get('assetName') || null; const ASSET_TYPE = urlParams.get('assetType') || null; let callId = parseInt(urlParams.get('callId')) || null; const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false -let remoteVideo = document.getElementById('remoteVideo') +let remoteVideo = document.getElementById('localVideo') +remoteVideo.defaultMuted = true + console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER) console.log('🟩 config', config) @@ -20386,7 +20388,6 @@ let consumerVideo // local consumer video(consumer not transport) let consumerAudio // local consumer audio(consumer not transport) const remoteSoundControl = document.getElementById('remoteSoundControl'); -remoteSoundControl.defaultMuted = true remoteSoundControl.addEventListener('click', function handleClick() { console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); diff --git a/public/index.js b/public/index.js index b764412..b565976 100644 --- a/public/index.js +++ b/public/index.js @@ -10,7 +10,9 @@ const ASSET_NAME = urlParams.get('assetName') || null; const ASSET_TYPE = urlParams.get('assetType') || null; let callId = parseInt(urlParams.get('callId')) || null; const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false -let remoteVideo = document.getElementById('remoteVideo') +let remoteVideo = document.getElementById('localVideo') +remoteVideo.defaultMuted = true + console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER) console.log('🟩 config', config) @@ -28,7 +30,6 @@ let consumerVideo // local consumer video(consumer not transport) let consumerAudio // local consumer audio(consumer not transport) const remoteSoundControl = document.getElementById('remoteSoundControl'); -remoteSoundControl.defaultMuted = true remoteSoundControl.addEventListener('click', function handleClick() { console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); -- 2.37.1 From 2a6f24b2bb639288175826e41655d164c52de5b7 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 13:17:11 +0200 Subject: [PATCH 48/57] Update --- public/bundle.js | 4 +++- public/index.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index e3ff0d7..2075c3a 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20368,7 +20368,7 @@ const ASSET_NAME = urlParams.get('assetName') || null; const ASSET_TYPE = urlParams.get('assetType') || null; let callId = parseInt(urlParams.get('callId')) || null; const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false -let remoteVideo = document.getElementById('localVideo') +let remoteVideo = document.getElementById('remoteVideo') remoteVideo.defaultMuted = true console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER) @@ -20807,6 +20807,8 @@ const connectRecvTransport = async () => { socket.emit('consumer-resume') + console.log('stream', stream); + remoteVideo.srcObject = stream remoteVideo.setAttribute('autoplay', true) remoteVideo.setAttribute('muted', false) diff --git a/public/index.js b/public/index.js index b565976..b315c02 100644 --- a/public/index.js +++ b/public/index.js @@ -10,7 +10,7 @@ const ASSET_NAME = urlParams.get('assetName') || null; const ASSET_TYPE = urlParams.get('assetType') || null; let callId = parseInt(urlParams.get('callId')) || null; const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false -let remoteVideo = document.getElementById('localVideo') +let remoteVideo = document.getElementById('remoteVideo') remoteVideo.defaultMuted = true console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER) @@ -449,6 +449,8 @@ const connectRecvTransport = async () => { socket.emit('consumer-resume') + console.log('stream', stream); + remoteVideo.srcObject = stream remoteVideo.setAttribute('autoplay', true) remoteVideo.setAttribute('muted', false) -- 2.37.1 From 8634cb4b6e0f4f282a3ac8c291fcc8adb8a2e04c Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 13:18:33 +0200 Subject: [PATCH 49/57] Update --- public/bundle.js | 2 +- public/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 2075c3a..00ce1cf 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20520,7 +20520,7 @@ const streamSuccess = (stream) => { const getLocalStream = () => { console.log('[getLocalStream]'); navigator.mediaDevices.getUserMedia({ - audio: true, + audio: false, video: { qvga : { width: { ideal: 320 }, height: { ideal: 240 } }, vga : { width: { ideal: 640 }, height: { ideal: 480 } }, diff --git a/public/index.js b/public/index.js index b315c02..bd2e818 100644 --- a/public/index.js +++ b/public/index.js @@ -162,7 +162,7 @@ const streamSuccess = (stream) => { const getLocalStream = () => { console.log('[getLocalStream]'); navigator.mediaDevices.getUserMedia({ - audio: true, + audio: false, video: { qvga : { width: { ideal: 320 }, height: { ideal: 240 } }, vga : { width: { ideal: 640 }, height: { ideal: 480 } }, -- 2.37.1 From e3536e87cd17719e26604ed7d1fb88652c9ba6db Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 13:19:58 +0200 Subject: [PATCH 50/57] Update --- public/bundle.js | 22 +++++++++++----------- public/index.js | 22 +++++++++++----------- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 00ce1cf..82426c4 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20684,19 +20684,19 @@ const connectSendTransport = async () => { }) // Produce audio - producerAudio = await producerTransport.produce(audioParams) - console.log('audioParams', audioParams); - console.log('producerAudio', producerAudio); + // producerAudio = await producerTransport.produce(audioParams) + // console.log('audioParams', audioParams); + // console.log('producerAudio', producerAudio); - producerAudio.on('trackended', () => { - console.log('track ended') - // close audio track - }) + // producerAudio.on('trackended', () => { + // console.log('track ended') + // // close audio track + // }) - producerAudio.on('transportclose', () => { - console.log('transport ended') - // close audio track - }) + // producerAudio.on('transportclose', () => { + // console.log('transport ended') + // // close audio track + // }) const answer = { origin_asset_id: ASSET_ID, diff --git a/public/index.js b/public/index.js index bd2e818..6d2416b 100644 --- a/public/index.js +++ b/public/index.js @@ -326,19 +326,19 @@ const connectSendTransport = async () => { }) // Produce audio - producerAudio = await producerTransport.produce(audioParams) - console.log('audioParams', audioParams); - console.log('producerAudio', producerAudio); + // producerAudio = await producerTransport.produce(audioParams) + // console.log('audioParams', audioParams); + // console.log('producerAudio', producerAudio); - producerAudio.on('trackended', () => { - console.log('track ended') - // close audio track - }) + // producerAudio.on('trackended', () => { + // console.log('track ended') + // // close audio track + // }) - producerAudio.on('transportclose', () => { - console.log('transport ended') - // close audio track - }) + // producerAudio.on('transportclose', () => { + // console.log('transport ended') + // // close audio track + // }) const answer = { origin_asset_id: ASSET_ID, -- 2.37.1 From eb668e2500da29d8d5c09ce3b8eb67c46e1aeccb Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 13:29:24 +0200 Subject: [PATCH 51/57] Update --- public/bundle.js | 10 ++++++++++ public/index.html | 3 +++ public/index.js | 10 ++++++++++ 3 files changed, 23 insertions(+) diff --git a/public/bundle.js b/public/bundle.js index 82426c4..be49784 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20375,6 +20375,16 @@ console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', console.log('🟩 config', config) +checkbox = document.getElementById('produceAudio'); +checkbox.addEventListener('change', e => { + if(e.target.checked){ + console.log('produce audio'); + } else { + console.log('don\t produce audio'); + } + +}); + let socket, hub let device let rtpCapabilities diff --git a/public/index.html b/public/index.html index 8079794..eb68844 100644 --- a/public/index.html +++ b/public/index.html @@ -34,6 +34,9 @@
+ Client options: + +
diff --git a/public/index.js b/public/index.js index 6d2416b..0db0215 100644 --- a/public/index.js +++ b/public/index.js @@ -17,6 +17,16 @@ console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', console.log('🟩 config', config) +checkbox = document.getElementById('produceAudio'); +checkbox.addEventListener('change', e => { + if(e.target.checked){ + console.log('produce audio'); + } else { + console.log('don\t produce audio'); + } + +}); + let socket, hub let device let rtpCapabilities -- 2.37.1 From 68c80d563fd65590b3aad14f280deeb1759acb03 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 13:32:56 +0200 Subject: [PATCH 52/57] Update --- public/bundle.js | 47 +++++++++++++++++++++++++---------------------- public/index.js | 47 +++++++++++++++++++++++++---------------------- 2 files changed, 50 insertions(+), 44 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index be49784..5572758 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20370,19 +20370,20 @@ let callId = parseInt(urlParams.get('callId')) || null; const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false let remoteVideo = document.getElementById('remoteVideo') remoteVideo.defaultMuted = true +let produceAudio = false console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER) console.log('🟩 config', config) -checkbox = document.getElementById('produceAudio'); -checkbox.addEventListener('change', e => { - if(e.target.checked){ +produceAudioSelector = document.getElementById('produceAudio'); +produceAudioSelector.addEventListener('change', e => { + if(e.target.checked) { + produceAudio = true console.log('produce audio'); } else { - console.log('don\t produce audio'); + produceAudio = false } - }); let socket, hub @@ -20530,7 +20531,7 @@ const streamSuccess = (stream) => { const getLocalStream = () => { console.log('[getLocalStream]'); navigator.mediaDevices.getUserMedia({ - audio: false, + audio: produceAudio ? true : false, video: { qvga : { width: { ideal: 320 }, height: { ideal: 240 } }, vga : { width: { ideal: 640 }, height: { ideal: 480 } }, @@ -20679,34 +20680,36 @@ const connectSendTransport = async () => { // this action will trigger the 'connect' and 'produce' events above // Produce video - producerVideo = await producerTransport.produce(videoParams) + let producerVideoHandler = await producerTransport.produce(videoParams) console.log('videoParams', videoParams); console.log('producerVideo', producerVideo); - producerVideo.on('trackended', () => { + producerVideoHandler.on('trackended', () => { console.log('track ended') // close video track }) - producerVideo.on('transportclose', () => { + producerVideoHandler.on('transportclose', () => { console.log('transport ended') // close video track }) // Produce audio - // producerAudio = await producerTransport.produce(audioParams) - // console.log('audioParams', audioParams); - // console.log('producerAudio', producerAudio); - - // producerAudio.on('trackended', () => { - // console.log('track ended') - // // close audio track - // }) - - // producerAudio.on('transportclose', () => { - // console.log('transport ended') - // // close audio track - // }) + if (produceAudio) { + let producerAudioHandler = await producerTransport.produce(audioParams) + console.log('audioParams', audioParams); + console.log('producerAudio', producerAudio); + + producerAudioHandler.on('trackended', () => { + console.log('track ended') + // close audio track + }) + + producerAudioHandler.on('transportclose', () => { + console.log('transport ended') + // close audio track + }) + } const answer = { origin_asset_id: ASSET_ID, diff --git a/public/index.js b/public/index.js index 0db0215..3008db0 100644 --- a/public/index.js +++ b/public/index.js @@ -12,19 +12,20 @@ let callId = parseInt(urlParams.get('callId')) || null; const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false let remoteVideo = document.getElementById('remoteVideo') remoteVideo.defaultMuted = true +let produceAudio = false console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER) console.log('🟩 config', config) -checkbox = document.getElementById('produceAudio'); -checkbox.addEventListener('change', e => { - if(e.target.checked){ +produceAudioSelector = document.getElementById('produceAudio'); +produceAudioSelector.addEventListener('change', e => { + if(e.target.checked) { + produceAudio = true console.log('produce audio'); } else { - console.log('don\t produce audio'); + produceAudio = false } - }); let socket, hub @@ -172,7 +173,7 @@ const streamSuccess = (stream) => { const getLocalStream = () => { console.log('[getLocalStream]'); navigator.mediaDevices.getUserMedia({ - audio: false, + audio: produceAudio ? true : false, video: { qvga : { width: { ideal: 320 }, height: { ideal: 240 } }, vga : { width: { ideal: 640 }, height: { ideal: 480 } }, @@ -321,34 +322,36 @@ const connectSendTransport = async () => { // this action will trigger the 'connect' and 'produce' events above // Produce video - producerVideo = await producerTransport.produce(videoParams) + let producerVideoHandler = await producerTransport.produce(videoParams) console.log('videoParams', videoParams); console.log('producerVideo', producerVideo); - producerVideo.on('trackended', () => { + producerVideoHandler.on('trackended', () => { console.log('track ended') // close video track }) - producerVideo.on('transportclose', () => { + producerVideoHandler.on('transportclose', () => { console.log('transport ended') // close video track }) // Produce audio - // producerAudio = await producerTransport.produce(audioParams) - // console.log('audioParams', audioParams); - // console.log('producerAudio', producerAudio); - - // producerAudio.on('trackended', () => { - // console.log('track ended') - // // close audio track - // }) - - // producerAudio.on('transportclose', () => { - // console.log('transport ended') - // // close audio track - // }) + if (produceAudio) { + let producerAudioHandler = await producerTransport.produce(audioParams) + console.log('audioParams', audioParams); + console.log('producerAudio', producerAudio); + + producerAudioHandler.on('trackended', () => { + console.log('track ended') + // close audio track + }) + + producerAudioHandler.on('transportclose', () => { + console.log('transport ended') + // close audio track + }) + } const answer = { origin_asset_id: ASSET_ID, -- 2.37.1 From 88da70731f0a6cd2452e2d58a6f6fbc7e0f1dd04 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 13:40:43 +0200 Subject: [PATCH 53/57] Update --- public/index.html | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index eb68844..db0995d 100644 --- a/public/index.html +++ b/public/index.html @@ -46,12 +46,25 @@ -- 2.37.1 From b4fccc4d4cf390c4b595c48b7f32cef3e74aef70 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 13:57:17 +0200 Subject: [PATCH 54/57] Update --- public/bundle.js | 4 +++- public/index.html | 16 +++++++++++----- public/index.js | 4 +++- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 5572758..4d81ee0 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20822,9 +20822,11 @@ const connectRecvTransport = async () => { console.log('stream', stream); + // let removeAudio = document.getElementById('remoteAudio') + // removeAudio.srcObject = stream + remoteVideo.srcObject = stream remoteVideo.setAttribute('autoplay', true) - remoteVideo.setAttribute('muted', false) remoteVideo.play() .then(() => { diff --git a/public/index.html b/public/index.html index db0995d..b89212a 100644 --- a/public/index.html +++ b/public/index.html @@ -48,23 +48,29 @@
diff --git a/public/index.js b/public/index.js index 3008db0..ae3a14a 100644 --- a/public/index.js +++ b/public/index.js @@ -464,9 +464,11 @@ const connectRecvTransport = async () => { console.log('stream', stream); + // let removeAudio = document.getElementById('remoteAudio') + // removeAudio.srcObject = stream + remoteVideo.srcObject = stream remoteVideo.setAttribute('autoplay', true) - remoteVideo.setAttribute('muted', false) remoteVideo.play() .then(() => { -- 2.37.1 From 2dd9eb5eaf2bddbc72e075da7e805b4658b14bf0 Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 14:05:44 +0200 Subject: [PATCH 55/57] Update --- public/bundle.js | 2 +- public/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 4d81ee0..8dbebd0 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20805,7 +20805,7 @@ const connectRecvTransport = async () => { console.log('❗ Have VIDEO stream to consume'); stream.addTrack(await getVideoTrask(videoParams)) } else { - console.log('❗ Don\'t have AUDIO stream to consume'); + console.log('❗ Don\'t have VIDEO stream to consume'); } if (audioParams) { diff --git a/public/index.js b/public/index.js index ae3a14a..7138136 100644 --- a/public/index.js +++ b/public/index.js @@ -447,7 +447,7 @@ const connectRecvTransport = async () => { console.log('❗ Have VIDEO stream to consume'); stream.addTrack(await getVideoTrask(videoParams)) } else { - console.log('❗ Don\'t have AUDIO stream to consume'); + console.log('❗ Don\'t have VIDEO stream to consume'); } if (audioParams) { -- 2.37.1 From da906ed4ba0b8e9f40c571a0649c1cce73fb3b0e Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Mon, 19 Dec 2022 18:35:02 +0200 Subject: [PATCH 56/57] Update --- public/bundle.js | 7 ------- public/index.html | 35 ++--------------------------------- public/index.js | 7 ------- 3 files changed, 2 insertions(+), 47 deletions(-) diff --git a/public/bundle.js b/public/bundle.js index 8dbebd0..e9b17f7 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20814,17 +20814,10 @@ const connectRecvTransport = async () => { stream.addTrack(audioTrack) } else { console.log('❗ Don\'t have AUDIO stream to consume'); - // const soundElement = document.getElementById('sound'); - // soundElement.remove(); } socket.emit('consumer-resume') - console.log('stream', stream); - - // let removeAudio = document.getElementById('remoteAudio') - // removeAudio.srcObject = stream - remoteVideo.srcObject = stream remoteVideo.setAttribute('autoplay', true) diff --git a/public/index.html b/public/index.html index b89212a..a44cd99 100644 --- a/public/index.html +++ b/public/index.html @@ -57,20 +57,13 @@ @@ -87,30 +80,6 @@ -
Local Video
- +
- +
- + > --> +
- - + >
diff --git a/public/index.js b/public/index.js index 7138136..2d2faac 100644 --- a/public/index.js +++ b/public/index.js @@ -456,17 +456,10 @@ const connectRecvTransport = async () => { stream.addTrack(audioTrack) } else { console.log('❗ Don\'t have AUDIO stream to consume'); - // const soundElement = document.getElementById('sound'); - // soundElement.remove(); } socket.emit('consumer-resume') - console.log('stream', stream); - - // let removeAudio = document.getElementById('remoteAudio') - // removeAudio.srcObject = stream - remoteVideo.srcObject = stream remoteVideo.setAttribute('autoplay', true) -- 2.37.1 From 1520fb88aea0cd1ac93766cf3b5fc0682371e07b Mon Sep 17 00:00:00 2001 From: Sergiu Toma Date: Tue, 13 Dec 2022 10:28:45 +0200 Subject: [PATCH 57/57] Update server and web client so support full duplex --- app.js | 430 +++++++++++++++++++++------------- public/bundle.js | 199 ++++++++++++---- public/config.js | 2 +- public/images/favicon.ico | Bin 0 -> 4286 bytes public/images/volume-high.png | Bin 0 -> 493 bytes public/images/volume-mute.png | Bin 0 -> 418 bytes public/index.html | 44 ++-- public/index.js | 197 ++++++++++++---- 8 files changed, 604 insertions(+), 268 deletions(-) create mode 100644 public/images/favicon.ico create mode 100644 public/images/volume-high.png create mode 100644 public/images/volume-mute.png diff --git a/app.js b/app.js index 8b33249..c60c76d 100644 --- a/app.js +++ b/app.js @@ -15,19 +15,21 @@ const mediasoup = require('mediasoup'); let worker /** - * videoCalls - * |-> Router - * |-> Producer - * |-> Consumer - * |-> Producer Transport - * |-> Consumer Transport * + * videoCalls - Dictionary of Object(s) * '': { - * router: Router, - * producer: Producer, - * producerTransport: Producer Transport, - * consumer: Consumer, - * consumerTransport: Consumer Transport + * router: Router, router + * initiatorAudioProducer: Producer, + * initiatorVideoProducer: Producer, + * receiverVideoProducer: Producer, producerVideo + * receiverAudioProducer: Producer, producerAudio + * initiatorProducerTransport: Producer Transport, + * receiverProducerTransport: Producer Transport, producerTransport + * initiatorConsumerVideo: Consumer, consumerVideo + * initiatorConsumerAudio: Consumer, consumerAudio + * initiatorConsumerTransport: Consumer Transport consumerTransport + * initiatorSockerId + * receiverSocketId * } * **/ @@ -50,13 +52,8 @@ const httpsServer = https.createServer(options, app); const io = new Server(httpsServer, { allowEIO3: true, - origins: ["*:*"], - // allowRequest: (req, next) => { - // console.log('req', req); - // next(null, true) - // } + origins: ["*:*"] }); -// const io = new Server(server, { origins: '*:*', allowEIO3: true }); httpsServer.listen(process.env.PORT, () => { console.log('Video server listening on port:', process.env.PORT); @@ -141,32 +138,18 @@ const mediaCodecs = [ 'x-google-start-bitrate' : 1000 } } -// { -// kind: 'audio', -// mimeType: 'audio/opus', -// clockRate: 48000, -// channels: 2, -// }, -// { -// kind: 'video', -// mimeType: 'video/VP8', -// clockRate: 90000, -// parameters: { -// 'x-google-start-bitrate': 1000, -// }, -// }, ]; const closeCall = (callId) => { try { if (callId && videoCalls[callId]) { - videoCalls[callId].producerVideo?.close(); - videoCalls[callId].producerAudio?.close(); - videoCalls[callId].consumerVideo?.close(); - videoCalls[callId].consumerAudio?.close(); + videoCalls[callId].receiverVideoProducer?.close(); + videoCalls[callId].receiverAudioProducer?.close(); + videoCalls[callId].initiatorConsumerVideo?.close(); + videoCalls[callId].initiatorConsumerAudio?.close(); - videoCalls[callId]?.consumerTransport?.close(); - videoCalls[callId]?.producerTransport?.close(); + videoCalls[callId]?.initiatorConsumerTransport?.close(); + videoCalls[callId]?.receiverProducerTransport?.close(); videoCalls[callId]?.router?.close(); delete videoCalls[callId]; } else { @@ -212,9 +195,11 @@ peers.on('connection', async socket => { console.log('[createRoom] callId', callId); videoCalls[callId] = { router: await worker.createRouter({ mediaCodecs }) } console.log(`[createRoom] Router ID: ${videoCalls[callId].router.id}`); + videoCalls[callId].receiverSocketId = socket.id + } else { + videoCalls[callId].initiatorSockerId = socket.id } socketDetails[socket.id] = callId; - // rtpCapabilities is set for callback console.log('[getRtpCapabilities] callId', callId); callbackResponse = { @@ -232,7 +217,7 @@ peers.on('connection', async socket => { /* - Client emits a request to create server side Transport - - Depending on the sender, producerTransport or consumerTransport is created on that router + - Depending on the sender, a producer or consumer is created is created on that router - It will return parameters, these are required for the client to create the RecvTransport from the client. - If the client is producer(sender: true) then it will use parameters for device.createSendTransport(params) @@ -240,21 +225,23 @@ peers.on('connection', async socket => { */ socket.on('createWebRtcTransport', async ({ sender }, callback) => { try { + console.log('🟥', socket.id, JSON.stringify(sender)); const callId = socketDetails[socket.id]; - console.log(`[createWebRtcTransport] sender ${sender} | callId ${callId}`); + console.log(`[createWebRtcTransport] socket ${socket.id} | sender ${sender} | callId ${callId}`); if (sender) { - if (!videoCalls[callId].producerTransport) { - videoCalls[callId].producerTransport = await createWebRtcTransportLayer(callId, callback); + if(!videoCalls[callId].receiverProducerTransport && !isInitiator(callId, socket.id)) { + videoCalls[callId].receiverProducerTransport = await createWebRtcTransportLayer(callId, callback); + } else if(!videoCalls[callId].initiatorProducerTransport && 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].consumerTransport) { - videoCalls[callId].consumerTransport = await createWebRtcTransportLayer(callId, callback); - } else { - console.log(`consumerTransport has already been defined | callId ${callId}`); - callback(null); + if(!videoCalls[callId].receiverConsumerTransport && !isInitiator(callId, socket.id)) { + videoCalls[callId].receiverConsumerTransport = await createWebRtcTransportLayer(callId, callback); + } else if(!videoCalls[callId].initiatorConsumerTransport && isInitiator(callId, socket.id)) { + videoCalls[callId].initiatorConsumerTransport = await createWebRtcTransportLayer(callId, callback); } } } catch (error) { @@ -272,64 +259,103 @@ peers.on('connection', async socket => { const callId = socketDetails[socket.id]; if (typeof dtlsParameters === 'string') dtlsParameters = JSON.parse(dtlsParameters); - console.log(`[transport-connect] socket.id ${socket.id} | callId ${callId}`); - await videoCalls[callId].producerTransport.connect({ dtlsParameters }); + console.log(`[transport-connect] socket ${socket.id} | callId ${callId}`); + if (!isInitiator(callId, socket.id)) { + await videoCalls[callId].receiverProducerTransport.connect({ dtlsParameters }); + } else { + await videoCalls[callId].initiatorProducerTransport.connect({ dtlsParameters }); + } } catch (error) { console.log(`ERROR | transport-connect | callId ${socketDetails[socket.id]} | ${error.message}`); } }); /* - - The event sent by the client (PRODUCER) after successfully connecting to producerTransport - - For the router with the id callId, we make produce on producerTransport + - The event sent by the client (PRODUCER) after successfully connecting to receiverProducerTransport/initiatorProducerTransport + - For the router with the id callId, we make produce on receiverProducerTransport/initiatorProducerTransport - Create the handler on producer at the 'transportclose' event */ - socket.on('transport-produce', async ({ kind, rtpParameters, appData }, callback) => { - try { - const callId = socketDetails[socket.id]; - if (typeof rtpParameters === 'string') rtpParameters = JSON.parse(rtpParameters); - - console.log(`[transport-produce] kind: ${kind} | socket.id: ${socket.id} | callId: ${callId}`); - console.log('kind', kind); - console.log('rtpParameters', rtpParameters); - - if (kind === 'video') { - videoCalls[callId].producerVideo = await videoCalls[callId].producerTransport.produce({ - kind, - rtpParameters, - }); + socket.on('transport-produce', async ({ kind, rtpParameters, appData }, callback) => { + try { + const callId = socketDetails[socket.id]; + if (typeof rtpParameters === 'string') rtpParameters = JSON.parse(rtpParameters); + console.log(`[transport-produce] kind: ${kind} | socket: ${socket.id} | callId: ${callId}`); + if (kind === 'video') { + if (!isInitiator(callId, socket.id)) { + videoCalls[callId].receiverVideoProducer = await videoCalls[callId].receiverProducerTransport.produce({ + kind, + rtpParameters, + }); - console.log(`[transport-produce] Producer ID: ${videoCalls[callId].producerVideo.id} | kind: ${videoCalls[callId].producerVideo.kind}`); - - videoCalls[callId].producerVideo.on('transportclose', () => { - const callId = socketDetails[socket.id]; - console.log('transport for this producer closed', callId) - closeCall(callId); - }); + console.log(`[transport-produce] receiverVideoProducer Producer ID: ${videoCalls[callId].receiverVideoProducer.id} | kind: ${videoCalls[callId].receiverVideoProducer.kind}`); - // Send back to the client the Producer's id - callback && callback({ - id: videoCalls[callId].producerVideo.id - }); + videoCalls[callId].receiverVideoProducer.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport for this producer closed', callId) + closeCall(callId); + }); + + // Send back to the client the Producer's id + callback && callback({ + id: videoCalls[callId].receiverVideoProducer.id + }); + } else { + videoCalls[callId].initiatorVideoProducer = await videoCalls[callId].initiatorProducerTransport.produce({ + kind, + rtpParameters, + }); + + console.log(`[transport-produce] initiatorVideoProducer Producer ID: ${videoCalls[callId].initiatorVideoProducer.id} | kind: ${videoCalls[callId].initiatorVideoProducer.kind}`); + + videoCalls[callId].initiatorVideoProducer.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport for this producer closed', callId) + closeCall(callId); + }); + + callback && callback({ + id: videoCalls[callId].initiatorVideoProducer.id + }); + } } else if (kind === 'audio') { - videoCalls[callId].producerAudio = await videoCalls[callId].producerTransport.produce({ - kind, - rtpParameters, - }); + if (!isInitiator(callId, socket.id)) { + videoCalls[callId].receiverAudioProducer = await videoCalls[callId].receiverProducerTransport.produce({ + kind, + rtpParameters, + }); - console.log(`[transport-produce] Producer ID: ${videoCalls[callId].producerAudio.id} | kind: ${videoCalls[callId].producerAudio.kind}`); - - videoCalls[callId].producerAudio.on('transportclose', () => { - const callId = socketDetails[socket.id]; - console.log('transport for this producer closed', callId) - closeCall(callId); - }); + console.log(`[transport-produce] receiverAudioProducer Producer ID: ${videoCalls[callId].receiverAudioProducer.id} | kind: ${videoCalls[callId].receiverAudioProducer.kind}`); + + videoCalls[callId].receiverAudioProducer.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport for this producer closed', callId) + closeCall(callId); + }); - // Send back to the client the Producer's id - callback && callback({ - id: videoCalls[callId].producerAudio.id - }); + // Send back to the client the Producer's id + callback && callback({ + id: videoCalls[callId].receiverAudioProducer.id + }); + } else { + videoCalls[callId].initiatorAudioProducer = await videoCalls[callId].initiatorProducerTransport.produce({ + kind, + rtpParameters, + }); + + console.log(`[transport-produce] initiatorAudioProducer Producer ID: ${videoCalls[callId].initiatorAudioProducer.id} | kind: ${videoCalls[callId].initiatorAudioProducer.kind}`); + + videoCalls[callId].initiatorAudioProducer.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport for this producer closed', callId) + closeCall(callId); + }); + + // Send back to the client the Producer's id + callback && callback({ + id: videoCalls[callId].initiatorAudioProducer.id + }); + } } } catch (error) { console.log(`ERROR | transport-produce | callId ${socketDetails[socket.id]} | ${error.message}`); @@ -343,8 +369,13 @@ peers.on('connection', async socket => { socket.on('transport-recv-connect', async ({ dtlsParameters }) => { try { const callId = socketDetails[socket.id]; - console.log(`[transport-recv-connect] socket.id ${socket.id} | callId ${callId}`); - await videoCalls[callId].consumerTransport.connect({ dtlsParameters }); + console.log(`[transport-recv-connect] socket ${socket.id} | callId ${callId}`); + // await videoCalls[callId].consumerTransport.connect({ dtlsParameters }); + if(!isInitiator(callId, socket.id)) { + await videoCalls[callId].receiverConsumerTransport.connect({ dtlsParameters }); + } else if(isInitiator(callId, socket.id)) { + await videoCalls[callId].initiatorConsumerTransport.connect({ dtlsParameters }); + } } catch (error) { console.log(`ERROR | transport-recv-connect | callId ${socketDetails[socket.id]} | ${error.message}`); } @@ -359,34 +390,47 @@ peers.on('connection', async socket => { */ socket.on('consume', async ({ rtpCapabilities }, callback) => { try { - console.log(`[consume] rtpCapabilities: ${JSON.stringify(rtpCapabilities)}`); - const callId = socketDetails[socket.id]; + console.log(`[consume] socket ${socket.id} | callId ${callId} | rtpCapabilities: ${JSON.stringify(rtpCapabilities)}`); + console.log('[consume] callId', callId); + let canConsumeVideo, canConsumeAudio; + if (isInitiator(callId, socket.id)) { + canConsumeVideo = !!videoCalls[callId].receiverVideoProducer && !!videoCalls[callId].router.canConsume({ + producerId: videoCalls[callId].receiverVideoProducer.id, + rtpCapabilities + }); + canConsumeAudio = !!videoCalls[callId].receiverAudioProducer && !!videoCalls[callId].router.canConsume({ + producerId: videoCalls[callId].receiverAudioProducer.id, + rtpCapabilities + }); - const canConsumeVideo = !!videoCalls[callId].producerVideo && !!videoCalls[callId].router.canConsume({ - producerId: videoCalls[callId].producerVideo.id, - rtpCapabilities - }) - - const canConsumeAudio = !!videoCalls[callId].producerAudio && !!videoCalls[callId].router.canConsume({ - producerId: videoCalls[callId].producerAudio.id, - rtpCapabilities - }) + } else { + canConsumeVideo = !!videoCalls[callId].initiatorVideoProducer && !!videoCalls[callId].router.canConsume({ + producerId: videoCalls[callId].initiatorVideoProducer.id, + rtpCapabilities + }); + canConsumeAudio = !!videoCalls[callId].initiatorAudioProducer && !!videoCalls[callId].router.canConsume({ + producerId: videoCalls[callId].initiatorAudioProducer.id, + rtpCapabilities + }); + } console.log('[consume] canConsumeVideo', canConsumeVideo); console.log('[consume] canConsumeAudio', canConsumeAudio); if (canConsumeVideo && !canConsumeAudio) { - console.log('1'); - const videoParams = await consumeVideo(callId, rtpCapabilities) - console.log('videoParams', videoParams); + const videoParams = await consumeVideo(callId, socket.id, rtpCapabilities) callback({ videoParams, audioParams: null }); } else if (canConsumeVideo && canConsumeAudio) { - console.log('2'); - const videoParams = await consumeVideo(callId, rtpCapabilities) - const audioParams = await consumeAudio(callId, rtpCapabilities) + const videoParams = await consumeVideo(callId, socket.id, rtpCapabilities) + const audioParams = await consumeAudio(callId, socket.id, rtpCapabilities) callback({ videoParams, audioParams }); + } else if (!canConsumeVideo && canConsumeAudio) { + const audioParams = await consumeAudio(callId, socket.id, rtpCapabilities) + const data = { videoParams: null, audioParams }; + console.log('-----------======= data', data); + callback(data); } else { console.log(`[consume] Can't consume | callId ${callId}`); callback(null); @@ -405,71 +449,141 @@ peers.on('connection', async socket => { try { const callId = socketDetails[socket.id]; console.log(`[consumer-resume] callId ${callId}`) - await videoCalls[callId].consumerVideo.resume(); - await videoCalls[callId].consumerAudio.resume(); + + if (isInitiator(callId, socket.id)) { + console.log(`[consumer-resume] isInitiator true`); + await videoCalls[callId].initiatorConsumerVideo.resume(); + await videoCalls[callId].initiatorConsumerAudio.resume(); + } else { + console.log(`[consumer-resume] isInitiator false`); + (videoCalls[callId].receiverConsumerVideo) && await videoCalls[callId].receiverConsumerVideo.resume(); + (videoCalls[callId].receiverConsumerVideo) && await videoCalls[callId].receiverConsumerAudio.resume(); + } + // await videoCalls[callId].consumerVideo.resume(); + // await videoCalls[callId].consumerAudio.resume(); } catch (error) { console.log(`ERROR | consumer-resume | callId ${socketDetails[socket.id]} | ${error.message}`); } }); }); -const consumeVideo = async (callId, rtpCapabilities) => { - videoCalls[callId].consumerVideo = await videoCalls[callId].consumerTransport.consume({ - producerId: videoCalls[callId].producerVideo.id, - rtpCapabilities, - paused: true, - }); +const consumeVideo = async (callId, socketId, rtpCapabilities) => { - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose - videoCalls[callId].consumerVideo.on('transportclose', () => { - const callId = socketDetails[socket.id]; - console.log('transport close from consumer', callId); - closeCall(callId); - }); + if(isInitiator(callId, socketId)) { + videoCalls[callId].initiatorConsumerVideo = await videoCalls[callId].initiatorConsumerTransport.consume({ + producerId: videoCalls[callId].receiverVideoProducer.id, + rtpCapabilities, + paused: true, + }); - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose - videoCalls[callId].consumerVideo.on('producerclose', () => { - const callId = socketDetails[socket.id]; - console.log('producer of consumer closed', callId); - closeCall(callId); - }); + // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose + videoCalls[callId].initiatorConsumerVideo.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport close from consumer', callId); + closeCall(callId); + }); - return { - id: videoCalls[callId].consumerVideo.id, - producerId: videoCalls[callId].producerVideo.id, - kind: 'video', - rtpParameters: videoCalls[callId].consumerVideo.rtpParameters, + // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose + videoCalls[callId].initiatorConsumerVideo.on('producerclose', () => { + const callId = socketDetails[socket.id]; + console.log('producer of consumer closed', callId); + closeCall(callId); + }); + + return { + id: videoCalls[callId].initiatorConsumerVideo.id, + producerId: videoCalls[callId].receiverVideoProducer.id, + kind: 'video', + rtpParameters: videoCalls[callId].initiatorConsumerVideo.rtpParameters, + } + } else { + videoCalls[callId].receiverConsumerVideo = await videoCalls[callId].receiverConsumerTransport.consume({ + producerId: videoCalls[callId].initiatorVideoProducer.id, + rtpCapabilities, + paused: true, + }); + + videoCalls[callId].receiverConsumerVideo.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport close from consumer', callId); + closeCall(callId); + }); + + videoCalls[callId].receiverConsumerVideo.on('producerclose', () => { + const callId = socketDetails[socket.id]; + console.log('producer of consumer closed', callId); + closeCall(callId); + }); + + return { + id: videoCalls[callId].receiverConsumerVideo.id, + producerId: videoCalls[callId].initiatorVideoProducer.id, + kind: 'video', + rtpParameters: videoCalls[callId].receiverConsumerVideo.rtpParameters, + } } } -const consumeAudio = async (callId, rtpCapabilities) => { - videoCalls[callId].consumerAudio = await videoCalls[callId].consumerTransport.consume({ - producerId: videoCalls[callId].producerAudio.id, - rtpCapabilities, - paused: true, - }); +const consumeAudio = async (callId, socketId, rtpCapabilities) => { + if(isInitiator(callId, socketId)) { + videoCalls[callId].initiatorConsumerAudio = await videoCalls[callId].initiatorConsumerTransport.consume({ + producerId: videoCalls[callId].receiverAudioProducer.id, + rtpCapabilities, + paused: true, + }); - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose - videoCalls[callId].consumerAudio.on('transportclose', () => { - const callId = socketDetails[socket.id]; - console.log('transport close from consumer', callId); - closeCall(callId); - }); + // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-transportclose + videoCalls[callId].initiatorConsumerAudio.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport close from consumer', callId); + closeCall(callId); + }); - // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose - videoCalls[callId].consumerAudio.on('producerclose', () => { - const callId = socketDetails[socket.id]; - console.log('producer of consumer closed', callId); - closeCall(callId); - }); - return { - id: videoCalls[callId].consumerAudio.id, - producerId: videoCalls[callId].producerAudio.id, - kind: 'audio', - rtpParameters: videoCalls[callId].consumerAudio.rtpParameters, + // https://mediasoup.org/documentation/v3/mediasoup/api/#consumer-on-producerclose + videoCalls[callId].initiatorConsumerAudio.on('producerclose', () => { + const callId = socketDetails[socket.id]; + console.log('producer of consumer closed', callId); + closeCall(callId); + }); + + return { + id: videoCalls[callId].initiatorConsumerAudio.id, + producerId: videoCalls[callId].receiverAudioProducer.id, + kind: 'audio', + rtpParameters: videoCalls[callId].initiatorConsumerAudio.rtpParameters, + } + } else { + videoCalls[callId].receiverConsumerAudio = await videoCalls[callId].receiverConsumerTransport.consume({ + producerId: videoCalls[callId].initiatorAudioProducer.id, + rtpCapabilities, + paused: true, + }); + + videoCalls[callId].receiverConsumerAudio.on('transportclose', () => { + const callId = socketDetails[socket.id]; + console.log('transport close from consumer', callId); + closeCall(callId); + }); + + videoCalls[callId].receiverConsumerAudio.on('producerclose', () => { + const callId = socketDetails[socket.id]; + console.log('producer of consumer closed', callId); + closeCall(callId); + }); + + return { + id: videoCalls[callId].receiverConsumerAudio.id, + producerId: videoCalls[callId].initiatorAudioProducer.id, + kind: 'audio', + rtpParameters: videoCalls[callId].receiverConsumerAudio.rtpParameters, + } } } +const isInitiator = (callId, socketId) => { + return (videoCalls[callId].initiatorSockerId === socketId); +} + /* - Called from at event 'createWebRtcTransport' and assigned to the consumer or producer transport - It will return parameters, these are required for the client to create the RecvTransport diff --git a/public/bundle.js b/public/bundle.js index 82ddb74..e9b17f7 100644 --- a/public/bundle.js +++ b/public/bundle.js @@ -20353,7 +20353,7 @@ module.exports = yeast; },{}],94:[function(require,module,exports){ module.exports = { hubAddress: 'https://hub.dev.linx.safemobile.com/', - mediasoupAddress: 'https://video.safemobile.org', + mediasoupAddress: 'https://testing.video.safemobile.org', } },{}],95:[function(require,module,exports){ const io = require('socket.io-client') @@ -20368,10 +20368,24 @@ const ASSET_NAME = urlParams.get('assetName') || null; const ASSET_TYPE = urlParams.get('assetType') || null; let callId = parseInt(urlParams.get('callId')) || null; const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false +let remoteVideo = document.getElementById('remoteVideo') +remoteVideo.defaultMuted = true +let produceAudio = false + console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER) console.log('🟩 config', config) +produceAudioSelector = document.getElementById('produceAudio'); +produceAudioSelector.addEventListener('change', e => { + if(e.target.checked) { + produceAudio = true + console.log('produce audio'); + } else { + produceAudio = false + } +}); + let socket, hub let device let rtpCapabilities @@ -20381,6 +20395,21 @@ let producerVideo let producerAudio let consumer let originAssetId +let consumerVideo // local consumer video(consumer not transport) +let consumerAudio // local consumer audio(consumer not transport) + +const remoteSoundControl = document.getElementById('remoteSoundControl'); + +remoteSoundControl.addEventListener('click', function handleClick() { + console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); + if (remoteSoundControl.textContent === 'Unmute') { + remoteVideo.muted = false + remoteSoundControl.textContent = 'Mute'; + } else { + remoteVideo.muted = true + remoteSoundControl.textContent = 'Unmute'; + } +}); // https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions // https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce @@ -20502,7 +20531,7 @@ const streamSuccess = (stream) => { const getLocalStream = () => { console.log('[getLocalStream]'); navigator.mediaDevices.getUserMedia({ - audio: true, + audio: produceAudio ? true : false, video: { qvga : { width: { ideal: 320 }, height: { ideal: 240 } }, vga : { width: { ideal: 640 }, height: { ideal: 480 } }, @@ -20580,7 +20609,7 @@ const createSendTransport = () => { console.log('[createSendTransport'); // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true - socket.emit('createWebRtcTransport', { sender: true, callId }, (value) => { + socket.emit('createWebRtcTransport', { sender: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); @@ -20651,34 +20680,36 @@ const connectSendTransport = async () => { // this action will trigger the 'connect' and 'produce' events above // Produce video - producerVideo = await producerTransport.produce(videoParams) + let producerVideoHandler = await producerTransport.produce(videoParams) console.log('videoParams', videoParams); console.log('producerVideo', producerVideo); - producerVideo.on('trackended', () => { + producerVideoHandler.on('trackended', () => { console.log('track ended') // close video track }) - producerVideo.on('transportclose', () => { + producerVideoHandler.on('transportclose', () => { console.log('transport ended') // close video track }) // Produce audio - producerAudio = await producerTransport.produce(audioParams) - console.log('audioParams', audioParams); - console.log('producerAudio', producerAudio); - - producerAudio.on('trackended', () => { - console.log('track ended') - // close audio track - }) - - producerAudio.on('transportclose', () => { - console.log('transport ended') - // close audio track - }) + if (produceAudio) { + let producerAudioHandler = await producerTransport.produce(audioParams) + console.log('audioParams', audioParams); + console.log('producerAudio', producerAudio); + + producerAudioHandler.on('trackended', () => { + console.log('track ended') + // close audio track + }) + + producerAudioHandler.on('transportclose', () => { + console.log('transport ended') + // close audio track + }) + } const answer = { origin_asset_id: ASSET_ID, @@ -20762,34 +20793,95 @@ const connectRecvTransport = async () => { await socket.emit('consume', { rtpCapabilities: device.rtpCapabilities, callId - }, async ({ params }) => { - if (params.error) { - console.log('Cannot Consume') - return - } - - // Then consume with the local consumer transport - // which creates a consumer - consumer = await consumerTransport.consume({ - id: params.id, - producerId: params.producerId, - kind: params.kind, - rtpParameters: params.rtpParameters - }) - - // destructure and retrieve the video track from the producer - const { track } = consumer + }, async ({videoParams, audioParams}) => { + console.log(`[consume] 🟩 videoParams`, videoParams) + console.log(`[consume] 🟩 audioParams`, audioParams) + console.log('[consume] 🟩 consumerTransport', consumerTransport) let stream = new MediaStream() - stream.addTrack(track) - // stream.removeTrack(track) - remoteVideo.srcObject = stream - socket.emit('consumer-resume') - console.log('consumer', consumer); + // Maybe the unit does not produce video or audio, so we must only consume what is produced + if (videoParams) { + console.log('❗ Have VIDEO stream to consume'); + stream.addTrack(await getVideoTrask(videoParams)) + } else { + console.log('❗ Don\'t have VIDEO stream to consume'); + } + + if (audioParams) { + console.log('❗ Have AUDIO stream to consume'); + let audioTrack = await getAudioTrask(audioParams) + stream.addTrack(audioTrack) + } else { + console.log('❗ Don\'t have AUDIO stream to consume'); + } + + socket.emit('consumer-resume') + + remoteVideo.srcObject = stream + remoteVideo.setAttribute('autoplay', true) + + remoteVideo.play() + .then(() => { + console.log('remoteVideo PLAY') + }) + .catch((error) => { + displayError(`remoteVideo PLAY ERROR | ${error.message}`) + }) }) } +const getVideoTrask = async (videoParams) => { + consumerVideo = await consumerTransport.consume({ + id: videoParams.id, + producerId: videoParams.producerId, + kind: videoParams.kind, + rtpParameters: videoParams.rtpParameters + }) + + consumerVideo.on('transportclose', () => { + console.log('transport closed so consumer closed') + }) + + return consumerVideo.track +} + +const getAudioTrask = async (audioParams) => { + consumerAudio = await consumerTransport.consume({ + id: audioParams.id, + producerId: audioParams.producerId, + kind: audioParams.kind, + rtpParameters: audioParams.rtpParameters + }) + + consumerAudio.on('transportclose', () => { + console.log('transport closed so consumer closed') + }) + + const audioTrack = consumerAudio.track + + audioTrack.applyConstraints({ + audio: { + advanced: [ + { + echoCancellation: {exact: true} + }, + { + autoGainControl: {exact: true} + }, + { + noiseSuppression: {exact: true} + }, + { + highpassFilter: {exact: true} + } + ] + } + }) + + return audioTrack +} + const closeCall = () => { console.log('closeCall'); @@ -20811,8 +20903,31 @@ const closeCall = () => { resetCallSettings() } +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() + }) +} btnLocalVideo.addEventListener('click', getLocalStream) -btnRecvSendTransport.addEventListener('click', goConnect) +btnRecvSendTransport.addEventListener('click', consume) btnCloseCall.addEventListener('click', closeCall) },{"./config":94,"mediasoup-client":66,"socket.io-client":82}]},{},[95]); diff --git a/public/config.js b/public/config.js index fa3612f..f631fc8 100644 --- a/public/config.js +++ b/public/config.js @@ -1,4 +1,4 @@ module.exports = { hubAddress: 'https://hub.dev.linx.safemobile.com/', - mediasoupAddress: 'https://video.safemobile.org', + mediasoupAddress: 'https://testing.video.safemobile.org', } \ No newline at end of file diff --git a/public/images/favicon.ico b/public/images/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..6172c2bb941ddc47a67562d9812f138d9a4ded0e GIT binary patch literal 4286 zcmeHL`BRfu6ixquPJd|KaDmc_iVD>c1(8Ltw6Z8#ahD2Obvnh3iYRuOu~Y@cZJau` zbwN>F+UihHKpjUdVHK1>LO?(Wk_55<30a`0_q{KPAa+KX&UBm+=8@!m-+SlWbI-l+ z3nI~5^y};_Vt+*!-Vuq0h(w}sG-yf`K!eTmAG&t;ZD9x#B9YZ>!kh6%gV)OgX7a2V z7LyTHQ#XIlKL1+`Jr*_*{d*2U0O8Bj-s+)4yp>n(b{ksmTsf%x)3W{(`&WzJ*=-1y93LN$JJHPsnwhV z*Vkl5cc+G9OA0!LU`$O;9|pBMv>B+lzGWmluvL#9DYO zA1h}2VSnN_XjMweGhuhMp-Fle5{kRBU^Z&Y;~_8GK<@(}5r+|niXx&yT0;!bZMHQ zS635{IGYaPP&QXc}Zq!Mm0 z9^UuI$<(Phv}+^O3I+MS8w{Tf)&m-()!4jr0mq)};e;~>ebG{zPM*<1O!-{m=RDY^2t|= zA_Z*iQwMfsK@e%M8|?}?&K*6BkO^bqJ7xruH^-3<&8V-IaBSwaNUtf#yK)J-r1b#4v@3}o@6*Ny36mKVCX3%=7Q|b>jrR&Kb z^;9n!?Af}B*M-09X#AYAhxk_^e&te{8-n@MJaOYvCX9M5l=asLdp_+E0QrNpke6p; z*Sa;N{|L;TJRaB5Pg5`IfWA$Q<3H|30C8aB@V7~LBK-~0;wa8vRuT=3q5vIjZ8&ux z1;OK7c}=J7+zyShmG^}wayjBxE#o~N3 z`a64VuB+ubuztZjl#_X$bkw7|IGudq&NT~hABD>&_EOxP4)60Cpx&=jsqp*BO}Lls zOS%Q3C_jwOr`zak*WgrID#vEM>;T2hH0!mUD?;xRI5ZK5gwLsOk&l@UnLiyv(igEj z?vRO2II(vM#k2<6))HR-LjN&xE!0nP=vowyJMW?o)aYrK=qrOa=o~gk4=kHAh~Pm&M@X@dO?(s}tty zSu|4V9MP#&{jgc@v*U9eST5+yRn*rZF*cg(5bEiUtc6F>@EAW(jb~rT;67u0hUu+t%5`vH zHCk0T&sJlx&?(F4UV4_LdkuO$P9HjeBj4?^d5zAw=i==fd*Am=7nTb{M+fydp+^hP zS7!dXtvO%dK>dOBh?=rB>}*Xuv_dE2=F literal 0 HcmV?d00001 diff --git a/public/images/volume-high.png b/public/images/volume-high.png new file mode 100644 index 0000000000000000000000000000000000000000..812224a7b8ecda5468faa781011a27761c2a9b15 GIT binary patch literal 493 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjEa{HEjtmSN`?>!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBD8ZKG?d}4kf#9d}?s_1_ zS>O>_45Sml_(QhSc_8Dxr;B5V$MLsQtho+32((T9VpnB-@t&K&#*Y`Plvww+-};?( zgu8>wY~BIpA1}Tz)tPO!Xqj*%W$l;zw6yZie-kIk9{>3|n(3IsakG*YMT=zvHZidW zl=AQBILVx`q%E5{@;p=U&0Wk-LkjjczNtQNW{bAyo$HH4Crq_je(Ne9v)ifivbC@F zt?|u~VhCBf&ZG8{kN(H$^{dq`HgIp_{j+9yZgaCs@y&B)ykYBJ%c;Kix^ukF>XG?e zX33ME4}|t@v8y^dLp)dU_HCD14oT6GV!&@#--J}=HkdjL< zW14mC;Qr;}$Lg1ue&}3s7U*@=64!{5l*E!$tK_0oAjM#0U}U6gXsByw7Ghv#WnyY& rWUOsqU}a!%aM>AP5F=^G%}>cptHiBg!|#$Fpaup{S3j3^P6!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBD8ZKG?d}4kf#9d}?s_1_ zS>O>_45Sml_(QhSc_3qnr;B5V$MLsQ4Y>{*@VGLcb*-AHx6{e1X!5#q)2g3zEDdhI ze$dNsn`g6bDaX&r4v*~Zwmn^D8LIRkE3=My-hn;I*QPSCJ?Nc&d&X=Aui!h(C+58L zzogCFadL*YQo$<5q-)1L8@M-QFea%AMyinn6=&yH( zN%>d2_KKRP++r=4EaMLDSEc29H~jMduzH`dq5V2Lu7(3kBmTOs0lHVU#5JNMC9x#c zD!C{XNHG{07#Zmr8tNLFg&3GwnV49anra&uSQ!|&7tYp2(U6;;l9^VCTZ5U7@
+ Client options: + +
@@ -43,12 +46,24 @@ @@ -61,33 +76,10 @@ -
Local Video
- +
- +
+
diff --git a/public/index.js b/public/index.js index 86b9d90..2d2faac 100644 --- a/public/index.js +++ b/public/index.js @@ -10,10 +10,24 @@ const ASSET_NAME = urlParams.get('assetName') || null; const ASSET_TYPE = urlParams.get('assetType') || null; let callId = parseInt(urlParams.get('callId')) || null; const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false +let remoteVideo = document.getElementById('remoteVideo') +remoteVideo.defaultMuted = true +let produceAudio = false + console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER) console.log('🟩 config', config) +produceAudioSelector = document.getElementById('produceAudio'); +produceAudioSelector.addEventListener('change', e => { + if(e.target.checked) { + produceAudio = true + console.log('produce audio'); + } else { + produceAudio = false + } +}); + let socket, hub let device let rtpCapabilities @@ -23,6 +37,21 @@ let producerVideo let producerAudio let consumer let originAssetId +let consumerVideo // local consumer video(consumer not transport) +let consumerAudio // local consumer audio(consumer not transport) + +const remoteSoundControl = document.getElementById('remoteSoundControl'); + +remoteSoundControl.addEventListener('click', function handleClick() { + console.log('remoteSoundControl.textContent', remoteSoundControl.textContent); + if (remoteSoundControl.textContent === 'Unmute') { + remoteVideo.muted = false + remoteSoundControl.textContent = 'Mute'; + } else { + remoteVideo.muted = true + remoteSoundControl.textContent = 'Unmute'; + } +}); // https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions // https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce @@ -144,7 +173,7 @@ const streamSuccess = (stream) => { const getLocalStream = () => { console.log('[getLocalStream]'); navigator.mediaDevices.getUserMedia({ - audio: true, + audio: produceAudio ? true : false, video: { qvga : { width: { ideal: 320 }, height: { ideal: 240 } }, vga : { width: { ideal: 640 }, height: { ideal: 480 } }, @@ -222,7 +251,7 @@ const createSendTransport = () => { console.log('[createSendTransport'); // see server's socket.on('createWebRtcTransport', sender?, ...) // this is a call from Producer, so sender = true - socket.emit('createWebRtcTransport', { sender: true, callId }, (value) => { + socket.emit('createWebRtcTransport', { sender: true }, (value) => { console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`); @@ -293,34 +322,36 @@ const connectSendTransport = async () => { // this action will trigger the 'connect' and 'produce' events above // Produce video - producerVideo = await producerTransport.produce(videoParams) + let producerVideoHandler = await producerTransport.produce(videoParams) console.log('videoParams', videoParams); console.log('producerVideo', producerVideo); - producerVideo.on('trackended', () => { + producerVideoHandler.on('trackended', () => { console.log('track ended') // close video track }) - producerVideo.on('transportclose', () => { + producerVideoHandler.on('transportclose', () => { console.log('transport ended') // close video track }) // Produce audio - producerAudio = await producerTransport.produce(audioParams) - console.log('audioParams', audioParams); - console.log('producerAudio', producerAudio); - - producerAudio.on('trackended', () => { - console.log('track ended') - // close audio track - }) - - producerAudio.on('transportclose', () => { - console.log('transport ended') - // close audio track - }) + if (produceAudio) { + let producerAudioHandler = await producerTransport.produce(audioParams) + console.log('audioParams', audioParams); + console.log('producerAudio', producerAudio); + + producerAudioHandler.on('trackended', () => { + console.log('track ended') + // close audio track + }) + + producerAudioHandler.on('transportclose', () => { + console.log('transport ended') + // close audio track + }) + } const answer = { origin_asset_id: ASSET_ID, @@ -404,34 +435,95 @@ const connectRecvTransport = async () => { await socket.emit('consume', { rtpCapabilities: device.rtpCapabilities, callId - }, async ({ params }) => { - if (params.error) { - console.log('Cannot Consume') - return - } - - // Then consume with the local consumer transport - // which creates a consumer - consumer = await consumerTransport.consume({ - id: params.id, - producerId: params.producerId, - kind: params.kind, - rtpParameters: params.rtpParameters - }) - - // destructure and retrieve the video track from the producer - const { track } = consumer + }, async ({videoParams, audioParams}) => { + console.log(`[consume] 🟩 videoParams`, videoParams) + console.log(`[consume] 🟩 audioParams`, audioParams) + console.log('[consume] 🟩 consumerTransport', consumerTransport) let stream = new MediaStream() - stream.addTrack(track) - // stream.removeTrack(track) - remoteVideo.srcObject = stream - socket.emit('consumer-resume') - console.log('consumer', consumer); + // Maybe the unit does not produce video or audio, so we must only consume what is produced + if (videoParams) { + console.log('❗ Have VIDEO stream to consume'); + stream.addTrack(await getVideoTrask(videoParams)) + } else { + console.log('❗ Don\'t have VIDEO stream to consume'); + } + + if (audioParams) { + console.log('❗ Have AUDIO stream to consume'); + let audioTrack = await getAudioTrask(audioParams) + stream.addTrack(audioTrack) + } else { + console.log('❗ Don\'t have AUDIO stream to consume'); + } + + socket.emit('consumer-resume') + + remoteVideo.srcObject = stream + remoteVideo.setAttribute('autoplay', true) + + remoteVideo.play() + .then(() => { + console.log('remoteVideo PLAY') + }) + .catch((error) => { + displayError(`remoteVideo PLAY ERROR | ${error.message}`) + }) }) } +const getVideoTrask = async (videoParams) => { + consumerVideo = await consumerTransport.consume({ + id: videoParams.id, + producerId: videoParams.producerId, + kind: videoParams.kind, + rtpParameters: videoParams.rtpParameters + }) + + consumerVideo.on('transportclose', () => { + console.log('transport closed so consumer closed') + }) + + return consumerVideo.track +} + +const getAudioTrask = async (audioParams) => { + consumerAudio = await consumerTransport.consume({ + id: audioParams.id, + producerId: audioParams.producerId, + kind: audioParams.kind, + rtpParameters: audioParams.rtpParameters + }) + + consumerAudio.on('transportclose', () => { + console.log('transport closed so consumer closed') + }) + + const audioTrack = consumerAudio.track + + audioTrack.applyConstraints({ + audio: { + advanced: [ + { + echoCancellation: {exact: true} + }, + { + autoGainControl: {exact: true} + }, + { + noiseSuppression: {exact: true} + }, + { + highpassFilter: {exact: true} + } + ] + } + }) + + return audioTrack +} + const closeCall = () => { console.log('closeCall'); @@ -453,7 +545,30 @@ const closeCall = () => { resetCallSettings() } +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() + }) +} btnLocalVideo.addEventListener('click', getLocalStream) -btnRecvSendTransport.addEventListener('click', goConnect) +btnRecvSendTransport.addEventListener('click', consume) btnCloseCall.addEventListener('click', closeCall) \ No newline at end of file -- 2.37.1