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

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-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") {
@@ -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 = {
+    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);
+    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",
@@ -5036,11 +5272,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 +5286,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 +5324,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 +5390,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 +5419,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 +5442,6 @@ class RoomConnection extends TypedEventTarget {
                 else ;
                 // Update stream state
                 participant.updateStreamState(streamId, streamState.replace(/to_|new_|old_/, "done_"));
-                // #endregion
             });
         });
     }
@@ -5200,9 +5453,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 +5461,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;
                 },
@@ -5249,6 +5491,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
@@ -5257,12 +5503,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,
@@ -5273,7 +5518,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 +5526,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 +5546,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 +5568,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",
@@ -5398,7 +5627,8 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     const [roomConnection, setRoomConnection] = useState(null);
     const [state, dispatch] = useReducer(reducer, { remoteParticipants: [] });
     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]);
     useEffect(() => {
         if (!roomConnection) {
@@ -5441,10 +5671,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);
@@ -5457,6 +5687,6 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     ];
 }
 
-const sdkVersion = "2.0.0-alpha5";
+const sdkVersion = "2.0.0-alpha6";
 
-export { sdkVersion, useRoomConnection };
+export { VideoView, sdkVersion, useLocalMedia, useRoomConnection };

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import RtcManager from '@whereby/jslib-media/src/webrtc/RtcManager';
 
 interface WherebyEmbedAttributes {
     audio: string;
@@ -38,6 +39,82 @@ interface VideoViewSelfProps {
 type VideoViewProps = VideoViewSelfProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
 declare const _default: ({ muted, stream, ...rest }: VideoViewProps) => JSX.Element;
 
+type CameraEnabledEvent = {
+    enabled: boolean;
+};
+type MicrophoneEnabledEvent = {
+    enabled: boolean;
+};
+type DeviceListUpdatedEvent = {
+    cameraDevices: MediaDeviceInfo[];
+    microphoneDevices: MediaDeviceInfo[];
+    speakerDevices: MediaDeviceInfo[];
+};
+type DeviceListUpdateErrorEvent = {
+    error: unknown;
+};
+type StreamUpdatedEvent = {
+    stream: MediaStream;
+};
+interface LocalMediaEventsMap {
+    camera_enabled: CustomEvent<CameraEnabledEvent>;
+    device_list_updated: CustomEvent<DeviceListUpdatedEvent>;
+    device_list_update_error: CustomEvent<DeviceListUpdateErrorEvent>;
+    microphone_enabled: CustomEvent<MicrophoneEnabledEvent>;
+    stream_updated: CustomEvent<StreamUpdatedEvent>;
+}
+interface LocalMediaEventTarget extends EventTarget {
+    addEventListener<K extends keyof LocalMediaEventsMap>(type: K, listener: (ev: LocalMediaEventsMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+}
+declare const TypedLocalMediaEventTarget: new () => LocalMediaEventTarget;
+declare class LocalMedia extends TypedLocalMediaEventTarget {
+    private _constraints;
+    _rtcManagers: RtcManager[];
+    stream: MediaStream;
+    constructor(constraints: MediaStreamConstraints);
+    addRtcManager(rtcManager: RtcManager): void;
+    removeRtcManager(rtcManager: RtcManager): void;
+    getCameraDeviceId(): string | undefined;
+    getMicrophoneDeviceId(): string | undefined;
+    isCameraEnabled(): boolean;
+    isMicrophoneEnabled(): boolean;
+    toggleCameraEnabled(enabled?: boolean): void;
+    toggleMichrophoneEnabled(enabled?: boolean): void;
+    setCameraDevice(deviceId: string): Promise<void>;
+    setMicrophoneDevice(deviceId: string): Promise<void>;
+    private _updateDeviceList;
+    start(): Promise<MediaStream>;
+    stop(): void;
+}
+
+interface LocalMediaState {
+    currentCameraDeviceId?: string;
+    currentMicrophoneDeviceId?: string;
+    cameraDeviceError: unknown;
+    cameraDevices: MediaDeviceInfo[];
+    isSettingCameraDevice: boolean;
+    isSettingMicrophoneDevice: boolean;
+    isStarting: boolean;
+    localStream?: MediaStream;
+    microphoneDeviceError: unknown;
+    microphoneDevices: MediaDeviceInfo[];
+    speakerDevices: MediaDeviceInfo[];
+    startError: unknown;
+}
+interface LocalMediaActions {
+    setCameraDevice: InstanceType<typeof LocalMedia>["setCameraDevice"];
+    setMicrophoneDevice: InstanceType<typeof LocalMedia>["setMicrophoneDevice"];
+    toggleCameraEnabled: InstanceType<typeof LocalMedia>["toggleCameraEnabled"];
+    toggleMicrophoneEnabled: InstanceType<typeof LocalMedia>["toggleMichrophoneEnabled"];
+}
+type LocalMediaRef = {
+    state: LocalMediaState;
+    actions: LocalMediaActions;
+    _ref: LocalMedia;
+};
+declare function useLocalMedia(constraints?: MediaStreamConstraints): LocalMediaRef;
+
 interface RoomParticipantData {
     displayName: string;
     id: string;
@@ -77,10 +154,10 @@ declare class LocalParticipant extends RoomParticipant {
 type Logger = Pick<Console, "debug" | "error" | "log" | "warn">;
 interface RoomConnectionOptions {
     displayName?: string;
-    localStream?: MediaStream;
     localMediaConstraints?: MediaStreamConstraints;
     roomKey?: string;
     logger?: Logger;
+    localMedia?: LocalMedia;
 }
 
 type RemoteParticipantState = Omit<RemoteParticipant, "updateStreamState">;
@@ -98,8 +175,11 @@ interface RoomConnectionActions {
 interface RoomConnectionComponents {
     VideoView: typeof _default;
 }
-declare function useRoomConnection(roomUrl: string, roomConnectionOptions: RoomConnectionOptions): [state: RoomState, actions: RoomConnectionActions, components: RoomConnectionComponents];
+interface UseRoomConnectionOptions extends Omit<RoomConnectionOptions, "localMedia"> {
+    localMedia?: LocalMediaRef;
+}
+declare function useRoomConnection(roomUrl: string, roomConnectionOptions: UseRoomConnectionOptions): [state: RoomState, actions: RoomConnectionActions, components: RoomConnectionComponents];
 
-declare const sdkVersion = "2.0.0-alpha5";
+declare const sdkVersion = "2.0.0-alpha6";
 
-export { sdkVersion, useRoomConnection };
+export { _default as VideoView, sdkVersion, useLocalMedia, useRoomConnection };