@whereby.com/browser-sdk 2.0.0-alpha2 → 2.0.0-alpha21

package/dist/lib.esm.js

@@ -1,10 +1,10 @@
 import { define, ref } from 'heresy';
-import React, { useCallback, useState, useReducer, useEffect } from 'react';
-import { __awaiter } from 'tslib';
+import { __rest, __awaiter } from 'tslib';
+import React, { useRef, useEffect, useState, useReducer } from 'react';
+import assert from 'assert';
 import adapter from 'webrtc-adapter';
 import io from 'socket.io-client';
 import SDPUtils from 'sdp';
-import assert from 'assert';
 import { detectDevice, Device } from 'mediasoup-client';
 import EventEmitter$1, { EventEmitter } from 'events';
 import { v4 } from 'uuid';
@@ -79,8 +79,7 @@ define("WherebyEmbed", {
     // Commands
     _postCommand(command, args = []) {
         if (this.iframe.current) {
-            const url = new URL(this.room, `https://${this.subdomain}.whereby.com`);
-            this.iframe.current.contentWindow.postMessage({ command, args }, url.origin);
+            this.iframe.current.contentWindow.postMessage({ command, args }, this.url.origin);
         }
     },
     startRecording() {
@@ -99,8 +98,7 @@ define("WherebyEmbed", {
         this._postCommand("toggle_screenshare", [enabled]);
     },
     onmessage({ origin, data }) {
-        const url = new URL(this.room, `https://${this.subdomain}.whereby.com`);
-        if (origin !== url.origin)
+        if (origin !== this.url.origin)
             return;
         const { type, payload: detail } = data;
         this.dispatchEvent(new CustomEvent(type, { detail }));
@@ -110,36 +108,354 @@ define("WherebyEmbed", {
         if (!room)
             return this.html `Whereby: Missing room attribute.`;
         // Get subdomain from room URL, or use it specified
-        const m = /https:\/\/([^.]+)\.whereby.com\/.+/.exec(room);
+        const m = /https:\/\/([^.]+)(\.whereby.com|-ip-\d+-\d+-\d+-\d+.hereby.dev:4443)\/.+/.exec(room);
         const subdomain = (m && m[1]) || this.subdomain;
         if (!subdomain)
             return this.html `Whereby: Missing subdomain attr.`;
-        const url = new URL(room, `https://${subdomain}.whereby.com`);
-        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha2", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
+        if (!m) {
+            return this.html `could not parse URL.`;
+        }
+        const baseURL = m[2] || `.whereby.com`;
+        this.url = new URL(room, `https://${subdomain}${baseURL}`);
+        const roomUrl = new URL(room);
+        if (roomUrl.searchParams.get("roomKey")) {
+            this.url.searchParams.append("roomKey", roomUrl.searchParams.get("roomKey"));
+        }
+        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha21", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
         // add to URL if set in any way
         (o, v) => (this[v.toLowerCase()] != null ? Object.assign(Object.assign({}, o), { [v]: this[v.toLowerCase()] }) : o), {}))).forEach(([k, v]) => {
-            if (!url.searchParams.has(k) && typeof v === "string") {
-                url.searchParams.set(k, v);
+            if (!this.url.searchParams.has(k) && typeof v === "string") {
+                this.url.searchParams.set(k, v);
             }
         });
         return this.html `
         <iframe
             ref=${this.iframe}
-            src=${url}
+            src=${this.url}
             allow="autoplay; camera; microphone; fullscreen; speaker; display-capture" />
         `;
     },
 });
 
-var VideoElement = ({ stream, style }) => {
-    const videoEl = useCallback((node) => {
-        if (node !== null && node.srcObject !== stream) {
-            node.srcObject = stream;
+/**
+ * Debounce function.
+ *
+ * @param {Function} fn - Function to debounce.
+ * @param {Object} [options] - Options.
+ * @param {number} [options.delay=500] - Delay in milliseconds.
+ * @param {boolean} [options.edges=false] - Whether to call the function on the
+ * leading and trailing edges of the wait timeout.
+ * @returns {Function} Debounced function.
+ */
+function debounce(fn, { delay = 500, edges } = {}) {
+    assert.ok(typeof fn === "function", "fn<function> is required");
+    let timeout;
+    let nCalls = 0;
+    return (...args) => {
+        nCalls += 1;
+        if (edges && nCalls === 1) {
+            fn(...args);
         }
-    }, []);
-    return React.createElement("video", { ref: videoEl, autoPlay: true, playsInline: true, style: style });
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            if (!edges || nCalls > 1) {
+                fn(...args);
+            }
+            timeout = undefined;
+            nCalls = 0;
+        }, delay);
+    };
+}
+
+var VideoView = (_a) => {
+    var { muted, stream, onResize } = _a, rest = __rest(_a, ["muted", "stream", "onResize"]);
+    const videoEl = useRef(null);
+    useEffect(() => {
+        if (!videoEl.current || !onResize) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(debounce(() => {
+            if (videoEl.current && (stream === null || stream === void 0 ? void 0 : stream.id)) {
+                onResize({
+                    width: videoEl.current.clientWidth,
+                    height: videoEl.current.clientHeight,
+                    stream,
+                });
+            }
+        }, { delay: 1000, edges: true }));
+        resizeObserver.observe(videoEl.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [stream]);
+    useEffect(() => {
+        if (!videoEl.current) {
+            return;
+        }
+        if (videoEl.current.srcObject !== stream) {
+            videoEl.current.srcObject = stream;
+        }
+        // Handle muting programatically, not as video attribute
+        // https://stackoverflow.com/questions/14111917/html5-video-muted-but-still-playing
+        if (videoEl.current.muted !== muted) {
+            videoEl.current.muted = Boolean(muted);
+        }
+    }, [muted, stream, videoEl]);
+    return React.createElement("video", Object.assign({ ref: videoEl, autoPlay: true, playsInline: true }, rest));
 };
 
+const TypedLocalMediaEventTarget = EventTarget;
+class LocalMedia extends TypedLocalMediaEventTarget {
+    constructor(constraints) {
+        super();
+        this._constraints = constraints;
+        this.stream = new MediaStream();
+        this._rtcManagers = [];
+        this.screenshareStream = undefined;
+        navigator.mediaDevices.addEventListener("devicechange", this._updateDeviceList.bind(this));
+    }
+    addRtcManager(rtcManager) {
+        this._rtcManagers.push(rtcManager);
+    }
+    removeRtcManager(rtcManager) {
+        this._rtcManagers = this._rtcManagers.filter((r) => r !== rtcManager);
+    }
+    getCameraDeviceId() {
+        var _a;
+        return (_a = this.stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().deviceId;
+    }
+    getMicrophoneDeviceId() {
+        var _a;
+        return (_a = this.stream.getAudioTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().deviceId;
+    }
+    isCameraEnabled() {
+        var _a;
+        return !!((_a = this.stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.enabled);
+    }
+    isMicrophoneEnabled() {
+        var _a;
+        return !!((_a = this.stream.getAudioTracks()[0]) === null || _a === void 0 ? void 0 : _a.enabled);
+    }
+    toggleCameraEnabled(enabled) {
+        const videoTrack = this.stream.getVideoTracks()[0];
+        if (!videoTrack) {
+            return;
+        }
+        const newValue = enabled !== null && enabled !== void 0 ? enabled : !videoTrack.enabled;
+        videoTrack.enabled = newValue;
+        this.dispatchEvent(new CustomEvent("camera_enabled", { detail: { enabled: newValue } }));
+    }
+    toggleMichrophoneEnabled(enabled) {
+        const audioTrack = this.stream.getAudioTracks()[0];
+        if (!audioTrack) {
+            return;
+        }
+        const newValue = enabled !== null && enabled !== void 0 ? enabled : !audioTrack.enabled;
+        audioTrack.enabled = newValue;
+        this.dispatchEvent(new CustomEvent("microphone_enabled", { detail: { enabled: newValue } }));
+    }
+    startScreenshare() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.screenshareStream) {
+                return this.screenshareStream;
+            }
+            const screenshareStream = yield navigator.mediaDevices.getDisplayMedia();
+            this.screenshareStream = screenshareStream;
+            return this.screenshareStream;
+        });
+    }
+    stopScreenshare() {
+        var _a;
+        (_a = this.screenshareStream) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((track) => track.stop());
+        this.screenshareStream = undefined;
+    }
+    setCameraDevice(deviceId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const newStream = yield navigator.mediaDevices.getUserMedia({ video: { deviceId } });
+            const newVideoTrack = newStream.getVideoTracks()[0];
+            if (newVideoTrack) {
+                const oldVideoTrack = this.stream.getVideoTracks()[0];
+                newVideoTrack.enabled = oldVideoTrack.enabled;
+                oldVideoTrack === null || oldVideoTrack === void 0 ? void 0 : oldVideoTrack.stop();
+                this._rtcManagers.forEach((rtcManager) => {
+                    rtcManager.replaceTrack(oldVideoTrack, newVideoTrack);
+                });
+                this.stream.removeTrack(oldVideoTrack);
+                this.stream.addTrack(newVideoTrack);
+            }
+            this.dispatchEvent(new CustomEvent("stream_updated", {
+                detail: { stream: this.stream },
+            }));
+        });
+    }
+    setMicrophoneDevice(deviceId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const newStream = yield navigator.mediaDevices.getUserMedia({ audio: { deviceId } });
+            const newAudioTrack = newStream.getAudioTracks()[0];
+            const oldAudioTrack = this.stream.getAudioTracks()[0];
+            if (oldAudioTrack) {
+                newAudioTrack.enabled = oldAudioTrack.enabled;
+                oldAudioTrack.stop();
+                this.stream.removeTrack(oldAudioTrack);
+            }
+            this._rtcManagers.forEach((rtcManager) => {
+                rtcManager.replaceTrack(oldAudioTrack, newAudioTrack);
+            });
+            this.stream.addTrack(newAudioTrack);
+            this.dispatchEvent(new CustomEvent("stream_updated", {
+                detail: { stream: this.stream },
+            }));
+        });
+    }
+    _updateDeviceList() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const devices = yield navigator.mediaDevices.enumerateDevices();
+                this.dispatchEvent(new CustomEvent("device_list_updated", {
+                    detail: {
+                        cameraDevices: devices.filter((d) => d.kind === "videoinput"),
+                        microphoneDevices: devices.filter((d) => d.kind === "audioinput"),
+                        speakerDevices: devices.filter((d) => d.kind === "audiooutput"),
+                    },
+                }));
+            }
+            catch (error) {
+                this.dispatchEvent(new CustomEvent("device_list_update_error", {
+                    detail: {
+                        error,
+                    },
+                }));
+                throw error;
+            }
+        });
+    }
+    start() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const newStream = yield navigator.mediaDevices.getUserMedia(this._constraints);
+            newStream.getTracks().forEach((t) => this.stream.addTrack(t));
+            this._updateDeviceList();
+            this.dispatchEvent(new CustomEvent("stream_updated", {
+                detail: { stream: this.stream },
+            }));
+            return this.stream;
+        });
+    }
+    stop() {
+        var _a;
+        (_a = this.stream) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((t) => {
+            t.stop();
+        });
+    }
+}
+
+const initialState$1 = {
+    cameraDeviceError: null,
+    cameraDevices: [],
+    isSettingCameraDevice: false,
+    isSettingMicrophoneDevice: false,
+    isStarting: false,
+    microphoneDeviceError: null,
+    microphoneDevices: [],
+    speakerDevices: [],
+    startError: null,
+};
+function reducer$1(state, action) {
+    switch (action.type) {
+        case "DEVICE_LIST_UPDATED":
+            return Object.assign(Object.assign({}, state), action.payload);
+        case "LOCAL_STREAM_UPDATED":
+            return Object.assign(Object.assign({}, state), { currentCameraDeviceId: action.payload.currentCameraDeviceId, currentMicrophoneDeviceId: action.payload.currentMicrophoneDeviceId, localStream: action.payload.stream });
+        case "SET_CAMERA_DEVICE":
+            return Object.assign(Object.assign({}, state), { cameraDeviceError: null, isSettingCameraDevice: true });
+        case "SET_CAMERA_DEVICE_COMPLETE":
+            return Object.assign(Object.assign({}, state), { isSettingCameraDevice: false });
+        case "SET_CAMERA_DEVICE_ERROR":
+            return Object.assign(Object.assign({}, state), { cameraDeviceError: action.payload, isSettingCameraDevice: false });
+        case "SET_MICROPHONE_DEVICE":
+            return Object.assign(Object.assign({}, state), { isSettingMicrophoneDevice: true, microphoneDeviceError: null });
+        case "SET_MICROPHONE_DEVICE_COMPLETE":
+            return Object.assign(Object.assign({}, state), { isSettingMicrophoneDevice: false });
+        case "SET_MICROPHONE_DEVICE_ERROR":
+            return Object.assign(Object.assign({}, state), { isSettingMicrophoneDevice: false, microphoneDeviceError: action.payload });
+        case "START":
+            return Object.assign(Object.assign({}, state), { isStarting: true, startError: null });
+        case "START_COMPLETE":
+            return Object.assign(Object.assign({}, state), { isStarting: false });
+        case "START_ERROR":
+            return Object.assign(Object.assign({}, state), { isStarting: false, startError: action.payload });
+        default:
+            return state;
+    }
+}
+function useLocalMedia(constraints = { audio: true, video: true }) {
+    const [localMedia] = useState(() => new LocalMedia(constraints));
+    const [state, dispatch] = useReducer(reducer$1, initialState$1);
+    useEffect(() => {
+        localMedia.addEventListener("device_list_updated", (e) => {
+            const { cameraDevices, microphoneDevices, speakerDevices } = e.detail;
+            dispatch({ type: "DEVICE_LIST_UPDATED", payload: { cameraDevices, microphoneDevices, speakerDevices } });
+        });
+        localMedia.addEventListener("stream_updated", (e) => {
+            const { stream } = e.detail;
+            dispatch({
+                type: "LOCAL_STREAM_UPDATED",
+                payload: {
+                    stream,
+                    currentCameraDeviceId: localMedia.getCameraDeviceId(),
+                    currentMicrophoneDeviceId: localMedia.getMicrophoneDeviceId(),
+                },
+            });
+        });
+        const start = () => __awaiter(this, void 0, void 0, function* () {
+            dispatch({ type: "START" });
+            try {
+                yield localMedia.start();
+                dispatch({ type: "START_COMPLETE" });
+            }
+            catch (error) {
+                dispatch({ type: "START_ERROR", payload: error });
+            }
+        });
+        start();
+        // Perform cleanup on unmount
+        return () => {
+            localMedia.stop();
+        };
+    }, []);
+    return {
+        state,
+        actions: {
+            setCameraDevice: (...args) => __awaiter(this, void 0, void 0, function* () {
+                dispatch({ type: "SET_CAMERA_DEVICE" });
+                try {
+                    yield localMedia.setCameraDevice(...args);
+                    dispatch({ type: "SET_CAMERA_DEVICE_COMPLETE" });
+                }
+                catch (error) {
+                    dispatch({ type: "SET_CAMERA_DEVICE_ERROR", payload: error });
+                }
+            }),
+            setMicrophoneDevice: (...args) => __awaiter(this, void 0, void 0, function* () {
+                dispatch({ type: "SET_MICROPHONE_DEVICE" });
+                try {
+                    yield localMedia.setMicrophoneDevice(...args);
+                    dispatch({ type: "SET_MICROPHONE_DEVICE_COMPLETE" });
+                }
+                catch (error) {
+                    dispatch({ type: "SET_MICROPHONE_DEVICE_ERROR", payload: error });
+                }
+            }),
+            toggleCameraEnabled: (...args) => {
+                return localMedia.toggleCameraEnabled(...args);
+            },
+            toggleMicrophoneEnabled: (...args) => {
+                return localMedia.toggleMichrophoneEnabled(...args);
+            },
+        },
+        _ref: localMedia,
+    };
+}
+
 const EVENTS = {
     CLIENT_CONNECTION_STATUS_CHANGED: "client_connection_status_changed",
     STREAM_ADDED: "stream_added",
@@ -270,10 +586,10 @@ class ServerSocket {
         }
 
         this._socket = io(hostName, options);
-        this._socket.on("reconnect", () => {
+        this._socket.io.on("reconnect", () => {
             this._socket.sendBuffer = [];
         });
-        this._socket.on("reconnect_attempt", () => {
+        this._socket.io.on("reconnect_attempt", () => {
             if (this._wasConnectedUsingWebsocket) {
                 this._socket.io.opts.transports = ["websocket"];
                 // only fallback to polling if not safari
@@ -331,6 +647,10 @@ class ServerSocket {
         );
     }
 
+    getManager() {
+        return this._socket.io;
+    }
+
     isConnecting() {
         return this._socket && this._socket.connecting;
     }
@@ -385,21 +705,21 @@ var rtcManagerEvents = {
     DOMINANT_SPEAKER: "dominant_speaker",
 };
 
-const browserName$3 = adapter.browserDetails.browser;
+const browserName$2 = adapter.browserDetails.browser;
 const browserVersion$1 = adapter.browserDetails.version;
 
 // SDP mangling for deprioritizing H264
 function deprioritizeH264(sdp) {
     return SDPUtils.splitSections(sdp)
-        .map((section) => {
+        .map(section => {
             // only modify video sections
             if (SDPUtils.getKind(section) !== "video") return section;
 
             // list of payloadTypes used in this sdp/section
             const h264payloadTypes = SDPUtils.matchPrefix(section, "a=rtpmap:")
-                .map((line) => SDPUtils.parseRtpMap(line))
-                .filter((codec) => /h264/i.test(codec.name))
-                .map((codec) => "" + codec.payloadType);
+                .map(line => SDPUtils.parseRtpMap(line))
+                .filter(codec => /h264/i.test(codec.name))
+                .map(codec => "" + codec.payloadType);
 
             // return as is if no h264 found
             if (!h264payloadTypes.length) return section;
@@ -409,7 +729,7 @@ function deprioritizeH264(sdp) {
             const mlinePayloadsSection = /(\s\d+)+$/i.exec(mline)[0];
             const mlinePayloadsNonH264 = mlinePayloadsSection
                 .split(" ")
-                .filter((payloadType) => payloadType && !h264payloadTypes.includes(payloadType));
+                .filter(payloadType => payloadType && !h264payloadTypes.includes(payloadType));
             const reorderedPayloads = [...mlinePayloadsNonH264, ...h264payloadTypes].join(" ");
             const newmline = mline.replace(mlinePayloadsSection, " " + reorderedPayloads);
             return section.replace(mline, newmline);
@@ -437,12 +757,12 @@ function replaceSSRCs(currentDescription, newDescription) {
 // https://bugzilla.mozilla.org/show_bug.cgi?id=1478685
 // filter out the mid rtp header extension
 function filterMidExtension(sdp) {
-    if (browserName$3 !== "safari" && (browserName$3 !== "firefox" || browserVersion$1 >= 63 || browserVersion$1 === 60)) {
+    if (browserName$2 !== "safari" && (browserName$2 !== "firefox" || browserVersion$1 >= 63 || browserVersion$1 === 60)) {
         return sdp;
     }
     return (
         SDPUtils.splitLines(sdp.trim())
-            .filter((line) => {
+            .filter(line => {
                 if (!line.startsWith("a=extmap:")) {
                     return true;
                 }
@@ -458,21 +778,21 @@ function filterMidExtension(sdp) {
 // https://bugzilla.mozilla.org/show_bug.cgi?id=1534673
 // Filter out a:msid-semantic header
 function filterMsidSemantic(sdp) {
-    if (browserName$3 !== "firefox") {
+    if (browserName$2 !== "firefox") {
         return sdp;
     }
     return (
         SDPUtils.splitLines(sdp.trim())
-            .map((line) => (line.startsWith("a=msid-semantic:") ? "a=msid-semantic: WMS *" : line))
+            .map(line => (line.startsWith("a=msid-semantic:") ? "a=msid-semantic: WMS *" : line))
             .join("\r\n") + "\r\n"
     );
 }
 
 function isRelayed(pc) {
-    return pc.getStats(null).then((result) => {
+    return pc.getStats(null).then(result => {
         let localCandidateType;
         let remoteCandidateType;
-        result.forEach((report) => {
+        result.forEach(report => {
             // Chrome 58+ / spec
             if (report.type === "transport" && report.selectedCandidatePairId) {
                 const transport = result.get(report.selectedCandidatePairId);
@@ -502,7 +822,7 @@ const logger$4 = console;
 
 // use https://w3c.github.io/webrtc-pc/#dom-rtcrtpsender-setparameters to change the video bandwidth.
 function setVideoBandwidthUsingSetParameters(pc, bandwidth) {
-    const sender = pc.getSenders().find((s) => s.track && s.track.kind === "video");
+    const sender = pc.getSenders().find(s => s.track && s.track.kind === "video");
     if (!sender) {
         return Promise.resolve();
     }
@@ -523,7 +843,7 @@ function setVideoBandwidthUsingSetParameters(pc, bandwidth) {
         parameters.encodings[0].maxBitrate = bandwidth * 1000; // convert to bps
     }
 
-    return sender.setParameters(parameters).catch((err) => {
+    return sender.setParameters(parameters).catch(err => {
         logger$4.error("setParameters err: ", err);
     });
 }
@@ -548,7 +868,7 @@ class Session {
         this.streamIds = [];
         this.streams = [];
         this.earlyIceCandidates = [];
-        this.afterConnected = new Promise((resolve) => {
+        this.afterConnected = new Promise(resolve => {
             this.registerConnected = resolve;
         });
         this.offerOptions = { offerToReceiveAudio: true, offerToReceiveVideo: true };
@@ -585,10 +905,10 @@ class Session {
         this.streamIds.push(stream.id);
         this.streams.push(stream);
         if (RTCPeerConnection.prototype.addTrack) {
-            stream.getAudioTracks().forEach((track) => {
+            stream.getAudioTracks().forEach(track => {
                 this.pc.addTrack(track, stream);
             });
-            stream.getVideoTracks().forEach((track) => {
+            stream.getVideoTracks().forEach(track => {
                 this.pc.addTrack(track, stream);
             });
         } else {
@@ -608,7 +928,7 @@ class Session {
     removeTrack(track) {
         const stream = this.streams[0];
         stream.removeTrack(track);
-        const sender = this.pc.getSenders().find((sender) => sender.track === track);
+        const sender = this.pc.getSenders().find(sender => sender.track === track);
         if (sender) {
             this.pc.removeTrack(sender);
         }
@@ -624,8 +944,8 @@ class Session {
 
         if (this.pc) {
             if (this.pc.removeTrack) {
-                stream.getTracks().forEach((track) => {
-                    const sender = this.pc.getSenders().find((sender) => sender.track === track);
+                stream.getTracks().forEach(track => {
+                    const sender = this.pc.getSenders().find(sender => sender.track === track);
                     if (sender) {
                         this.pc.removeTrack(sender);
                     }
@@ -643,14 +963,14 @@ class Session {
         // wrapper around SRD which stores a promise
         this.srdComplete = this.pc.setRemoteDescription(desc);
         return this.srdComplete.then(() => {
-            this.earlyIceCandidates.forEach((candidate) => this.pc.addIceCandidate(candidate));
+            this.earlyIceCandidates.forEach(candidate => this.pc.addIceCandidate(candidate));
             this.earlyIceCandidates = [];
         });
     }
 
     handleOffer(message) {
         if (!this.canModifyPeerConnection()) {
-            return new Promise((resolve) => {
+            return new Promise(resolve => {
                 this.pending.push(() => this.handleOffer(message).then(resolve));
             });
         }
@@ -668,7 +988,7 @@ class Session {
             .then(() => {
                 return this.pc.createAnswer();
             })
-            .then((answer) => {
+            .then(answer => {
                 answerToSignal = answer;
                 return this.pc.setLocalDescription(answer);
             })
@@ -696,7 +1016,7 @@ class Session {
             () => {
                 return setVideoBandwidthUsingSetParameters(this.pc, this.bandwidth);
             },
-            (e) => {
+            e => {
                 logger$3.warn("Could not set remote description from remote answer: ", e);
             }
         );
@@ -717,7 +1037,7 @@ class Session {
                 // filter due to https://github.com/webrtcHacks/adapter/issues/863
                 return;
             }
-            this.pc.addIceCandidate(candidate).catch((e) => {
+            this.pc.addIceCandidate(candidate).catch(e => {
                 logger$3.warn("Failed to add ICE candidate ('%s'): %s", candidate ? candidate.candidate : null, e);
             });
         });
@@ -755,11 +1075,11 @@ class Session {
         if (!pc) return false;
         const senders = pc.getSenders();
         function dbg(msg) {
-            const tr = (t) => t && `id:${t.id},kind:${t.kind},state:${t.readyState}`;
+            const tr = t => t && `id:${t.id},kind:${t.kind},state:${t.readyState}`;
             logger$3.warn(
                 `${msg}. newTrack:${tr(newTrack)}, oldTrack:${tr(oldTrack)}, sender tracks: ${JSON.stringify(
-                    senders.map((s) => `s ${tr(s.track)}`)
-                )}, sender first codecs: ${JSON.stringify(senders.map((s) => (s.getParameters().codecs || [])[0]))}`
+                    senders.map(s => `s ${tr(s.track)}`)
+                )}, sender first codecs: ${JSON.stringify(senders.map(s => (s.getParameters().codecs || [])[0]))}`
             );
         }
         if (!senders.length) {
@@ -767,7 +1087,7 @@ class Session {
         }
         // If we didn't specify oldTrack, replace with first of its kind
         if (!oldTrack) {
-            oldTrack = (senders.find((s) => s.track && s.track.kind === newTrack.kind) || {}).track;
+            oldTrack = (senders.find(s => s.track && s.track.kind === newTrack.kind) || {}).track;
             if (!oldTrack) {
                 // odin: Temporary debug data, remove if you see after 2020-12-01
                 dbg("No sender with same kind! Add new track then.");
@@ -824,7 +1144,7 @@ class Session {
                 // we already know that the track has been added at least to the mediastream
                 return result;
             }
-            const stream = this.streams.find((s) => s.getTracks().find((t) => t.id === newTrack.id)) || this.streams[0];
+            const stream = this.streams.find(s => s.getTracks().find(t => t.id === newTrack.id)) || this.streams[0];
             if (!stream) {
                 dbg("No stream?");
                 return Promise.reject(new Error("replaceTrack: No stream?"));
@@ -853,7 +1173,7 @@ class Session {
         if (pc.localDescription.type === "offer") {
             return pc
                 .createOffer()
-                .then((offer) => {
+                .then(offer => {
                     offer.sdp = replaceSSRCs(pc.localDescription.sdp, offer.sdp);
                     return pc.setLocalDescription(offer);
                 })
@@ -865,7 +1185,7 @@ class Session {
                 .then(() => {
                     return pc.createAnswer();
                 })
-                .then((answer) => {
+                .then(answer => {
                     answer.sdp = replaceSSRCs(pc.localDescription.sdp, answer.sdp);
                     return pc.setLocalDescription(answer);
                 });
@@ -880,7 +1200,7 @@ class Session {
         if (!this.pc.getStats) {
             return;
         }
-        isRelayed(this.pc).then((isRelayed) => {
+        isRelayed(this.pc).then(isRelayed => {
             if (isRelayed && this.bandwidth === 0) {
                 this.changeBandwidth(this.maximumTurnBandwidth);
             }
@@ -913,15 +1233,11 @@ const MAXIMUM_TURN_BANDWIDTH = 512; // kbps;
 const MAXIMUM_TURN_BANDWIDTH_PREMIUM = 768; // kbps;
 
 /* globals process */
-
-process.env.AWF_BASE_URL;
-process.env.AWF_API_BASE_URL;
-process.env.AP_ROOM_BASE_URL;
 const CAMERA_STREAM_ID = "0";
 
 const logger$2 = console;
 
-const browserName$2 = adapter.browserDetails.browser;
+const browserName$1 = adapter.browserDetails.browser;
 const browserVersion = adapter.browserDetails.version;
 
 class BaseRtcManager {
@@ -961,7 +1277,7 @@ class BaseRtcManager {
     }
 
     numberOfRemotePeers() {
-        return Object.values(this.peerConnections).filter((session) => session.clientId !== this._selfId).length;
+        return Object.values(this.peerConnections).filter(session => session.clientId !== this._selfId).length;
     }
 
     _setConnectionStatus(session, newStatus, clientId) {
@@ -1035,7 +1351,7 @@ class BaseRtcManager {
             // Some macs + ios devices have troubles using h264 encoder since safari 14
             // this will make them encode VP8 instead if available
             const deprioritizeH264Encoding =
-                browserName$2 === "safari" && browserVersion >= 14 && this._features.deprioritizeH264OnSafari;
+                browserName$1 === "safari" && browserVersion >= 14 && this._features.deprioritizeH264OnSafari;
 
             this.peerConnections[peerConnectionId] = session = new Session({
                 peerConnectionId,
@@ -1054,7 +1370,7 @@ class BaseRtcManager {
     }
 
     _getNonLocalCameraStreamIds() {
-        return Object.keys(this.localStreams).filter((streamId) => streamId !== CAMERA_STREAM_ID);
+        return Object.keys(this.localStreams).filter(streamId => streamId !== CAMERA_STREAM_ID);
     }
 
     _isScreensharingLocally() {
@@ -1083,7 +1399,7 @@ class BaseRtcManager {
         }
         const session = this._getOrCreateSession(peerConnectionId, initialBandwidth);
         const constraints = { optional: [] };
-        if (browserName$2 === "chrome") {
+        if (browserName$1 === "chrome") {
             constraints.optional.push({
                 googCpuOveruseDetection: true,
             });
@@ -1096,13 +1412,13 @@ class BaseRtcManager {
             const host = this._features.turnServerOverrideHost;
             const port = host.indexOf(":") > 0 ? "" : ":443";
             const override = ":" + host + port;
-            peerConnectionConfig.iceServers = peerConnectionConfig.iceServers.map((original) => {
+            peerConnectionConfig.iceServers = peerConnectionConfig.iceServers.map(original => {
                 const entry = Object.assign({}, original);
                 if (entry.url) {
                     entry.url = entry.url.replace(/:[^?]*/, override);
                 }
                 if (entry.urls) {
-                    entry.urls = entry.urls.map((url) => url.replace(/:[^?]*/, override));
+                    entry.urls = entry.urls.map(url => url.replace(/:[^?]*/, override));
                 }
                 return entry;
             });
@@ -1116,12 +1432,12 @@ class BaseRtcManager {
             }[this._features.useOnlyTURN];
             if (filter) {
                 peerConnectionConfig.iceServers = peerConnectionConfig.iceServers.filter(
-                    (entry) => entry.url && entry.url.match(filter)
+                    entry => entry.url && entry.url.match(filter)
                 );
             }
         }
 
-        if (browserName$2 === "chrome") {
+        if (browserName$1 === "chrome") {
             peerConnectionConfig.sdpSemantics = "unified-plan";
         }
 
@@ -1132,7 +1448,7 @@ class BaseRtcManager {
             clientId,
         });
 
-        pc.ontrack = (event) => {
+        pc.ontrack = event => {
             const stream = event.streams[0];
             if (stream.id === "default" && stream.getAudioTracks().length === 0) {
                 // due to our PlanB / UnifiedPlan conversion we can run into this:
@@ -1174,7 +1490,7 @@ class BaseRtcManager {
                 case "completed":
                     newStatus = TYPES.CONNECTION_SUCCESSFUL;
                     if (!session.wasEverConnected) {
-                        this._pendingActionsForConnectedPeerConnections.forEach((action) => {
+                        this._pendingActionsForConnectedPeerConnections.forEach(action => {
                             if (typeof action === "function") {
                                 action();
                             }
@@ -1186,7 +1502,7 @@ class BaseRtcManager {
                     if (
                         !session.wasEverConnected &&
                         (pc.iceConnectionState.match(/connected|completed/) ||
-                            (browserName$2 === "chrome" && pc.localDescription && pc.localDescription.type === "answer"))
+                            (browserName$1 === "chrome" && pc.localDescription && pc.localDescription.type === "answer"))
                     ) {
                         session.wasEverConnected = true;
                         if (this._features.bandwidth !== "false") {
@@ -1257,7 +1573,7 @@ class BaseRtcManager {
         // Don't add existing screenshare-streams when using SFU as those will be
         // added in a separate session/peerConnection
         if (shouldAddLocalVideo) {
-            Object.keys(this.localStreams).forEach((id) => {
+            Object.keys(this.localStreams).forEach(id => {
                 if (id === CAMERA_STREAM_ID) {
                     return;
                 }
@@ -1294,27 +1610,27 @@ class BaseRtcManager {
     }
 
     _forEachPeerConnection(func) {
-        Object.keys(this.peerConnections).forEach((peerConnectionId) => {
+        Object.keys(this.peerConnections).forEach(peerConnectionId => {
             const peerConnection = this.peerConnections[peerConnectionId];
             func(peerConnection);
         });
     }
 
     _addStreamToPeerConnections(stream) {
-        this._forEachPeerConnection((session) => {
+        this._forEachPeerConnection(session => {
             this._withForcedRenegotiation(session, () => session.addStream(stream));
         });
     }
 
     _addTrackToPeerConnections(track, stream) {
-        this._forEachPeerConnection((session) => {
+        this._forEachPeerConnection(session => {
             this._withForcedRenegotiation(session, () => session.addTrack(track, stream));
         });
     }
 
     _replaceTrackToPeerConnections(oldTrack, newTrack) {
         const promises = [];
-        this._forEachPeerConnection((session) => {
+        this._forEachPeerConnection(session => {
             if (!session.hasConnectedPeerConnection()) {
                 logger$2.log("Session doesn't have a connected PeerConnection, adding pending action!");
                 const pendingActions = this._pendingActionsForConnectedPeerConnections;
@@ -1332,7 +1648,7 @@ class BaseRtcManager {
                             reject(`ReplaceTrack returned false`);
                             return;
                         }
-                        replacedTrackPromise.then((track) => resolve(track)).catch((error) => reject(error));
+                        replacedTrackPromise.then(track => resolve(track)).catch(error => reject(error));
                     };
                     pendingActions.push(action);
                 });
@@ -1350,13 +1666,13 @@ class BaseRtcManager {
     }
 
     _removeStreamFromPeerConnections(stream) {
-        this._forEachPeerConnection((session) => {
+        this._forEachPeerConnection(session => {
             this._withForcedRenegotiation(session, () => session.removeStream(stream));
         });
     }
 
     _removeTrackFromPeerConnections(track) {
-        this._forEachPeerConnection((session) => {
+        this._forEachPeerConnection(session => {
             this._withForcedRenegotiation(session, () => session.removeTrack(track));
         });
     }
@@ -1409,11 +1725,11 @@ class BaseRtcManager {
     }
 
     disconnectAll() {
-        Object.keys(this.peerConnections).forEach((peerConnectionId) => {
+        Object.keys(this.peerConnections).forEach(peerConnectionId => {
             this.disconnect(peerConnectionId);
         });
         this.peerConnections = {};
-        this._socketListenerDeregisterFunctions.forEach((func) => {
+        this._socketListenerDeregisterFunctions.forEach(func => {
             func();
         });
         this._socketListenerDeregisterFunctions = [];
@@ -1430,7 +1746,7 @@ class BaseRtcManager {
      * used in getUserMedia.
      */
     fixChromeAudio(constraints) {
-        if (browserName$2 !== "chrome") {
+        if (browserName$1 !== "chrome") {
             return;
         }
         const localStream = this._getLocalCameraStream();
@@ -1438,7 +1754,7 @@ class BaseRtcManager {
         if (!audioTrack || audioTrack.readyState !== "ended") {
             return;
         }
-        return navigator.mediaDevices.getUserMedia({ audio: constraints }).then((stream) => {
+        return navigator.mediaDevices.getUserMedia({ audio: constraints }).then(stream => {
             const track = stream.getAudioTracks()[0];
             track.enabled = audioTrack.enabled; // retain mute state and don't accidentally unmute.
             localStream.removeTrack(audioTrack); // remove the old track.
@@ -1472,7 +1788,7 @@ class BaseRtcManager {
         this._socketListenerDeregisterFunctions = [
             () => this._clearMediaServersRefresh(),
 
-            this._serverSocket.on(PROTOCOL_RESPONSES.MEDIASERVER_CONFIG, (data) => {
+            this._serverSocket.on(PROTOCOL_RESPONSES.MEDIASERVER_CONFIG, data => {
                 if (data.error) {
                     logger$2.warn("FETCH_MEDIASERVER_CONFIG failed:", data.error);
                     return;
@@ -1480,11 +1796,11 @@ class BaseRtcManager {
                 this._updateAndScheduleMediaServersRefresh(data);
             }),
 
-            this._serverSocket.on(RELAY_MESSAGES.READY_TO_RECEIVE_OFFER, (data) => {
+            this._serverSocket.on(RELAY_MESSAGES.READY_TO_RECEIVE_OFFER, data => {
                 this._connect(data.clientId);
             }),
 
-            this._serverSocket.on(RELAY_MESSAGES.ICE_CANDIDATE, (data) => {
+            this._serverSocket.on(RELAY_MESSAGES.ICE_CANDIDATE, data => {
                 const session = this._getSession(data.clientId);
                 if (!session) {
                     logger$2.warn("No RTCPeerConnection on ICE_CANDIDATE", data);
@@ -1493,7 +1809,7 @@ class BaseRtcManager {
                 session.addIceCandidate(data.message);
             }),
 
-            this._serverSocket.on(RELAY_MESSAGES.ICE_END_OF_CANDIDATES, (data) => {
+            this._serverSocket.on(RELAY_MESSAGES.ICE_END_OF_CANDIDATES, data => {
                 const session = this._getSession(data.clientId);
                 if (!session) {
                     logger$2.warn("No RTCPeerConnection on ICE_END_OF_CANDIDATES", data);
@@ -1503,14 +1819,14 @@ class BaseRtcManager {
             }),
 
             // when a new SDP offer is received from another client
-            this._serverSocket.on(RELAY_MESSAGES.SDP_OFFER, (data) => {
+            this._serverSocket.on(RELAY_MESSAGES.SDP_OFFER, data => {
                 const session = this._getSession(data.clientId);
                 if (!session) {
                     logger$2.warn("No RTCPeerConnection on SDP_OFFER", data);
                     return;
                 }
                 const offer = this._transformIncomingSdp(data.message, session.pc);
-                session.handleOffer(offer).then((answer) => {
+                session.handleOffer(offer).then(answer => {
                     this._emitServerEvent(RELAY_MESSAGES.SDP_ANSWER, {
                         receiverId: data.clientId,
                         message: this._transformOutgoingSdp(answer),
@@ -1519,7 +1835,7 @@ class BaseRtcManager {
             }),
 
             // when a new SDP answer is received from another client
-            this._serverSocket.on(RELAY_MESSAGES.SDP_ANSWER, (data) => {
+            this._serverSocket.on(RELAY_MESSAGES.SDP_ANSWER, data => {
                 const session = this._getSession(data.clientId);
                 if (!session) {
                     logger$2.warn("No RTCPeerConnection on SDP_ANSWER", data);
@@ -1537,7 +1853,7 @@ class BaseRtcManager {
 }
 
 const logger$1 = console;
-const browserName$1 = adapter.browserDetails.browser;
+const browserName = adapter.browserDetails.browser;
 class P2pRtcManager extends BaseRtcManager {
     _connect(clientId) {
         const shouldAddLocalVideo = true;
@@ -1589,7 +1905,7 @@ class P2pRtcManager extends BaseRtcManager {
         session.isOperationPending = true;
 
         pc.createOffer(constraints || this.offerOptions)
-            .then((offer) => {
+            .then(offer => {
                 this._emitServerEvent(RELAY_MESSAGES.SDP_OFFER, {
                     receiverId: clientId,
                     message: this._transformOutgoingSdp(offer),
@@ -1598,17 +1914,17 @@ class P2pRtcManager extends BaseRtcManager {
                 // workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1394602
                 // make Chrome send media later when there are two (more more?) video tracks.
                 if (
-                    browserName$1 === "chrome" &&
-                    pc.getSenders().filter((sender) => sender.track && sender.track.kind === "video").length >= 2
+                    browserName === "chrome" &&
+                    pc.getSenders().filter(sender => sender.track && sender.track.kind === "video").length >= 2
                 ) {
                     session.pendingOffer = offer;
                     return;
                 }
-                pc.setLocalDescription(offer).catch((e) => {
+                pc.setLocalDescription(offer).catch(e => {
                     logger$1.warn("RTCPeerConnection.setLocalDescription() failed with local offer", e);
                 });
             })
-            .catch((e) => {
+            .catch(e => {
                 logger$1.warn("RTCPeerConnection.createOffer() failed to create local offer", e);
             });
     }
@@ -1658,7 +1974,7 @@ class P2pRtcManager extends BaseRtcManager {
             return 0;
         }
 
-        this._forEachPeerConnection((session) => {
+        this._forEachPeerConnection(session => {
             session.changeBandwidth(bandwidth);
         });
 
@@ -1689,7 +2005,7 @@ class P2pRtcManager extends BaseRtcManager {
             pc.addTrack(this._stoppedVideoTrack, localCameraStream);
         }
 
-        pc.onicecandidate = (event) => {
+        pc.onicecandidate = event => {
             if (event.candidate) {
                 session.relayCandidateSeen = session.relayCandidateSeen || event.candidate.type === "relay";
                 this._emitServerEvent(RELAY_MESSAGES.ICE_CANDIDATE, {
@@ -1746,7 +2062,7 @@ class P2pRtcManager extends BaseRtcManager {
         const numPeers = this.numberOfPeerconnections();
         if (numPeers === 0) {
             setTimeout(() => {
-                this.numberOfPeerconnections();
+                //const numPeers = this.numberOfPeerconnections();
             }, 60 * 1000);
         }
     }
@@ -1760,13 +2076,13 @@ class P2pRtcManager extends BaseRtcManager {
 
     stopOrResumeVideo(localStream, enable) {
         // actually turn off the camera. Chrome-only (Firefox has different plans)
-        if (browserName$1 !== "chrome") {
+        if (browserName !== "chrome") {
             return;
         }
         if (enable === false) {
             // try to stop the local camera so the camera light goes off.
             setTimeout(() => {
-                localStream.getVideoTracks().forEach((track) => {
+                localStream.getVideoTracks().forEach(track => {
                     if (track.enabled === false) {
                         track.stop();
                         localStream.removeTrack(track);
@@ -1805,7 +2121,7 @@ class P2pRtcManager extends BaseRtcManager {
                         // device has been plugged out or similar
                         return;
                     }
-                    navigator.mediaDevices.getUserMedia({ video: constraints }).then((stream) => {
+                    navigator.mediaDevices.getUserMedia({ video: constraints }).then(stream => {
                         const track = stream.getVideoTracks()[0];
                         localStream.addTrack(track);
                         this._emit(EVENTS.LOCAL_STREAM_TRACK_ADDED, {
@@ -1964,10 +2280,11 @@ class VegaParser {
 }
 
 class VegaConnection extends EventEmitter {
-    constructor(wsUrl, logger) {
+    constructor(wsUrl, logger, protocol = "whereby-sfu#v4") {
         super();
 
         this.wsUrl = wsUrl;
+        this.protocol = protocol;
         this.logger = logger;
 
         // This is the map of sent requests that are waiting for a response
@@ -1976,7 +2293,7 @@ class VegaConnection extends EventEmitter {
     }
 
     _setupSocket() {
-        this.socket = new WebSocket(this.wsUrl, "whereby-sfu#v4");
+        this.socket = new WebSocket(this.wsUrl, this.protocol);
         this.socket.onopen = this._onOpen.bind(this);
         this.socket.onmessage = this._onMessage.bind(this);
         this.socket.onclose = this._onClose.bind(this);
@@ -1990,13 +2307,15 @@ class VegaConnection extends EventEmitter {
         this.socket.onerror = null;
         this.socket = null;
 
-        this.sents.forEach((sent) => sent.close());
+        this.sents.forEach(sent => sent.close());
 
         this.emit("close");
     }
 
     close() {
-        this.socket?.close();
+        if (!this.socket) return;
+
+        this.socket.close();
     }
 
     _onOpen() {
@@ -2008,11 +2327,15 @@ class VegaConnection extends EventEmitter {
     _onMessage(event) {
         const socketMessage = VegaParser.parse(event.data);
 
+        if (!socketMessage) {
+            return this.logger.log("VegaConnectionManager: Received invalid message", event.data);
+        }
+
         this.logger.log("VegaConnectionManager: Received message", socketMessage);
 
-        if (socketMessage?.response) {
+        if (socketMessage.response) {
             this._handleResponse(socketMessage);
-        } else if (socketMessage?.message) {
+        } else if (socketMessage.message) {
             this.emit("message", socketMessage);
         }
     }
@@ -2058,13 +2381,13 @@ class VegaConnection extends EventEmitter {
             const sent = {
                 id: request.id,
                 method: request.method,
-                resolve: (data2) => {
+                resolve: data2 => {
                     if (!this.sents.delete(request.id)) return;
 
                     clearTimeout(sent.timer);
                     pResolve(data2);
                 },
-                reject: (error) => {
+                reject: error => {
                     if (!this.sents.delete(request.id)) return;
 
                     clearTimeout(sent.timer);
@@ -2119,7 +2442,7 @@ const VIDEO_SETTINGS_VP9 = {
     codecOptions: {
         videoGoogleStartBitrate: 500,
     },
-    encodings: [{ scalabilityMode: "S3T3_KEY", networkPriority: "high" }],
+    encodings: [{ scalabilityMode: "L3T2_KEY", networkPriority: "high" }],
 };
 
 const SCREEN_SHARE_SETTINGS = {
@@ -2128,13 +2451,13 @@ const SCREEN_SHARE_SETTINGS = {
 
 const SCREEN_SHARE_SIMULCAST_SETTINGS = {
     encodings: [
-        { dtx: true, maxBitrate: 500000 },
-        { dtx: true, maxBitrate: 1500000 },
+        { scaleResolutionDownBy: 2, dtx: true, maxBitrate: 500000 },
+        { scaleResolutionDownBy: 1, dtx: true, maxBitrate: 1500000 },
     ],
 };
 
 const SCREEN_SHARE_SETTINGS_VP9 = {
-    encodings: [{ scalabilityMode: "S3T3", dtx: true, networkPriority: "high" }],
+    encodings: [{ scalabilityMode: "L1T1", dtx: true, networkPriority: "high" }],
 };
 
 const getMediaSettings = (kind, isScreenShare, features) => {
@@ -2150,8 +2473,8 @@ const getMediaSettings = (kind, isScreenShare, features) => {
 
         return SCREEN_SHARE_SETTINGS;
     } else {
-        if (lowDataModeEnabled) return VIDEO_SETTINGS_SD;
         if (vp9On) return VIDEO_SETTINGS_VP9;
+        if (lowDataModeEnabled) return VIDEO_SETTINGS_SD;
 
         return VIDEO_SETTINGS_HD;
     }
@@ -2162,30 +2485,30 @@ const modifyMediaCapabilities = (routerRtpCapabilities, features) => {
 
     if (vp9On) {
         const { preferredPayloadType } = routerRtpCapabilities.codecs.find(
-            (codec) => codec.mimeType.toLowerCase() === "video/vp9"
+            codec => codec.mimeType.toLowerCase() === "video/vp9"
         );
 
         const { preferredPayloadType: aptPreferredPayloadType } = routerRtpCapabilities.codecs.find(
-            (codec) => codec.mimeType.toLowerCase() === "video/rtx" && codec.parameters.apt === preferredPayloadType
+            codec => codec.mimeType.toLowerCase() === "video/rtx" && codec.parameters.apt === preferredPayloadType
         );
 
         routerRtpCapabilities.codecs = routerRtpCapabilities.codecs.filter(
-            (codec) =>
+            codec =>
                 codec.kind === "audio" ||
                 codec.preferredPayloadType === preferredPayloadType ||
                 codec.preferredPayloadType === aptPreferredPayloadType
         );
     } else if (h264On) {
         const { preferredPayloadType } = routerRtpCapabilities.codecs.find(
-            (codec) => codec.mimeType.toLowerCase() === "video/h264"
+            codec => codec.mimeType.toLowerCase() === "video/h264"
         );
 
         const { preferredPayloadType: aptPreferredPayloadType } = routerRtpCapabilities.codecs.find(
-            (codec) => codec.mimeType.toLowerCase() === "video/rtx" && codec.parameters.apt === preferredPayloadType
+            codec => codec.mimeType.toLowerCase() === "video/rtx" && codec.parameters.apt === preferredPayloadType
         );
 
         routerRtpCapabilities.codecs = routerRtpCapabilities.codecs.filter(
-            (codec) =>
+            codec =>
                 codec.kind === "audio" ||
                 codec.preferredPayloadType === preferredPayloadType ||
                 codec.preferredPayloadType === aptPreferredPayloadType
@@ -2219,7 +2542,7 @@ const maybeTurnOnly = (transportConfig, features) => {
     }[features.useOnlyTURN];
 
     if (filter) {
-        transportConfig.iceServers = transportConfig.iceServers.filter((entry) => entry.url && entry.url.match(filter));
+        transportConfig.iceServers = transportConfig.iceServers.filter(entry => entry.url && entry.url.match(filter));
     }
 };
 
@@ -2323,7 +2646,7 @@ class VegaRtcManager {
         this._socketListenerDeregisterFunctions.push(
             () => this._clearMediaServersRefresh(),
 
-            this._serverSocket.on(PROTOCOL_RESPONSES.MEDIASERVER_CONFIG, (data) => {
+            this._serverSocket.on(PROTOCOL_RESPONSES.MEDIASERVER_CONFIG, data => {
                 if (data.error) {
                     logger.warn("FETCH_MEDIASERVER_CONFIG failed:", data.error);
                     return;
@@ -2360,7 +2683,7 @@ class VegaRtcManager {
         this._vegaConnection = new VegaConnection(wsUrl, logger);
         this._vegaConnection.on("open", () => this._join());
         this._vegaConnection.on("close", () => this._onClose());
-        this._vegaConnection.on("message", (message) => this._onMessage(message));
+        this._vegaConnection.on("message", message => this._onMessage(message));
     }
 
     _onClose() {
@@ -2441,7 +2764,7 @@ class VegaRtcManager {
         maybeTurnOnly(transportOptions, this._features);
 
         const transport = this._mediasoupDevice[creator](transportOptions);
-        const onConnectionStateListener = async (connectionState) => {
+        const onConnectionStateListener = async connectionState => {
             logger.debug(`Transport ConnectionStateChanged ${connectionState}`);
             if (connectionState !== "disconnected" && connectionState !== "failed") {
                 return;
@@ -2553,7 +2876,7 @@ class VegaRtcManager {
         const error = await transport
             .restartIce({ iceParameters })
             .then(() => null)
-            .catch((err) => err);
+            .catch(err => err);
 
         if (error) {
             logger.error(`_restartIce: ICE restart failed: ${error}`);
@@ -2564,7 +2887,7 @@ class VegaRtcManager {
                     break;
                 default:
                     // exponential backoff
-                    await new Promise((resolve) => {
+                    await new Promise(resolve => {
                         setTimeout(() => {
                             resolve();
                         }, Math.min(RESTARTICE_ERROR_RETRY_THRESHOLD_IN_MS * 2 ** retried, 60000));
@@ -2574,7 +2897,7 @@ class VegaRtcManager {
             }
             return;
         }
-        await new Promise((resolve) => {
+        await new Promise(resolve => {
             setTimeout(() => {
                 resolve();
             }, 60000 * Math.min(8, retried + 1));
@@ -3148,54 +3471,6 @@ class VegaRtcManager {
         this._webcamPaused = !enable;
 
         this._pauseResumeWebcam();
-
-        if (browserName === "chrome") {
-            // actually turn off the camera. Chrome-only (Firefox etc. has different plans)
-
-            if (!enable) {
-                clearTimeout(this._stopCameraTimeout);
-
-                // try to stop the local camera so the camera light goes off.
-                this._stopCameraTimeout = setTimeout(() => {
-                    localStream.getVideoTracks().forEach((track) => {
-                        if (track.enabled === false) {
-                            track.stop();
-                            localStream.removeTrack(track);
-
-                            this._emitToPWA(EVENTS.LOCAL_STREAM_TRACK_REMOVED, {
-                                stream: localStream,
-                                track,
-                            });
-
-                            if (
-                                this._webcamProducer &&
-                                !this._webcamProducer.closed &&
-                                this._webcamProducer.track === track
-                            ) {
-                                this._stopProducer(this._webcamProducer);
-                                this._webcamProducer = null;
-                                this._webcamTrack = null;
-                            }
-                        }
-                    });
-                }, 5000);
-            } else if (localStream.getVideoTracks().length === 0) {
-                // re-enable the stream
-                const constraints = this._webrtcProvider.getMediaConstraints().video;
-                navigator.mediaDevices.getUserMedia({ video: constraints }).then((stream) => {
-                    const track = stream.getVideoTracks()[0];
-                    localStream.addTrack(track);
-
-                    this._emitToPWA(EVENTS.LOCAL_STREAM_TRACK_ADDED, {
-                        streamId: localStream.id,
-                        tracks: [track],
-                        screenShare: false,
-                    });
-
-                    this._sendWebcam(track);
-                });
-            }
-        }
     }
 
     supportsScreenShareAudio() {
@@ -3262,7 +3537,7 @@ class VegaRtcManager {
     }
 
     disconnectAll() {
-        this._socketListenerDeregisterFunctions.forEach((func) => {
+        this._socketListenerDeregisterFunctions.forEach(func => {
             func();
         });
 
@@ -3305,7 +3580,7 @@ class VegaRtcManager {
                         return;
                 }
             })
-            .catch((error) => {
+            .catch(error => {
                 console.error('"message" failed [error:%o]', error);
             });
     }
@@ -3440,7 +3715,7 @@ class VegaRtcManager {
         const toPauseConsumers = [];
         const toResumeConsumers = [];
 
-        this._consumers.forEach((consumer) => {
+        this._consumers.forEach(consumer => {
             if (consumer.appData.sourceClientId !== clientId) return;
 
             const hasAccepted = consumer.appData.screenShare ? hasAcceptedScreenStream : hasAcceptedWebcamStream;
@@ -3478,6 +3753,7 @@ class VegaRtcManager {
                 clientId,
                 stream: webcamStream,
                 streamId: camStreamId,
+                streamType: "webcam",
             });
 
             clientState.hasEmittedWebcamStream = true;
@@ -3489,6 +3765,7 @@ class VegaRtcManager {
                 clientId,
                 stream: screenStream,
                 streamId: screenShareStreamId,
+                streamType: "screenshare",
             });
 
             clientState.hasEmittedScreenStream = true;
@@ -4991,6 +5268,15 @@ class RemoteParticipant extends RoomParticipant {
         this.newJoiner = newJoiner;
         this.streams = streams.map((streamId) => ({ id: streamId, state: newJoiner ? "new_accept" : "to_accept" }));
     }
+    addStream(streamId, state) {
+        this.streams.push({ id: streamId, state });
+    }
+    removeStream(streamId) {
+        const index = this.streams.findIndex((s) => s.id === streamId);
+        if (index !== -1) {
+            this.streams.splice(index, 1);
+        }
+    }
     updateStreamState(streamId, state) {
         const stream = this.streams.find((s) => s.id === streamId);
         if (stream) {
@@ -5005,19 +5291,23 @@ class LocalParticipant extends RoomParticipant {
     }
 }
 
-const API_BASE_URL = "https://api.appearin.net";
-const SIGNAL_BASE_URL = "wss://signal.appearin.net";
+const API_BASE_URL = process.env["REACT_APP_API_BASE_URL"] || "https://api.whereby.dev";
+const SIGNAL_BASE_URL = process.env["REACT_APP_SIGNAL_BASE_URL"] || "wss://signal.appearin.net";
 const NON_PERSON_ROLES = ["recorder", "streamer"];
+// cache last reported stream resolutions
+const reportedStreamResolutions = new Map();
 function createSocket() {
     const parsedUrl = new URL(SIGNAL_BASE_URL);
-    const path = `${parsedUrl.pathname.replace(/^\/$/, "")}/protocol/socket.io/v1`;
+    const path = `${parsedUrl.pathname.replace(/^\/$/, "")}/protocol/socket.io/v4`;
     const SOCKET_HOST = parsedUrl.origin;
     const socketConf = {
+        autoConnect: false,
         host: SOCKET_HOST,
         path,
         reconnectionDelay: 5000,
         reconnectionDelayMax: 30000,
         timeout: 10000,
+        withCredentials: true,
     };
     return new ServerSocket(SOCKET_HOST, socketConf);
 }
@@ -5026,12 +5316,20 @@ const noop = () => {
 };
 const TypedEventTarget = EventTarget;
 class RoomConnection extends TypedEventTarget {
-    constructor(roomUrl, { displayName, localMediaConstraints, localStream, logger }) {
+    constructor(roomUrl, { displayName, localMedia, localMediaConstraints, logger, roomKey }) {
         super();
         this.localParticipant = null;
         this.remoteParticipants = [];
-        this.roomConnectionState = "";
+        this.screenshares = [];
+        this._deviceCredentials = null;
+        this._ownsLocalMedia = false;
+        this.organizationId = "";
+        this.roomConnectionStatus = "";
+        this.selfId = null;
         this.roomUrl = new URL(roomUrl); // Throw if invalid Whereby room url
+        const searchParams = new URLSearchParams(this.roomUrl.search);
+        this._roomKey = roomKey || searchParams.get("roomKey");
+        this.roomName = this.roomUrl.pathname;
         this.logger = logger || {
             debug: noop,
             error: noop,
@@ -5039,10 +5337,20 @@ class RoomConnection extends TypedEventTarget {
             warn: noop,
         };
         this.displayName = displayName;
-        this.localStream = localStream;
         this.localMediaConstraints = localMediaConstraints;
         const urls = fromLocation({ host: this.roomUrl.host });
-        // Initialize services
+        // Set up local media
+        if (localMedia) {
+            this.localMedia = localMedia;
+        }
+        else if (localMediaConstraints) {
+            this.localMedia = new LocalMedia(localMediaConstraints);
+            this._ownsLocalMedia = true;
+        }
+        else {
+            throw new Error("Missing constraints");
+        }
+        // Set up services
         this.credentialsService = CredentialsService.create({ baseUrl: API_BASE_URL });
         this.apiClient = new ApiClient({
             fetchDeviceCredentials: this.credentialsService.getCredentials.bind(this.credentialsService),
@@ -5064,12 +5372,93 @@ class RoomConnection extends TypedEventTarget {
         // Create signal socket and set up event listeners
         this.signalSocket = createSocket();
         this.signalSocket.on("new_client", this._handleNewClient.bind(this));
+        this.signalSocket.on("chat_message", this._handleNewChatMessage.bind(this));
         this.signalSocket.on("client_left", this._handleClientLeft.bind(this));
         this.signalSocket.on("audio_enabled", this._handleClientAudioEnabled.bind(this));
         this.signalSocket.on("video_enabled", this._handleClientVideoEnabled.bind(this));
         this.signalSocket.on("client_metadata_received", this._handleClientMetadataReceived.bind(this));
+        this.signalSocket.on("knock_handled", this._handleKnockHandled.bind(this));
+        this.signalSocket.on("knocker_left", this._handleKnockerLeft.bind(this));
+        this.signalSocket.on("room_joined", this._handleRoomJoined.bind(this));
+        this.signalSocket.on("room_knocked", this._handleRoomKnocked.bind(this));
+        this.signalSocket.on("cloud_recording_stopped", this._handleCloudRecordingStopped.bind(this));
+        this.signalSocket.on("screenshare_started", this._handleScreenshareStarted.bind(this));
+        this.signalSocket.on("screenshare_stopped", this._handleScreenshareStopped.bind(this));
+        this.signalSocket.on("streaming_stopped", this._handleStreamingStopped.bind(this));
+        this.signalSocket.on("disconnect", this._handleDisconnect.bind(this));
+        this.signalSocket.on("connect_error", this._handleDisconnect.bind(this));
+        this.signalSocketManager = this.signalSocket.getManager();
+        this.signalSocketManager.on("reconnect", this._handleReconnect.bind(this));
+        // Set up local media listeners
+        this.localMedia.addEventListener("camera_enabled", (e) => {
+            const { enabled } = e.detail;
+            this.signalSocket.emit("enable_video", { enabled });
+        });
+        this.localMedia.addEventListener("microphone_enabled", (e) => {
+            const { enabled } = e.detail;
+            this.signalSocket.emit("enable_audio", { enabled });
+        });
+        const webrtcProvider = {
+            getMediaConstraints: () => ({
+                audio: this.localMedia.isMicrophoneEnabled(),
+                video: this.localMedia.isCameraEnabled(),
+            }),
+            deferrable(clientId) {
+                return !clientId;
+            },
+        };
+        this.rtcManagerDispatcher = new RtcManagerDispatcher({
+            emitter: {
+                emit: this._handleRtcEvent.bind(this),
+            },
+            serverSocket: this.signalSocket,
+            webrtcProvider,
+            features: {
+                lowDataModeEnabled: false,
+                sfuServerOverrideHost: undefined,
+                turnServerOverrideHost: undefined,
+                useOnlyTURN: undefined,
+                vp9On: false,
+                h264On: false,
+                simulcastScreenshareOn: false,
+            },
+        });
+    }
+    get roomKey() {
+        return this._roomKey;
+    }
+    _handleNewChatMessage(message) {
+        this.dispatchEvent(new CustomEvent("chat_message", { detail: message }));
+    }
+    _handleCloudRecordingStarted({ client }) {
+        this.dispatchEvent(new CustomEvent("cloud_recording_started", {
+            detail: {
+                status: "recording",
+                startedAt: client.startedCloudRecordingAt
+                    ? new Date(client.startedCloudRecordingAt).getTime()
+                    : new Date().getTime(),
+            },
+        }));
+    }
+    _handleStreamingStarted() {
+        this.dispatchEvent(new CustomEvent("streaming_started", {
+            detail: {
+                status: "streaming",
+                // We don't have the streaming start time stored on the
+                // server, so we use the current time instead. This gives
+                // an invalid timestamp for "Client B" if "Client A" has
+                // been streaming for a while before "Client B" joins.
+                startedAt: new Date().getTime(),
+            },
+        }));
     }
     _handleNewClient({ client }) {
+        if (client.role.roleName === "recorder") {
+            this._handleCloudRecordingStarted({ client });
+        }
+        if (client.role.roleName === "streamer") {
+            this._handleStreamingStarted();
+        }
         if (NON_PERSON_ROLES.includes(client.role.roleName)) {
             return;
         }
@@ -5113,6 +5502,135 @@ class RoomConnection extends TypedEventTarget {
             detail: { participantId: remoteParticipant.id, displayName },
         }));
     }
+    _handleKnockHandled(payload) {
+        const { clientId, resolution } = payload;
+        // If the knocker is not the local participant, ignore the event
+        if (clientId !== this.selfId) {
+            return;
+        }
+        if (resolution === "accepted") {
+            this.roomConnectionStatus = "accepted";
+            this._roomKey = payload.metadata.roomKey;
+            this._joinRoom();
+        }
+        else if (resolution === "rejected") {
+            this.roomConnectionStatus = "rejected";
+            this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
+                detail: {
+                    roomConnectionStatus: this.roomConnectionStatus,
+                },
+            }));
+        }
+    }
+    _handleKnockerLeft(payload) {
+        const { clientId } = payload;
+        this.dispatchEvent(new CustomEvent("waiting_participant_left", {
+            detail: { participantId: clientId },
+        }));
+    }
+    _handleRoomJoined(event) {
+        const { error, isLocked, room, selfId } = event;
+        this.selfId = selfId;
+        if (error === "room_locked" && isLocked) {
+            this.roomConnectionStatus = "room_locked";
+            this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
+                detail: {
+                    roomConnectionStatus: this.roomConnectionStatus,
+                },
+            }));
+            return;
+        }
+        // Check if we have an error
+        // Check if it is a room joined error
+        // Set state to connect_failed_locked
+        // Set state to connect_failed_no_host
+        if (room) {
+            const { clients, knockers } = room;
+            const localClient = clients.find((c) => c.id === selfId);
+            if (!localClient)
+                throw new Error("Missing local client");
+            this.localParticipant = new LocalParticipant(Object.assign(Object.assign({}, localClient), { stream: this.localMedia.stream || undefined }));
+            const recorderClient = clients.find((c) => c.role.roleName === "recorder");
+            if (recorderClient) {
+                this._handleCloudRecordingStarted({ client: recorderClient });
+            }
+            const streamerClient = clients.find((c) => c.role.roleName === "streamer");
+            if (streamerClient) {
+                this._handleStreamingStarted();
+            }
+            this.remoteParticipants = clients
+                .filter((c) => c.id !== selfId)
+                .filter((c) => !NON_PERSON_ROLES.includes(c.role.roleName))
+                .map((c) => new RemoteParticipant(Object.assign(Object.assign({}, c), { newJoiner: false })));
+            this.roomConnectionStatus = "connected";
+            this.dispatchEvent(new CustomEvent("room_joined", {
+                detail: {
+                    localParticipant: this.localParticipant,
+                    remoteParticipants: this.remoteParticipants,
+                    waitingParticipants: knockers.map((knocker) => {
+                        return { id: knocker.clientId, displayName: knocker.displayName };
+                    }),
+                },
+            }));
+        }
+    }
+    _handleRoomKnocked(event) {
+        const { clientId, displayName } = event;
+        this.dispatchEvent(new CustomEvent("waiting_participant_joined", {
+            detail: { participantId: clientId, displayName },
+        }));
+    }
+    _handleReconnect() {
+        this.logger.log("Reconnected to signal socket");
+        this.signalSocket.emit("identify_device", { deviceCredentials: this._deviceCredentials });
+        this.signalSocket.once("device_identified", () => {
+            this._joinRoom();
+        });
+    }
+    _handleDisconnect() {
+        this.roomConnectionStatus = "disconnected";
+        this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
+            detail: {
+                roomConnectionStatus: this.roomConnectionStatus,
+            },
+        }));
+    }
+    _handleCloudRecordingStopped() {
+        this.dispatchEvent(new CustomEvent("cloud_recording_stopped"));
+    }
+    _handleStreamingStopped() {
+        this.dispatchEvent(new CustomEvent("streaming_stopped"));
+    }
+    _handleScreenshareStarted(screenshare) {
+        const { clientId: participantId, streamId: id, hasAudioTrack } = screenshare;
+        const remoteParticipant = this.remoteParticipants.find((p) => p.id === participantId);
+        if (!remoteParticipant) {
+            this.logger.log("WARN: Could not find participant for screenshare");
+            return;
+        }
+        const foundScreenshare = this.screenshares.find((s) => s.id === id);
+        if (foundScreenshare) {
+            this.logger.log("WARN: Screenshare already exists");
+            return;
+        }
+        remoteParticipant.addStream(id, "to_accept");
+        this._handleAcceptStreams([remoteParticipant]);
+        this.screenshares = [
+            ...this.screenshares,
+            { participantId, id, hasAudioTrack, stream: undefined, isLocal: false },
+        ];
+    }
+    _handleScreenshareStopped(screenshare) {
+        const { clientId: participantId, streamId: id } = screenshare;
+        const remoteParticipant = this.remoteParticipants.find((p) => p.id === participantId);
+        if (!remoteParticipant) {
+            this.logger.log("WARN: Could not find participant for screenshare");
+            return;
+        }
+        remoteParticipant.removeStream(id);
+        this.screenshares = this.screenshares.filter((s) => !(s.participantId === participantId && s.id === id));
+        this.dispatchEvent(new CustomEvent("screenshare_stopped", { detail: { participantId, id } }));
+    }
     _handleRtcEvent(eventName, data) {
         if (eventName === "rtc_manager_created") {
             return this._handleRtcManagerCreated(data);
@@ -5120,17 +5638,27 @@ class RoomConnection extends TypedEventTarget {
         else if (eventName === "stream_added") {
             return this._handleStreamAdded(data);
         }
+        else if (eventName === "rtc_manager_destroyed") {
+            return this._handleRtcManagerDestroyed();
+        }
         else {
             this.logger.log(`Unhandled RTC event ${eventName}`);
         }
     }
     _handleRtcManagerCreated({ rtcManager }) {
-        var _a, _b, _c;
+        var _a;
         this.rtcManager = rtcManager;
-        if (this.localStream) {
-            (_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.addNewStream("0", this.localStream, !((_b = this.localStream) === null || _b === void 0 ? void 0 : _b.getAudioTracks().find((t) => t.enabled)), !((_c = this.localStream) === null || _c === void 0 ? void 0 : _c.getVideoTracks().find((t) => t.enabled)));
+        this.localMedia.addRtcManager(rtcManager);
+        if (this.localMedia.stream) {
+            (_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.addNewStream("0", this.localMedia.stream, !this.localMedia.isMicrophoneEnabled(), !this.localMedia.isCameraEnabled());
+        }
+        if (this.remoteParticipants.length) {
+            this._handleAcceptStreams(this.remoteParticipants);
         }
     }
+    _handleRtcManagerDestroyed() {
+        this.rtcManager = undefined;
+    }
     _handleAcceptStreams(remoteParticipants) {
         var _a, _b;
         if (!this.rtcManager) {
@@ -5153,8 +5681,6 @@ class RoomConnection extends TypedEventTarget {
                 if (!newState) {
                     return;
                 }
-                // #endregion
-                // #region doAcceptStreams
                 if (newState === "to_accept" ||
                     (newState === "new_accept" && shouldAcceptNewClients) ||
                     (newState === "old_accept" && !shouldAcceptNewClients)) {
@@ -5178,155 +5704,118 @@ class RoomConnection extends TypedEventTarget {
                 else ;
                 // Update stream state
                 participant.updateStreamState(streamId, streamState.replace(/to_|new_|old_/, "done_"));
-                // #endregion
             });
         });
     }
-    _handleStreamAdded({ clientId, stream, streamId }) {
+    _handleStreamAdded({ clientId, stream, streamId, streamType }) {
         const remoteParticipant = this.remoteParticipants.find((p) => p.id === clientId);
         if (!remoteParticipant) {
             this.logger.log("WARN: Could not find participant for incoming stream");
             return;
         }
-        this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
+        const remoteParticipantStream = remoteParticipant.streams.find((s) => s.id === streamId);
+        if ((remoteParticipant.stream && remoteParticipant.stream.id === streamId) ||
+            (!remoteParticipant.stream && streamType === "webcam") ||
+            (!remoteParticipant.stream &&
+                !streamType &&
+                remoteParticipantStream &&
+                remoteParticipant.streams.indexOf(remoteParticipantStream) < 1)) {
+            this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
+            return;
+        }
+        // screenshare
+        this.dispatchEvent(new CustomEvent("screenshare_started", {
+            detail: { participantId: clientId, stream, id: streamId, isLocal: false },
+        }));
+    }
+    _joinRoom() {
+        this.signalSocket.emit("join_room", {
+            avatarUrl: null,
+            config: {
+                isAudioEnabled: this.localMedia.isMicrophoneEnabled(),
+                isVideoEnabled: this.localMedia.isCameraEnabled(),
+            },
+            deviceCapabilities: { canScreenshare: true },
+            displayName: this.displayName,
+            isCoLocated: false,
+            isDevicePermissionDenied: false,
+            kickFromOtherRooms: false,
+            organizationId: this.organizationId,
+            roomKey: this.roomKey,
+            roomName: this.roomName,
+            selfId: "",
+            userAgent: `browser-sdk:${sdkVersion }`,
+        });
     }
-    /**
-     * Public API
-     */
     join() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (["connected", "connecting"].includes(this.roomConnectionState)) {
-                console.warn(`Trying to join room state is ${this.roomConnectionState}`);
+            if (["connected", "connecting"].includes(this.roomConnectionStatus)) {
+                console.warn(`Trying to join when room state is already ${this.roomConnectionStatus}`);
                 return;
             }
             this.logger.log("Joining room");
-            this.roomConnectionState = "connecting";
-            if (!this.localStream && this.localMediaConstraints) {
-                const localStream = yield navigator.mediaDevices.getUserMedia(this.localMediaConstraints);
-                this.localStream = localStream;
-            }
+            this.signalSocket.connect();
+            this.roomConnectionStatus = "connecting";
+            this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
+                detail: {
+                    roomConnectionStatus: this.roomConnectionStatus,
+                },
+            }));
             const organization = yield this.organizationServiceCache.fetchOrganization();
             if (!organization) {
                 throw new Error("Invalid room url");
             }
-            // TODO: Get room permissions
-            // TODO: Get room features
-            const webrtcProvider = {
-                getMediaConstraints: () => {
-                    var _a, _b;
-                    return ({
-                        audio: !!((_a = this.localStream) === null || _a === void 0 ? void 0 : _a.getAudioTracks().find((t) => t.enabled)),
-                        video: !!((_b = this.localStream) === null || _b === void 0 ? void 0 : _b.getVideoTracks().find((t) => t.enabled)),
-                    });
-                },
-                deferrable(clientId) {
-                    return !clientId;
-                },
-            };
-            this.rtcManagerDispatcher = new RtcManagerDispatcher({
-                emitter: {
-                    emit: this._handleRtcEvent.bind(this),
-                },
-                serverSocket: this.signalSocket,
-                webrtcProvider,
-                features: {
-                    lowDataModeEnabled: false,
-                    sfuServerOverrideHost: undefined,
-                    turnServerOverrideHost: undefined,
-                    useOnlyTURN: undefined,
-                    vp9On: false,
-                    h264On: false,
-                    simulcastScreenshareOn: false,
-                },
-            });
+            this.organizationId = organization.organizationId;
+            if (this._ownsLocalMedia) {
+                yield this.localMedia.start();
+            }
             // Identify device on signal connection
-            const deviceCredentials = yield this.credentialsService.getCredentials();
-            // TODO: Handle connection and failed connection properly
-            setTimeout(() => {
-                this.logger.log("Connected to signal socket");
-                this.signalSocket.emit("identify_device", { deviceCredentials });
-            }, 2000);
+            this._deviceCredentials = yield this.credentialsService.getCredentials();
+            this.logger.log("Connected to signal socket");
+            this.signalSocket.emit("identify_device", { deviceCredentials: this._deviceCredentials });
             this.signalSocket.once("device_identified", () => {
-                var _a, _b;
-                this.signalSocket.emit("join_room", {
-                    avatarUrl: null,
-                    config: {
-                        isAudioEnabled: !!((_a = this.localStream) === null || _a === void 0 ? void 0 : _a.getAudioTracks().find((t) => t.enabled)),
-                        isVideoEnabled: !!((_b = this.localStream) === null || _b === void 0 ? void 0 : _b.getVideoTracks().find((t) => t.enabled)),
-                    },
-                    deviceCapabilities: { canScreenshare: true },
-                    displayName: this.displayName,
-                    isCoLocated: false,
-                    isDevicePermissionDenied: false,
-                    kickFromOtherRooms: false,
-                    organizationId: organization.organizationId,
-                    roomKey: null,
-                    roomName: this.roomUrl.pathname,
-                    selfId: "",
-                });
-            });
-            this.signalSocket.once("room_joined", (res) => {
-                const { selfId, room: { clients }, } = res;
-                const localClient = clients.find((c) => c.id === selfId);
-                if (!localClient)
-                    throw new Error("Missing local client");
-                this.localParticipant = new LocalParticipant(Object.assign(Object.assign({}, localClient), { stream: this.localStream }));
-                this.remoteParticipants = clients
-                    .filter((c) => c.id !== selfId)
-                    .map((c) => new RemoteParticipant(Object.assign(Object.assign({}, c), { newJoiner: false })));
-                // Accept remote streams if RTC manager has been initialized
-                if (this.rtcManager) {
-                    this._handleAcceptStreams(this.remoteParticipants);
-                }
-                this.roomConnectionState = "connected";
-                this.dispatchEvent(new CustomEvent("room_joined", {
-                    detail: {
-                        localParticipant: this.localParticipant,
-                        remoteParticipants: this.remoteParticipants,
-                    },
-                }));
+                this._joinRoom();
             });
         });
     }
-    leave() {
-        return new Promise((resolve) => {
-            if (!this.signalSocket) {
-                return resolve();
-            }
-            this.signalSocket.emit("leave_room");
-            const leaveTimeout = setTimeout(() => {
-                resolve();
-            }, 200);
-            this.signalSocket.once("room_left", () => {
-                clearTimeout(leaveTimeout);
-                this.signalSocket.disconnect();
-                resolve();
-            });
+    knock() {
+        this.roomConnectionStatus = "knocking";
+        this.dispatchEvent(new CustomEvent("room_connection_status_changed", {
+            detail: {
+                roomConnectionStatus: this.roomConnectionStatus,
+            },
+        }));
+        this.signalSocket.emit("knock_room", {
+            displayName: this.displayName,
+            imageUrl: null,
+            kickFromOtherRooms: true,
+            liveVideo: false,
+            organizationId: this.organizationId,
+            roomKey: this._roomKey,
+            roomName: this.roomName,
         });
     }
-    toggleCamera(enabled) {
-        var _a;
-        const localVideoTrack = (_a = this.localStream) === null || _a === void 0 ? void 0 : _a.getVideoTracks()[0];
-        if (!localVideoTrack) {
-            this.logger.log("Tried toggling non-existing video track");
-            return;
+    leave() {
+        this.roomConnectionStatus = "disconnecting";
+        if (this._ownsLocalMedia) {
+            this.localMedia.stop();
         }
-        // TODO: Do stopOrResumeVideo
-        const newValue = enabled !== null && enabled !== void 0 ? enabled : !localVideoTrack.enabled;
-        localVideoTrack.enabled = newValue;
-        this.signalSocket.emit("enable_video", { enabled: newValue });
-    }
-    toggleMicrophone(enabled) {
-        var _a;
-        const localAudioTrack = (_a = this.localStream) === null || _a === void 0 ? void 0 : _a.getAudioTracks()[0];
-        if (!localAudioTrack) {
-            this.logger.log("Tried toggling non-existing audio track");
+        if (this.rtcManager) {
+            this.localMedia.removeRtcManager(this.rtcManager);
+            this.rtcManager.disconnectAll();
+            this.rtcManager = undefined;
+        }
+        if (!this.signalSocket) {
             return;
         }
-        // TODO: Do stopOrResumeAudio
-        const newValue = enabled !== null && enabled !== void 0 ? enabled : !localAudioTrack.enabled;
-        localAudioTrack.enabled = newValue;
-        this.signalSocket.emit("enable_audio", { enabled: newValue });
+        this.signalSocket.emit("leave_room");
+        this.signalSocket.disconnect();
+        this.roomConnectionStatus = "disconnected";
+    }
+    sendChatMessage(text) {
+        this.signalSocket.emit("chat_message", {
+            text,
+        });
     }
     setDisplayName(displayName) {
         this.signalSocket.emit("send_client_metadata", {
@@ -5336,8 +5825,93 @@ class RoomConnection extends TypedEventTarget {
             },
         });
     }
+    acceptWaitingParticipant(participantId) {
+        this.signalSocket.emit("handle_knock", {
+            action: "accept",
+            clientId: participantId,
+            response: {},
+        });
+    }
+    rejectWaitingParticipant(participantId) {
+        this.signalSocket.emit("handle_knock", {
+            action: "reject",
+            clientId: participantId,
+            response: {},
+        });
+    }
+    updateStreamResolution({ streamId, width, height }) {
+        var _a, _b;
+        if (!streamId || !this.rtcManager) {
+            return;
+        }
+        // no need to report resolution for local participant
+        if (((_b = (_a = this.localParticipant) === null || _a === void 0 ? void 0 : _a.stream) === null || _b === void 0 ? void 0 : _b.id) === streamId) {
+            return;
+        }
+        const old = reportedStreamResolutions.get(streamId);
+        if (!old || old.width !== width || old.height !== height) {
+            this.rtcManager.updateStreamResolution(streamId, null, { width: width || 1, height: height || 1 });
+        }
+        reportedStreamResolutions.set(streamId, { width, height });
+    }
+    startScreenshare() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const screenshareStream = this.localMedia.screenshareStream || (yield this.localMedia.startScreenshare());
+            (_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.addNewStream(screenshareStream.id, screenshareStream, false, true);
+            this.screenshares = [
+                ...this.screenshares,
+                {
+                    participantId: this.selfId || "",
+                    id: screenshareStream.id,
+                    hasAudioTrack: false,
+                    stream: screenshareStream,
+                    isLocal: true,
+                },
+            ];
+            this.dispatchEvent(new CustomEvent("screenshare_started", {
+                detail: {
+                    participantId: this.selfId || "",
+                    id: screenshareStream.id,
+                    hasAudioTrack: false,
+                    stream: screenshareStream,
+                    isLocal: true,
+                },
+            }));
+        });
+    }
+    stopScreenshare() {
+        var _a;
+        if (this.localMedia.screenshareStream) {
+            const { id } = this.localMedia.screenshareStream;
+            (_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.removeStream(id, this.localMedia.screenshareStream, null);
+            this.screenshares = this.screenshares.filter((s) => s.id !== id);
+            this.dispatchEvent(new CustomEvent("screenshare_stopped", { detail: { participantId: this.selfId, id } }));
+            this.localMedia.stopScreenshare();
+        }
+    }
 }
 
+const initialState = {
+    chatMessages: [],
+    cloudRecording: {
+        status: "",
+        startedAt: null,
+    },
+    isJoining: false,
+    isStartingScreenshare: false,
+    joinError: null,
+    startScreenshareError: null,
+    mostRecentChatMessage: null,
+    remoteParticipants: [],
+    roomConnectionStatus: "",
+    screenshares: [],
+    streaming: {
+        status: "",
+        startedAt: null,
+    },
+    waitingParticipants: [],
+};
 function updateParticipant(remoteParticipants, participantId, updates) {
     const existingParticipant = remoteParticipants.find((p) => p.id === participantId);
     if (!existingParticipant) {
@@ -5350,10 +5924,31 @@ function updateParticipant(remoteParticipants, participantId, updates) {
         ...remoteParticipants.slice(index + 1),
     ];
 }
+function addScreenshare(screenshares, screenshare) {
+    const existingScreenshare = screenshares.find((ss) => ss.id === screenshare.id);
+    if (existingScreenshare) {
+        return screenshares;
+    }
+    return [...screenshares, screenshare];
+}
 function reducer(state, action) {
     switch (action.type) {
+        case "CHAT_MESSAGE":
+            return Object.assign(Object.assign({}, state), { chatMessages: [...state.chatMessages, action.payload], mostRecentChatMessage: action.payload });
+        case "CLOUD_RECORDING_STARTED":
+            return Object.assign(Object.assign({}, state), { cloudRecording: {
+                    status: action.payload.status,
+                    startedAt: action.payload.startedAt,
+                } });
+        case "CLOUD_RECORDING_STOPPED":
+            return Object.assign(Object.assign({}, state), { cloudRecording: {
+                    status: "",
+                    startedAt: null,
+                } });
         case "ROOM_JOINED":
-            return Object.assign(Object.assign({}, state), { localParticipant: action.payload.localParticipant, remoteParticipants: action.payload.remoteParticipants, roomConnectionStatus: "connected" });
+            return Object.assign(Object.assign({}, state), { localParticipant: action.payload.localParticipant, remoteParticipants: action.payload.remoteParticipants, waitingParticipants: action.payload.waitingParticipants, roomConnectionStatus: "connected" });
+        case "ROOM_CONNECTION_STATUS_CHANGED":
+            return Object.assign(Object.assign({}, state), { roomConnectionStatus: action.payload.roomConnectionStatus });
         case "PARTICIPANT_AUDIO_ENABLED":
             return Object.assign(Object.assign({}, state), { remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
                     isAudioEnabled: action.payload.isAudioEnabled,
@@ -5378,74 +5973,199 @@ function reducer(state, action) {
             if (!state.localParticipant)
                 return state;
             return Object.assign(Object.assign({}, state), { localParticipant: Object.assign(Object.assign({}, state.localParticipant), { displayName: action.payload.displayName }) });
+        case "SCREENSHARE_STARTED":
+            return Object.assign(Object.assign({}, state), { screenshares: addScreenshare(state.screenshares, {
+                    participantId: action.payload.participantId,
+                    id: action.payload.id,
+                    hasAudioTrack: action.payload.hasAudioTrack,
+                    stream: action.payload.stream,
+                    isLocal: action.payload.isLocal,
+                }) });
+        case "SCREENSHARE_STOPPED":
+            return Object.assign(Object.assign({}, state), { screenshares: state.screenshares.filter((ss) => ss.id !== action.payload.id) });
+        case "LOCAL_SCREENSHARE_START_ERROR":
+            return Object.assign(Object.assign({}, state), { isStartingScreenshare: false, startScreenshareError: action.payload });
+        case "LOCAL_SCREENSHARE_STARTING":
+            return Object.assign(Object.assign({}, state), { isStartingScreenshare: true });
+        case "LOCAL_SCREENSHARE_STOPPED":
+            return Object.assign(Object.assign({}, state), { screenshares: state.screenshares.filter((ss) => !ss.isLocal) });
+        case "STREAMING_STARTED":
+            return Object.assign(Object.assign({}, state), { streaming: {
+                    status: action.payload.status,
+                    startedAt: action.payload.startedAt,
+                } });
+        case "STREAMING_STOPPED":
+            return Object.assign(Object.assign({}, state), { streaming: {
+                    status: "",
+                    startedAt: null,
+                } });
+        case "WAITING_PARTICIPANT_JOINED":
+            return Object.assign(Object.assign({}, state), { waitingParticipants: [
+                    ...state.waitingParticipants,
+                    { id: action.payload.participantId, displayName: action.payload.displayName },
+                ] });
+        case "WAITING_PARTICIPANT_LEFT":
+            return Object.assign(Object.assign({}, state), { waitingParticipants: state.waitingParticipants.filter((wp) => wp.id !== action.payload.participantId) });
         default:
             throw state;
     }
-}
-
+}
 function useRoomConnection(roomUrl, roomConnectionOptions) {
-    const [roomConnection, setRoomConnection] = useState(null);
-    const [state, dispatch] = useReducer(reducer, { remoteParticipants: [] });
-    useEffect(() => {
-        setRoomConnection(new RoomConnection(roomUrl, roomConnectionOptions));
-    }, [roomUrl]);
-    useEffect(() => {
-        if (!roomConnection) {
-            return;
-        }
-        roomConnection.addEventListener("participant_audio_enabled", (e) => {
+    const [roomConnection] = useState(() => {
+        var _a;
+        return new RoomConnection(roomUrl, Object.assign(Object.assign({}, roomConnectionOptions), { localMedia: ((_a = roomConnectionOptions === null || roomConnectionOptions === void 0 ? void 0 : roomConnectionOptions.localMedia) === null || _a === void 0 ? void 0 : _a._ref) || undefined }));
+    });
+    const [state, dispatch] = useReducer(reducer, initialState);
+    function createEventListener(eventName, listener, options) {
+        return {
+            eventName,
+            listener,
+            options,
+        };
+    }
+    const eventListeners = React.useMemo(() => [
+        createEventListener("chat_message", (e) => {
+            dispatch({ type: "CHAT_MESSAGE", payload: e.detail });
+        }),
+        createEventListener("cloud_recording_started", (e) => {
+            const { status, startedAt } = e.detail;
+            dispatch({ type: "CLOUD_RECORDING_STARTED", payload: { status, startedAt } });
+        }),
+        createEventListener("cloud_recording_stopped", () => {
+            dispatch({ type: "CLOUD_RECORDING_STOPPED" });
+        }),
+        createEventListener("participant_audio_enabled", (e) => {
             const { participantId, isAudioEnabled } = e.detail;
             dispatch({ type: "PARTICIPANT_AUDIO_ENABLED", payload: { participantId, isAudioEnabled } });
-        });
-        roomConnection.addEventListener("participant_joined", (e) => {
+        }),
+        createEventListener("participant_joined", (e) => {
             const { remoteParticipant } = e.detail;
             dispatch({ type: "PARTICIPANT_JOINED", payload: { paritipant: remoteParticipant } });
-        });
-        roomConnection.addEventListener("participant_left", (e) => {
+        }),
+        createEventListener("participant_left", (e) => {
             const { participantId } = e.detail;
             dispatch({ type: "PARTICIPANT_LEFT", payload: { participantId } });
-        });
-        roomConnection.addEventListener("participant_stream_added", (e) => {
+        }),
+        createEventListener("participant_metadata_changed", (e) => {
+            const { participantId, displayName } = e.detail;
+            dispatch({ type: "PARTICIPANT_METADATA_CHANGED", payload: { participantId, displayName } });
+        }),
+        createEventListener("participant_stream_added", (e) => {
             const { participantId, stream } = e.detail;
             dispatch({ type: "PARTICIPANT_STREAM_ADDED", payload: { participantId, stream } });
-        });
-        roomConnection.addEventListener("room_joined", (e) => {
-            const { localParticipant, remoteParticipants } = e.detail;
-            dispatch({ type: "ROOM_JOINED", payload: { localParticipant, remoteParticipants } });
-        });
-        roomConnection.addEventListener("participant_video_enabled", (e) => {
+        }),
+        createEventListener("participant_video_enabled", (e) => {
             const { participantId, isVideoEnabled } = e.detail;
             dispatch({ type: "PARTICIPANT_VIDEO_ENABLED", payload: { participantId, isVideoEnabled } });
-        });
-        roomConnection.addEventListener("participant_metadata_changed", (e) => {
+        }),
+        createEventListener("room_connection_status_changed", (e) => {
+            const { roomConnectionStatus } = e.detail;
+            dispatch({
+                type: "ROOM_CONNECTION_STATUS_CHANGED",
+                payload: { roomConnectionStatus },
+            });
+        }),
+        createEventListener("room_joined", (e) => {
+            const { localParticipant, remoteParticipants, waitingParticipants } = e.detail;
+            dispatch({
+                type: "ROOM_JOINED",
+                payload: { localParticipant, remoteParticipants, waitingParticipants },
+            });
+        }),
+        createEventListener("screenshare_started", (e) => {
+            const { participantId, stream, id, hasAudioTrack, isLocal } = e.detail;
+            dispatch({
+                type: "SCREENSHARE_STARTED",
+                payload: { participantId, stream, id, hasAudioTrack, isLocal },
+            });
+        }),
+        createEventListener("screenshare_stopped", (e) => {
+            const { participantId, id } = e.detail;
+            dispatch({
+                type: "SCREENSHARE_STOPPED",
+                payload: { participantId, id },
+            });
+        }),
+        createEventListener("streaming_started", (e) => {
+            const { status, startedAt } = e.detail;
+            dispatch({ type: "STREAMING_STARTED", payload: { status, startedAt } });
+        }),
+        createEventListener("streaming_stopped", () => {
+            dispatch({ type: "STREAMING_STOPPED" });
+        }),
+        createEventListener("waiting_participant_joined", (e) => {
             const { participantId, displayName } = e.detail;
-            dispatch({ type: "PARTICIPANT_METADATA_CHANGED", payload: { participantId, displayName } });
+            dispatch({
+                type: "WAITING_PARTICIPANT_JOINED",
+                payload: { participantId, displayName },
+            });
+        }),
+    ], []);
+    useEffect(() => {
+        eventListeners.forEach(({ eventName, listener }) => {
+            roomConnection.addEventListener(eventName, listener);
         });
         roomConnection.join();
         return () => {
+            eventListeners.forEach(({ eventName, listener }) => {
+                roomConnection.removeEventListener(eventName, listener);
+            });
             roomConnection.leave();
         };
-    }, [roomConnection]);
-    return [
+    }, []);
+    return {
         state,
-        {
-            toggleCamera: (enabled) => {
-                roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.toggleCamera(enabled);
+        actions: {
+            knock: () => {
+                roomConnection.knock();
             },
-            toggleMicrophone: (enabled) => {
-                roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.toggleMicrophone(enabled);
+            sendChatMessage: (text) => {
+                roomConnection.sendChatMessage(text);
             },
             setDisplayName: (displayName) => {
-                roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.setDisplayName(displayName);
+                roomConnection.setDisplayName(displayName);
                 dispatch({ type: "LOCAL_CLIENT_DISPLAY_NAME_CHANGED", payload: { displayName } });
             },
+            toggleCamera: (enabled) => {
+                roomConnection.localMedia.toggleCameraEnabled(enabled);
+            },
+            toggleMicrophone: (enabled) => {
+                roomConnection.localMedia.toggleMichrophoneEnabled(enabled);
+            },
+            acceptWaitingParticipant: (participantId) => {
+                roomConnection.acceptWaitingParticipant(participantId);
+            },
+            rejectWaitingParticipant: (participantId) => {
+                roomConnection.rejectWaitingParticipant(participantId);
+            },
+            startScreenshare: () => {
+                dispatch({ type: "LOCAL_SCREENSHARE_STARTING" });
+                try {
+                    roomConnection.startScreenshare();
+                }
+                catch (error) {
+                    dispatch({ type: "LOCAL_SCREENSHARE_START_ERROR", payload: error });
+                }
+            },
+            stopScreenshare: () => {
+                roomConnection.stopScreenshare();
+            },
         },
-        {
-            VideoView: VideoElement,
+        components: {
+            VideoView: (props) => React.createElement(VideoView, Object.assign({}, props, {
+                onResize: ({ stream, width, height, }) => {
+                    roomConnection.updateStreamResolution({
+                        streamId: stream.id,
+                        width,
+                        height,
+                    });
+                },
+            })),
         },
-    ];
+        _ref: roomConnection,
+    };
 }
 
-const sdkVersion = "2.0.0-alpha2";
+const sdkVersion = "2.0.0-alpha21";
 
-export { sdkVersion, useRoomConnection };
+export { VideoView, sdkVersion, useLocalMedia, useRoomConnection };