@whereby.com/browser-sdk 2.0.0-alpha1 → 2.0.0-alpha11

package/dist/lib.esm.js

@@ -1,6 +1,6 @@
 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 adapter from 'webrtc-adapter';
 import io from 'socket.io-client';
 import SDPUtils from 'sdp';
@@ -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,290 @@ 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-alpha1", 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-alpha11", 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;
+var VideoView = (_a) => {
+    var { muted, stream } = _a, rest = __rest(_a, ["muted", "stream"]);
+    const videoEl = useRef(null);
+    useEffect(() => {
+        if (!videoEl.current) {
+            return;
         }
-    }, []);
-    return React.createElement("video", { ref: videoEl, autoPlay: true, playsInline: true, style: style });
+        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 = [];
+        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 } }));
+    }
+    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 +522,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 +583,10 @@ class ServerSocket {
         );
     }
 
+    getManager() {
+        return this._socket.io;
+    }
+
     isConnecting() {
         return this._socket && this._socket.connecting;
     }
@@ -1964,10 +2220,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 +2233,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);
@@ -1996,7 +2253,9 @@ class VegaConnection extends EventEmitter {
     }
 
     close() {
-        this.socket?.close();
+        if (!this.socket) return;
+
+        this.socket.close();
     }
 
     _onOpen() {
@@ -2008,11 +2267,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);
         }
     }
@@ -2119,7 +2382,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 +2391,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 +2413,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;
     }
@@ -5005,12 +5268,12 @@ class LocalParticipant extends RoomParticipant {
     }
 }
 
-const API_BASE_URL = "https://api.appearin.net";
+const API_BASE_URL = "https://api.whereby.dev";
 const SIGNAL_BASE_URL = "wss://signal.appearin.net";
 const NON_PERSON_ROLES = ["recorder", "streamer"];
 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 = {
         host: SOCKET_HOST,
@@ -5018,6 +5281,7 @@ function createSocket() {
         reconnectionDelay: 5000,
         reconnectionDelayMax: 30000,
         timeout: 10000,
+        withCredentials: true,
     };
     return new ServerSocket(SOCKET_HOST, socketConf);
 }
@@ -5026,12 +5290,17 @@ 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._ownsLocalMedia = false;
+        this.organizationId = "";
+        this.roomConnectionStatus = "";
         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 +5308,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,10 +5343,30 @@ 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));
+        // 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 });
+        });
+    }
+    get roomKey() {
+        return this._roomKey;
+    }
+    _handleNewChatMessage(message) {
+        this.dispatchEvent(new CustomEvent("chat_message", { detail: message }));
     }
     _handleNewClient({ client }) {
         if (NON_PERSON_ROLES.includes(client.role.roleName)) {
@@ -5113,6 +5412,70 @@ class RoomConnection extends TypedEventTarget {
             detail: { participantId: remoteParticipant.id, displayName },
         }));
     }
+    _handleKnockHandled(payload) {
+        const { resolution } = payload;
+        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;
+        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 }));
+            this.remoteParticipants = clients
+                .filter((c) => c.id !== selfId)
+                .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 },
+        }));
+    }
     _handleRtcEvent(eventName, data) {
         if (eventName === "rtc_manager_created") {
             return this._handleRtcManagerCreated(data);
@@ -5125,10 +5488,14 @@ class RoomConnection extends TypedEventTarget {
         }
     }
     _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);
         }
     }
     _handleAcceptStreams(remoteParticipants) {
@@ -5153,8 +5520,6 @@ class RoomConnection extends TypedEventTarget {
                 if (!newState) {
                     return;
                 }
-                // #endregion
-                // #region doAcceptStreams
                 if (newState === "to_accept" ||
                     (newState === "new_accept" && shouldAcceptNewClients) ||
                     (newState === "old_accept" && !shouldAcceptNewClients)) {
@@ -5178,7 +5543,6 @@ class RoomConnection extends TypedEventTarget {
                 else ;
                 // Update stream state
                 participant.updateStreamState(streamId, streamState.replace(/to_|new_|old_/, "done_"));
-                // #endregion
             });
         });
     }
@@ -5190,35 +5554,51 @@ class RoomConnection extends TypedEventTarget {
         }
         this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
     }
-    /**
-     * Public API
-     */
+    _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 }`,
+        });
+    }
     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.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
+            this.organizationId = organization.organizationId;
+            if (this._ownsLocalMedia) {
+                yield this.localMedia.start();
+            }
             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)),
-                    });
-                },
+                getMediaConstraints: () => ({
+                    audio: this.localMedia.isMicrophoneEnabled(),
+                    video: this.localMedia.isCameraEnabled(),
+                }),
                 deferrable(clientId) {
                     return !clientId;
                 },
@@ -5241,55 +5621,40 @@ class RoomConnection extends TypedEventTarget {
             });
             // 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.logger.log("Connected to signal socket");
+            this.signalSocket.emit("identify_device", { 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();
             });
         });
     }
+    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,
+        });
+    }
     leave() {
         return new Promise((resolve) => {
+            if (this._ownsLocalMedia) {
+                this.localMedia.stop();
+            }
+            if (this.rtcManager) {
+                this.localMedia.removeRtcManager(this.rtcManager);
+                this.rtcManager.disconnectAll();
+                this.rtcManager = undefined;
+            }
             if (!this.signalSocket) {
                 return resolve();
             }
@@ -5304,29 +5669,10 @@ class RoomConnection extends TypedEventTarget {
             });
         });
     }
-    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;
-        }
-        // 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");
-            return;
-        }
-        // TODO: Do stopOrResumeAudio
-        const newValue = enabled !== null && enabled !== void 0 ? enabled : !localAudioTrack.enabled;
-        localAudioTrack.enabled = newValue;
-        this.signalSocket.emit("enable_audio", { enabled: newValue });
+    sendChatMessage(text) {
+        this.signalSocket.emit("chat_message", {
+            text,
+        });
     }
     setDisplayName(displayName) {
         this.signalSocket.emit("send_client_metadata", {
@@ -5336,8 +5682,31 @@ 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: {},
+        });
+    }
 }
 
+const initialState = {
+    chatMessages: [],
+    roomConnectionStatus: "",
+    isJoining: false,
+    joinError: null,
+    mostRecentChatMessage: null,
+    remoteParticipants: [],
+    waitingParticipants: [],
+};
 function updateParticipant(remoteParticipants, participantId, updates) {
     const existingParticipant = remoteParticipants.find((p) => p.id === participantId);
     if (!existingParticipant) {
@@ -5352,8 +5721,12 @@ function updateParticipant(remoteParticipants, participantId, updates) {
 }
 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 "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,21 +5751,28 @@ 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 "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]);
+    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);
     useEffect(() => {
-        if (!roomConnection) {
-            return;
-        }
+        roomConnection.addEventListener("chat_message", (e) => {
+            const chatMessage = e.detail;
+            dispatch({ type: "CHAT_MESSAGE", payload: chatMessage });
+        });
         roomConnection.addEventListener("participant_audio_enabled", (e) => {
             const { participantId, isAudioEnabled } = e.detail;
             dispatch({ type: "PARTICIPANT_AUDIO_ENABLED", payload: { participantId, isAudioEnabled } });
@@ -5409,9 +5789,13 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             const { participantId, stream } = e.detail;
             dispatch({ type: "PARTICIPANT_STREAM_ADDED", payload: { participantId, stream } });
         });
+        roomConnection.addEventListener("room_connection_status_changed", (e) => {
+            const { roomConnectionStatus } = e.detail;
+            dispatch({ type: "ROOM_CONNECTION_STATUS_CHANGED", payload: { roomConnectionStatus } });
+        });
         roomConnection.addEventListener("room_joined", (e) => {
-            const { localParticipant, remoteParticipants } = e.detail;
-            dispatch({ type: "ROOM_JOINED", payload: { localParticipant, remoteParticipants } });
+            const { localParticipant, remoteParticipants, waitingParticipants } = e.detail;
+            dispatch({ type: "ROOM_JOINED", payload: { localParticipant, remoteParticipants, waitingParticipants } });
         });
         roomConnection.addEventListener("participant_video_enabled", (e) => {
             const { participantId, isVideoEnabled } = e.detail;
@@ -5421,31 +5805,52 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             const { participantId, displayName } = e.detail;
             dispatch({ type: "PARTICIPANT_METADATA_CHANGED", payload: { participantId, displayName } });
         });
+        roomConnection.addEventListener("waiting_participant_joined", (e) => {
+            const { participantId, displayName } = e.detail;
+            dispatch({ type: "WAITING_PARTICIPANT_JOINED", payload: { participantId, displayName } });
+        });
+        roomConnection.addEventListener("waiting_participant_left", (e) => {
+            const { participantId } = e.detail;
+            dispatch({ type: "WAITING_PARTICIPANT_LEFT", payload: { participantId } });
+        });
         roomConnection.join();
         return () => {
             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);
+            },
         },
-        {
-            VideoView: VideoElement,
+        components: {
+            VideoView,
         },
-    ];
+        _ref: roomConnection,
+    };
 }
 
-const sdkVersion = "2.0.0-alpha1";
+const sdkVersion = "2.0.0-alpha11";
 
-export { sdkVersion, useRoomConnection };
+export { VideoView, sdkVersion, useLocalMedia, useRoomConnection };