578 lines
18 KiB
JavaScript
578 lines
18 KiB
JavaScript
const io = require('socket.io-client')
|
|
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
|
|
let remoteVideo = document.getElementById('remoteVideo')
|
|
remoteVideo.defaultMuted = true
|
|
let produceAudio = false
|
|
|
|
console.log('[URL] ASSET_ID', ASSET_ID, '| ACCOUNT_ID', ACCOUNT_ID, '| callId', callId, ' | IS_PRODUCER', IS_PRODUCER)
|
|
|
|
console.log('🟩 config', config)
|
|
|
|
produceAudioSelector = document.getElementById('produceAudio');
|
|
produceAudioSelector.addEventListener('change', e => {
|
|
if(e.target.checked) {
|
|
produceAudio = true
|
|
console.log('produce audio');
|
|
} else {
|
|
produceAudio = false
|
|
}
|
|
});
|
|
|
|
let socket, hub
|
|
let device
|
|
let rtpCapabilities
|
|
let producerTransport
|
|
let consumerTransport
|
|
let producerVideo
|
|
let producerAudio
|
|
let consumer
|
|
let originAssetId
|
|
let consumerVideo // local consumer video(consumer not transport)
|
|
let consumerAudio // local consumer audio(consumer not transport)
|
|
|
|
const remoteSoundControl = document.getElementById('remoteSoundControl');
|
|
|
|
remoteSoundControl.addEventListener('click', function handleClick() {
|
|
console.log('remoteSoundControl.textContent', remoteSoundControl.textContent);
|
|
if (remoteSoundControl.textContent === 'Unmute') {
|
|
remoteVideo.muted = false
|
|
remoteSoundControl.textContent = 'Mute';
|
|
} else {
|
|
remoteVideo.muted = true
|
|
remoteSoundControl.textContent = 'Unmute';
|
|
}
|
|
});
|
|
|
|
// 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)
|
|
|
|
const connectToMediasoup = () => {
|
|
|
|
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();
|
|
}
|
|
if (IS_PRODUCER && urlParams.get('testing') === 'true') { getLocalStream() }
|
|
})
|
|
|
|
// socket.on('new-producer', ({ callId }) => {
|
|
// console.log(`🟥 new-producer | callId: ${callId}`);
|
|
// })
|
|
}
|
|
|
|
if (IS_PRODUCER === true) {
|
|
hub.on('connect', async () => {
|
|
console.log(`[HUB]! ${config.hubAddress} | connected: ${hub.connected}`)
|
|
connectToMediasoup()
|
|
|
|
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()
|
|
}
|
|
|
|
}, 1600);
|
|
|
|
const streamSuccess = (stream) => {
|
|
console.log('[streamSuccess] device', device);
|
|
localVideo.srcObject = stream
|
|
console.log('stream', stream);
|
|
const videoTrack = stream.getVideoTracks()[0]
|
|
const audioTrack = stream.getAudioTracks()[0]
|
|
|
|
videoParams = {
|
|
track: videoTrack,
|
|
...videoParams
|
|
}
|
|
|
|
audioParams = {
|
|
track: audioTrack,
|
|
...audioParams
|
|
}
|
|
|
|
console.log('[streamSuccess] videoParams', videoParams, ' | audioParams', audioParams);
|
|
goConnect()
|
|
}
|
|
|
|
const getLocalStream = () => {
|
|
console.log('[getLocalStream]');
|
|
navigator.mediaDevices.getUserMedia({
|
|
audio: produceAudio ? true : false,
|
|
video: {
|
|
qvga : { width: { ideal: 320 }, height: { ideal: 240 } },
|
|
vga : { width: { ideal: 640 }, height: { ideal: 480 } },
|
|
hd : { width: { ideal: 1280 }, height: { ideal: 720 } }
|
|
}
|
|
})
|
|
.then(streamSuccess)
|
|
.catch(error => {
|
|
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 = () => {
|
|
console.log('[goConnect] device:', device);
|
|
device === undefined ? getRtpCapabilities() : goCreateTransport()
|
|
}
|
|
|
|
const goCreateTransport = () => {
|
|
console.log('[goCreateTransport] IS_PRODUCER:', IS_PRODUCER);
|
|
IS_PRODUCER ? createSendTransport() : createRecvTransport()
|
|
}
|
|
|
|
// A device is an endpoint connecting to a Router on the
|
|
// server side to send/recive media
|
|
const createDevice = async () => {
|
|
try {
|
|
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)
|
|
console.log('[createDevice] device', device);
|
|
|
|
// once the device loads, create transport
|
|
goCreateTransport()
|
|
|
|
} catch (error) {
|
|
console.log(error)
|
|
if (error.name === 'UnsupportedError')
|
|
console.warn('browser not supported')
|
|
}
|
|
}
|
|
|
|
const getRtpCapabilities = () => {
|
|
console.log('[getRtpCapabilities]');
|
|
// 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) => {
|
|
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()
|
|
})
|
|
}
|
|
|
|
const createSendTransport = () => {
|
|
console.log('[createSendTransport');
|
|
// see server's socket.on('createWebRtcTransport', sender?, ...)
|
|
// this is a call from Producer, so sender = true
|
|
socket.emit('createWebRtcTransport', { sender: true }, (value) => {
|
|
|
|
console.log(`[createWebRtcTransport] value: ${JSON.stringify(value)}`);
|
|
|
|
const params = value.params;
|
|
// The server sends back params needed
|
|
// to create Send Transport on the client side
|
|
if (params.error) {
|
|
console.log(params.error)
|
|
return
|
|
}
|
|
// 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', {
|
|
dtlsParameters,
|
|
})
|
|
|
|
// Tell the transport that parameters were transmitted.
|
|
callback()
|
|
|
|
} catch (error) {
|
|
errback(error)
|
|
}
|
|
})
|
|
|
|
producerTransport.on('produce', async (parameters, callback, errback) => {
|
|
console.log('[produce] parameters', parameters)
|
|
|
|
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', {
|
|
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()
|
|
})
|
|
}
|
|
|
|
const connectSendTransport = async () => {
|
|
|
|
console.log('[connectSendTransport] producerTransport');
|
|
|
|
// 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
|
|
|
|
// Produce video
|
|
let producerVideoHandler = await producerTransport.produce(videoParams)
|
|
console.log('videoParams', videoParams);
|
|
console.log('producerVideo', producerVideo);
|
|
|
|
producerVideoHandler.on('trackended', () => {
|
|
console.log('track ended')
|
|
// close video track
|
|
})
|
|
|
|
producerVideoHandler.on('transportclose', () => {
|
|
console.log('transport ended')
|
|
// close video track
|
|
})
|
|
|
|
// Produce audio
|
|
if (produceAudio) {
|
|
let producerAudioHandler = await producerTransport.produce(audioParams)
|
|
console.log('audioParams', audioParams);
|
|
console.log('producerAudio', producerAudio);
|
|
|
|
producerAudioHandler.on('trackended', () => {
|
|
console.log('track ended')
|
|
// close audio track
|
|
})
|
|
|
|
producerAudioHandler.on('transportclose', () => {
|
|
console.log('transport ended')
|
|
// close audio track
|
|
})
|
|
}
|
|
|
|
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: accepted/rejected
|
|
};
|
|
console.log('SEND answer', answer);
|
|
|
|
hub.emit(
|
|
'video',
|
|
JSON.stringify(answer)
|
|
);
|
|
|
|
// Enable Close call button
|
|
const closeCallBtn = document.getElementById('btnCloseCall');
|
|
closeCallBtn.removeAttribute('disabled');
|
|
}
|
|
|
|
const createRecvTransport = async () => {
|
|
console.log('createRecvTransport');
|
|
// See server's socket.on('consume', sender?, ...)
|
|
// this is a call from Consumer, so sender = false
|
|
await socket.emit('createWebRtcTransport', { sender: false, callId }, ({ params }) => {
|
|
// The server sends back params needed
|
|
// to create Send Transport on the client side
|
|
if (params.error) {
|
|
console.log(params.error)
|
|
return
|
|
}
|
|
|
|
console.log('[createRecvTransport] params', params)
|
|
|
|
// 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', {
|
|
dtlsParameters,
|
|
})
|
|
|
|
// Tell the transport that parameters were transmitted.
|
|
callback()
|
|
} catch (error) {
|
|
// Tell the transport that something was wrong
|
|
errback(error)
|
|
}
|
|
})
|
|
connectRecvTransport()
|
|
})
|
|
}
|
|
|
|
const resetCallSettings = () => {
|
|
localVideo.srcObject = null
|
|
remoteVideo.srcObject = null
|
|
consumer = null
|
|
producerVideo = null
|
|
producerAudio = null
|
|
producerTransport = null
|
|
consumerTransport = null
|
|
device = undefined
|
|
}
|
|
|
|
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', {
|
|
rtpCapabilities: device.rtpCapabilities,
|
|
callId
|
|
}, async ({videoParams, audioParams}) => {
|
|
console.log(`[consume] 🟩 videoParams`, videoParams)
|
|
console.log(`[consume] 🟩 audioParams`, audioParams)
|
|
console.log('[consume] 🟩 consumerTransport', consumerTransport)
|
|
|
|
let stream = new MediaStream()
|
|
|
|
// Maybe the unit does not produce video or audio, so we must only consume what is produced
|
|
if (videoParams) {
|
|
console.log('❗ Have VIDEO stream to consume');
|
|
stream.addTrack(await getVideoTrask(videoParams))
|
|
} else {
|
|
console.log('❗ Don\'t have VIDEO stream to consume');
|
|
}
|
|
|
|
if (audioParams) {
|
|
console.log('❗ Have AUDIO stream to consume');
|
|
let audioTrack = await getAudioTrask(audioParams)
|
|
stream.addTrack(audioTrack)
|
|
} else {
|
|
console.log('❗ Don\'t have AUDIO stream to consume');
|
|
}
|
|
|
|
socket.emit('consumer-resume')
|
|
|
|
remoteVideo.srcObject = stream
|
|
remoteVideo.setAttribute('autoplay', true)
|
|
|
|
remoteVideo.play()
|
|
.then(() => {
|
|
console.log('remoteVideo PLAY')
|
|
})
|
|
.catch((error) => {
|
|
displayError(`remoteVideo PLAY ERROR | ${error.message}`)
|
|
})
|
|
})
|
|
}
|
|
|
|
const getVideoTrask = async (videoParams) => {
|
|
consumerVideo = await consumerTransport.consume({
|
|
id: videoParams.id,
|
|
producerId: videoParams.producerId,
|
|
kind: videoParams.kind,
|
|
rtpParameters: videoParams.rtpParameters
|
|
})
|
|
|
|
consumerVideo.on('transportclose', () => {
|
|
console.log('transport closed so consumer closed')
|
|
})
|
|
|
|
return consumerVideo.track
|
|
}
|
|
|
|
const getAudioTrask = async (audioParams) => {
|
|
consumerAudio = await consumerTransport.consume({
|
|
id: audioParams.id,
|
|
producerId: audioParams.producerId,
|
|
kind: audioParams.kind,
|
|
rtpParameters: audioParams.rtpParameters
|
|
})
|
|
|
|
consumerAudio.on('transportclose', () => {
|
|
console.log('transport closed so consumer closed')
|
|
})
|
|
|
|
const audioTrack = consumerAudio.track
|
|
|
|
audioTrack.applyConstraints({
|
|
audio: {
|
|
advanced: [
|
|
{
|
|
echoCancellation: {exact: true}
|
|
},
|
|
{
|
|
autoGainControl: {exact: true}
|
|
},
|
|
{
|
|
noiseSuppression: {exact: true}
|
|
},
|
|
{
|
|
highpassFilter: {exact: true}
|
|
}
|
|
]
|
|
}
|
|
})
|
|
|
|
return audioTrack
|
|
}
|
|
|
|
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()
|
|
}
|
|
|
|
const consume = async () => {
|
|
console.log('[consume]')
|
|
console.log('createRecvTransport Consumer')
|
|
await socket.emit('createWebRtcTransport', { sender: false, callId, dispatcher: true }, ({ params }) => {
|
|
if (params.error) {
|
|
console.log('createRecvTransport | createWebRtcTransport | Error', params.error)
|
|
return
|
|
}
|
|
consumerTransport = device.createRecvTransport(params)
|
|
consumerTransport.on('connect', async ({ dtlsParameters }, callback, errback) => {
|
|
try {
|
|
await socket.emit('transport-recv-connect', {
|
|
dtlsParameters,
|
|
})
|
|
callback()
|
|
} catch (error) {
|
|
errback(error)
|
|
}
|
|
})
|
|
|
|
connectRecvTransport()
|
|
})
|
|
}
|
|
|
|
btnLocalVideo.addEventListener('click', getLocalStream)
|
|
btnRecvSendTransport.addEventListener('click', consume)
|
|
btnCloseCall.addEventListener('click', closeCall) |