mediasoup/public/index.js

445 lines
14 KiB
JavaScript
Raw Normal View History

const io = require('socket.io-client')
2022-07-23 07:32:54 +00:00
const mediasoupClient = require('mediasoup-client')
const urlParams = new URLSearchParams(location.search);
const config = require('./config')
console.log('[CONFIG]', config);
const ASSET_ID = parseInt(urlParams.get('assetId')) || 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;
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)
2022-11-22 08:28:45 +00:00
console.log('🟩 config', config)
2022-11-22 16:33:46 +00:00
let socket, hub
2022-11-22 16:32:47 +00:00
setTimeout(() => {
hub = io(config.hubAddress)
2022-11-22 16:35:36 +00:00
const connectToMediasoup = () => {
2022-11-22 16:35:36 +00:00
socket = io(config.mediasoupAddress, {
reconnection: true,
reconnectionDelay: 1000,
reconnectionDelayMax : 5000,
reconnectionAttempts: Infinity
})
socket.on('connection-success', ({ _socketId, existsProducer }) => {
console.log(`[MEDIA] ${config.mediasoupAddress} | connected: ${socket.connected} | existsProducer: ${existsProducer}`)
if (!IS_PRODUCER && existsProducer && consumer === undefined) {
goConnect()
// document.getElementById('btnRecvSendTransport').click();
2022-11-22 16:32:47 +00:00
}
2022-11-22 16:35:36 +00:00
if (IS_PRODUCER && urlParams.get('testing') === 'true') { getLocalStream() }
2022-07-23 07:32:54 +00:00
})
2022-11-22 16:35:36 +00:00
}
2022-11-22 16:35:36 +00:00
if (IS_PRODUCER === true) {
hub.on('connect', async () => {
console.log(`[HUB]! ${config.hubAddress} | connected: ${hub.connected}`)
connectToMediasoup()
2022-11-22 16:35:36 +00:00
hub.emit(
'ars',
JSON.stringify({
ars: true,
asset_id: ASSET_ID,
account_id: ACCOUNT_ID,
})
)
hub.on('video', (data) => {
const parsedData = JSON.parse(data);
if (parsedData.type === 'notify-request') {
console.log('video', parsedData)
originAssetId = parsedData.origin_asset_id;
// originAssetName = parsedData.origin_asset_name;
// originAssetTypeName = parsedData.origin_asset_type_name;
callId = parsedData.video_call_id;
console.log('[VIDEO] notify-request | IS_PRODUCER', IS_PRODUCER, 'callId', callId);
getLocalStream()
}
if (parsedData.type === 'notify-end') {
console.log('[VIDEO] notify-end | IS_PRODUCER', IS_PRODUCER, 'callId', callId);
resetCallSettings()
}
})
})
hub.on('connect_error', (error) => {
console.log('connect_error', error);
});
hub.on('connection', () => {
console.log('connection')
})
hub.on('disconnect', () => {
console.log('disconnect')
})
} else {
connectToMediasoup()
}
2022-11-22 22:54:03 +00:00
}, 1600);
2022-11-22 16:35:36 +00:00
2022-07-23 07:32:54 +00:00
let device
let rtpCapabilities
let producerTransport
let consumerTransport
2022-11-22 17:51:09 +00:00
let producerVideo
let producerAudio
2022-07-23 07:32:54 +00:00
let consumer
let originAssetId
2022-07-23 07:32:54 +00:00
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#ProducerOptions
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce
2022-11-23 11:20:49 +00:00
console.log('🟥 device', device);
2022-11-22 17:51:09 +00:00
let videoParams = {
2022-07-23 07:32:54 +00:00
encodings: [
2022-11-22 22:54:03 +00:00
{ scaleResolutionDownBy: 4, maxBitrate: 500000 },
{ scaleResolutionDownBy: 2, maxBitrate: 1000000 },
{ scaleResolutionDownBy: 1, maxBitrate: 5000000 },
{ scalabilityMode: 'S3T3_KEY' }
2022-07-23 07:32:54 +00:00
],
codecOptions: {
videoGoogleStartBitrate: 1000
}
}
2022-11-22 17:51:09 +00:00
let audioParams = {
2022-11-22 22:32:24 +00:00
codecOptions :
{
opusStereo : true,
opusDtx : true
2022-11-22 17:51:09 +00:00
}
}
const streamSuccess = (stream) => {
2022-07-23 07:32:54 +00:00
localVideo.srcObject = stream
2022-11-22 17:40:02 +00:00
console.log('stream', stream);
2022-11-22 17:51:09 +00:00
const videoTrack = stream.getVideoTracks()[0]
2022-11-22 17:52:11 +00:00
const audioTrack = stream.getAudioTracks()[0]
2022-11-22 17:51:09 +00:00
videoParams = {
track: videoTrack,
2022-11-23 13:57:27 +00:00
codec : device.rtpCapabilities.codecs.find((codec) => codec.mimeType.toLowerCase() === 'video/vp9'),
2022-11-22 17:51:09 +00:00
...videoParams
2022-11-22 17:40:02 +00:00
}
2022-11-22 17:51:09 +00:00
audioParams = {
track: audioTrack,
...audioParams
}
console.log('[streamSuccess] videoParams', videoParams, ' | audioParams', audioParams);
goConnect()
2022-07-23 07:32:54 +00:00
}
const getLocalStream = () => {
console.log('[getLocalStream]');
navigator.mediaDevices.getUserMedia({
2022-11-21 20:59:41 +00:00
audio: true,
2022-07-23 07:32:54 +00:00
video: {
2022-11-22 22:54:03 +00:00
qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
vga : { width: { ideal: 640 }, height: { ideal: 480 } },
hd : { width: { ideal: 1280 }, height: { ideal: 720 } }
2022-07-23 07:32:54 +00:00
}
})
.then(streamSuccess)
.catch(error => {
2022-07-23 07:32:54 +00:00
console.log(error.message)
})
}
const goConnect = () => {
2022-08-05 08:43:37 +00:00
console.log('[goConnect] device:', device);
device === undefined ? getRtpCapabilities() : goCreateTransport()
}
const goCreateTransport = () => {
2022-08-05 08:43:37 +00:00
console.log('[goCreateTransport] IS_PRODUCER:', IS_PRODUCER);
IS_PRODUCER ? createSendTransport() : createRecvTransport()
}
2022-07-23 07:32:54 +00:00
// A device is an endpoint connecting to a Router on the
// server side to send/recive media
const createDevice = async () => {
try {
2022-08-05 08:32:40 +00:00
console.log('[createDevice]');
2022-07-23 07:32:54 +00:00
device = new mediasoupClient.Device()
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#device-load
// Loads the device with RTP capabilities of the Router (server side)
await device.load({
// see getRtpCapabilities() below
routerRtpCapabilities: rtpCapabilities
})
console.log('Device RTP Capabilities', device.rtpCapabilities)
// once the device loads, create transport
goCreateTransport()
2022-07-23 07:32:54 +00:00
} catch (error) {
console.log(error)
if (error.name === 'UnsupportedError')
console.warn('browser not supported')
}
}
const getRtpCapabilities = () => {
2022-08-05 08:32:40 +00:00
console.log('[getRtpCapabilities]');
2022-07-23 07:32:54 +00:00
// make a request to the server for Router RTP Capabilities
// see server's socket.on('getRtpCapabilities', ...)
// the server sends back data object which contains rtpCapabilities
socket.emit('createRoom', { callId }, (data) => {
2022-07-23 07:32:54 +00:00
console.log(`Router RTP Capabilities... ${data.rtpCapabilities}`)
// we assign to local variable and will be used when
// loading the client Device (see createDevice above)
rtpCapabilities = data.rtpCapabilities
// once we have rtpCapabilities from the Router, create Device
createDevice()
2022-07-23 07:32:54 +00:00
})
}
const createSendTransport = () => {
2022-11-22 17:55:55 +00:00
console.log('[createSendTransport');
2022-07-23 07:32:54 +00:00
// see server's socket.on('createWebRtcTransport', sender?, ...)
// this is a call from Producer, so sender = true
socket.emit('createWebRtcTransport', { sender: true, callId }, ({ params }) => {
2022-07-23 07:32:54 +00:00
// The server sends back params needed
// to create Send Transport on the client side
if (params.error) {
console.log(params.error)
return
}
2022-11-22 17:55:55 +00:00
console.log('[createWebRtcTransport] params', params)
2022-07-23 07:32:54 +00:00
// creates a new WebRTC Transport to send media
// based on the server's producer transport params
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#TransportOptions
producerTransport = device.createSendTransport(params)
// 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
// see connectSendTransport() below
producerTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
try {
// Signal local DTLS parameters to the server side transport
// see server's socket.on('transport-connect', ...)
await socket.emit('transport-connect', {
2022-07-23 07:32:54 +00:00
dtlsParameters,
})
// Tell the transport that parameters were transmitted.
callback()
} catch (error) {
errback(error)
}
})
producerTransport.on('produce', async (parameters, callback, errback) => {
2022-11-22 18:00:44 +00:00
console.log('[produce] parameters', parameters)
2022-07-23 07:32:54 +00:00
try {
// tell the server to create a Producer
// with the following parameters and produce
// and expect back a server side producer id
// see server's socket.on('transport-produce', ...)
await socket.emit('transport-produce', {
2022-07-23 07:32:54 +00:00
kind: parameters.kind,
rtpParameters: parameters.rtpParameters,
appData: parameters.appData,
}, ({ id }) => {
// Tell the transport that parameters were transmitted and provide it with the
// server side producer's id.
callback({ id })
})
} catch (error) {
errback(error)
}
})
connectSendTransport()
2022-07-23 07:32:54 +00:00
})
}
const connectSendTransport = async () => {
2022-11-22 17:14:50 +00:00
2022-11-22 17:55:55 +00:00
console.log('[connectSendTransport] producerTransport');
2022-11-22 17:14:50 +00:00
2022-07-23 07:32:54 +00:00
// we now call produce() to instruct the producer transport
// to send media to the Router
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#transport-produce
// this action will trigger the 'connect' and 'produce' events above
2022-11-22 17:51:09 +00:00
producerVideo = await producerTransport.produce(videoParams)
2022-11-22 18:04:43 +00:00
console.log('producerVideo', producerVideo);
2022-11-22 17:51:09 +00:00
producerVideo.on('trackended', () => {
2022-07-23 07:32:54 +00:00
console.log('track ended')
// close video track
})
2022-11-22 17:51:09 +00:00
producerVideo.on('transportclose', () => {
2022-07-23 07:32:54 +00:00
console.log('transport ended')
// close video track
})
2022-11-22 22:34:12 +00:00
// producerAudio = await producerTransport.produce(audioParams)
// console.log('producerAudio', producerAudio);
// producerAudio.on('trackended', () => {
// console.log('track ended')
// // close video track
// })
// producerAudio.on('transportclose', () => {
// console.log('transport ended')
// // close video track
// })
2022-11-22 18:00:44 +00:00
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: ASSET_TYPE,
origin_asset_name: ASSET_NAME,
video_call_id: callId,
answer: 'accepted', // answer: 'rejected'
};
console.log('SEND answer', answer);
hub.emit(
'video',
JSON.stringify(answer)
);
// Enable Close call button
const closeCallBtn = document.getElementById('btnCloseCall');
closeCallBtn.removeAttribute('disabled');
2022-07-23 07:32:54 +00:00
}
const createRecvTransport = async () => {
console.log('createRecvTransport');
2022-07-23 07:32:54 +00:00
// see server's socket.on('consume', sender?, ...)
// this is a call from Consumer, so sender = false
await socket.emit('createWebRtcTransport', { sender: false, callId }, ({ params }) => {
2022-07-23 07:32:54 +00:00
// The server sends back params needed
// to create Send Transport on the client side
if (params.error) {
console.log(params.error)
return
}
2022-11-22 17:55:55 +00:00
console.log('[createRecvTransport] params', params)
2022-07-23 07:32:54 +00:00
// creates a new WebRTC Transport to receive media
// based on server's consumer transport params
// https://mediasoup.org/documentation/v3/mediasoup-client/api/#device-createRecvTransport
consumerTransport = device.createRecvTransport(params)
// 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
// see connectRecvTransport() below
consumerTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
try {
// Signal local DTLS parameters to the server side transport
// see server's socket.on('transport-recv-connect', ...)
await socket.emit('transport-recv-connect', {
2022-07-23 07:32:54 +00:00
dtlsParameters,
})
// Tell the transport that parameters were transmitted.
callback()
} catch (error) {
// Tell the transport that something was wrong
errback(error)
}
})
connectRecvTransport()
2022-07-23 07:32:54 +00:00
})
}
const resetCallSettings = () => {
localVideo.srcObject = null
remoteVideo.srcObject = null
consumer = null
2022-11-22 17:51:09 +00:00
producerVideo = null
2022-11-22 18:00:44 +00:00
producerAudio = null
producerTransport = null
consumerTransport = null
device = undefined
}
2022-07-23 07:32:54 +00:00
const connectRecvTransport = async () => {
console.log('connectRecvTransport');
// for consumer, we need to tell the server first
// 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
await socket.emit('consume', {
2022-07-23 07:32:54 +00:00
rtpCapabilities: device.rtpCapabilities,
callId
2022-07-23 07:32:54 +00:00
}, async ({ params }) => {
if (params.error) {
console.log('Cannot Consume')
return
}
// then consume with the local consumer transport
// which creates a consumer
consumer = await consumerTransport.consume({
id: params.id,
producerId: params.producerId,
kind: params.kind,
rtpParameters: params.rtpParameters
})
// destructure and retrieve the video track from the producer
const { track } = consumer
let stream = new MediaStream()
stream.addTrack(track)
// stream.removeTrack(track)
remoteVideo.srcObject = stream
socket.emit('consumer-resume')
console.log('consumer', consumer);
2022-07-23 07:32:54 +00:00
})
}
const closeCall = () => {
2022-08-11 10:17:44 +00:00
console.log('closeCall');
2022-08-11 10:17:44 +00:00
// 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()
}
2022-07-23 07:32:54 +00:00
btnLocalVideo.addEventListener('click', getLocalStream)
btnRecvSendTransport.addEventListener('click', goConnect)
btnCloseCall.addEventListener('click', closeCall)