Compare commits
156 Commits
809e343d67
...
develop-te
Author | SHA1 | Date | |
---|---|---|---|
f9f22e7b2b | |||
7cb82eda32 | |||
8a9c370f02 | |||
652019b07d | |||
09c4a4b90e | |||
75d0e3aee7 | |||
30ac997634 | |||
5aea138f6a | |||
5b01ddc2a8 | |||
084ff36ebe | |||
f4ebf92783 | |||
b59a157b18 | |||
9f8347bec5 | |||
24390c98e5 | |||
1a7371fe18 | |||
be5f97762a | |||
03a11126c4 | |||
fafbee6e4c | |||
bbf23c33d4 | |||
5c2808e75a | |||
2aea7497cc | |||
56835d6660 | |||
fc42c79210 | |||
d81bc8582d | |||
a4d16998cd | |||
de1458bbde | |||
b0fad5f1db | |||
eb5aa12d65 | |||
52b4794a86 | |||
5f8f2ab44c | |||
55455be8e7 | |||
62a82dc3a5 | |||
ac078e72ff | |||
be396e1047 | |||
149876fc70 | |||
adbeb2071b | |||
a6681ffe40 | |||
efc9bfd114 | |||
a8afa8a532 | |||
507c131058 | |||
043f66eb0c | |||
cb5716dd5c | |||
ae39a45f6d | |||
0ec5769ee0 | |||
72ee3e43ab | |||
f20c7fada8 | |||
53a654c50f | |||
d54403299f | |||
177d54ec67 | |||
649c7a3767 | |||
08d6ccbb21 | |||
fd005351b5 | |||
fc111540d8 | |||
c4f4be0aa8 | |||
40c03592df | |||
a59cbcf8cc | |||
7cc3a95b38 | |||
05e3d997f1 | |||
9c731f4085 | |||
f6d862966e | |||
05ccd5cfd4 | |||
43eee11c7e | |||
0033cd528d | |||
5022d88b1d | |||
52b922825f | |||
07be8af9ae | |||
29737fe5d8 | |||
1f5755b72d | |||
a2c878f91c | |||
7b6f78725b | |||
41c6ad281d | |||
f5406f163f | |||
28497fda91 | |||
4a98a79630 | |||
22e8b4d364 | |||
575dbd69b0 | |||
a51a757d17 | |||
c059dd5afc | |||
19808da24e | |||
2f6c25c171 | |||
ead0069aa8 | |||
434c8f744c | |||
7198dc91b1 | |||
f629012712 | |||
41b50d2a11 | |||
b85ba68c9c | |||
6acd276324 | |||
294dbdf38d | |||
c3d50fdc4e | |||
c12ececf47 | |||
47eb302f5f | |||
accf960aa7 | |||
ab685270f1 | |||
6938e751fe | |||
031a7bc4c5 | |||
d7486d0fd6 | |||
38931f0654 | |||
bb684ca4db | |||
25a76c343b | |||
817a49204d | |||
91b4db1982 | |||
8562f6c58c | |||
5abc309502 | |||
ecb5a88a2c | |||
782b749ea3 | |||
b834016dcb | |||
523945271e | |||
0af7ddd786 | |||
ba5add489d | |||
d5cb144799 | |||
4e92f6cdd3 | |||
aaa1c5cea4 | |||
4f302570a2 | |||
cd887142f7 | |||
afb328ea3b | |||
9b36a78be2 | |||
d67debc70b | |||
b64c49c1cd | |||
383e34bf22 | |||
004c0f66a7 | |||
89ee1f301a | |||
7a564d4a61 | |||
3473c10608 | |||
f6e3203198 | |||
12516b59b8 | |||
d9a53ecf20 | |||
01fec638c9 | |||
6d8f22939a | |||
cd8153e3e7 | |||
0f1c268fa5 | |||
6147d3bede | |||
1df588bac7 | |||
3f3048e54f | |||
ac5d5d7fd0 | |||
65b5b563ff | |||
8f7b60c78a | |||
9c46ed4944 | |||
7bb45dca19 | |||
e5fbb1e5a7 | |||
05f4985075 | |||
c49da6696c | |||
112ab0b229 | |||
625fb28e65 | |||
c8a774a903 | |||
9cc00c05fd | |||
6d80943907 | |||
a2223529da | |||
3cc5b0dea8 | |||
c31922f93a | |||
e07ffb3181 | |||
d07df95652 | |||
222ff46655 | |||
b947318142 | |||
1ab77c1f17 | |||
14d96fa7c5 | |||
ea8d4268ec |
8
.env
8
.env
@ -1,7 +1,7 @@
|
|||||||
PORT=3000
|
PORT=3000
|
||||||
IP=0.0.0.0 # Listening IPv4 or IPv6.
|
IP=0.0.0.0 # Listening IPv4 or IPv6.
|
||||||
<<<<<<< HEAD
|
|
||||||
ANNOUNCED_IP=185.8.154.190 # Announced IPv4 or IPv6 (useful when running mediasoup behind NAT with private IP).
|
ANNOUNCED_IP=185.8.154.190 # Announced IPv4 or IPv6 (useful when running mediasoup behind NAT with private IP).
|
||||||
=======
|
RTC_MIN_PORT=2000
|
||||||
ANNOUNCED_IP=185.8.154.190 # Announced IPv4 or IPv6 (useful when running mediasoup behind NAT with private IP).
|
RTC_MAX_PORT=2020
|
||||||
>>>>>>> aa5b8770c643600acb5b7aca91bc03437d610295
|
SERVER_CERT="./server/ssl/cert.pem"
|
||||||
|
SERVER_KEY="./server/ssl/key.pem"
|
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
|||||||
/node_modules
|
/node_modules
|
||||||
|
/dist
|
||||||
|
43
README.md
43
README.md
@ -1,2 +1,41 @@
|
|||||||
Generate keys command:
|
# Video server
|
||||||
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
|
|
||||||
|
### Generating certificates
|
||||||
|
|
||||||
|
##### To generate SSL certificates you must:
|
||||||
|
1. Go to `/server/ssl`
|
||||||
|
2. Execute `openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem`
|
||||||
|
|
||||||
|
|
||||||
|
### Development
|
||||||
|
|
||||||
|
##### To start in development mode you must:
|
||||||
|
1. Install the dependencies `npm install`.
|
||||||
|
2. Run the `npm start:dev` command to start the server in dev mode.
|
||||||
|
(Any change will trigger a refresh of the server)
|
||||||
|
|
||||||
|
|
||||||
|
### Production
|
||||||
|
|
||||||
|
##### To start in production mode you must:
|
||||||
|
1. Install the dependencies `npm install`.
|
||||||
|
2. Run the `npm start:prod` command to start the server in production mode.
|
||||||
|
(To connect to the terminal, use `pm2 log video-server`)
|
||||||
|
|
||||||
|
|
||||||
|
### Web client
|
||||||
|
|
||||||
|
- The server will start by default on port 3000, and the ssl certificates will have to be configured
|
||||||
|
- The web client can be accessed using the /sfu path
|
||||||
|
ex: https://HOST/sfu/?assetId=1&&accountId=1&producer=true&dest_asset_id=75&assetName=Adi
|
||||||
|
assetId = asset id of the unit on which you are doing the test
|
||||||
|
accountId = account id of the unit on which you are doing the test
|
||||||
|
producer = it will always be true because you are the producer
|
||||||
|
(it's possible to put false, but then you have to have another client with producer true)
|
||||||
|
assetName = asset name of the unit on which you are doing the test
|
||||||
|
dest_asset_id= the addressee with whom the call is made
|
||||||
|
- To make a call using this client, you need a microphone and permission to use it
|
||||||
|
- For any changes related to the client, the command `npm run watch' will have to be used to generate the bundle.js used by the web client
|
||||||
|
|
||||||
|
### Demo project
|
||||||
|
The demo project used initially and then modified for our needs `https://github.com/jamalag/mediasoup2`
|
||||||
|
628
app.js
628
app.js
@ -1,28 +1,38 @@
|
|||||||
import 'dotenv/config'
|
require('dotenv').config()
|
||||||
|
|
||||||
/**
|
|
||||||
* integrating mediasoup server with a node.js application
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* Please follow mediasoup installation requirements */
|
|
||||||
/* https://mediasoup.org/documentation/v3/mediasoup/installation/ */
|
|
||||||
import express from 'express'
|
|
||||||
const app = express()
|
|
||||||
|
|
||||||
import https from 'httpolyglot'
|
|
||||||
import fs from 'fs'
|
|
||||||
import path from 'path'
|
|
||||||
const __dirname = path.resolve()
|
|
||||||
|
|
||||||
import Server from 'socket.io'
|
|
||||||
import mediasoup, { getSupportedRtpCapabilities } from 'mediasoup'
|
|
||||||
|
|
||||||
|
const express = require('express');
|
||||||
|
const app = express();
|
||||||
|
const Server = require('socket.io');
|
||||||
|
const path = require('node:path');
|
||||||
|
const fs = require('node:fs');
|
||||||
|
let https;
|
||||||
|
try {
|
||||||
|
https = require('node:https');
|
||||||
|
} catch (err) {
|
||||||
|
console.log('https support is disabled!');
|
||||||
|
}
|
||||||
|
const mediasoup = require('mediasoup');
|
||||||
|
console.log('---------🔴🔴---------');
|
||||||
let worker
|
let worker
|
||||||
let router = {}
|
/**
|
||||||
let producerTransport
|
* videoCalls
|
||||||
let consumerTransport
|
* |-> Router
|
||||||
let producer
|
* |-> Producer
|
||||||
let consumer
|
* |-> 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) => {
|
app.get('/', (_req, res) => {
|
||||||
res.send('Hello from mediasoup app!')
|
res.send('Hello from mediasoup app!')
|
||||||
@ -32,48 +42,49 @@ app.use('/sfu', express.static(path.join(__dirname, 'public')))
|
|||||||
|
|
||||||
// SSL cert for HTTPS access
|
// SSL cert for HTTPS access
|
||||||
const options = {
|
const options = {
|
||||||
key: fs.readFileSync('./server/ssl/key.pem', 'utf-8'),
|
key: fs.readFileSync(process.env.SERVER_KEY, 'utf-8'),
|
||||||
cert: fs.readFileSync('./server/ssl/cert.pem', 'utf-8')
|
cert: fs.readFileSync(process.env.SERVER_CERT, 'utf-8'),
|
||||||
}
|
}
|
||||||
|
|
||||||
const httpsServer = https.createServer(options, app)
|
const httpsServer = https.createServer(options, app);
|
||||||
|
|
||||||
|
const io = new Server(httpsServer, {
|
||||||
|
allowEIO3: true,
|
||||||
|
origins: ["*:*"],
|
||||||
|
// allowRequest: (req, next) => {
|
||||||
|
// console.log('req', req);
|
||||||
|
// next(null, true)
|
||||||
|
// }
|
||||||
|
});
|
||||||
|
// const io = new Server(server, { origins: '*:*', allowEIO3: true });
|
||||||
|
|
||||||
httpsServer.listen(process.env.PORT, () => {
|
httpsServer.listen(process.env.PORT, () => {
|
||||||
console.log('Listening on port:', process.env.PORT)
|
console.log('Video server listening on port:', process.env.PORT);
|
||||||
})
|
});
|
||||||
|
|
||||||
const io = new Server(httpsServer)
|
const peers = io.of('/');
|
||||||
|
|
||||||
// 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 () => {
|
const createWorker = async () => {
|
||||||
|
try {
|
||||||
worker = await mediasoup.createWorker({
|
worker = await mediasoup.createWorker({
|
||||||
rtcMinPort: 2000,
|
rtcMinPort: parseInt(process.env.RTC_MIN_PORT),
|
||||||
rtcMaxPort: 2020,
|
rtcMaxPort: parseInt(process.env.RTC_MAX_PORT),
|
||||||
})
|
})
|
||||||
console.log(`[createWorker] worker pid ${worker.pid}`)
|
console.log(`[createWorker] worker pid ${worker.pid}`);
|
||||||
|
|
||||||
worker.on('died', error => {
|
worker.on('died', error => {
|
||||||
// This implies something serious happened, so kill the application
|
// This implies something serious happened, so kill the application
|
||||||
console.error('mediasoup worker has died', error)
|
console.error('mediasoup worker has died', error);
|
||||||
setTimeout(() => process.exit(1), 2000) // exit in 2 seconds
|
setTimeout(() => process.exit(1), 2000); // exit in 2 seconds
|
||||||
})
|
})
|
||||||
|
return worker;
|
||||||
return worker
|
} catch (error) {
|
||||||
|
console.log(`ERROR | createWorker | ${error.message}`);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// We create a Worker as soon as our application starts
|
// We create a Worker as soon as our application starts
|
||||||
worker = createWorker()
|
worker = createWorker();
|
||||||
|
|
||||||
// This is an Array of RtpCapabilities
|
// This is an Array of RtpCapabilities
|
||||||
// https://mediasoup.org/documentation/v3/mediasoup/rtp-parameters-and-capabilities/#RtpCodecCapability
|
// https://mediasoup.org/documentation/v3/mediasoup/rtp-parameters-and-capabilities/#RtpCodecCapability
|
||||||
@ -84,147 +95,391 @@ const mediaCodecs = [
|
|||||||
kind : 'audio',
|
kind : 'audio',
|
||||||
mimeType : 'audio/opus',
|
mimeType : 'audio/opus',
|
||||||
clockRate : 48000,
|
clockRate : 48000,
|
||||||
channels: 2,
|
channels : 2
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind : 'video',
|
kind : 'video',
|
||||||
mimeType : 'video/VP8',
|
mimeType : 'video/VP8',
|
||||||
clockRate : 90000,
|
clockRate : 90000,
|
||||||
parameters: {
|
parameters :
|
||||||
'x-google-start-bitrate': 1000,
|
{
|
||||||
|
'x-google-start-bitrate' : 1000
|
||||||
},
|
},
|
||||||
|
channels : 2
|
||||||
},
|
},
|
||||||
]
|
{
|
||||||
|
kind : 'video',
|
||||||
peers.on('connection', async socket => {
|
mimeType : 'video/VP9',
|
||||||
console.log('[connection] socketId:', socket.id)
|
clockRate : 90000,
|
||||||
socket.emit('connection-success', {
|
parameters :
|
||||||
socketId: socket.id,
|
{
|
||||||
existsProducer: producer ? true : false,
|
'profile-id' : 2,
|
||||||
})
|
'x-google-start-bitrate' : 1000
|
||||||
|
|
||||||
socket.on('disconnect', () => {
|
|
||||||
// do some cleanup
|
|
||||||
console.log('peer disconnected')
|
|
||||||
})
|
|
||||||
|
|
||||||
socket.on('createRoom', async ({ callId }, callback) => {
|
|
||||||
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}`)
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
getRtpCapabilities(callId, callback)
|
{
|
||||||
})
|
kind : 'video',
|
||||||
|
mimeType : 'video/h264',
|
||||||
const getRtpCapabilities = (callId, callback) => {
|
clockRate : 90000,
|
||||||
const rtpCapabilities = router[callId].rtpCapabilities
|
parameters :
|
||||||
|
{
|
||||||
callback({ rtpCapabilities })
|
'packetization-mode' : 1,
|
||||||
|
'profile-level-id' : '4d0032',
|
||||||
|
'level-asymmetry-allowed' : 1,
|
||||||
|
'x-google-start-bitrate' : 1000
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
kind : 'video',
|
||||||
|
mimeType : 'video/h264',
|
||||||
|
clockRate : 90000,
|
||||||
|
parameters :
|
||||||
|
{
|
||||||
|
'packetization-mode' : 1,
|
||||||
|
'profile-level-id' : '42e01f',
|
||||||
|
'level-asymmetry-allowed' : 1,
|
||||||
|
'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,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
];
|
||||||
|
|
||||||
// Client emits a request to create server side Transport
|
const closeCall = (callId) => {
|
||||||
// We need to differentiate between the producer and consumer transports
|
|
||||||
socket.on('createWebRtcTransport', async ({ sender, callId }, callback) => {
|
|
||||||
console.log(`[createWebRtcTransport] Is this a sender request? ${sender} | callId ${callId}`)
|
|
||||||
// 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)
|
|
||||||
else
|
|
||||||
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 })
|
|
||||||
})
|
|
||||||
|
|
||||||
// see client's socket.emit('transport-produce', ...)
|
|
||||||
socket.on('transport-produce', async ({ kind, rtpParameters, appData }, callback) => {
|
|
||||||
// call produce based on the prameters from the client
|
|
||||||
producer = await producerTransport.produce({
|
|
||||||
kind,
|
|
||||||
rtpParameters,
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log(`[transport-produce] Producer ID: ${producer.id} | kind: ${producer.kind}`)
|
|
||||||
|
|
||||||
producer.on('transportclose', () => {
|
|
||||||
console.log('transport for this producer closed ')
|
|
||||||
producer.close()
|
|
||||||
})
|
|
||||||
|
|
||||||
// Send back to the client the Producer's id
|
|
||||||
callback({
|
|
||||||
id: producer.id
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
// 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 })
|
|
||||||
})
|
|
||||||
|
|
||||||
socket.on('consume', async ({ rtpCapabilities, callId }, callback) => {
|
|
||||||
try {
|
try {
|
||||||
// check if the router can consume the specified producer
|
if (callId && videoCalls[callId]) {
|
||||||
if (router[callId].canConsume({
|
videoCalls[callId].producerVideo?.close();
|
||||||
producerId: producer.id,
|
videoCalls[callId].producerAudio?.close();
|
||||||
rtpCapabilities
|
videoCalls[callId].consumerVideo?.close();
|
||||||
})) {
|
videoCalls[callId].consumerAudio?.close();
|
||||||
// transport can now consume and return a consumer
|
|
||||||
consumer = await consumerTransport.consume({
|
|
||||||
producerId: producer.id,
|
|
||||||
rtpCapabilities,
|
|
||||||
paused: true,
|
|
||||||
})
|
|
||||||
|
|
||||||
consumer.on('transportclose', () => {
|
videoCalls[callId]?.consumerTransport?.close();
|
||||||
console.log('transport close from consumer')
|
videoCalls[callId]?.producerTransport?.close();
|
||||||
})
|
videoCalls[callId]?.router?.close();
|
||||||
|
delete videoCalls[callId];
|
||||||
consumer.on('producerclose', () => {
|
} else {
|
||||||
console.log('producer of consumer closed')
|
console.log(`The call with id ${callId} has already been deleted`);
|
||||||
})
|
|
||||||
|
|
||||||
// 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,
|
|
||||||
}
|
|
||||||
|
|
||||||
// send the parameters to the client
|
|
||||||
callback({ params })
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log(error.message)
|
console.log(`ERROR | closeCall | callid ${callId} | ${error.message}`);
|
||||||
callback({
|
|
||||||
params: {
|
|
||||||
error: error
|
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
- Handlers for WS events
|
||||||
|
- These are created only when we have a connection with a peer
|
||||||
|
*/
|
||||||
|
peers.on('connection', async socket => {
|
||||||
|
console.log('[connection] socketId:', socket.id);
|
||||||
|
|
||||||
|
// After making the connection successfully, we send the client a 'connection-success' event
|
||||||
|
socket.emit('connection-success', {
|
||||||
|
socketId: socket.id
|
||||||
|
});
|
||||||
|
|
||||||
|
// It is triggered when the peer is disconnected
|
||||||
|
socket.on('disconnect', () => {
|
||||||
|
const callId = socketDetails[socket.id];
|
||||||
|
console.log(`disconnect | socket ${socket.id} | callId ${callId}`);
|
||||||
|
delete socketDetails[socket.id];
|
||||||
|
closeCall(callId);
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
- This event creates a room with the roomId and the callId sent
|
||||||
|
- It will return the rtpCapabilities of that room
|
||||||
|
- If the room already exists, it will not create it, but will only return rtpCapabilities
|
||||||
|
*/
|
||||||
|
socket.on('createRoom', async ({ callId }, callback) => {
|
||||||
|
let callbackResponse = null;
|
||||||
|
try {
|
||||||
|
// We can continue with the room creation process only if we have a callId
|
||||||
|
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;
|
||||||
|
|
||||||
|
// rtpCapabilities is set for callback
|
||||||
|
console.log('[getRtpCapabilities] callId', callId);
|
||||||
|
callbackResponse = {
|
||||||
|
rtpCapabilities :videoCalls[callId].router.rtpCapabilities
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.log(`[createRoom] missing callId ${callId}`);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(`ERROR | createRoom | callId ${callId} | ${error.message}`);
|
||||||
|
} finally {
|
||||||
|
callback(callbackResponse);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
- Client emits a request to create server side Transport
|
||||||
|
- Depending on the sender, producerTransport or consumerTransport 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)
|
||||||
|
- If the client is a consumer(sender: false) then it will use parameters for device.createRecvTransport(params)
|
||||||
|
*/
|
||||||
|
socket.on('createWebRtcTransport', async ({ sender }, callback) => {
|
||||||
|
try {
|
||||||
|
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);
|
||||||
|
} 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(`ERROR | createWebRtcTransport | callId ${socketDetails[socket.id]} | sender ${sender} | ${error.message}`);
|
||||||
|
callback(error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
- The client sends this event after successfully creating a createSendTransport(AS PRODUCER)
|
||||||
|
- The connection is made to the created transport
|
||||||
|
*/
|
||||||
|
socket.on('transport-connect', async ({ dtlsParameters }) => {
|
||||||
|
try {
|
||||||
|
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 });
|
||||||
|
} 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
|
||||||
|
- 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,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Send back to the client the Producer's id
|
||||||
|
callback && callback({
|
||||||
|
id: videoCalls[callId].producerVideo.id
|
||||||
|
});
|
||||||
|
} else if (kind === 'audio') {
|
||||||
|
videoCalls[callId].producerAudio = await videoCalls[callId].producerTransport.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);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Send back to the client the Producer's id
|
||||||
|
callback && callback({
|
||||||
|
id: videoCalls[callId].producerAudio.id
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(`ERROR | transport-produce | callId ${socketDetails[socket.id]} | ${error.message}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
- The client sends this event after successfully creating a createRecvTransport(AS CONSUMER)
|
||||||
|
- The connection is made to the created consumerTransport
|
||||||
|
*/
|
||||||
|
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 });
|
||||||
|
} catch (error) {
|
||||||
|
console.log(`ERROR | transport-recv-connect | callId ${socketDetails[socket.id]} | ${error.message}`);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/*
|
||||||
|
- The customer consumes after successfully connecting to consumerTransport
|
||||||
|
- The previous step was 'transport-recv-connect', and before that 'createWebRtcTransport'
|
||||||
|
- This event is only sent by the consumer
|
||||||
|
- The parameters that the consumer consumes are returned
|
||||||
|
- The consumer does consumerTransport.consume(params)
|
||||||
|
*/
|
||||||
|
socket.on('consume', async ({ rtpCapabilities }, callback) => {
|
||||||
|
try {
|
||||||
|
console.log(`[consume] rtpCapabilities: ${JSON.stringify(rtpCapabilities)}`);
|
||||||
|
|
||||||
|
const callId = socketDetails[socket.id];
|
||||||
|
console.log('[consume] callId', callId);
|
||||||
|
|
||||||
|
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
|
||||||
|
})
|
||||||
|
|
||||||
|
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);
|
||||||
|
callback({ videoParams, audioParams: null });
|
||||||
|
} else if (canConsumeVideo && canConsumeAudio) {
|
||||||
|
console.log('2');
|
||||||
|
const videoParams = await consumeVideo(callId, rtpCapabilities)
|
||||||
|
const audioParams = await consumeAudio(callId, rtpCapabilities)
|
||||||
|
callback({ videoParams, audioParams });
|
||||||
|
} else {
|
||||||
|
console.log(`[consume] Can't consume | callId ${callId}`);
|
||||||
|
callback(null);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(`ERROR | consume | callId ${socketDetails[socket.id]} | ${error.message}`)
|
||||||
|
callback({ params: { error } });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
- Event sent by the consumer after consuming to resume the pause
|
||||||
|
- When consuming on consumerTransport, it is initially done with paused: true, here we will resume
|
||||||
|
*/
|
||||||
socket.on('consumer-resume', async () => {
|
socket.on('consumer-resume', async () => {
|
||||||
console.log(`[consumer-resume]`)
|
try {
|
||||||
await consumer.resume()
|
const callId = socketDetails[socket.id];
|
||||||
})
|
console.log(`[consumer-resume] callId ${callId}`)
|
||||||
})
|
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,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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].consumerVideo.on('producerclose', () => {
|
||||||
|
const callId = socketDetails[socket.id];
|
||||||
|
console.log('producer of consumer closed', callId);
|
||||||
|
closeCall(callId);
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: videoCalls[callId].consumerVideo.id,
|
||||||
|
producerId: videoCalls[callId].producerVideo.id,
|
||||||
|
kind: 'video',
|
||||||
|
rtpParameters: videoCalls[callId].consumerVideo.rtpParameters,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const consumeAudio = async (callId, rtpCapabilities) => {
|
||||||
|
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].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].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,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
- 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
|
||||||
|
from the client.
|
||||||
|
- 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)
|
||||||
|
*/
|
||||||
const createWebRtcTransportLayer = async (callId, callback) => {
|
const createWebRtcTransportLayer = async (callId, callback) => {
|
||||||
try {
|
try {
|
||||||
|
console.log('[createWebRtcTransportLayer] callId', callId);
|
||||||
// https://mediasoup.org/documentation/v3/mediasoup/api/#WebRtcTransportOptions
|
// https://mediasoup.org/documentation/v3/mediasoup/api/#WebRtcTransportOptions
|
||||||
const webRtcTransport_options = {
|
const webRtcTransport_options = {
|
||||||
listenIps: [
|
listenIps: [
|
||||||
@ -236,40 +491,41 @@ const createWebRtcTransportLayer = async (callId, callback) => {
|
|||||||
enableUdp: true,
|
enableUdp: true,
|
||||||
enableTcp: true,
|
enableTcp: true,
|
||||||
preferUdp: true,
|
preferUdp: true,
|
||||||
}
|
};
|
||||||
|
|
||||||
// https://mediasoup.org/documentation/v3/mediasoup/api/#router-createWebRtcTransport
|
// 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}`)
|
console.log(`callId: ${callId} | transport id: ${transport.id}`)
|
||||||
|
|
||||||
|
// Handler for when DTLS(Datagram Transport Layer Security) changes
|
||||||
transport.on('dtlsstatechange', dtlsState => {
|
transport.on('dtlsstatechange', dtlsState => {
|
||||||
|
console.log(`transport | dtlsstatechange | calldId ${callId} | dtlsState ${dtlsState}`);
|
||||||
if (dtlsState === 'closed') {
|
if (dtlsState === 'closed') {
|
||||||
transport.close()
|
transport.close();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
|
// Handler if the transport layer has closed (for various reasons)
|
||||||
transport.on('close', () => {
|
transport.on('close', () => {
|
||||||
console.log('transport closed')
|
console.log(`transport | closed | calldId ${callId}`);
|
||||||
})
|
});
|
||||||
|
|
||||||
// send back to the client the following prameters
|
const params = {
|
||||||
callback({
|
|
||||||
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#TransportOptions
|
|
||||||
params: {
|
|
||||||
id: transport.id,
|
id: transport.id,
|
||||||
iceParameters: transport.iceParameters,
|
iceParameters: transport.iceParameters,
|
||||||
iceCandidates: transport.iceCandidates,
|
iceCandidates: transport.iceCandidates,
|
||||||
dtlsParameters: transport.dtlsParameters,
|
dtlsParameters: transport.dtlsParameters,
|
||||||
}
|
};
|
||||||
})
|
|
||||||
|
|
||||||
return transport
|
console.log('[createWebRtcTransportLayer] callback params', params);
|
||||||
|
// Send back to the client the params
|
||||||
|
callback({ params });
|
||||||
|
|
||||||
|
// Set transport to producerTransport or consumerTransport
|
||||||
|
return transport;
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
callback({
|
console.log(`ERROR | createWebRtcTransportLayer | callId ${socketDetails[socket.id]} | ${error.message}`);
|
||||||
params: {
|
callback({ params: { error } });
|
||||||
error: error
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
46
build.sh
Executable file
46
build.sh
Executable file
@ -0,0 +1,46 @@
|
|||||||
|
#/!bin/bash
|
||||||
|
## PREBUILD PROCESS
|
||||||
|
# check dist dir to be present and empty
|
||||||
|
if [ ! -d "dist" ]; then
|
||||||
|
## MAKE DIR
|
||||||
|
mkdir "dist"
|
||||||
|
echo "Directory dist created."
|
||||||
|
else
|
||||||
|
## CLEANUP
|
||||||
|
rm -fr dist/*
|
||||||
|
fi
|
||||||
|
# Install dependencies
|
||||||
|
#npm install
|
||||||
|
|
||||||
|
## PROJECT NEEDS
|
||||||
|
echo "Building app... from $(git rev-parse --abbrev-ref HEAD)"
|
||||||
|
#npm run-script build
|
||||||
|
cp -r {.env,app.js,package.json,server,public} dist/
|
||||||
|
|
||||||
|
#Add version control for pm2
|
||||||
|
cd dist
|
||||||
|
#Add version control for pm2
|
||||||
|
version=$(git describe)
|
||||||
|
file_pkg="package.json"
|
||||||
|
key=" \"version\": \""
|
||||||
|
|
||||||
|
count=$(echo ${version%%-*} | grep -o "\." | wc -l)
|
||||||
|
if (( $count > 1 )); then
|
||||||
|
version=${version%%-*}
|
||||||
|
else
|
||||||
|
version="${version%%-*}.0"
|
||||||
|
fi
|
||||||
|
if [ -f "$file_pkg" ] && [ ! -z "$version" ]; then
|
||||||
|
version=" \"version\": \"$version\","
|
||||||
|
sed -i "s|^.*$key.*|${version//\//\\/}|g" $file_pkg
|
||||||
|
text=$(cat $file_pkg | grep -c "$version")
|
||||||
|
if [ $text -eq 0 ]; then
|
||||||
|
echo "Version couldn't be set"
|
||||||
|
else
|
||||||
|
echo "Version $version successfully applied to App"
|
||||||
|
fi
|
||||||
|
fi
|
||||||
|
|
||||||
|
## POST BUILD
|
||||||
|
|
||||||
|
cd -
|
BIN
doc/[video] Workflow.png
Normal file
BIN
doc/[video] Workflow.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 571 KiB |
8560
package-lock.json
generated
8560
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@ -5,26 +5,28 @@
|
|||||||
"main": "app.js",
|
"main": "app.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"start": "nodemon app.js",
|
"start:dev": "nodemon app.js",
|
||||||
|
"start:prod": "pm2 start ./app.js -n video-server",
|
||||||
"watch": "watchify public/index.js -o public/bundle.js -v"
|
"watch": "watchify public/index.js -o public/bundle.js -v"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"type": "module",
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@types/express": "^4.17.13",
|
||||||
"dotenv": "^16.0.1",
|
"dotenv": "^16.0.1",
|
||||||
"express": "^4.18.1",
|
"express": "^4.18.1",
|
||||||
"httpolyglot": "^0.1.2",
|
|
||||||
"mediasoup": "^3.10.4",
|
"mediasoup": "^3.10.4",
|
||||||
"mediasoup-client": "^3.6.54",
|
"mediasoup-client": "^3.6.54",
|
||||||
|
"parcel": "^2.7.0",
|
||||||
"socket.io": "^2.0.3",
|
"socket.io": "^2.0.3",
|
||||||
"socket.io-client": "^2.0.3",
|
"socket.io-client": "^2.0.3"
|
||||||
"nodemon": "^2.0.19",
|
|
||||||
"watchify": "^4.0.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"nodemon": "^2.0.19",
|
"nodemon": "^2.0.19",
|
||||||
|
"pm2": "^5.2.0",
|
||||||
|
"ts-node": "^10.9.1",
|
||||||
|
"ts-node-dev": "^2.0.0",
|
||||||
"watchify": "^4.0.0"
|
"watchify": "^4.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
1140
public/bundle.js
1140
public/bundle.js
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,4 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
hubAddress: 'https://hub.dev.linx.safemobile.com/',
|
hubAddress: 'https://hub.dev.linx.safemobile.com/',
|
||||||
mediasoupAddress: 'https://video.safemobile.org/mediasoup',
|
mediasoupAddress: 'https://video.safemobile.org',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -21,6 +21,14 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#closeCallBtn {
|
||||||
|
padding: 5;
|
||||||
|
background-color: papayawhip;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 736px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -35,7 +43,7 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<div id="sharedBtns">
|
<div id="sharedBtns">
|
||||||
<video id="localVideo" autoplay class="video" ></video>
|
<video id="localVideo" autoplay class="video" muted></video>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
@ -55,9 +63,6 @@
|
|||||||
<button id="btnRecvSendTransport">Consume</button>
|
<button id="btnRecvSendTransport">Consume</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="remoteColumn">
|
|
||||||
<div id="videoContainer"></div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<!-- <tr>
|
<!-- <tr>
|
||||||
<td colspan="2">
|
<td colspan="2">
|
||||||
@ -85,6 +90,9 @@
|
|||||||
</tr> -->
|
</tr> -->
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
<div id="closeCallBtn">
|
||||||
|
<button id="btnCloseCall" disabled>Close Call</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</body>
|
</body>
|
||||||
|
246
public/index.js
246
public/index.js
@ -6,16 +6,57 @@ console.log('[CONFIG]', config);
|
|||||||
|
|
||||||
const ASSET_ID = parseInt(urlParams.get('assetId')) || null;
|
const ASSET_ID = parseInt(urlParams.get('assetId')) || null;
|
||||||
const ACCOUNT_ID = parseInt(urlParams.get('accountId')) || null;
|
const ACCOUNT_ID = parseInt(urlParams.get('accountId')) || null;
|
||||||
|
const ASSET_NAME = urlParams.get('assetName') || null;
|
||||||
|
const ASSET_TYPE = urlParams.get('assetType') || null;
|
||||||
let callId = parseInt(urlParams.get('callId')) || null;
|
let callId = parseInt(urlParams.get('callId')) || null;
|
||||||
const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false
|
const IS_PRODUCER = urlParams.get('producer') === 'true' ? true : false
|
||||||
console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER)
|
console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER)
|
||||||
|
|
||||||
let socket
|
console.log('🟩 config', config)
|
||||||
|
|
||||||
|
let socket, hub
|
||||||
|
let device
|
||||||
|
let rtpCapabilities
|
||||||
|
let producerTransport
|
||||||
|
let consumerTransport
|
||||||
|
let producerVideo
|
||||||
|
let producerAudio
|
||||||
|
let consumer
|
||||||
|
let originAssetId
|
||||||
|
|
||||||
|
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions
|
||||||
|
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce
|
||||||
|
let videoParams = {
|
||||||
|
encodings: [
|
||||||
|
{ scaleResolutionDownBy: 4, maxBitrate: 500000 },
|
||||||
|
{ scaleResolutionDownBy: 2, maxBitrate: 1000000 },
|
||||||
|
{ scaleResolutionDownBy: 1, maxBitrate: 5000000 },
|
||||||
|
{ scalabilityMode: 'S3T3_KEY' }
|
||||||
|
],
|
||||||
|
codecOptions: {
|
||||||
|
videoGoogleStartBitrate: 1000
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let audioParams = {
|
||||||
|
codecOptions :
|
||||||
|
{
|
||||||
|
opusStereo : true,
|
||||||
|
opusDtx : true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
hub = io(config.hubAddress)
|
hub = io(config.hubAddress)
|
||||||
|
|
||||||
const connectToMediasoup = () => {
|
const connectToMediasoup = () => {
|
||||||
|
|
||||||
socket = io(config.mediasoupAddress)
|
socket = io(config.mediasoupAddress, {
|
||||||
|
reconnection: true,
|
||||||
|
reconnectionDelay: 1000,
|
||||||
|
reconnectionDelayMax : 5000,
|
||||||
|
reconnectionAttempts: Infinity
|
||||||
|
})
|
||||||
|
|
||||||
socket.on('connection-success', ({ _socketId, existsProducer }) => {
|
socket.on('connection-success', ({ _socketId, existsProducer }) => {
|
||||||
console.log(`[MEDIA] ${config.mediasoupAddress} | connected: ${socket.connected} | existsProducer: ${existsProducer}`)
|
console.log(`[MEDIA] ${config.mediasoupAddress} | connected: ${socket.connected} | existsProducer: ${existsProducer}`)
|
||||||
@ -29,7 +70,7 @@ const connectToMediasoup = () => {
|
|||||||
|
|
||||||
if (IS_PRODUCER === true) {
|
if (IS_PRODUCER === true) {
|
||||||
hub.on('connect', async () => {
|
hub.on('connect', async () => {
|
||||||
console.log(`[HUB] ${config.hubAddress} | connected: ${hub.connected}`)
|
console.log(`[HUB]! ${config.hubAddress} | connected: ${hub.connected}`)
|
||||||
connectToMediasoup()
|
connectToMediasoup()
|
||||||
|
|
||||||
hub.emit(
|
hub.emit(
|
||||||
@ -39,21 +80,26 @@ if (IS_PRODUCER === true) {
|
|||||||
asset_id: ASSET_ID,
|
asset_id: ASSET_ID,
|
||||||
account_id: ACCOUNT_ID,
|
account_id: ACCOUNT_ID,
|
||||||
})
|
})
|
||||||
);
|
)
|
||||||
|
|
||||||
hub.on('video', (data) => {
|
hub.on('video', (data) => {
|
||||||
const parsedData = JSON.parse(data);
|
const parsedData = JSON.parse(data);
|
||||||
|
|
||||||
|
if (parsedData.type === 'notify-request') {
|
||||||
console.log('video', parsedData)
|
console.log('video', parsedData)
|
||||||
originAssetId = parsedData.origin_asset_id;
|
originAssetId = parsedData.origin_asset_id;
|
||||||
originAssetName = parsedData.origin_asset_name;
|
// originAssetName = parsedData.origin_asset_name;
|
||||||
originAssetTypeName = parsedData.origin_asset_type_name;
|
// originAssetTypeName = parsedData.origin_asset_type_name;
|
||||||
callId = parsedData.video_call_id;
|
callId = parsedData.video_call_id;
|
||||||
|
|
||||||
console.log('IS_PRODUCER', IS_PRODUCER, 'callId', callId);
|
console.log('[VIDEO] notify-request | IS_PRODUCER', IS_PRODUCER, 'callId', callId);
|
||||||
|
|
||||||
if (parsedData.type === 'notify-request' && IS_PRODUCER) {
|
|
||||||
getLocalStream()
|
getLocalStream()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (parsedData.type === 'notify-end') {
|
||||||
|
console.log('[VIDEO] notify-end | IS_PRODUCER', IS_PRODUCER, 'callId', callId);
|
||||||
|
resetCallSettings()
|
||||||
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -72,79 +118,60 @@ if (IS_PRODUCER === true) {
|
|||||||
connectToMediasoup()
|
connectToMediasoup()
|
||||||
}
|
}
|
||||||
|
|
||||||
let device
|
}, 1600);
|
||||||
let rtpCapabilities
|
|
||||||
let producerTransport
|
|
||||||
let consumerTransport
|
|
||||||
let producer
|
|
||||||
let consumer
|
|
||||||
let originAssetId
|
|
||||||
let originAssetName
|
|
||||||
let originAssetTypeName
|
|
||||||
|
|
||||||
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions
|
|
||||||
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce
|
|
||||||
let params = {
|
|
||||||
// mediasoup params
|
|
||||||
encodings: [
|
|
||||||
{
|
|
||||||
rid: 'r0',
|
|
||||||
maxBitrate: 100000,
|
|
||||||
scalabilityMode: 'S1T3',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
rid: 'r1',
|
|
||||||
maxBitrate: 300000,
|
|
||||||
scalabilityMode: 'S1T3',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
rid: 'r2',
|
|
||||||
maxBitrate: 900000,
|
|
||||||
scalabilityMode: 'S1T3',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerCodecOptions
|
|
||||||
codecOptions: {
|
|
||||||
videoGoogleStartBitrate: 1000
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const streamSuccess = (stream) => {
|
const streamSuccess = (stream) => {
|
||||||
|
console.log('[streamSuccess] device', device);
|
||||||
localVideo.srcObject = stream
|
localVideo.srcObject = stream
|
||||||
const track = stream.getVideoTracks()[0]
|
console.log('stream', stream);
|
||||||
params = {
|
const videoTrack = stream.getVideoTracks()[0]
|
||||||
track,
|
const audioTrack = stream.getAudioTracks()[0]
|
||||||
...params
|
|
||||||
|
videoParams = {
|
||||||
|
track: videoTrack,
|
||||||
|
...videoParams
|
||||||
}
|
}
|
||||||
|
|
||||||
|
audioParams = {
|
||||||
|
track: audioTrack,
|
||||||
|
...audioParams
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('[streamSuccess] videoParams', videoParams, ' | audioParams', audioParams);
|
||||||
goConnect()
|
goConnect()
|
||||||
}
|
}
|
||||||
|
|
||||||
const getLocalStream = () => {
|
const getLocalStream = () => {
|
||||||
console.log('[getLocalStream]');
|
console.log('[getLocalStream]');
|
||||||
navigator.mediaDevices.getUserMedia({
|
navigator.mediaDevices.getUserMedia({
|
||||||
audio: false,
|
audio: true,
|
||||||
video: {
|
video: {
|
||||||
width: {
|
qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
|
||||||
min: 640,
|
vga : { width: { ideal: 640 }, height: { ideal: 480 } },
|
||||||
max: 1920,
|
hd : { width: { ideal: 1280 }, height: { ideal: 720 } }
|
||||||
},
|
|
||||||
height: {
|
|
||||||
min: 400,
|
|
||||||
max: 1080,
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.then(streamSuccess)
|
.then(streamSuccess)
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.log(error.message)
|
console.log(error.message)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
navigator.permissions.query(
|
||||||
|
{ name: 'microphone' }
|
||||||
|
).then((permissionStatus) =>{
|
||||||
|
console.log('🟨 [PERMISSION] permissionStatus', permissionStatus); // granted, denied, prompt
|
||||||
|
// It will block the code from execution and display "Permission denied" if we don't have microphone permissions
|
||||||
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const goConnect = () => {
|
const goConnect = () => {
|
||||||
|
console.log('[goConnect] device:', device);
|
||||||
device === undefined ? getRtpCapabilities() : goCreateTransport()
|
device === undefined ? getRtpCapabilities() : goCreateTransport()
|
||||||
}
|
}
|
||||||
|
|
||||||
const goCreateTransport = () => {
|
const goCreateTransport = () => {
|
||||||
|
console.log('[goCreateTransport] IS_PRODUCER:', IS_PRODUCER);
|
||||||
IS_PRODUCER ? createSendTransport() : createRecvTransport()
|
IS_PRODUCER ? createSendTransport() : createRecvTransport()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -162,6 +189,7 @@ const createDevice = async () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
console.log('Device RTP Capabilities', device.rtpCapabilities)
|
console.log('Device RTP Capabilities', device.rtpCapabilities)
|
||||||
|
console.log('[createDevice] device', device);
|
||||||
|
|
||||||
// once the device loads, create transport
|
// once the device loads, create transport
|
||||||
goCreateTransport()
|
goCreateTransport()
|
||||||
@ -174,6 +202,7 @@ const createDevice = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const getRtpCapabilities = () => {
|
const getRtpCapabilities = () => {
|
||||||
|
console.log('[getRtpCapabilities]');
|
||||||
// make a request to the server for Router RTP Capabilities
|
// make a request to the server for Router RTP Capabilities
|
||||||
// see server's socket.on('getRtpCapabilities', ...)
|
// see server's socket.on('getRtpCapabilities', ...)
|
||||||
// the server sends back data object which contains rtpCapabilities
|
// the server sends back data object which contains rtpCapabilities
|
||||||
@ -190,18 +219,20 @@ const getRtpCapabilities = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const createSendTransport = () => {
|
const createSendTransport = () => {
|
||||||
|
console.log('[createSendTransport');
|
||||||
// see server's socket.on('createWebRtcTransport', sender?, ...)
|
// see server's socket.on('createWebRtcTransport', sender?, ...)
|
||||||
// this is a call from Producer, so sender = true
|
// this is a call from Producer, so sender = true
|
||||||
socket.emit('createWebRtcTransport', { sender: true, callId }, ({ params }) => {
|
socket.emit('createWebRtcTransport', { sender: true, callId }, (value) => {
|
||||||
|
|
||||||
|
console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`);
|
||||||
|
|
||||||
|
const params = value.params;
|
||||||
// The server sends back params needed
|
// The server sends back params needed
|
||||||
// to create Send Transport on the client side
|
// to create Send Transport on the client side
|
||||||
if (params.error) {
|
if (params.error) {
|
||||||
console.log(params.error)
|
console.log(params.error)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(params)
|
|
||||||
|
|
||||||
// creates a new WebRTC Transport to send media
|
// creates a new WebRTC Transport to send media
|
||||||
// based on the server's producer transport params
|
// based on the server's producer transport params
|
||||||
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#TransportOptions
|
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#TransportOptions
|
||||||
@ -227,10 +258,10 @@ const createSendTransport = () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
producerTransport.on('produce', async (parameters, callback, errback) => {
|
producerTransport.on('produce', async (parameters, callback, errback) => {
|
||||||
console.log(parameters)
|
console.log('[produce] parameters', parameters)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// tell the server to create a Producer
|
// Tell the server to create a Producer
|
||||||
// with the following parameters and produce
|
// with the following parameters and produce
|
||||||
// and expect back a server side producer id
|
// and expect back a server side producer id
|
||||||
// see server's socket.on('transport-produce', ...)
|
// see server's socket.on('transport-produce', ...)
|
||||||
@ -253,32 +284,53 @@ const createSendTransport = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const connectSendTransport = async () => {
|
const connectSendTransport = async () => {
|
||||||
// we now call produce() to instruct the producer transport
|
|
||||||
|
console.log('[connectSendTransport] producerTransport');
|
||||||
|
|
||||||
|
// We now call produce() to instruct the producer transport
|
||||||
// to send media to the Router
|
// to send media to the Router
|
||||||
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce
|
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce
|
||||||
// this action will trigger the 'connect' and 'produce' events above
|
// this action will trigger the 'connect' and 'produce' events above
|
||||||
producer = await producerTransport.produce(params)
|
|
||||||
|
|
||||||
producer.on('trackended', () => {
|
// Produce video
|
||||||
|
producerVideo = await producerTransport.produce(videoParams)
|
||||||
|
console.log('videoParams', videoParams);
|
||||||
|
console.log('producerVideo', producerVideo);
|
||||||
|
|
||||||
|
producerVideo.on('trackended', () => {
|
||||||
console.log('track ended')
|
console.log('track ended')
|
||||||
|
|
||||||
// close video track
|
// close video track
|
||||||
})
|
})
|
||||||
|
|
||||||
producer.on('transportclose', () => {
|
producerVideo.on('transportclose', () => {
|
||||||
console.log('transport ended')
|
console.log('transport ended')
|
||||||
// close video track
|
// 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
|
||||||
|
})
|
||||||
|
|
||||||
const answer = {
|
const answer = {
|
||||||
origin_asset_id: ASSET_ID,
|
origin_asset_id: ASSET_ID,
|
||||||
dest_asset_id: originAssetId || parseInt(urlParams.get('dest_asset_id')),
|
dest_asset_id: originAssetId || parseInt(urlParams.get('dest_asset_id')),
|
||||||
type: 'notify-answer',
|
type: 'notify-answer',
|
||||||
origin_asset_priority: 1,
|
origin_asset_priority: 1,
|
||||||
origin_asset_type_name: originAssetTypeName,
|
origin_asset_type_name: ASSET_TYPE,
|
||||||
origin_asset_name: originAssetName,
|
origin_asset_name: ASSET_NAME,
|
||||||
video_call_id: callId,
|
video_call_id: callId,
|
||||||
answer: 'accepted', // answer: 'rejected'
|
answer: 'accepted', // answer: accepted/rejected
|
||||||
};
|
};
|
||||||
console.log('SEND answer', answer);
|
console.log('SEND answer', answer);
|
||||||
|
|
||||||
@ -286,11 +338,15 @@ const connectSendTransport = async () => {
|
|||||||
'video',
|
'video',
|
||||||
JSON.stringify(answer)
|
JSON.stringify(answer)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Enable Close call button
|
||||||
|
const closeCallBtn = document.getElementById('btnCloseCall');
|
||||||
|
closeCallBtn.removeAttribute('disabled');
|
||||||
}
|
}
|
||||||
|
|
||||||
const createRecvTransport = async () => {
|
const createRecvTransport = async () => {
|
||||||
console.log('createRecvTransport');
|
console.log('createRecvTransport');
|
||||||
// see server's socket.on('consume', sender?, ...)
|
// See server's socket.on('consume', sender?, ...)
|
||||||
// this is a call from Consumer, so sender = false
|
// this is a call from Consumer, so sender = false
|
||||||
await socket.emit('createWebRtcTransport', { sender: false, callId }, ({ params }) => {
|
await socket.emit('createWebRtcTransport', { sender: false, callId }, ({ params }) => {
|
||||||
// The server sends back params needed
|
// The server sends back params needed
|
||||||
@ -300,15 +356,15 @@ const createRecvTransport = async () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(params)
|
console.log('[createRecvTransport] params', params)
|
||||||
|
|
||||||
// creates a new WebRTC Transport to receive media
|
// Creates a new WebRTC Transport to receive media
|
||||||
// based on server's consumer transport params
|
// based on server's consumer transport params
|
||||||
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#device-createRecvTransport
|
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#device-createRecvTransport
|
||||||
consumerTransport = device.createRecvTransport(params)
|
consumerTransport = device.createRecvTransport(params)
|
||||||
|
|
||||||
// https://mediasoup.org/documentation/v3/communication-between-client-and-server/#producing-media
|
// https://mediasoup.org/documentation/v3/communication-between-client-and-server/#producing-media
|
||||||
// this event is raised when a first call to transport.produce() is made
|
// This event is raised when a first call to transport.produce() is made
|
||||||
// see connectRecvTransport() below
|
// see connectRecvTransport() below
|
||||||
consumerTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
|
consumerTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
|
||||||
try {
|
try {
|
||||||
@ -329,9 +385,20 @@ const createRecvTransport = async () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const resetCallSettings = () => {
|
||||||
|
localVideo.srcObject = null
|
||||||
|
remoteVideo.srcObject = null
|
||||||
|
consumer = null
|
||||||
|
producerVideo = null
|
||||||
|
producerAudio = null
|
||||||
|
producerTransport = null
|
||||||
|
consumerTransport = null
|
||||||
|
device = undefined
|
||||||
|
}
|
||||||
|
|
||||||
const connectRecvTransport = async () => {
|
const connectRecvTransport = async () => {
|
||||||
console.log('connectRecvTransport');
|
console.log('connectRecvTransport');
|
||||||
// for consumer, we need to tell the server first
|
// For consumer, we need to tell the server first
|
||||||
// to create a consumer based on the rtpCapabilities and consume
|
// to create a consumer based on the rtpCapabilities and consume
|
||||||
// if the router can consume, it will send back a set of params as below
|
// if the router can consume, it will send back a set of params as below
|
||||||
await socket.emit('consume', {
|
await socket.emit('consume', {
|
||||||
@ -343,7 +410,7 @@ const connectRecvTransport = async () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// then consume with the local consumer transport
|
// Then consume with the local consumer transport
|
||||||
// which creates a consumer
|
// which creates a consumer
|
||||||
consumer = await consumerTransport.consume({
|
consumer = await consumerTransport.consume({
|
||||||
id: params.id,
|
id: params.id,
|
||||||
@ -365,5 +432,28 @@ const connectRecvTransport = async () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const closeCall = () => {
|
||||||
|
console.log('closeCall');
|
||||||
|
|
||||||
|
// Emit 'notify-end' to Hub so the consumer will know to close the video
|
||||||
|
const notifyEnd = {
|
||||||
|
origin_asset_id: ASSET_ID,
|
||||||
|
dest_asset_id: originAssetId || parseInt(urlParams.get('dest_asset_id')),
|
||||||
|
type: 'notify-end',
|
||||||
|
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', '')
|
||||||
|
|
||||||
|
// Reset settings
|
||||||
|
resetCallSettings()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
btnLocalVideo.addEventListener('click', getLocalStream)
|
btnLocalVideo.addEventListener('click', getLocalStream)
|
||||||
btnRecvSendTransport.addEventListener('click', goConnect)
|
btnRecvSendTransport.addEventListener('click', goConnect)
|
||||||
|
btnCloseCall.addEventListener('click', closeCall)
|
103
tsconfig.json
Normal file
103
tsconfig.json
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
/* Visit https://aka.ms/tsconfig to read more about this file */
|
||||||
|
|
||||||
|
/* Projects */
|
||||||
|
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
|
||||||
|
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||||
|
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
|
||||||
|
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
|
||||||
|
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||||
|
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||||
|
|
||||||
|
/* Language and Environment */
|
||||||
|
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
||||||
|
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||||
|
// "jsx": "preserve", /* Specify what JSX code is generated. */
|
||||||
|
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
|
||||||
|
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||||
|
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
|
||||||
|
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||||
|
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
|
||||||
|
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
|
||||||
|
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||||
|
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||||
|
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
|
||||||
|
|
||||||
|
/* Modules */
|
||||||
|
"module": "commonjs", /* Specify what module code is generated. */
|
||||||
|
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||||
|
// "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
|
||||||
|
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||||
|
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||||
|
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||||
|
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
|
||||||
|
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||||
|
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||||
|
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
|
||||||
|
// "resolveJsonModule": true, /* Enable importing .json files. */
|
||||||
|
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
|
||||||
|
|
||||||
|
/* JavaScript Support */
|
||||||
|
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
|
||||||
|
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||||
|
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
|
||||||
|
|
||||||
|
/* Emit */
|
||||||
|
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||||
|
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||||
|
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||||
|
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||||
|
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
|
||||||
|
// "outDir": "./", /* Specify an output folder for all emitted files. */
|
||||||
|
// "removeComments": true, /* Disable emitting comments. */
|
||||||
|
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||||
|
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||||
|
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */
|
||||||
|
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||||
|
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||||
|
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||||
|
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||||
|
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||||
|
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||||
|
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||||
|
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
|
||||||
|
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
|
||||||
|
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||||
|
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
|
||||||
|
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||||
|
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
||||||
|
|
||||||
|
/* Interop Constraints */
|
||||||
|
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||||
|
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||||
|
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
|
||||||
|
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||||
|
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
||||||
|
|
||||||
|
/* Type Checking */
|
||||||
|
"strict": true, /* Enable all strict type-checking options. */
|
||||||
|
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
|
||||||
|
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
|
||||||
|
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||||
|
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
|
||||||
|
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||||
|
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
|
||||||
|
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
|
||||||
|
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||||
|
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
|
||||||
|
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
|
||||||
|
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||||
|
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||||
|
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||||
|
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
|
||||||
|
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||||
|
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
|
||||||
|
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||||
|
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||||
|
|
||||||
|
/* Completeness */
|
||||||
|
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||||
|
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue
Block a user