@whereby.com/browser-sdk 2.0.0-alpha5 → 2.0.0-alpha7

package/dist/lib.esm.js

@@ -115,7 +115,7 @@ define("WherebyEmbed", {
         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-alpha5", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
+        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha7", 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") {
@@ -150,6 +150,242 @@ var VideoView = (_a) => {
     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",
@@ -280,10 +516,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
@@ -341,6 +577,10 @@ class ServerSocket {
         );
     }
 
+    getManager() {
+        return this._socket.io;
+    }
+
     isConnecting() {
         return this._socket && this._socket.connecting;
     }
@@ -1974,10 +2214,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
@@ -1986,7 +2227,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);
@@ -2006,7 +2247,9 @@ class VegaConnection extends EventEmitter {
     }
 
     close() {
-        this.socket?.close();
+        if (!this.socket) return;
+
+        this.socket.close();
     }
 
     _onOpen() {
@@ -2018,11 +2261,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);
         }
     }
@@ -2129,7 +2376,7 @@ const VIDEO_SETTINGS_VP9 = {
     codecOptions: {
         videoGoogleStartBitrate: 500,
     },
-    encodings: [{ scalabilityMode: "S3T3_KEY", networkPriority: "high" }],
+    encodings: [{ scalabilityMode: "L3T2_KEY", networkPriority: "high" }],
 };
 
 const SCREEN_SHARE_SETTINGS = {
@@ -2138,13 +2385,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) => {
@@ -2160,8 +2407,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;
     }
@@ -5020,7 +5267,7 @@ 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,
@@ -5036,11 +5283,12 @@ const noop = () => {
 };
 const TypedEventTarget = EventTarget;
 class RoomConnection extends TypedEventTarget {
-    constructor(roomUrl, { displayName, localMediaConstraints, localStream, logger }) {
+    constructor(roomUrl, { displayName, localMediaConstraints, logger, localMedia }) {
         super();
         this.localParticipant = null;
         this.remoteParticipants = [];
         this.roomConnectionState = "";
+        this._ownsLocalMedia = false;
         this.roomUrl = new URL(roomUrl); // Throw if invalid Whereby room url
         this.logger = logger || {
             debug: noop,
@@ -5049,10 +5297,19 @@ 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");
+        }
         this.credentialsService = CredentialsService.create({ baseUrl: API_BASE_URL });
         this.apiClient = new ApiClient({
             fetchDeviceCredentials: this.credentialsService.getCredentials.bind(this.credentialsService),
@@ -5078,6 +5335,15 @@ class RoomConnection extends TypedEventTarget {
         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));
+        // 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 });
+        });
     }
     _handleNewClient({ client }) {
         if (NON_PERSON_ROLES.includes(client.role.roleName)) {
@@ -5135,10 +5401,11 @@ 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());
         }
     }
     _handleAcceptStreams(remoteParticipants) {
@@ -5163,8 +5430,6 @@ class RoomConnection extends TypedEventTarget {
                 if (!newState) {
                     return;
                 }
-                // #endregion
-                // #region doAcceptStreams
                 if (newState === "to_accept" ||
                     (newState === "new_accept" && shouldAcceptNewClients) ||
                     (newState === "old_accept" && !shouldAcceptNewClients)) {
@@ -5188,7 +5453,6 @@ class RoomConnection extends TypedEventTarget {
                 else ;
                 // Update stream state
                 participant.updateStreamState(streamId, streamState.replace(/to_|new_|old_/, "done_"));
-                // #endregion
             });
         });
     }
@@ -5200,9 +5464,6 @@ class RoomConnection extends TypedEventTarget {
         }
         this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
     }
-    /**
-     * Public API
-     */
     join() {
         return __awaiter(this, void 0, void 0, function* () {
             if (["connected", "connecting"].includes(this.roomConnectionState)) {
@@ -5211,24 +5472,14 @@ class RoomConnection extends TypedEventTarget {
             }
             this.logger.log("Joining room");
             this.roomConnectionState = "connecting";
-            if (!this.localStream && this.localMediaConstraints) {
-                const localStream = yield navigator.mediaDevices.getUserMedia(this.localMediaConstraints);
-                this.localStream = localStream;
-            }
-            const organization = yield this.organizationServiceCache.fetchOrganization();
-            if (!organization) {
-                throw new Error("Invalid room url");
+            if (this._ownsLocalMedia) {
+                yield this.localMedia.start();
             }
-            // 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)),
-                    });
-                },
+                getMediaConstraints: () => ({
+                    audio: this.localMedia.isMicrophoneEnabled(),
+                    video: this.localMedia.isCameraEnabled(),
+                }),
                 deferrable(clientId) {
                     return !clientId;
                 },
@@ -5249,20 +5500,24 @@ class RoomConnection extends TypedEventTarget {
                     simulcastScreenshareOn: false,
                 },
             });
+            const organization = yield this.organizationServiceCache.fetchOrganization();
+            if (!organization) {
+                throw new Error("Invalid room url");
+            }
             // Identify device on signal connection
             const deviceCredentials = yield this.credentialsService.getCredentials();
+            this.signalSocket.connect();
             // TODO: Handle connection and failed connection properly
-            setTimeout(() => {
+            this.signalSocket.on("connect", () => {
                 this.logger.log("Connected to signal socket");
                 this.signalSocket.emit("identify_device", { deviceCredentials });
-            }, 2000);
+            });
             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)),
+                        isAudioEnabled: this.localMedia.isMicrophoneEnabled(),
+                        isVideoEnabled: this.localMedia.isCameraEnabled(),
                     },
                     deviceCapabilities: { canScreenshare: true },
                     displayName: this.displayName,
@@ -5273,7 +5528,7 @@ class RoomConnection extends TypedEventTarget {
                     roomKey: null,
                     roomName: this.roomUrl.pathname,
                     selfId: "",
-                    userAgent: `browser-sdk:${sdkVersion }`
+                    userAgent: `browser-sdk:${sdkVersion }`,
                 });
             });
             this.signalSocket.once("room_joined", (res) => {
@@ -5281,7 +5536,7 @@ class RoomConnection extends TypedEventTarget {
                 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.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 })));
@@ -5301,6 +5556,14 @@ class RoomConnection extends TypedEventTarget {
     }
     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();
             }
@@ -5315,30 +5578,6 @@ 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 });
-    }
     setDisplayName(displayName) {
         this.signalSocket.emit("send_client_metadata", {
             type: "UserData",
@@ -5349,6 +5588,11 @@ class RoomConnection extends TypedEventTarget {
     }
 }
 
+const initialState = {
+    isJoining: false,
+    joinError: null,
+    remoteParticipants: [],
+};
 function updateParticipant(remoteParticipants, participantId, updates) {
     const existingParticipant = remoteParticipants.find((p) => p.id === participantId);
     if (!existingParticipant) {
@@ -5392,18 +5636,14 @@ function reducer(state, action) {
         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("participant_audio_enabled", (e) => {
             const { participantId, isAudioEnabled } = e.detail;
             dispatch({ type: "PARTICIPANT_AUDIO_ENABLED", payload: { participantId, isAudioEnabled } });
@@ -5436,27 +5676,28 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
         return () => {
             roomConnection.leave();
         };
-    }, [roomConnection]);
-    return [
+    }, []);
+    return {
         state,
-        {
+        actions: {
             toggleCamera: (enabled) => {
-                roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.toggleCamera(enabled);
+                roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.localMedia.toggleCameraEnabled(enabled);
             },
             toggleMicrophone: (enabled) => {
-                roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.toggleMicrophone(enabled);
+                roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.localMedia.toggleMichrophoneEnabled(enabled);
             },
             setDisplayName: (displayName) => {
                 roomConnection === null || roomConnection === void 0 ? void 0 : roomConnection.setDisplayName(displayName);
                 dispatch({ type: "LOCAL_CLIENT_DISPLAY_NAME_CHANGED", payload: { displayName } });
             },
         },
-        {
+        components: {
             VideoView,
         },
-    ];
+        _ref: roomConnection,
+    };
 }
 
-const sdkVersion = "2.0.0-alpha5";
+const sdkVersion = "2.0.0-alpha7";
 
-export { sdkVersion, useRoomConnection };
+export { VideoView, sdkVersion, useLocalMedia, useRoomConnection };