Safemobile
/
mediasoup
21
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

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

This commit is contained in:
Sergiu Toma 2022-08-06 10:05:43 +03:00
parent 3cc5b0dea8
commit a2223529da
4 changed files with 168 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app.js
View File

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

79
public/bundle.js
View File

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

14
public/index.html
View File

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

79
public/index.js
View File

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