@louis-qode/mediasoup 1.0.0 → 1.0.2

package/dist/RoomClient.js

@@ -0,0 +1,1620 @@
+import { AwaitQueue } from 'awaitqueue';
+import * as mediasoupClient from 'mediasoup-client';
+import protooClient from 'protoo-client';
+import * as cookiesManager from './cookiesManager';
+import * as e2e from './e2e';
+import Logger from './Logger';
+import * as requestActions from './redux/requestActions';
+import * as stateActions from './redux/stateActions';
+import { store } from './redux/store';
+import { getProtooUrl } from './urlFactory';
+const WEBCAM_VIDEO_CONSTRAINS = {
+    qvga: { width: { ideal: 320 }, height: { ideal: 240 } },
+    vga: { width: { ideal: 640 }, height: { ideal: 480 } },
+    hd: { width: { ideal: 1280 }, height: { ideal: 720 } },
+};
+const SCREEN_SHARING_VIDEO_CONSTRAINS = {
+    qvga: { width: { ideal: 320 }, height: { ideal: 240 } },
+    vga: { width: { ideal: 640 }, height: { ideal: 480 } },
+    hd: { width: { ideal: 1280 }, height: { ideal: 720 } },
+    '4k': { width: { ideal: 3840 }, height: { ideal: 2160 } },
+};
+const PC_PROPRIETARY_CONSTRAINTS = {};
+const EXTERNAL_VIDEO_SRC = '/videos/video-audio-stereo.mp4';
+const logger = new Logger('RoomClient');
+export default class RoomClient {
+    constructor({ dispatch, roomId, peerId, displayName, device, handlerName, forceTcp, produce, consume, mic, webcam, datachannel, enableWebcamLayers, enableSharingLayers, webcamScalabilityMode, sharingScalabilityMode, numWebcamSimulcastStreams, numSharingSimulcastStreams, videoContentHint, screenSharing4K, preferLocalCodecsOrder, forcePCMA, forceVP8, forceH264, forceVP9, forceAV1, externalVideo, e2eKey, stats, }) {
+        logger.debug('constructor() [roomId:"%s", peerId:"%s", displayName:"%s", device:%s]', roomId, peerId, displayName, device.flag);
+        this._dispatch = dispatch;
+        this._closed = false;
+        this._displayName = displayName;
+        this._device = device;
+        this._handlerName = handlerName;
+        this._forceTcp = forceTcp;
+        this._produce = produce;
+        this._consume = consume;
+        this._useMic = Boolean(mic);
+        this._useWebcam = webcam;
+        this._useDataChannel = Boolean(datachannel);
+        this._preferLocalCodecsOrder = Boolean(preferLocalCodecsOrder);
+        this._forcePCMA = Boolean(forcePCMA);
+        this._forceVP8 = Boolean(forceVP8);
+        this._forceH264 = Boolean(forceH264);
+        this._forceVP9 = Boolean(forceVP9);
+        this._forceAV1 = Boolean(forceAV1);
+        this._enableWebcamLayers = Boolean(enableWebcamLayers);
+        this._enableSharingLayers = Boolean(enableSharingLayers);
+        this._webcamScalabilityMode = webcamScalabilityMode;
+        this._sharingScalabilityMode = sharingScalabilityMode;
+        this._numWebcamSimulcastStreams = numWebcamSimulcastStreams;
+        this._numSharingSimulcastStreams = numSharingSimulcastStreams;
+        //
+        this._videoContentHint = videoContentHint || '';
+        this._screenSharing4K = Boolean(screenSharing4K);
+        this._externalVideo = null;
+        this._e2eKey = e2eKey;
+        this._stats = stats;
+        this._externalVideoStream = null;
+        this._nextDataChannelTestNumber = 0;
+        this._consumingAwaitQueue = new AwaitQueue();
+        if (externalVideo) {
+            this._externalVideo = document.createElement('video');
+            this._externalVideo.controls = true;
+            this._externalVideo.muted = true;
+            this._externalVideo.loop = true;
+            this._externalVideo.setAttribute('playsinline', '');
+            this._externalVideo.src = EXTERNAL_VIDEO_SRC;
+            this._externalVideo
+                .play()
+                .catch((error) => logger.warn('externalVideo.play() failed:%o', error));
+        }
+        this._protooUrl = getProtooUrl({
+            roomId,
+            peerId,
+        });
+        this._protoo = null;
+        this._mediasoupDevice = null;
+        this._sendTransport = null;
+        this._recvTransport = null;
+        this._micProducer = null;
+        this._webcamProducer = null;
+        this._shareProducer = null;
+        this._chatDataProducer = null;
+        this._botDataProducer = null;
+        this._consumers = new Map();
+        this._dataConsumers = new Map();
+        this._webcams = new Map();
+        this._webcam = {
+            device: null,
+            resolution: 'hd',
+        };
+        if (this._e2eKey && e2e.isSupported()) {
+            e2e.setCryptoKey('setCryptoKey', this._e2eKey, true);
+        }
+    }
+    close() {
+        if (this._closed)
+            return;
+        this._closed = true;
+        logger.debug('close()');
+        this._protoo.close();
+        if (this._sendTransport) {
+            this._sendTransport.close();
+            this._sendTransport = null;
+        }
+        if (this._recvTransport) {
+            this._recvTransport.close();
+            this._recvTransport = null;
+        }
+        this._dispatch(stateActions.setRoomState('closed'));
+    }
+    async join() {
+        this._dispatch(stateActions.setMediasoupClientVersion(mediasoupClient.version));
+        const protooTransport = new protooClient.WebSocketTransport(this._protooUrl, {
+            origin: 'https://louis.internal.qode.world'
+        });
+        this._protoo = new protooClient.Peer(protooTransport);
+        this._dispatch(stateActions.setRoomState('connecting'));
+        this._protoo.on('open', () => this._joinRoom());
+        this._protoo.on('failed', () => {
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: 'WebSocket connection failed',
+            }));
+        });
+        this._protoo.on('disconnected', () => {
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: 'WebSocket disconnected',
+            }));
+            if (this._sendTransport) {
+                this._sendTransport.close();
+                this._sendTransport = null;
+            }
+            if (this._recvTransport) {
+                this._recvTransport.close();
+                this._recvTransport = null;
+            }
+            this._dispatch(stateActions.setRoomState('closed'));
+        });
+        this._protoo.on('close', () => {
+            if (this._closed)
+                return;
+            this.close();
+        });
+        this._protoo.on('request', async (request, accept, reject) => {
+            logger.debug('proto "request" event [method:%s, data:%o]', request.method, request.data);
+            switch (request.method) {
+                case 'newConsumer': {
+                    await this._consumingAwaitQueue.push(async () => {
+                        if (!this._consume) {
+                            reject(403, 'I do not want to consume');
+                            return;
+                        }
+                        const { peerId, consumerId, producerId, kind, rtpParameters, type, producerPaused, consumerScore, appData, } = request.data;
+                        try {
+                            const consumer = await this._recvTransport.consume({
+                                id: consumerId,
+                                producerId,
+                                kind,
+                                rtpParameters,
+                                streamId: `${peerId}-${appData.source === 'screensharing' ? 'screensharing' : 'audio-video'}`,
+                                appData: { ...appData, peerId },
+                            });
+                            if (this._e2eKey && e2e.isSupported() && consumer.rtpReceiver) {
+                                e2e.setupReceiverTransform(consumer.rtpReceiver);
+                            }
+                            this._consumers.set(consumer.id, consumer);
+                            consumer.on('transportclose', () => {
+                                this._consumers.delete(consumer.id);
+                            });
+                            const { spatialLayers, temporalLayers } = mediasoupClient.parseScalabilityMode(consumer.rtpParameters.encodings[0].scalabilityMode);
+                            this._dispatch(stateActions.addConsumer({
+                                id: consumer.id,
+                                type: type,
+                                locallyPaused: false,
+                                remotelyPaused: producerPaused,
+                                rtpParameters: consumer.rtpParameters,
+                                spatialLayers: spatialLayers,
+                                temporalLayers: temporalLayers,
+                                preferredSpatialLayer: spatialLayers - 1,
+                                preferredTemporalLayer: temporalLayers - 1,
+                                priority: 1,
+                                codec: consumer.rtpParameters.codecs[0].mimeType.split('/')[1],
+                                track: consumer.track,
+                            }, peerId));
+                            this._dispatch(stateActions.setConsumerScore(consumerId, consumerScore));
+                            accept();
+                            if (consumer.kind === 'video' && store.getState().me.audioOnly)
+                                this._pauseConsumer(consumer);
+                        }
+                        catch (error) {
+                            logger.error('"newConsumer" request failed:%o', error);
+                            this._dispatch(requestActions.notify({
+                                type: 'error',
+                                text: `Error creating a Consumer: ${error}`,
+                            }));
+                            throw error;
+                        }
+                    });
+                    break;
+                }
+                case 'newDataConsumer': {
+                    await this._consumingAwaitQueue.push(async () => {
+                        if (!this._consume) {
+                            reject(403, 'I do not want to data consume');
+                            return;
+                        }
+                        if (!this._useDataChannel) {
+                            reject(403, 'I do not want DataChannels');
+                            return;
+                        }
+                        const { peerId, dataConsumerId, dataProducerId, sctpStreamParameters, label, protocol, appData, } = request.data;
+                        try {
+                            const dataConsumer = await this._recvTransport.consumeData({
+                                id: dataConsumerId,
+                                dataProducerId,
+                                sctpStreamParameters,
+                                label,
+                                protocol,
+                                appData: { ...appData, peerId },
+                            });
+                            this._dataConsumers.set(dataConsumer.id, dataConsumer);
+                            dataConsumer.on('transportclose', () => {
+                                this._dataConsumers.delete(dataConsumer.id);
+                            });
+                            dataConsumer.on('open', () => {
+                                logger.debug('DataConsumer "open" event');
+                            });
+                            dataConsumer.on('close', () => {
+                                logger.warn('DataConsumer "close" event');
+                                this._dataConsumers.delete(dataConsumer.id);
+                            });
+                            dataConsumer.on('error', (error) => {
+                                logger.error('DataConsumer "error" event:%o', error);
+                                this._dispatch(requestActions.notify({
+                                    type: 'error',
+                                    text: `DataConsumer error: ${error}`,
+                                }));
+                            });
+                            dataConsumer.on('message', (message) => {
+                                logger.debug('DataConsumer "message" event [streamId:%d]', dataConsumer.sctpStreamParameters.streamId);
+                                if (message instanceof ArrayBuffer) {
+                                    const view = new DataView(message);
+                                    const number = view.getUint32(0);
+                                    if (number == Math.pow(2, 32) - 1) {
+                                        logger.warn('dataChannelTest finished!');
+                                        this._nextDataChannelTestNumber = 0;
+                                        return;
+                                    }
+                                    if (number > this._nextDataChannelTestNumber) {
+                                        logger.warn('dataChannelTest: %s packets missing', number - this._nextDataChannelTestNumber);
+                                    }
+                                    this._nextDataChannelTestNumber = number + 1;
+                                    return;
+                                }
+                                else if (typeof message !== 'string') {
+                                    logger.warn('ignoring DataConsumer "message" (not a string)');
+                                    return;
+                                }
+                                switch (dataConsumer.label) {
+                                    case 'chat': {
+                                        const { peers } = store.getState();
+                                        const peersArray = Object.keys(peers).map((_peerId) => peers[_peerId]);
+                                        const sendingPeer = peersArray.find((peer) => peer.dataConsumers.includes(dataConsumer.id));
+                                        if (!sendingPeer) {
+                                            logger.warn('DataConsumer "message" from unknown peer');
+                                            break;
+                                        }
+                                        this._dispatch(requestActions.notify({
+                                            title: `${sendingPeer.displayName} says:`,
+                                            text: message,
+                                            timeout: 5000,
+                                        }));
+                                        break;
+                                    }
+                                    case 'bot': {
+                                        this._dispatch(requestActions.notify({
+                                            title: 'Message from Bot:',
+                                            text: message,
+                                            timeout: 5000,
+                                        }));
+                                        break;
+                                    }
+                                }
+                            });
+                            this._dispatch(stateActions.addDataConsumer({
+                                id: dataConsumer.id,
+                                sctpStreamParameters: dataConsumer.sctpStreamParameters,
+                                label: dataConsumer.label,
+                                protocol: dataConsumer.protocol,
+                            }, peerId));
+                            accept();
+                        }
+                        catch (error) {
+                            logger.error('"newDataConsumer" request failed:%o', error);
+                            this._dispatch(requestActions.notify({
+                                type: 'error',
+                                text: `Error creating a DataConsumer: ${error}`,
+                            }));
+                            throw error;
+                        }
+                    });
+                    break;
+                }
+            }
+        });
+        this._protoo.on('notification', (notification) => {
+            logger.debug('proto "notification" event [method:%s, data:%o]', notification.method, notification.data);
+            switch (notification.method) {
+                case 'mediasoupVersion': {
+                    const { version } = notification.data;
+                    this._dispatch(stateActions.setMediasoupVersion(version));
+                    break;
+                }
+                case 'producerScore': {
+                    const { producerId, score } = notification.data;
+                    this._dispatch(stateActions.setProducerScore(producerId, score));
+                    break;
+                }
+                case 'newPeer': {
+                    const { peerId, displayName, device } = notification.data.peer;
+                    const peer = {
+                        id: peerId,
+                        displayName,
+                        device,
+                    };
+                    this._dispatch(stateActions.addPeer({ ...peer, consumers: [], dataConsumers: [] }));
+                    this._dispatch(requestActions.notify({
+                        text: `${peer.displayName} has joined the room`,
+                    }));
+                    break;
+                }
+                case 'peerClosed': {
+                    const { peerId } = notification.data;
+                    this._dispatch(stateActions.removePeer(peerId));
+                    break;
+                }
+                case 'peerDisplayNameChanged': {
+                    const { peerId, displayName, oldDisplayName } = notification.data;
+                    this._dispatch(stateActions.setPeerDisplayName(displayName, peerId));
+                    this._dispatch(requestActions.notify({
+                        text: `${oldDisplayName} is now ${displayName}`,
+                    }));
+                    break;
+                }
+                case 'downlinkBwe': {
+                    logger.debug("'downlinkBwe' event:%o", notification.data);
+                    break;
+                }
+                case 'consumerClosed': {
+                    this._consumingAwaitQueue.push(async () => {
+                        const { consumerId } = notification.data;
+                        const consumer = this._consumers.get(consumerId);
+                        if (!consumer) {
+                            logger.warn(`'consumerClosed' notification for unknown consumerId %o`, consumerId);
+                            return;
+                        }
+                        consumer.close();
+                        this._consumers.delete(consumerId);
+                        const { peerId } = consumer.appData || {};
+                        this._dispatch(stateActions.removeConsumer(consumerId, peerId));
+                    });
+                    break;
+                }
+                case 'consumerPaused': {
+                    this._consumingAwaitQueue.push(async () => {
+                        const { consumerId } = notification.data;
+                        const consumer = this._consumers.get(consumerId);
+                        if (!consumer) {
+                            logger.warn(`'consumerPaused' notification for unknown consumerId %o`, consumerId);
+                            return;
+                        }
+                        consumer.pause();
+                        this._dispatch(stateActions.setConsumerPaused(consumerId, 'remote'));
+                    });
+                    break;
+                }
+                case 'consumerResumed': {
+                    this._consumingAwaitQueue.push(async () => {
+                        const { consumerId } = notification.data;
+                        const consumer = this._consumers.get(consumerId);
+                        if (!consumer) {
+                            logger.warn(`'consumerResumed' notification for unknown consumerId %o`, consumerId);
+                            return;
+                        }
+                        consumer.resume();
+                        this._dispatch(stateActions.setConsumerResumed(consumerId, 'remote'));
+                    });
+                    break;
+                }
+                case 'consumerLayersChanged': {
+                    this._consumingAwaitQueue.push(async () => {
+                        const { consumerId, layers } = notification.data;
+                        const consumer = this._consumers.get(consumerId);
+                        if (!consumer) {
+                            logger.warn(`'consumerLayersChanged' notification for unknown consumerId %o`, consumerId);
+                            return;
+                        }
+                        this._dispatch(stateActions.setConsumerCurrentLayers(consumerId, layers?.spatialLayer, layers?.temporalLayer));
+                    });
+                    break;
+                }
+                case 'consumerScore': {
+                    this._consumingAwaitQueue.push(async () => {
+                        const { consumerId, score } = notification.data;
+                        const consumer = this._consumers.get(consumerId);
+                        if (!consumer) {
+                            logger.warn(`'consumerScore' notification for unknown consumerId %o`, consumerId);
+                            return;
+                        }
+                        this._dispatch(stateActions.setConsumerScore(consumerId, score));
+                    });
+                    break;
+                }
+                case 'dataConsumerClosed': {
+                    this._consumingAwaitQueue.push(async () => {
+                        const { dataConsumerId } = notification.data;
+                        const dataConsumer = this._dataConsumers.get(dataConsumerId);
+                        if (!dataConsumer) {
+                            logger.warn(`'dataConsumerClosed' notification for unknown dataConsumerId %o`, dataConsumerId);
+                            return;
+                        }
+                        dataConsumer.close();
+                        this._dataConsumers.delete(dataConsumerId);
+                        const { peerId } = dataConsumer.appData || {};
+                        this._dispatch(stateActions.removeDataConsumer(dataConsumerId, peerId));
+                    });
+                    break;
+                }
+                case 'activeSpeaker': {
+                    const { peerId } = notification.data;
+                    this._dispatch(stateActions.setRoomActiveSpeaker(peerId));
+                    break;
+                }
+                case 'speakingPeers': {
+                    const { peerVolumes } = notification.data;
+                    const peerIds = peerVolumes.map(({ peerId }) => peerId);
+                    this._dispatch(stateActions.setRoomSpeakingPeers(peerIds));
+                    break;
+                }
+                default: {
+                    logger.error('unknown protoo notification.method "%s"', notification.method);
+                }
+            }
+        });
+    }
+    async enableMic() {
+        logger.debug('enableMic()');
+        if (this._micProducer)
+            return;
+        if (!this._mediasoupDevice.canProduce('audio')) {
+            logger.error('enableMic() | cannot produce audio');
+            return;
+        }
+        let track;
+        try {
+            if (!this._externalVideo) {
+                logger.debug('enableMic() | calling navigator.mediaDevices.getUserMedia()');
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    audio: true,
+                });
+                track = stream.getAudioTracks()[0];
+            }
+            else {
+                const stream = await this._getExternalVideoStream();
+                track = stream.getAudioTracks()[0].clone();
+            }
+            let codec;
+            let codecOptions = {
+                opusStereo: true,
+                opusDtx: true,
+                opusFec: true,
+                opusNack: true,
+            };
+            const headerExtensionOptions = {
+                absCaptureTime: true,
+            };
+            if (this._forcePCMA) {
+                codec = this._mediasoupDevice.rtpCapabilities.codecs.find((c) => c.mimeType.toLowerCase() === 'audio/pcma');
+                if (!codec) {
+                    throw new Error('desired PCMA codec+configuration is not supported');
+                }
+                codecOptions = undefined;
+            }
+            this._micProducer = await this._sendTransport.produce({
+                track,
+                codecOptions,
+                headerExtensionOptions,
+                codec,
+                appData: {
+                    source: 'audio',
+                },
+            });
+            if (this._e2eKey && e2e.isSupported() && this._micProducer.rtpSender) {
+                e2e.setupSenderTransform(this._micProducer.rtpSender);
+            }
+            this._dispatch(stateActions.addProducer({
+                id: this._micProducer.id,
+                paused: this._micProducer.paused,
+                track: this._micProducer.track,
+                rtpParameters: this._micProducer.rtpParameters,
+                codec: this._micProducer.rtpParameters.codecs[0].mimeType.split('/')[1],
+            }));
+            this._micProducer.on('transportclose', () => {
+                this._micProducer = null;
+            });
+            this._micProducer.on('trackended', () => {
+                this._dispatch(requestActions.notify({
+                    type: 'error',
+                    text: 'Microphone disconnected!',
+                }));
+                this.disableMic();
+            });
+        }
+        catch (error) {
+            logger.error('enableMic() | failed:%o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `Error enabling microphone: ${error}`,
+            }));
+            if (track)
+                track.stop();
+        }
+    }
+    disableMic() {
+        logger.debug('disableMic()');
+        if (!this._micProducer)
+            return;
+        this._micProducer.close();
+        this._dispatch(stateActions.removeProducer(this._micProducer.id));
+        this._protoo.notify('closeProducer', {
+            producerId: this._micProducer.id,
+        });
+        this._micProducer = null;
+    }
+    muteMic() {
+        logger.debug('muteMic()');
+        this._micProducer.pause();
+        this._protoo.notify('pauseProducer', {
+            producerId: this._micProducer.id,
+        });
+        this._dispatch(stateActions.setProducerPaused(this._micProducer.id));
+    }
+    unmuteMic() {
+        logger.debug('unmuteMic()');
+        this._micProducer.resume();
+        this._protoo.notify('resumeProducer', {
+            producerId: this._micProducer.id,
+        });
+        this._dispatch(stateActions.setProducerResumed(this._micProducer.id));
+    }
+    async enableWebcam() {
+        logger.debug('enableWebcam()');
+        if (this._webcamProducer) {
+            return;
+        }
+        else if (this._shareProducer) {
+            await this.disableShare();
+        }
+        if (!this._mediasoupDevice.canProduce('video')) {
+            logger.error('enableWebcam() | cannot produce video');
+            return;
+        }
+        let track;
+        let device;
+        this._dispatch(stateActions.setWebcamInProgress(true));
+        try {
+            if (!this._externalVideo) {
+                await this._updateWebcams();
+                device = this._webcam.device;
+                const { resolution } = this._webcam;
+                if (!device) {
+                    throw new Error('no webcam devices');
+                }
+                logger.debug('enableWebcam() | calling navigator.mediaDevices.getUserMedia()');
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    video: {
+                        deviceId: { ideal: device.deviceId },
+                        ...WEBCAM_VIDEO_CONSTRAINS[resolution],
+                    },
+                });
+                track = stream.getVideoTracks()[0];
+            }
+            else {
+                device = { label: 'external video' };
+                const stream = await this._getExternalVideoStream();
+                track = stream.getVideoTracks()[0].clone();
+            }
+            let encodings;
+            let codec;
+            const codecOptions = {
+                videoGoogleStartBitrate: 1000,
+            };
+            const headerExtensionOptions = {
+                absCaptureTime: true,
+            };
+            if (this._forceVP8) {
+                codec = this._mediasoupDevice.rtpCapabilities.codecs.find((c) => c.mimeType.toLowerCase() === 'video/vp8');
+                if (!codec) {
+                    throw new Error('desired VP8 codec+configuration is not supported');
+                }
+            }
+            else if (this._forceH264) {
+                codec = this._mediasoupDevice.rtpCapabilities.codecs.find((c) => c.mimeType.toLowerCase() === 'video/h264');
+                if (!codec) {
+                    throw new Error('desired H264 codec+configuration is not supported');
+                }
+            }
+            else if (this._forceVP9) {
+                codec = this._mediasoupDevice.rtpCapabilities.codecs.find((c) => c.mimeType.toLowerCase() === 'video/vp9');
+                if (!codec) {
+                    throw new Error('desired VP9 codec+configuration is not supported');
+                }
+            }
+            else if (this._forceAV1) {
+                codec = this._mediasoupDevice.rtpCapabilities.codecs.find((c) => c.mimeType.toLowerCase() === 'video/av1');
+                if (!codec) {
+                    throw new Error('desired AV1 codec+configuration is not supported');
+                }
+            }
+            if (this._enableWebcamLayers) {
+                const firstVideoCodec = this._mediasoupDevice.rtpCapabilities.codecs.find((c) => c.kind === 'video');
+                if (((this._forceVP9 || this._forceAV1) && codec) ||
+                    ['video/vp9', 'video/av1'].includes(firstVideoCodec.mimeType.toLowerCase())) {
+                    encodings = [
+                        {
+                            maxBitrate: 5000000,
+                            scalabilityMode: this._webcamScalabilityMode || 'L3T3_KEY',
+                        },
+                    ];
+                }
+                else {
+                    encodings = [
+                        {
+                            scaleResolutionDownBy: 1,
+                            maxBitrate: 5000000,
+                            scalabilityMode: this._webcamScalabilityMode || 'L1T3',
+                        },
+                    ];
+                    if (this._numWebcamSimulcastStreams > 1) {
+                        encodings.unshift({
+                            scaleResolutionDownBy: 2,
+                            maxBitrate: 1000000,
+                            scalabilityMode: this._webcamScalabilityMode || 'L1T3',
+                        });
+                    }
+                    if (this._numWebcamSimulcastStreams > 2) {
+                        encodings.unshift({
+                            scaleResolutionDownBy: 4,
+                            maxBitrate: 500000,
+                            scalabilityMode: this._webcamScalabilityMode || 'L1T3',
+                        });
+                    }
+                }
+            }
+            if (this._videoContentHint) {
+                logger.debug('enableWebcam() | applying track.contentHint = %o', this._videoContentHint);
+                track.contentHint = this._videoContentHint;
+            }
+            this._webcamProducer = await this._sendTransport.produce({
+                track,
+                encodings,
+                codecOptions,
+                headerExtensionOptions,
+                codec,
+                appData: {
+                    source: 'video',
+                },
+            });
+            if (this._e2eKey && e2e.isSupported() && this._webcamProducer.rtpSender) {
+                e2e.setupSenderTransform(this._webcamProducer.rtpSender);
+            }
+            this._dispatch(stateActions.addProducer({
+                id: this._webcamProducer.id,
+                deviceLabel: device.label,
+                type: this._getWebcamType(device),
+                paused: this._webcamProducer.paused,
+                track: this._webcamProducer.track,
+                rtpParameters: this._webcamProducer.rtpParameters,
+                codec: this._webcamProducer.rtpParameters.codecs[0].mimeType.split('/')[1],
+            }));
+            this._webcamProducer.on('transportclose', () => {
+                this._webcamProducer = null;
+            });
+            this._webcamProducer.on('trackended', () => {
+                this._dispatch(requestActions.notify({
+                    type: 'error',
+                    text: 'Webcam disconnected!',
+                }));
+                this.disableWebcam();
+            });
+        }
+        catch (error) {
+            logger.error('enableWebcam() | failed:%o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `Error enabling webcam: ${error}`,
+            }));
+            if (track)
+                track.stop();
+        }
+        this._dispatch(stateActions.setWebcamInProgress(false));
+    }
+    disableWebcam() {
+        logger.debug('disableWebcam()');
+        if (!this._webcamProducer)
+            return;
+        this._webcamProducer.close();
+        this._dispatch(stateActions.removeProducer(this._webcamProducer.id));
+        this._protoo.notify('closeProducer', {
+            producerId: this._webcamProducer.id,
+        });
+        this._webcamProducer = null;
+    }
+    async changeWebcam() {
+        logger.debug('changeWebcam()');
+        this._dispatch(stateActions.setWebcamInProgress(true));
+        try {
+            await this._updateWebcams();
+            const array = Array.from(this._webcams.keys());
+            const len = array.length;
+            const deviceId = this._webcam.device
+                ? this._webcam.device.deviceId
+                : undefined;
+            let idx = array.indexOf(deviceId);
+            if (idx < len - 1)
+                idx++;
+            else
+                idx = 0;
+            this._webcam.device = this._webcams.get(array[idx]) ?? null;
+            logger.debug('changeWebcam() | new selected webcam [device:%o]', this._webcam.device);
+            this._webcam.resolution = 'hd';
+            if (!this._webcam.device)
+                throw new Error('no webcam devices');
+            this._webcamProducer.track.stop();
+            logger.debug('changeWebcam() | calling navigator.mediaDevices.getUserMedia()');
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    deviceId: { exact: this._webcam.device.deviceId },
+                    ...WEBCAM_VIDEO_CONSTRAINS[this._webcam.resolution],
+                },
+            });
+            const track = stream.getVideoTracks()[0];
+            if (this._videoContentHint) {
+                logger.debug('changeWebcam() | applying track.contentHint = %o', this._videoContentHint);
+                track.contentHint = this._videoContentHint;
+            }
+            await this._webcamProducer.replaceTrack({ track });
+            this._dispatch(stateActions.setProducerTrack(this._webcamProducer.id, track));
+        }
+        catch (error) {
+            logger.error('changeWebcam() | failed: %o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `Could not change webcam: ${error}`,
+            }));
+        }
+        this._dispatch(stateActions.setWebcamInProgress(false));
+    }
+    async changeWebcamResolution() {
+        logger.debug('changeWebcamResolution()');
+        this._dispatch(stateActions.setWebcamInProgress(true));
+        try {
+            switch (this._webcam.resolution) {
+                case 'qvga':
+                    this._webcam.resolution = 'vga';
+                    break;
+                case 'vga':
+                    this._webcam.resolution = 'hd';
+                    break;
+                case 'hd':
+                    this._webcam.resolution = 'qvga';
+                    break;
+                default:
+                    this._webcam.resolution = 'hd';
+            }
+            logger.debug('changeWebcamResolution() | calling navigator.mediaDevices.getUserMedia()');
+            const stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    deviceId: { exact: this._webcam.device.deviceId },
+                    ...WEBCAM_VIDEO_CONSTRAINS[this._webcam.resolution],
+                },
+            });
+            const track = stream.getVideoTracks()[0];
+            if (this._videoContentHint) {
+                logger.debug('changeWebcamResolution() | applying track.contentHint = %o', this._videoContentHint);
+                track.contentHint = this._videoContentHint;
+            }
+            await this._webcamProducer.replaceTrack({ track });
+            this._dispatch(stateActions.setProducerTrack(this._webcamProducer.id, track));
+        }
+        catch (error) {
+            logger.error('changeWebcamResolution() | failed: %o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `Could not change webcam resolution: ${error}`,
+            }));
+        }
+        this._dispatch(stateActions.setWebcamInProgress(false));
+    }
+    async enableShare() {
+        logger.debug('enableShare()');
+        if (this._shareProducer)
+            return;
+        else if (this._webcamProducer)
+            await this.disableWebcam();
+        if (!this._mediasoupDevice.canProduce('video')) {
+            logger.error('enableShare() | cannot produce video');
+            return;
+        }
+        let track;
+        this._dispatch(stateActions.setShareInProgress(true));
+        try {
+            const resolution = this._screenSharing4K ? '4k' : 'hd';
+            logger.debug('enableShare() | calling navigator.mediaDevices.getDisplayMedia() with resolution %o', resolution);
+            const stream = await navigator.mediaDevices.getDisplayMedia({
+                audio: false,
+                video: {
+                    displaySurface: 'monitor',
+                    logicalSurface: true,
+                    cursor: true,
+                    ...SCREEN_SHARING_VIDEO_CONSTRAINS[resolution],
+                    frameRate: { ideal: 30 },
+                },
+            });
+            if (!stream) {
+                this._dispatch(stateActions.setShareInProgress(true));
+                return;
+            }
+            track = stream.getVideoTracks()[0];
+            let encodings;
+            let codec;
+            const codecOptions = {
+                videoGoogleStartBitrate: 1000,
+            };
+            if (this._forceVP8) {
+                codec = this._mediasoupDevice.rtpCapabilities.codecs.find((c) => c.mimeType.toLowerCase() === 'video/vp8');
+                if (!codec) {
+                    throw new Error('desired VP8 codec+configuration is not supported');
+                }
+            }
+            else if (this._forceH264) {
+                codec = this._mediasoupDevice.rtpCapabilities.codecs.find((c) => c.mimeType.toLowerCase() === 'video/h264');
+                if (!codec) {
+                    throw new Error('desired H264 codec+configuration is not supported');
+                }
+            }
+            else if (this._forceVP9) {
+                codec = this._mediasoupDevice.rtpCapabilities.codecs.find((c) => c.mimeType.toLowerCase() === 'video/vp9');
+                if (!codec) {
+                    throw new Error('desired VP9 codec+configuration is not supported');
+                }
+            }
+            else if (this._forceAV1) {
+                codec = this._mediasoupDevice.rtpCapabilities.codecs.find((c) => c.mimeType.toLowerCase() === 'video/av1');
+                if (!codec) {
+                    throw new Error('desired AV1 codec+configuration is not supported');
+                }
+            }
+            if (this._enableSharingLayers) {
+                const firstVideoCodec = this._mediasoupDevice.rtpCapabilities.codecs.find((c) => c.kind === 'video');
+                if (((this._forceVP9 || this._forceAV1) && codec) ||
+                    ['video/vp9', 'video/av1'].includes(firstVideoCodec.mimeType.toLowerCase())) {
+                    encodings = [
+                        {
+                            maxBitrate: 5000000,
+                            // @ts-ignore
+                            scalabilityMode: this._sharingScalabilityMode || 'L3T3',
+                            dtx: true,
+                        },
+                    ];
+                }
+                else {
+                    encodings = [
+                        {
+                            scaleResolutionDownBy: 1,
+                            maxBitrate: 5000000,
+                            // @ts-ignore
+                            scalabilityMode: this._sharingScalabilityMode || 'L1T3',
+                            dtx: true,
+                        },
+                    ];
+                    if (this._numSharingSimulcastStreams > 1) {
+                        encodings.unshift({
+                            scaleResolutionDownBy: 2,
+                            maxBitrate: 1000000,
+                            // @ts-ignore
+                            scalabilityMode: this._sharingScalabilityMode || 'L1T3',
+                            dtx: true,
+                        });
+                    }
+                    if (this._numSharingSimulcastStreams > 2) {
+                        encodings.unshift({
+                            scaleResolutionDownBy: 4,
+                            maxBitrate: 500000,
+                            // @ts-ignore
+                            scalabilityMode: this._sharingScalabilityMode || 'L1T3',
+                            dtx: true,
+                        });
+                    }
+                }
+            }
+            else {
+                encodings = [
+                    {
+                        scaleResolutionDownBy: 1,
+                        maxBitrate: 5000000,
+                        // @ts-ignore
+                        dtx: true,
+                    },
+                ];
+            }
+            if (this._videoContentHint) {
+                logger.debug('enableShare() | applying track.contentHint = %o', this._videoContentHint);
+                track.contentHint = this._videoContentHint;
+            }
+            this._shareProducer = await this._sendTransport.produce({
+                track,
+                encodings,
+                codecOptions,
+                codec,
+                appData: {
+                    source: 'screensharing',
+                },
+            });
+            if (this._e2eKey && e2e.isSupported() && this._shareProducer.rtpSender) {
+                e2e.setupSenderTransform(this._shareProducer.rtpSender);
+            }
+            this._dispatch(stateActions.addProducer({
+                id: this._shareProducer.id,
+                type: 'share',
+                paused: this._shareProducer.paused,
+                track: this._shareProducer.track,
+                rtpParameters: this._shareProducer.rtpParameters,
+                codec: this._shareProducer.rtpParameters.codecs[0].mimeType.split('/')[1],
+            }));
+            this._shareProducer.on('transportclose', () => {
+                this._shareProducer = null;
+            });
+            this._shareProducer.on('trackended', () => {
+                this._dispatch(requestActions.notify({
+                    type: 'error',
+                    text: 'Share disconnected!',
+                }));
+                this.disableShare();
+            });
+        }
+        catch (error) {
+            logger.error('enableShare() | failed:%o', error);
+            if (error.name !== 'NotAllowedError') {
+                this._dispatch(requestActions.notify({
+                    type: 'error',
+                    text: `Error sharing: ${error}`,
+                }));
+            }
+            if (track)
+                track.stop();
+        }
+        this._dispatch(stateActions.setShareInProgress(false));
+    }
+    disableShare() {
+        logger.debug('disableShare()');
+        if (!this._shareProducer)
+            return;
+        this._shareProducer.close();
+        this._dispatch(stateActions.removeProducer(this._shareProducer.id));
+        this._protoo.notify('closeProducer', {
+            producerId: this._shareProducer.id,
+        });
+        this._shareProducer = null;
+    }
+    enableAudioOnly() {
+        logger.debug('enableAudioOnly()');
+        this._dispatch(stateActions.setAudioOnlyInProgress(true));
+        this.disableWebcam();
+        for (const consumer of this._consumers.values()) {
+            if (consumer.kind !== 'video')
+                continue;
+            this._pauseConsumer(consumer);
+        }
+        this._dispatch(stateActions.setAudioOnlyState(true));
+        this._dispatch(stateActions.setAudioOnlyInProgress(false));
+    }
+    disableAudioOnly() {
+        logger.debug('disableAudioOnly()');
+        this._dispatch(stateActions.setAudioOnlyInProgress(true));
+        if (!this._webcamProducer &&
+            this._produce &&
+            (cookiesManager.getDevices() || {}).webcamEnabled) {
+            this.enableWebcam();
+        }
+        for (const consumer of this._consumers.values()) {
+            if (consumer.kind !== 'video')
+                continue;
+            this._resumeConsumer(consumer);
+        }
+        this._dispatch(stateActions.setAudioOnlyState(false));
+        this._dispatch(stateActions.setAudioOnlyInProgress(false));
+    }
+    muteAudio() {
+        logger.debug('muteAudio()');
+        this._dispatch(stateActions.setAudioMutedState(true));
+    }
+    unmuteAudio() {
+        logger.debug('unmuteAudio()');
+        this._dispatch(stateActions.setAudioMutedState(false));
+    }
+    async restartIce() {
+        logger.debug('restartIce()');
+        this._dispatch(stateActions.setRestartIceInProgress(true));
+        try {
+            if (this._sendTransport) {
+                const { iceParameters } = await this._protoo.request('restartIce', {
+                    transportId: this._sendTransport.id,
+                });
+                await this._sendTransport.restartIce({ iceParameters });
+            }
+            if (this._recvTransport) {
+                const { iceParameters } = await this._protoo.request('restartIce', {
+                    transportId: this._recvTransport.id,
+                });
+                await this._recvTransport.restartIce({ iceParameters });
+            }
+            this._dispatch(requestActions.notify({
+                text: 'ICE restarted',
+            }));
+        }
+        catch (error) {
+            logger.error('restartIce() | failed:%o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `ICE restart failed: ${error}`,
+            }));
+        }
+        this._dispatch(stateActions.setRestartIceInProgress(false));
+    }
+    async setMaxSendingSpatialLayer(spatialLayer) {
+        logger.debug('setMaxSendingSpatialLayer() [spatialLayer:%s]', spatialLayer);
+        try {
+            if (this._webcamProducer)
+                await this._webcamProducer.setMaxSpatialLayer(spatialLayer);
+            else if (this._shareProducer)
+                await this._shareProducer.setMaxSpatialLayer(spatialLayer);
+        }
+        catch (error) {
+            logger.error('setMaxSendingSpatialLayer() | failed:%o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `Error setting max sending video spatial layer: ${error}`,
+            }));
+        }
+    }
+    setConsumerPreferredLayers(consumerId, spatialLayer, temporalLayer) {
+        logger.debug('setConsumerPreferredLayers() [consumerId:%s, spatialLayer:%s, temporalLayer:%s]', consumerId, spatialLayer, temporalLayer);
+        this._protoo.notify('setConsumerPreferredLayers', {
+            consumerId,
+            spatialLayer,
+            temporalLayer,
+        });
+        this._dispatch(stateActions.setConsumerPreferredLayers(consumerId, spatialLayer, temporalLayer));
+    }
+    setConsumerPriority(consumerId, priority) {
+        logger.debug('setConsumerPriority() [consumerId:%s, priority:%d]', consumerId, priority);
+        this._protoo.notify('setConsumerPriority', {
+            consumerId,
+            priority,
+        });
+        this._dispatch(stateActions.setConsumerPriority(consumerId, priority));
+    }
+    requestConsumerKeyFrame(consumerId) {
+        logger.debug('requestConsumerKeyFrame() [consumerId:%s]', consumerId);
+        this._protoo.notify('requestConsumerKeyFrame', { consumerId });
+        this._dispatch(requestActions.notify({
+            text: 'Keyframe requested for video consumer',
+        }));
+    }
+    async enableChatDataProducer() {
+        logger.debug('enableChatDataProducer()');
+        try {
+            this._chatDataProducer = await this._sendTransport.produceData({
+                ordered: true,
+                label: 'chat',
+                // @ts-ignore
+                priority: 'medium',
+                appData: { channel: 'chat' },
+            });
+            this._dispatch(stateActions.addDataProducer({
+                id: this._chatDataProducer.id,
+                sctpStreamParameters: this._chatDataProducer.sctpStreamParameters,
+                label: this._chatDataProducer.label,
+                protocol: this._chatDataProducer.protocol,
+            }));
+            this._chatDataProducer.on('transportclose', () => {
+                this._chatDataProducer = null;
+            });
+            this._chatDataProducer.on('open', () => {
+                logger.debug('chat DataProducer "open" event');
+            });
+            this._chatDataProducer.on('close', () => {
+                logger.error('chat DataProducer "close" event');
+                this._chatDataProducer = null;
+                this._dispatch(requestActions.notify({
+                    type: 'error',
+                    text: 'Chat DataProducer closed',
+                }));
+            });
+            this._chatDataProducer.on('error', (error) => {
+                logger.error('chat DataProducer "error" event:%o', error);
+                this._dispatch(requestActions.notify({
+                    type: 'error',
+                    text: `Chat DataProducer error: ${error}`,
+                }));
+            });
+            this._chatDataProducer.on('bufferedamountlow', () => {
+                logger.debug('chat DataProducer "bufferedamountlow" event');
+            });
+        }
+        catch (error) {
+            logger.error('enableChatDataProducer() | failed:%o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `Error enabling chat DataProducer: ${error}`,
+            }));
+            throw error;
+        }
+    }
+    async enableBotDataProducer() {
+        logger.debug('enableBotDataProducer()');
+        try {
+            this._botDataProducer = await this._sendTransport.produceData({
+                ordered: true,
+                label: 'bot',
+                // @ts-ignore
+                priority: 'medium',
+                appData: { channel: 'bot' },
+            });
+            this._dispatch(stateActions.addDataProducer({
+                id: this._botDataProducer.id,
+                sctpStreamParameters: this._botDataProducer.sctpStreamParameters,
+                label: this._botDataProducer.label,
+                protocol: this._botDataProducer.protocol,
+            }));
+            this._botDataProducer.on('transportclose', () => {
+                this._botDataProducer = null;
+            });
+            this._botDataProducer.on('open', () => {
+                logger.debug('bot DataProducer "open" event');
+            });
+            this._botDataProducer.on('close', () => {
+                logger.error('bot DataProducer "close" event');
+                this._botDataProducer = null;
+                this._dispatch(requestActions.notify({
+                    type: 'error',
+                    text: 'Bot DataProducer closed',
+                }));
+            });
+            this._botDataProducer.on('error', (error) => {
+                logger.error('bot DataProducer "error" event:%o', error);
+                this._dispatch(requestActions.notify({
+                    type: 'error',
+                    text: `Bot DataProducer error: ${error}`,
+                }));
+            });
+            this._botDataProducer.on('bufferedamountlow', () => {
+                logger.debug('bot DataProducer "bufferedamountlow" event');
+            });
+        }
+        catch (error) {
+            logger.error('enableBotDataProducer() | failed:%o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `Error enabling bot DataProducer: ${error}`,
+            }));
+            throw error;
+        }
+    }
+    async sendChatMessage(text) {
+        logger.debug('sendChatMessage() [text:"%s]', text);
+        if (!this._chatDataProducer) {
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: 'No chat DataProducer',
+            }));
+            return;
+        }
+        try {
+            this._chatDataProducer.send(text);
+        }
+        catch (error) {
+            logger.error('chat DataProducer.send() failed:%o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `chat DataProducer.send() failed: ${error}`,
+            }));
+        }
+    }
+    async sendBotMessage(text) {
+        logger.debug('sendBotMessage() [text:"%s]', text);
+        if (!this._botDataProducer) {
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: 'No bot DataProducer',
+            }));
+            return;
+        }
+        try {
+            this._botDataProducer.send(text);
+        }
+        catch (error) {
+            logger.error('bot DataProducer.send() failed:%o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `bot DataProducer.send() failed: ${error}`,
+            }));
+        }
+    }
+    changeDisplayName(displayName) {
+        logger.debug('changeDisplayName() [displayName:"%s"]', displayName);
+        cookiesManager.setUser({ displayName });
+        this._protoo.notify('changeDisplayName', { displayName });
+        this._displayName = displayName;
+        this._dispatch(stateActions.setDisplayName(displayName));
+        this._dispatch(requestActions.notify({
+            text: 'Display name changed',
+        }));
+    }
+    async getSendTransportRemoteStats() {
+        logger.debug('getSendTransportRemoteStats()');
+        if (!this._sendTransport)
+            return;
+        const { stats } = await this._protoo.request('getTransportStats', {
+            transportId: this._sendTransport.id,
+        });
+        return stats;
+    }
+    async getRecvTransportRemoteStats() {
+        logger.debug('getRecvTransportRemoteStats()');
+        if (!this._recvTransport)
+            return;
+        const { stats } = await this._protoo.request('getTransportStats', {
+            transportId: this._recvTransport.id,
+        });
+        return stats;
+    }
+    async getAudioRemoteStats() {
+        logger.debug('getAudioRemoteStats()');
+        if (!this._micProducer)
+            return;
+        const { stats } = await this._protoo.request('getProducerStats', {
+            producerId: this._micProducer.id,
+        });
+        return stats;
+    }
+    async getVideoRemoteStats() {
+        logger.debug('getVideoRemoteStats()');
+        const producer = this._webcamProducer || this._shareProducer;
+        if (!producer)
+            return;
+        const { stats } = await this._protoo.request('getProducerStats', {
+            producerId: producer.id,
+        });
+        return stats;
+    }
+    async getConsumerRemoteStats(consumerId) {
+        logger.debug('getConsumerRemoteStats()');
+        const consumer = this._consumers.get(consumerId);
+        if (!consumer)
+            return;
+        const { stats } = await this._protoo.request('getConsumerStats', {
+            consumerId,
+        });
+        return stats;
+    }
+    async getChatDataProducerRemoteStats() {
+        logger.debug('getChatDataProducerRemoteStats()');
+        const dataProducer = this._chatDataProducer;
+        if (!dataProducer)
+            return;
+        const { stats } = await this._protoo.request('getDataProducerStats', {
+            dataProducerId: dataProducer.id,
+        });
+        return stats;
+    }
+    async getBotDataProducerRemoteStats() {
+        logger.debug('getBotDataProducerRemoteStats()');
+        const dataProducer = this._botDataProducer;
+        if (!dataProducer)
+            return;
+        const { stats } = await this._protoo.request('getDataProducerStats', {
+            dataProducerId: dataProducer.id,
+        });
+        return stats;
+    }
+    async getDataConsumerRemoteStats(dataConsumerId) {
+        logger.debug('getDataConsumerRemoteStats()');
+        const dataConsumer = this._dataConsumers.get(dataConsumerId);
+        if (!dataConsumer)
+            return;
+        const { stats } = await this._protoo.request('getDataConsumerStats', {
+            dataConsumerId,
+        });
+        return stats;
+    }
+    async getSendTransportLocalStats() {
+        logger.debug('getSendTransportLocalStats()');
+        if (!this._sendTransport)
+            return;
+        return this._sendTransport.getStats();
+    }
+    async getRecvTransportLocalStats() {
+        logger.debug('getRecvTransportLocalStats()');
+        if (!this._recvTransport)
+            return;
+        return this._recvTransport.getStats();
+    }
+    async getAudioLocalStats() {
+        logger.debug('getAudioLocalStats()');
+        if (!this._micProducer)
+            return;
+        return this._micProducer.getStats();
+    }
+    async getVideoLocalStats() {
+        logger.debug('getVideoLocalStats()');
+        const producer = this._webcamProducer || this._shareProducer;
+        if (!producer)
+            return;
+        return producer.getStats();
+    }
+    async getConsumerLocalStats(consumerId) {
+        const consumer = this._consumers.get(consumerId);
+        if (!consumer)
+            return;
+        return consumer.getStats();
+    }
+    async applyNetworkThrottle({ secret, up, down, rtt, packetLoss, localhost }) {
+        logger.debug('applyNetworkThrottle() [up:%s, down:%s, rtt:%s, packetLoss:%s, localhost:%s]', up, down, rtt, packetLoss, localhost);
+        try {
+            await this._protoo.request('applyNetworkThrottle', {
+                secret,
+                options: {
+                    up,
+                    down,
+                    rtt,
+                    packetLoss,
+                    localhost,
+                },
+            });
+        }
+        catch (error) {
+            logger.error('applyNetworkThrottle() | failed:%o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `Error applying network throttle: ${error}`,
+            }));
+        }
+    }
+    async stopNetworkThrottle({ silent = false, secret }) {
+        logger.debug('stopNetworkThrottle()');
+        try {
+            await this._protoo.request('stopNetworkThrottle', { secret });
+        }
+        catch (error) {
+            if (!silent) {
+                logger.error('stopNetworkThrottle() | failed:%o', error);
+                this._dispatch(requestActions.notify({
+                    type: 'error',
+                    text: `Error resetting network throttle: ${error}`,
+                }));
+            }
+        }
+    }
+    async _joinRoom() {
+        logger.debug('_joinRoom()');
+        try {
+            logger.debug('_joinRoom() | using mediasoupClient.Device.factory()');
+            this._mediasoupDevice = await mediasoupClient.Device.factory({
+                // @ts-ignore
+                handlerName: this._handlerName,
+            });
+            this._dispatch(stateActions.setRoomMediasoupClientHandler(this._mediasoupDevice.handlerName));
+            const { routerRtpCapabilities } = await this._protoo.request('getRouterRtpCapabilities');
+            await this._mediasoupDevice.load({
+                routerRtpCapabilities,
+                preferLocalCodecsOrder: this._preferLocalCodecsOrder,
+            });
+            //
+            {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    audio: true,
+                });
+                const audioTrack = stream.getAudioTracks()[0];
+                audioTrack.enabled = false;
+                setTimeout(() => audioTrack.stop(), 120000);
+            }
+            if (this._produce) {
+                const transportInfo = await this._protoo.request('createWebRtcTransport', {
+                    sctpCapabilities: this._useDataChannel
+                        ? this._mediasoupDevice.sctpCapabilities
+                        : undefined,
+                    forceTcp: this._forceTcp,
+                    appData: {
+                        direction: 'producer',
+                    },
+                });
+                const { transportId, iceParameters, iceCandidates, dtlsParameters, sctpParameters, } = transportInfo;
+                this._sendTransport = this._mediasoupDevice.createSendTransport({
+                    id: transportId,
+                    iceParameters,
+                    iceCandidates,
+                    dtlsParameters: {
+                        ...dtlsParameters,
+                        role: 'auto',
+                    },
+                    sctpParameters,
+                    iceServers: [],
+                    proprietaryConstraints: PC_PROPRIETARY_CONSTRAINTS,
+                    additionalSettings: {
+                        // @ts-ignore
+                        encodedInsertableStreams: this._e2eKey && e2e.isSupported(),
+                    },
+                });
+                this._sendTransport.on('connect', ({ dtlsParameters: dtlsParameters2 }, callback, errback) => {
+                    this._protoo
+                        .request('connectWebRtcTransport', {
+                        transportId: this._sendTransport.id,
+                        dtlsParameters: dtlsParameters2,
+                    })
+                        .then(callback)
+                        .catch(errback);
+                });
+                this._sendTransport.on('produce', async ({ kind, rtpParameters, appData }, callback, errback) => {
+                    try {
+                        const { producerId } = await this._protoo.request('produce', {
+                            transportId: this._sendTransport.id,
+                            kind,
+                            rtpParameters,
+                            appData,
+                        });
+                        callback({ id: producerId });
+                    }
+                    catch (error) {
+                        errback(error);
+                    }
+                });
+                this._sendTransport.on('producedata', async ({ sctpStreamParameters, label, protocol, appData }, callback, errback) => {
+                    logger.debug('"producedata" event: [sctpStreamParameters:%o, appData:%o]', sctpStreamParameters, appData);
+                    try {
+                        const { dataProducerId } = await this._protoo.request('produceData', {
+                            transportId: this._sendTransport.id,
+                            sctpStreamParameters,
+                            label,
+                            protocol,
+                            appData,
+                        });
+                        callback({ id: dataProducerId });
+                    }
+                    catch (error) {
+                        errback(error);
+                    }
+                });
+            }
+            if (this._consume) {
+                const transportInfo = await this._protoo.request('createWebRtcTransport', {
+                    sctpCapabilities: this._useDataChannel
+                        ? this._mediasoupDevice.sctpCapabilities
+                        : undefined,
+                    forceTcp: this._forceTcp,
+                    appData: {
+                        direction: 'consumer',
+                    },
+                });
+                const { transportId, iceParameters, iceCandidates, dtlsParameters, sctpParameters, } = transportInfo;
+                this._recvTransport = this._mediasoupDevice.createRecvTransport({
+                    id: transportId,
+                    iceParameters,
+                    iceCandidates,
+                    dtlsParameters: {
+                        ...dtlsParameters,
+                        role: 'auto',
+                    },
+                    sctpParameters,
+                    iceServers: [],
+                    additionalSettings: {
+                        // @ts-ignore
+                        encodedInsertableStreams: this._e2eKey && e2e.isSupported(),
+                    },
+                });
+                this._recvTransport.on('connect', ({ dtlsParameters: dtlsParameters2 }, callback, errback) => {
+                    this._protoo
+                        .request('connectWebRtcTransport', {
+                        transportId: this._recvTransport.id,
+                        dtlsParameters: dtlsParameters2,
+                    })
+                        .then(callback)
+                        .catch(errback);
+                });
+            }
+            const { peers } = await this._protoo.request('join', {
+                displayName: this._displayName,
+                device: this._device,
+                rtpCapabilities: this._consume
+                    ? this._mediasoupDevice.rtpCapabilities
+                    : undefined,
+                sctpCapabilities: this._useDataChannel && this._consume
+                    ? this._mediasoupDevice.sctpCapabilities
+                    : undefined,
+            });
+            this._dispatch(stateActions.setRoomState('connected'));
+            this._dispatch(stateActions.removeAllNotifications());
+            this._dispatch(requestActions.notify({
+                text: 'You are in the room!',
+                timeout: 3000,
+            }));
+            for (const serializedPeer of peers) {
+                const { peerId, displayName, device } = serializedPeer;
+                const peer = {
+                    id: peerId,
+                    displayName,
+                    device,
+                };
+                this._dispatch(stateActions.addPeer({ ...peer, consumers: [], dataConsumers: [] }));
+            }
+            if (this._produce) {
+                this._dispatch(stateActions.setMediaCapabilities({
+                    canSendMic: this._mediasoupDevice.canProduce('audio'),
+                    canSendWebcam: this._mediasoupDevice.canProduce('video'),
+                }));
+                if (this._useMic) {
+                    this.enableMic();
+                }
+                const devicesCookie = cookiesManager.getDevices();
+                if (this._useWebcam ||
+                    (this._useWebcam === undefined &&
+                        (!devicesCookie || devicesCookie.webcamEnabled)) ||
+                    this._externalVideo) {
+                    this.enableWebcam();
+                }
+                if (this._useDataChannel) {
+                    this.enableChatDataProducer();
+                    this.enableBotDataProducer();
+                }
+            }
+            if (this._stats) {
+                const { me } = store.getState();
+                this._dispatch(stateActions.setRoomStatsPeerId(me.id));
+            }
+        }
+        catch (error) {
+            logger.error('_joinRoom() failed:%o', error);
+            this._dispatch(requestActions.notify({
+                type: 'error',
+                text: `Could not join the room: ${error}`,
+            }));
+            this.close();
+        }
+    }
+    async _updateWebcams() {
+        logger.debug('_updateWebcams()');
+        this._webcams = new Map();
+        logger.debug('_updateWebcams() | calling navigator.mediaDevices.enumerateDevices()');
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        for (const device of devices) {
+            if (device.kind !== 'videoinput')
+                continue;
+            this._webcams.set(device.deviceId, device);
+        }
+        const array = Array.from(this._webcams.values());
+        const len = array.length;
+        const currentWebcamId = this._webcam.device
+            ? this._webcam.device.deviceId
+            : undefined;
+        logger.debug('_updateWebcams() [webcams:%o]', array);
+        if (len === 0)
+            this._webcam.device = null;
+        else if (!this._webcams.has(currentWebcamId))
+            this._webcam.device = array[0];
+        this._dispatch(stateActions.setCanChangeWebcam(this._webcams.size > 1));
+    }
+    _getWebcamType(device) {
+        if (/(back|rear)/i.test(device.label)) {
+            logger.debug('_getWebcamType() | it seems to be a back camera');
+            return 'back';
+        }
+        else {
+            logger.debug('_getWebcamType() | it seems to be a front camera');
+            return 'front';
+        }
+    }
+    _pauseConsumer(consumer) {
+        if (consumer.paused)
+            return;
+        this._protoo.notify('pauseConsumer', { consumerId: consumer.id });
+        consumer.pause();
+        this._dispatch(stateActions.setConsumerPaused(consumer.id, 'local'));
+    }
+    async _resumeConsumer(consumer) {
+        if (!consumer.paused)
+            return;
+        this._protoo.notify('resumeConsumer', { consumerId: consumer.id });
+        consumer.resume();
+        this._dispatch(stateActions.setConsumerResumed(consumer.id, 'local'));
+    }
+    async _getExternalVideoStream() {
+        if (this._externalVideoStream)
+            return this._externalVideoStream;
+        if (this._externalVideo.readyState < 3) {
+            await new Promise(resolve => 
+            // @ts-ignore
+            this._externalVideo.addEventListener('canplay', resolve));
+        }
+        if (this._externalVideo.captureStream)
+            this._externalVideoStream = this._externalVideo.captureStream();
+        else if (this._externalVideo.mozCaptureStream)
+            this._externalVideoStream = this._externalVideo.mozCaptureStream();
+        else
+            throw new Error('video.captureStream() not supported');
+        return this._externalVideoStream;
+    }
+}
+//# sourceMappingURL=RoomClient.js.map