LINXD-2209-black-screen-when-2-video-calls-are-answered-simultaneously #3
173
app.js
173
app.js
@ -15,14 +15,28 @@ import path from 'path'
|
||||
const __dirname = path.resolve()
|
||||
|
||||
import Server from 'socket.io'
|
||||
import mediasoup, { getSupportedRtpCapabilities } from 'mediasoup'
|
||||
import mediasoup from 'mediasoup'
|
||||
|
||||
let worker
|
||||
let router = {}
|
||||
let producerTransport
|
||||
let consumerTransport
|
||||
let producer
|
||||
let consumer
|
||||
/**
|
||||
* videoCalls
|
||||
* |-> Router
|
||||
* |-> Producer
|
||||
* |-> Consumer
|
||||
* |-> Producer Transport
|
||||
* |-> Consumer Transport
|
||||
*
|
||||
* '<callId>': {
|
||||
* router: Router,
|
||||
* producer: Producer,
|
||||
* producerTransport: Producer Transport,
|
||||
* consumer: Consumer,
|
||||
* consumerTransport: Consumer Transport
|
||||
* }
|
||||
*
|
||||
**/
|
||||
let videoCalls = {}
|
||||
let socketDetails = {}
|
||||
|
||||
app.get('/', (_req, res) => {
|
||||
res.send('Hello from mediasoup app!')
|
||||
@ -43,19 +57,8 @@ httpsServer.listen(process.env.PORT, () => {
|
||||
})
|
||||
|
||||
const io = new Server(httpsServer)
|
||||
|
||||
// socket.io namespace (could represent a room?)
|
||||
const peers = io.of('/mediasoup')
|
||||
|
||||
/**
|
||||
* Worker
|
||||
* |-> Router(s)
|
||||
* |-> Producer Transport(s)
|
||||
* |-> Producer
|
||||
* |-> Consumer Transport(s)
|
||||
* |-> Consumer
|
||||
**/
|
||||
|
||||
const createWorker = async () => {
|
||||
worker = await mediasoup.createWorker({
|
||||
rtcMinPort: 2000,
|
||||
@ -96,40 +99,50 @@ const mediaCodecs = [
|
||||
},
|
||||
]
|
||||
|
||||
const closeCall = (callId) => {
|
||||
if (videoCalls[callId]) {
|
||||
videoCalls[callId].producer?.close();
|
||||
videoCalls[callId].consumer?.close();
|
||||
videoCalls[callId]?.consumerTransport.close();
|
||||
videoCalls[callId]?.producerTransport.close();
|
||||
videoCalls[callId].router.close();
|
||||
delete videoCalls[callId].router;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getRtpCapabilities = (callId, callback) => {
|
||||
console.log('[getRtpCapabilities] callId', callId);
|
||||
const rtpCapabilities = videoCalls[callId].router.rtpCapabilities;
|
||||
callback({ rtpCapabilities });
|
||||
}
|
||||
|
||||
peers.on('connection', async socket => {
|
||||
console.log('[connection] socketId:', socket.id)
|
||||
socket.emit('connection-success', {
|
||||
socketId: socket.id,
|
||||
existsProducer: producer ? true : false,
|
||||
socketId: socket.id
|
||||
})
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
// do some cleanup
|
||||
console.log('peer disconnected')
|
||||
console.log('peer disconnected | socket.id', socket.id)
|
||||
delete socketDetails[socket.id];
|
||||
})
|
||||
|
||||
socket.on('createRoom', async ({ callId }, callback) => {
|
||||
console.log('[createRoom] callId', callId);
|
||||
console.log('Router length:', Object.keys(router).length);
|
||||
if (router[callId] === undefined) {
|
||||
// worker.createRouter(options)
|
||||
// options = { mediaCodecs, appData }
|
||||
// mediaCodecs -> defined above
|
||||
// appData -> custom application data - we are not supplying any
|
||||
// none of the two are required
|
||||
router[callId] = await worker.createRouter({ mediaCodecs })
|
||||
console.log(`[createRoom] Router ID: ${router[callId].id}`)
|
||||
if (callId) {
|
||||
console.log(`[createRoom] socket.id ${socket.id} callId ${callId}`);
|
||||
if (!videoCalls[callId]) {
|
||||
console.log('[createRoom] callId', callId);
|
||||
videoCalls[callId] = { router: await worker.createRouter({ mediaCodecs }) }
|
||||
console.log(`[createRoom] Router ID: ${videoCalls[callId].router.id}`);
|
||||
}
|
||||
socketDetails[socket.id] = callId;
|
||||
getRtpCapabilities(callId, callback);
|
||||
cristi marked this conversation as resolved
Outdated
cristi
commented
For refactor: why do we need to differentiate between producerTransport and consumerTransport? Why don't we have a For refactor: why do we need to differentiate between producerTransport and consumerTransport? Why don't we have a `transport` variable (it is only one transport for each client regardless if they are producer or consumer)?
cristi
commented
We need producer and consumer transports for each call. We need producer and consumer transports for each call.
|
||||
} else {
|
||||
console.log(`[createRoom] missing callId ${callId}`);
|
||||
}
|
||||
|
||||
getRtpCapabilities(callId, callback)
|
||||
})
|
||||
|
||||
const getRtpCapabilities = (callId, callback) => {
|
||||
const rtpCapabilities = router[callId].rtpCapabilities
|
||||
|
||||
callback({ rtpCapabilities })
|
||||
}
|
||||
|
||||
// Client emits a request to create server side Transport
|
||||
// We need to differentiate between the producer and consumer transports
|
||||
socket.on('createWebRtcTransport', async ({ sender, callId }, callback) => {
|
||||
@ -137,93 +150,95 @@ peers.on('connection', async socket => {
|
||||
// The client indicates if it is a producer or a consumer
|
||||
// if sender is true, indicates a producer else a consumer
|
||||
if (sender)
|
||||
producerTransport = await createWebRtcTransportLayer(callId, callback)
|
||||
videoCalls[callId].producerTransport = await createWebRtcTransportLayer(callId, callback)
|
||||
else
|
||||
consumerTransport = await createWebRtcTransportLayer(callId, callback)
|
||||
videoCalls[callId].consumerTransport = await createWebRtcTransportLayer(callId, callback)
|
||||
})
|
||||
|
||||
// see client's socket.emit('transport-connect', ...)
|
||||
socket.on('transport-connect', async ({ dtlsParameters }) => {
|
||||
console.log('[transport-connect] DTLS PARAMS... ', { dtlsParameters })
|
||||
await producerTransport.connect({ dtlsParameters })
|
||||
const callId = socketDetails[socket.id];
|
||||
console.log(`[transport-connect] socket.id ${socket.id} | callId ${callId} | DTLS PARAMS... ${dtlsParameters}`)
|
||||
await videoCalls[callId].producerTransport.connect({ dtlsParameters })
|
||||
})
|
||||
|
||||
// see client's socket.emit('transport-produce', ...)
|
||||
socket.on('transport-produce', async ({ kind, rtpParameters, appData }) => {
|
||||
const callId = socketDetails[socket.id];
|
||||
console.log('[transport-produce] | socket.id', socket.id, '| callId', callId);
|
||||
// call produce based on the prameters from the client
|
||||
producer = await producerTransport.produce({
|
||||
videoCalls[callId].producer = await videoCalls[callId].producerTransport.produce({
|
||||
kind,
|
||||
rtpParameters,
|
||||
})
|
||||
console.log(`[transport-produce] Producer ID: ${producer.id} | kind: ${producer.kind}`)
|
||||
console.log(`[transport-produce] Producer ID: ${videoCalls[callId].producer.id} | kind: ${videoCalls[callId].producer.kind}`)
|
||||
|
||||
producer.on('transportclose', () => {
|
||||
videoCalls[callId].producer.on('transportclose', () => {
|
||||
const callId = socketDetails[socket.id];
|
||||
console.log('transport for this producer closed', callId)
|
||||
|
||||
// https://mediasoup.org/documentation/v3/mediasoup/api/#producer-close
|
||||
producer.close()
|
||||
|
||||
// https://mediasoup.org/documentation/v3/mediasoup/api/#router-close
|
||||
router[callId].close()
|
||||
delete router[callId]
|
||||
closeCall(callId);
|
||||
})
|
||||
})
|
||||
|
||||
// see client's socket.emit('transport-recv-connect', ...)
|
||||
socket.on('transport-recv-connect', async ({ dtlsParameters }) => {
|
||||
console.log(`[transport-recv-connect] DTLS PARAMS: ${dtlsParameters}`)
|
||||
await consumerTransport.connect({ dtlsParameters })
|
||||
const callId = socketDetails[socket.id];
|
||||
console.log(`[transport-recv-connect] socket.id ${socket.id} | callId ${callId} | DTLS PARAMS: ${dtlsParameters}`);
|
||||
await videoCalls[callId].consumerTransport.connect({ dtlsParameters })
|
||||
})
|
||||
|
||||
socket.on('consume', async ({ rtpCapabilities, callId }, callback) => {
|
||||
socket.on('consume', async ({ rtpCapabilities }, callback) => {
|
||||
const callId = socketDetails[socket.id];
|
||||
console.log('[consume] callId', callId);
|
||||
try {
|
||||
// console.log('consume', rtpCapabilities, callId);
|
||||
// check if the router can consume the specified producer
|
||||
if (router[callId].canConsume({
|
||||
producerId: producer.id,
|
||||
if (videoCalls[callId].router.canConsume({
|
||||
producerId: videoCalls[callId].producer.id,
|
||||
rtpCapabilities
|
||||
})) {
|
||||
console.log('[consume] Can consume', callId);
|
||||
// transport can now consume and return a consumer
|
||||
consumer = await consumerTransport.consume({
|
||||
producerId: producer.id,
|
||||
videoCalls[callId].consumer = await videoCalls[callId].consumerTransport.consume({
|
||||
producerId: videoCalls[callId].producer.id,
|
||||
rtpCapabilities,
|
||||
paused: true,
|
||||
})
|
||||
|
||||
consumer.on('transportclose', () => {
|
||||
videoCalls[callId].consumer.on('transportclose', () => {
|
||||
const callId = socketDetails[socket.id];
|
||||
console.log('transport close from consumer', callId)
|
||||
|
||||
// https://mediasoup.org/documentation/v3/mediasoup/api/#router-close
|
||||
router[callId].close()
|
||||
delete router[callId]
|
||||
producer.close()
|
||||
consumer.close()
|
||||
videoCalls[callId].producer.close()
|
||||
videoCalls[callId].consumer.close()
|
||||
delete videoCalls[callId].router
|
||||
})
|
||||
|
||||
cristi
commented
Function to clearVideoCall and socket. Function to clearVideoCall and socket.
|
||||
consumer.on('producerclose', () => {
|
||||
videoCalls[callId].consumer.on('producerclose', () => {
|
||||
const callId = socketDetails[socket.id];
|
||||
console.log('producer of consumer closed', callId)
|
||||
|
||||
// https://mediasoup.org/documentation/v3/mediasoup/api/#router-close
|
||||
router[callId].close()
|
||||
delete router[callId]
|
||||
producer.close()
|
||||
consumer.close()
|
||||
closeCall()
|
||||
})
|
||||
|
||||
// from the consumer extract the following params
|
||||
// to send back to the Client
|
||||
const params = {
|
||||
id: consumer.id,
|
||||
producerId: producer.id,
|
||||
kind: consumer.kind,
|
||||
rtpParameters: consumer.rtpParameters,
|
||||
id: videoCalls[callId].consumer.id,
|
||||
producerId: videoCalls[callId].producer.id,
|
||||
kind: videoCalls[callId].consumer.kind,
|
||||
rtpParameters: videoCalls[callId].consumer.rtpParameters,
|
||||
}
|
||||
|
||||
// send the parameters to the client
|
||||
callback({ params })
|
||||
} else {
|
||||
console.log('[canConsume] Can\'t consume')
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error.message)
|
||||
console.log('[consume] Error', error.message)
|
||||
callback({
|
||||
params: {
|
||||
error: error
|
||||
@ -233,8 +248,9 @@ peers.on('connection', async socket => {
|
||||
})
|
||||
|
||||
socket.on('consumer-resume', async () => {
|
||||
console.log(`[consumer-resume]`)
|
||||
await consumer.resume()
|
||||
const callId = socketDetails[socket.id];
|
||||
console.log(`[consumer-resume] callId ${callId}`)
|
||||
await videoCalls[callId].consumer.resume()
|
||||
})
|
||||
})
|
||||
|
||||
@ -255,10 +271,9 @@ const createWebRtcTransportLayer = async (callId, callback) => {
|
||||
}
|
||||
|
||||
// console.log('webRtcTransport_options', webRtcTransport_options);
|
||||
// console.log('router', router, '| router[callId]', router[callId]);
|
||||
|
||||
// https://mediasoup.org/documentation/v3/mediasoup/api/#router-createWebRtcTransport
|
||||
let transport = await router[callId].createWebRtcTransport(webRtcTransport_options)
|
||||
let transport = await videoCalls[callId].router.createWebRtcTransport(webRtcTransport_options)
|
||||
console.log(`callId: ${callId} | transport id: ${transport.id}`)
|
||||
|
||||
transport.on('dtlsstatechange', dtlsState => {
|
||||
@ -278,8 +293,6 @@ const createWebRtcTransportLayer = async (callId, callback) => {
|
||||
dtlsParameters: transport.dtlsParameters,
|
||||
}
|
||||
|
||||
// console.log('params', params);
|
||||
|
||||
// send back to the client the following prameters
|
||||
callback({
|
||||
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#TransportOptions
|
||||
|
Loading…
Reference in New Issue
Block a user
not important: we don't need socket.id on clients