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}`) + }) }) }