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

package/README.md

@@ -20,6 +20,42 @@ yarn add @whereby.com/browser-sdk
 
 ### React hooks
 
+#### useLocalMedia
+The `useLocalMedia` hook enables preview and selection of local devices (camera & microphone) prior to establishing a connection within a Whereby room. Use this hook to build rich pre-call
+experiences, allowing end users to confirm their device selection up-front. This hook works seamlessly with the `useRoomConnection` hook described below.
+
+```
+import { useLocalMedia, VideoView } from “@whereby.com/browser-sdk”;
+
+function MyPreCallUX() {
+    const localMedia = useLocalMedia({ audio: false, video: true });
+
+    const { currentCameraDeviceId, cameraDevices, localStream } = localMedia.state;
+    const { setCameraDevice, toggleCameraEnabled } = localMedia.actions;
+    const { VideoView } = components;
+
+    return <div className="preCallView">
+        { /* Render any UI, making use of state */ }
+        { cameraDevices.map((d) => (
+            <p
+                key={d.deviceId}
+                onClick={() => {
+                    if (d.deviceId !== currentCameraDeviceId) {
+                        setCameraDevice(d.deviceId);
+                    }
+                }}
+            >
+                {d.label}
+            </p>
+        )) }
+        <VideoView muted stream={localStream} />
+    </div>;
+}
+
+```
+
+
+#### useRoomConnection
 The `useRoomConnection` hook provides a way to connect participants in a given room, subscribe to state updates, and perform actions on the connection, like toggling camera or microphone.
 
 ```
@@ -29,10 +65,11 @@ function MyCallUX( { roomUrl, localStream }) {
     const [state, actions, components ] = useRoomConnection(
         "<room_url>"
         {
-                localMediaConstraints: {
+            localMedia: null, // Supply localMedia from `useLocalMedia` hook, or constraints below
+            localMediaConstraints: {
                 audio: true,
                 video: true,
-            },
+            }
         }
     );
 

package/dist/lib.cjs.js

@@ -130,7 +130,7 @@ heresy.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-alpha6", 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") {
@@ -165,6 +165,242 @@ var VideoView = (_a) => {
     return React__default["default"].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 tslib.__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 tslib.__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 tslib.__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 tslib.__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 = {
+    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] = React.useState(() => new LocalMedia(constraints));
+    const [state, dispatch] = React.useReducer(reducer$1, initialState);
+    React.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 = () => tslib.__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) => tslib.__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) => tslib.__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",
@@ -5051,11 +5287,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,
@@ -5064,10 +5301,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),
@@ -5093,6 +5339,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)) {
@@ -5150,10 +5405,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) {
@@ -5178,8 +5434,6 @@ class RoomConnection extends TypedEventTarget {
                 if (!newState) {
                     return;
                 }
-                // #endregion
-                // #region doAcceptStreams
                 if (newState === "to_accept" ||
                     (newState === "new_accept" && shouldAcceptNewClients) ||
                     (newState === "old_accept" && !shouldAcceptNewClients)) {
@@ -5203,7 +5457,6 @@ class RoomConnection extends TypedEventTarget {
                 else ;
                 // Update stream state
                 participant.updateStreamState(streamId, streamState.replace(/to_|new_|old_/, "done_"));
-                // #endregion
             });
         });
     }
@@ -5215,9 +5468,6 @@ class RoomConnection extends TypedEventTarget {
         }
         this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
     }
-    /**
-     * Public API
-     */
     join() {
         return tslib.__awaiter(this, void 0, void 0, function* () {
             if (["connected", "connecting"].includes(this.roomConnectionState)) {
@@ -5226,24 +5476,16 @@ 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;
                 },
@@ -5264,6 +5506,10 @@ 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();
             // TODO: Handle connection and failed connection properly
@@ -5272,12 +5518,11 @@ class RoomConnection extends TypedEventTarget {
                 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,
@@ -5288,7 +5533,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) => {
@@ -5296,7 +5541,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 })));
@@ -5316,6 +5561,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();
             }
@@ -5330,30 +5583,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",
@@ -5413,7 +5642,8 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     const [roomConnection, setRoomConnection] = React.useState(null);
     const [state, dispatch] = React.useReducer(reducer, { remoteParticipants: [] });
     React.useEffect(() => {
-        setRoomConnection(new RoomConnection(roomUrl, roomConnectionOptions));
+        var _a;
+        setRoomConnection(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 })));
     }, [roomUrl]);
     React.useEffect(() => {
         if (!roomConnection) {
@@ -5456,10 +5686,10 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
         state,
         {
             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);
@@ -5472,7 +5702,9 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     ];
 }
 
-const sdkVersion = "2.0.0-alpha5";
+const sdkVersion = "2.0.0-alpha6";
 
+exports.VideoView = VideoView;
 exports.sdkVersion = sdkVersion;
+exports.useLocalMedia = useLocalMedia;
 exports.useRoomConnection = useRoomConnection;