@whereby.com/browser-sdk 0.0.0-canary-20240326095648

package/dist/embed/index.d.ts

@@ -0,0 +1,110 @@
+import { ReactHTMLElement } from 'react';
+
+interface WherebyEmbedElementAttributes extends ReactHTMLElement<HTMLElement> {
+    audio: string;
+    avatarUrl: string;
+    background: string;
+    breakout: string;
+    cameraAccess: string;
+    chat: string;
+    displayName: string;
+    emptyRoomInvitation: string;
+    externalId: string;
+    floatSelf: string;
+    groups: string;
+    help: string;
+    lang: string;
+    leaveButton: string;
+    locking: string;
+    logo: string;
+    lowData: string;
+    metadata: string;
+    minimal: string;
+    moreButton: string;
+    participantCount: string;
+    people: string;
+    pipButton: string;
+    precallReview: string;
+    recording: string;
+    room: string;
+    settingsButton: string;
+    screenshare: string;
+    style: {
+        [key: string]: string;
+    };
+    subgridLabels: string;
+    title: string;
+    video: string;
+    virtualBackgroundUrl: string;
+    toolbarDarkText: string;
+}
+interface WherebyEmbedElementEventMap {
+    ready: CustomEvent;
+    knock: CustomEvent;
+    participantupdate: CustomEvent<{
+        count: number;
+    }>;
+    join: CustomEvent;
+    leave: CustomEvent<{
+        removed: boolean;
+    }>;
+    participant_join: CustomEvent<{
+        participant: {
+            metadata: string;
+        };
+    }>;
+    participant_leave: CustomEvent<{
+        participant: {
+            metadata: string;
+        };
+    }>;
+    microphone_toggle: CustomEvent<{
+        enabled: boolean;
+    }>;
+    camera_toggle: CustomEvent<{
+        enabled: boolean;
+    }>;
+    chat_toggle: CustomEvent<{
+        open: boolean;
+    }>;
+    pip_toggle: CustomEvent<{
+        open: boolean;
+    }>;
+    deny_device_permission: CustomEvent<{
+        denied: boolean;
+    }>;
+    screenshare_toggle: CustomEvent<{
+        enabled: boolean;
+    }>;
+    streaming_status_change: CustomEvent<{
+        status: string;
+    }>;
+    connection_status_change: CustomEvent<{
+        status: "stable" | "unstable";
+    }>;
+}
+interface WherebyEmbedElementCommands {
+    startRecording: () => void;
+    stopRecording: () => void;
+    startStreaming: () => void;
+    stopStreaming: () => void;
+    toggleCamera: (enabled?: boolean) => void;
+    toggleMicrophone: (enabled?: boolean) => void;
+    toggleScreenshare: (enabled?: boolean) => void;
+    toogleChat: (enabled?: boolean) => void;
+}
+interface WherebyEmbedElement extends HTMLIFrameElement, WherebyEmbedElementCommands {
+    addEventListener<K extends keyof (WherebyEmbedElementEventMap & HTMLElementEventMap)>(type: K, listener: (this: HTMLIFrameElement, ev: (WherebyEmbedElementEventMap & HTMLElementEventMap)[K]) => void, options?: boolean | AddEventListenerOptions | undefined): void;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            ["whereby-embed"]: Partial<WherebyEmbedElementAttributes>;
+        }
+    }
+}
+declare const _default: {
+    sdkVersion: string;
+};
+
+export { type WherebyEmbedElement, _default as default };

package/dist/embed/index.esm.js

@@ -0,0 +1,133 @@
+import { define, ref } from 'heresy';
+import { parseRoomUrlAndSubdomain } from '@whereby.com/core/utils';
+
+const boolAttrs = [
+    "audio",
+    "background",
+    "cameraAccess",
+    "chat",
+    "people",
+    "embed",
+    "emptyRoomInvitation",
+    "help",
+    "leaveButton",
+    "precallReview",
+    "screenshare",
+    "video",
+    "floatSelf",
+    "recording",
+    "logo",
+    "locking",
+    "participantCount",
+    "settingsButton",
+    "pipButton",
+    "moreButton",
+    "personality",
+    "subgridLabels",
+    "lowData",
+    "breakout",
+    "toolbarDarkText",
+];
+define("WherebyEmbed", {
+    oninit() {
+        this.iframe = ref();
+    },
+    onconnected() {
+        window.addEventListener("message", this.onmessage.bind(this));
+    },
+    ondisconnected() {
+        window.removeEventListener("message", this.onmessage.bind(this));
+    },
+    observedAttributes: [
+        "displayName",
+        "minimal",
+        "room",
+        "subdomain",
+        "lang",
+        "metadata",
+        "groups",
+        "virtualBackgroundUrl",
+        "avatarUrl",
+        "externalId",
+        "title",
+        ...boolAttrs,
+    ].map((a) => a.toLowerCase()),
+    onattributechanged({ attributeName, oldValue }) {
+        if (["room", "subdomain"].includes(attributeName) && oldValue == null)
+            return;
+        this.render();
+    },
+    style(self) {
+        return `
+    ${self} {
+      display: block;
+    }
+    ${self} iframe {
+      border: none;
+      height: 100%;
+      width: 100%;
+    }
+    `;
+    },
+    _postCommand(command, args = []) {
+        if (this.iframe.current) {
+            this.iframe.current.contentWindow.postMessage({ command, args }, this.roomUrl.origin);
+        }
+    },
+    startRecording() {
+        this._postCommand("start_recording");
+    },
+    stopRecording() {
+        this._postCommand("stop_recording");
+    },
+    startStreaming() {
+        this._postCommand("start_streaming");
+    },
+    stopStreaming() {
+        this._postCommand("stop_streaming");
+    },
+    toggleCamera(enabled) {
+        this._postCommand("toggle_camera", [enabled]);
+    },
+    toggleMicrophone(enabled) {
+        this._postCommand("toggle_microphone", [enabled]);
+    },
+    toggleScreenshare(enabled) {
+        this._postCommand("toggle_screenshare", [enabled]);
+    },
+    toggleChat(enabled) {
+        this._postCommand("toggle_chat", [enabled]);
+    },
+    onmessage({ origin, data, }) {
+        if (!this.roomUrl || origin !== this.roomUrl.origin)
+            return;
+        const { type, payload: detail } = data;
+        this.dispatchEvent(new CustomEvent(type, { detail }));
+    },
+    render() {
+        const { avatarurl: avatarUrl, displayname: displayName, lang, metadata, externalid: externalId, minimal, room, groups, virtualbackgroundurl: virtualBackgroundUrl, title, } = this;
+        let roomUrl, subdomain;
+        try {
+            ({ roomUrl, subdomain } = parseRoomUrlAndSubdomain(room, this.subdomain));
+        }
+        catch (error) {
+            return this.html `Whereby: ${error instanceof Error ? error.message : "unknown error"}`;
+        }
+        this.roomUrl = roomUrl;
+        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "1", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang: lang })), (metadata && { metadata: metadata })), (externalId && { externalId })), (groups && { groups: groups })), (virtualBackgroundUrl && { virtualBackgroundUrl: virtualBackgroundUrl })), (avatarUrl && { avatarUrl: avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce((o, v) => (this[v.toLowerCase()] != null ? Object.assign(Object.assign({}, o), { [v]: this[v.toLowerCase()] }) : o), {}))).forEach(([k, v]) => {
+            if (!this.roomUrl.searchParams.has(k)) {
+                this.roomUrl.searchParams.set(k, v);
+            }
+        });
+        this.html `
+      <iframe
+        title=${title || "Video calling component"}
+        ref=${this.iframe}
+        src=${this.roomUrl}
+        allow="autoplay; camera; microphone; fullscreen; speaker; display-capture; media-capture" />
+      `;
+    },
+});
+var index = { sdkVersion: "1" };
+
+export { index as default };

package/dist/react/index.d.ts

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { Store, LocalMediaOptions, RemoteParticipant, LocalParticipant, Screenshare, ChatMessage as ChatMessage$1 } from '@whereby.com/core';
+
+interface VideoViewSelfProps {
+    stream: MediaStream;
+    muted?: boolean;
+    mirror?: boolean;
+    style?: React.CSSProperties;
+    onResize?: ({ width, height, stream }: {
+        width: number;
+        height: number;
+        stream: MediaStream;
+    }) => void;
+    onSetAspectRatio?: ({ aspectRatio }: {
+        aspectRatio: number;
+    }) => void;
+}
+type VideoViewProps = VideoViewSelfProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
+declare const _default: ({ muted, mirror, stream, onResize, onSetAspectRatio, ...rest }: VideoViewProps) => React.JSX.Element;
+
+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: (deviceId: string) => void;
+    setMicrophoneDevice: (deviceId: string) => void;
+    toggleCameraEnabled: (enabled?: boolean) => void;
+    toggleMicrophoneEnabled: (enabled?: boolean) => void;
+}
+type UseLocalMediaResult = {
+    state: LocalMediaState;
+    actions: LocalMediaActions;
+    store: Store;
+};
+type UseLocalMediaOptions = LocalMediaOptions;
+
+type RemoteParticipantState = Omit<RemoteParticipant, "newJoiner" | "streams">;
+type LocalParticipantState = LocalParticipant;
+interface WaitingParticipantState {
+    id: string;
+    displayName: string | null;
+}
+interface ChatMessageState {
+    senderId: string;
+    timestamp: string;
+    text: string;
+}
+type ScreenshareState = Screenshare;
+type LocalScreenshareStatus = "starting" | "active";
+type ChatMessage = Pick<ChatMessage$1, "senderId" | "timestamp" | "text">;
+type ConnectionStatus = "initializing" | "connecting" | "connected" | "reconnect" | "room_locked" | "knocking" | "disconnecting" | "disconnected" | "knock_rejected";
+type CloudRecordingState = {
+    error?: string;
+    status: "recording" | "requested" | "error";
+    startedAt?: number;
+};
+type LiveStreamState = {
+    status: "streaming";
+    startedAt?: number;
+};
+interface RoomConnectionState {
+    chatMessages: ChatMessage[];
+    cloudRecording?: CloudRecordingState;
+    localScreenshareStatus?: LocalScreenshareStatus;
+    localParticipant?: LocalParticipantState;
+    remoteParticipants: RemoteParticipantState[];
+    screenshares: Screenshare[];
+    connectionStatus: ConnectionStatus;
+    liveStream?: LiveStreamState;
+    waitingParticipants: WaitingParticipantState[];
+}
+interface RoomConnectionOptions {
+    displayName?: string;
+    localMediaOptions?: LocalMediaOptions;
+    roomKey?: string;
+    localMedia?: UseLocalMediaResult;
+    externalId?: string;
+}
+interface UseRoomConnectionOptions extends Omit<RoomConnectionOptions, "localMedia"> {
+    localMedia?: UseLocalMediaResult;
+}
+interface RoomConnectionActions {
+    sendChatMessage(text: string): void;
+    knock(): void;
+    setDisplayName(displayName: string): void;
+    toggleCamera(enabled?: boolean): void;
+    toggleMicrophone(enabled?: boolean): void;
+    acceptWaitingParticipant(participantId: string): void;
+    rejectWaitingParticipant(participantId: string): void;
+    startCloudRecording(): void;
+    startScreenshare(): void;
+    stopCloudRecording(): void;
+    stopScreenshare(): void;
+}
+
+type VideoViewComponentProps = Omit<React.ComponentProps<typeof _default>, "onResize">;
+interface RoomConnectionComponents {
+    VideoView: (props: VideoViewComponentProps) => ReturnType<typeof _default>;
+}
+type RoomConnectionRef = {
+    state: RoomConnectionState;
+    actions: RoomConnectionActions;
+    components: RoomConnectionComponents;
+    _ref: Store;
+};
+declare function useRoomConnection(roomUrl: string, roomConnectionOptions?: UseRoomConnectionOptions): RoomConnectionRef;
+
+declare function useLocalMedia(optionsOrStream?: UseLocalMediaOptions | MediaStream): UseLocalMediaResult;
+
+export { type ChatMessageState as ChatMessage, type LocalParticipantState as LocalParticipant, type RemoteParticipantState as RemoteParticipant, type RoomConnectionState as RoomConnection, type ScreenshareState as Screenshare, type UseLocalMediaResult, _default as VideoView, type WaitingParticipantState as WaitingParticipant, useLocalMedia, useRoomConnection };

package/dist/react/index.esm.js

@@ -0,0 +1,253 @@
+import * as React from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import { debounce } from '@whereby.com/core/utils';
+import { selectChatMessages, selectCloudRecordingRaw, selectLocalParticipantRaw, selectLocalMediaStream, selectRemoteParticipants, selectScreenshares, selectRoomConnectionStatus, selectStreamingRaw, selectWaitingParticipants, createServices, createStore, observeStore, doAppJoin, sdkVersion, appLeft, doRtcReportStreamResolution, doSendChatMessage, doKnockRoom, doSetDisplayName, toggleCameraEnabled, toggleMicrophoneEnabled, doAcceptWaitingParticipant, doRejectWaitingParticipant, doStartCloudRecording, doStartScreenshare, doStopCloudRecording, doStopScreenshare, selectCameraDeviceError, selectCameraDevices, selectCurrentCameraDeviceId, selectCurrentMicrophoneDeviceId, selectIsSettingCameraDevice, selectIsSettingMicrophoneDevice, selectIsLocalMediaStarting, selectMicrophoneDeviceError, selectMicrophoneDevices, selectSpeakerDevices, selectLocalMediaStartError, doStartLocalMedia, doStopLocalMedia, setCurrentCameraDeviceId, setCurrentMicrophoneDeviceId } from '@whereby.com/core';
+import { createSelector } from '@reduxjs/toolkit';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var VideoView = (_a) => {
+    var { muted, mirror = false, stream, onResize, onSetAspectRatio } = _a, rest = __rest(_a, ["muted", "mirror", "stream", "onResize", "onSetAspectRatio"]);
+    const videoEl = React.useRef(null);
+    React.useEffect(() => {
+        if (!videoEl.current) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver(debounce(() => {
+            if (videoEl.current && (stream === null || stream === void 0 ? void 0 : stream.id)) {
+                if (onResize) {
+                    onResize({
+                        width: videoEl.current.clientWidth,
+                        height: videoEl.current.clientHeight,
+                        stream,
+                    });
+                }
+                const h = videoEl.current.videoHeight;
+                const w = videoEl.current.videoWidth;
+                if (onSetAspectRatio && w && h && w + h > 20) {
+                    onSetAspectRatio({ aspectRatio: w / h });
+                }
+            }
+        }, { delay: 1000, edges: true }));
+        resizeObserver.observe(videoEl.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [stream]);
+    React.useEffect(() => {
+        if (!videoEl.current) {
+            return;
+        }
+        if (videoEl.current.srcObject !== stream) {
+            videoEl.current.srcObject = stream;
+        }
+        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, { style: Object.assign({ transform: mirror ? "scaleX(-1)" : "none", width: "100%", height: "100%" }, rest.style) })));
+};
+
+const selectRoomConnectionState = createSelector(selectChatMessages, selectCloudRecordingRaw, selectLocalParticipantRaw, selectLocalMediaStream, selectRemoteParticipants, selectScreenshares, selectRoomConnectionStatus, selectStreamingRaw, selectWaitingParticipants, (chatMessages, cloudRecording, localParticipant, localMediaStream, remoteParticipants, screenshares, connectionStatus, streaming, waitingParticipants) => {
+    const state = {
+        chatMessages,
+        cloudRecording: cloudRecording.isRecording ? { status: "recording" } : undefined,
+        localScreenshareStatus: localParticipant.isScreenSharing ? "active" : undefined,
+        localParticipant: Object.assign(Object.assign({}, localParticipant), { stream: localMediaStream }),
+        remoteParticipants,
+        screenshares,
+        connectionStatus,
+        liveStream: streaming.isStreaming
+            ? {
+                status: "streaming",
+                startedAt: streaming.startedAt,
+            }
+            : undefined,
+        waitingParticipants,
+    };
+    return state;
+});
+
+const initialState$1 = {
+    chatMessages: [],
+    remoteParticipants: [],
+    connectionStatus: "initializing",
+    screenshares: [],
+    waitingParticipants: [],
+};
+const defaultRoomConnectionOptions = {
+    localMediaOptions: {
+        audio: true,
+        video: true,
+    },
+};
+function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectionOptions) {
+    const [store] = React.useState(() => {
+        if (roomConnectionOptions.localMedia) {
+            return roomConnectionOptions.localMedia.store;
+        }
+        const services = createServices();
+        return createStore({ injectServices: services });
+    });
+    const [boundVideoView, setBoundVideoView] = React.useState();
+    const [roomConnectionState, setRoomConnectionState] = React.useState(initialState$1);
+    React.useEffect(() => {
+        const unsubscribe = observeStore(store, selectRoomConnectionState, setRoomConnectionState);
+        const url = new URL(roomUrl);
+        const searchParams = new URLSearchParams(url.search);
+        const roomKey = searchParams.get("roomKey");
+        store.dispatch(doAppJoin({
+            displayName: roomConnectionOptions.displayName || "Guest",
+            localMediaOptions: roomConnectionOptions.localMedia
+                ? undefined
+                : roomConnectionOptions.localMediaOptions,
+            roomKey,
+            roomUrl,
+            sdkVersion: sdkVersion,
+            externalId: roomConnectionOptions.externalId || null,
+        }));
+        return () => {
+            unsubscribe();
+            store.dispatch(appLeft());
+        };
+    }, []);
+    React.useEffect(() => {
+        if (store && !boundVideoView) {
+            setBoundVideoView(() => (props) => {
+                return React.createElement(VideoView, Object.assign({}, props, {
+                    onResize: ({ stream, width, height, }) => {
+                        store.dispatch(doRtcReportStreamResolution({
+                            streamId: stream.id,
+                            width,
+                            height,
+                        }));
+                    },
+                }));
+            });
+        }
+    }, [store, boundVideoView]);
+    const sendChatMessage = React.useCallback((text) => store.dispatch(doSendChatMessage({ text })), [store]);
+    const knock = React.useCallback(() => store.dispatch(doKnockRoom()), [store]);
+    const setDisplayName = React.useCallback((displayName) => store.dispatch(doSetDisplayName({ displayName })), [store]);
+    const toggleCamera = React.useCallback((enabled) => store.dispatch(toggleCameraEnabled({ enabled })), [store]);
+    const toggleMicrophone = React.useCallback((enabled) => store.dispatch(toggleMicrophoneEnabled({ enabled })), [store]);
+    const acceptWaitingParticipant = React.useCallback((participantId) => store.dispatch(doAcceptWaitingParticipant({ participantId })), [store]);
+    const rejectWaitingParticipant = React.useCallback((participantId) => store.dispatch(doRejectWaitingParticipant({ participantId })), [store]);
+    const startCloudRecording = React.useCallback(() => store.dispatch(doStartCloudRecording()), [store]);
+    const startScreenshare = React.useCallback(() => store.dispatch(doStartScreenshare()), [store]);
+    const stopCloudRecording = React.useCallback(() => store.dispatch(doStopCloudRecording()), [store]);
+    const stopScreenshare = React.useCallback(() => store.dispatch(doStopScreenshare()), [store]);
+    return {
+        state: roomConnectionState,
+        actions: {
+            sendChatMessage,
+            knock,
+            setDisplayName,
+            toggleCamera,
+            toggleMicrophone,
+            acceptWaitingParticipant,
+            rejectWaitingParticipant,
+            startCloudRecording,
+            startScreenshare,
+            stopCloudRecording,
+            stopScreenshare,
+        },
+        components: {
+            VideoView: boundVideoView || VideoView,
+        },
+        _ref: store,
+    };
+}
+
+const selectLocalMediaState = createSelector(selectCameraDeviceError, selectCameraDevices, selectCurrentCameraDeviceId, selectCurrentMicrophoneDeviceId, selectIsSettingCameraDevice, selectIsSettingMicrophoneDevice, selectIsLocalMediaStarting, selectLocalMediaStream, selectMicrophoneDeviceError, selectMicrophoneDevices, selectSpeakerDevices, selectLocalMediaStartError, (cameraDeviceError, cameraDevices, currentCameraDeviceId, currentMicrophoneDeviceId, isSettingCameraDevice, isSettingMicrophoneDevice, isStarting, localStream, microphoneDeviceError, microphoneDevices, speakerDevices, startError) => {
+    const state = {
+        cameraDeviceError,
+        cameraDevices,
+        currentCameraDeviceId,
+        currentMicrophoneDeviceId,
+        isSettingCameraDevice,
+        isSettingMicrophoneDevice,
+        isStarting,
+        localStream,
+        microphoneDeviceError,
+        microphoneDevices,
+        speakerDevices,
+        startError,
+    };
+    return state;
+});
+
+const initialState = {
+    cameraDeviceError: null,
+    cameraDevices: [],
+    isSettingCameraDevice: false,
+    isSettingMicrophoneDevice: false,
+    isStarting: false,
+    microphoneDeviceError: null,
+    microphoneDevices: [],
+    speakerDevices: [],
+    startError: null,
+};
+function useLocalMedia(optionsOrStream = { audio: true, video: true }) {
+    const [store] = useState(() => {
+        const services = createServices();
+        return createStore({ injectServices: services });
+    });
+    const [localMediaState, setLocalMediaState] = useState(initialState);
+    useEffect(() => {
+        const unsubscribe = observeStore(store, selectLocalMediaState, setLocalMediaState);
+        store.dispatch(doStartLocalMedia(optionsOrStream));
+        return () => {
+            unsubscribe();
+            store.dispatch(doStopLocalMedia());
+        };
+    }, []);
+    const setCameraDevice = useCallback((deviceId) => store.dispatch(setCurrentCameraDeviceId({ deviceId })), [store]);
+    const setMicrophoneDevice = useCallback((deviceId) => store.dispatch(setCurrentMicrophoneDeviceId({ deviceId })), [store]);
+    const toggleCamera = useCallback((enabled) => store.dispatch(toggleCameraEnabled({ enabled })), [store]);
+    const toggleMicrophone = useCallback((enabled) => store.dispatch(toggleMicrophoneEnabled({ enabled })), [store]);
+    return {
+        state: localMediaState,
+        actions: {
+            setCameraDevice,
+            setMicrophoneDevice,
+            toggleCameraEnabled: toggleCamera,
+            toggleMicrophoneEnabled: toggleMicrophone,
+        },
+        store,
+    };
+}
+
+export { VideoView, useLocalMedia, useRoomConnection };