@whereby.com/browser-sdk 2.0.0-alpha9 → 2.0.0-beta2

package/dist/react/useLocalMedia.js

@@ -0,0 +1,109 @@
+import { __awaiter } from "tslib";
+import { useEffect, useReducer, useState } from "react";
+import LocalMedia from "../LocalMedia";
+const initialState = {
+    cameraDeviceError: null,
+    cameraDevices: [],
+    isSettingCameraDevice: false,
+    isSettingMicrophoneDevice: false,
+    isStarting: false,
+    microphoneDeviceError: null,
+    microphoneDevices: [],
+    speakerDevices: [],
+    startError: null,
+};
+function reducer(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;
+    }
+}
+export default function useLocalMedia(optionsOrStream = { audio: true, video: true }) {
+    const [localMedia] = useState(() => new LocalMedia(optionsOrStream));
+    const [state, dispatch] = useReducer(reducer, 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();
+        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,
+    };
+}

package/dist/react/useRoomConnection.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+import VideoView from "./VideoView";
+import { LocalMediaRef } from "./useLocalMedia";
+import RoomConnection, { ChatMessage, CloudRecordingState, RoomConnectionOptions, ConnectionStatus, LiveStreamState } from "../RoomConnection";
+import { LocalParticipant, RemoteParticipant, Screenshare } from "../RoomParticipant";
+export type RemoteParticipantState = Omit<RemoteParticipant, "updateStreamState" | "newJoiner" | "streams" | "addStream" | "removeStream">;
+export type LocalParticipantState = LocalParticipant;
+export interface WaitingParticipantState {
+    id: string;
+    displayName: string | null;
+}
+export interface ChatMessageState {
+    senderId: string;
+    timestamp: string;
+    text: string;
+}
+export type ScreenshareState = Screenshare;
+type LocalScreenshareStatus = "starting" | "active";
+export interface RoomConnectionState {
+    chatMessages: ChatMessage[];
+    cloudRecording?: CloudRecordingState;
+    localScreenshareStatus?: LocalScreenshareStatus;
+    localParticipant?: LocalParticipantState;
+    remoteParticipants: RemoteParticipantState[];
+    screenshares: Screenshare[];
+    connectionStatus: ConnectionStatus;
+    liveStream?: LiveStreamState;
+    waitingParticipants: WaitingParticipantState[];
+}
+interface UseRoomConnectionOptions extends Omit<RoomConnectionOptions, "localMedia"> {
+    localMedia?: LocalMediaRef;
+}
+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 VideoView>, "onResize">;
+interface RoomConnectionComponents {
+    VideoView: (props: VideoViewComponentProps) => ReturnType<typeof VideoView>;
+}
+export type RoomConnectionRef = {
+    state: RoomConnectionState;
+    actions: RoomConnectionActions;
+    components: RoomConnectionComponents;
+    _ref: RoomConnection;
+};
+export declare function useRoomConnection(roomUrl: string, roomConnectionOptions?: UseRoomConnectionOptions): RoomConnectionRef;
+export {};

package/dist/react/useRoomConnection.js

@@ -0,0 +1,340 @@
+import { __awaiter } from "tslib";
+import React, { useEffect, useReducer, useState } from "react";
+import VideoView from "./VideoView";
+import RoomConnection from "../RoomConnection";
+const initialState = {
+    chatMessages: [],
+    remoteParticipants: [],
+    connectionStatus: "initializing",
+    screenshares: [],
+    waitingParticipants: [],
+};
+function updateParticipant(remoteParticipants, participantId, updates) {
+    const existingParticipant = remoteParticipants.find((p) => p.id === participantId);
+    if (!existingParticipant) {
+        return remoteParticipants;
+    }
+    const index = remoteParticipants.indexOf(existingParticipant);
+    return [
+        ...remoteParticipants.slice(0, index),
+        Object.assign(Object.assign({}, existingParticipant), updates),
+        ...remoteParticipants.slice(index + 1),
+    ];
+}
+function convertRemoteParticipantToRemoteParticipantState(p) {
+    return {
+        displayName: p.displayName,
+        id: p.id,
+        isAudioEnabled: p.isAudioEnabled,
+        isLocalParticipant: p.isLocalParticipant,
+        isVideoEnabled: p.isVideoEnabled,
+        stream: p.stream,
+    };
+}
+function addScreenshare(screenshares, screenshare) {
+    const existingScreenshare = screenshares.find((ss) => ss.id === screenshare.id);
+    if (existingScreenshare) {
+        return screenshares;
+    }
+    return [...screenshares, screenshare];
+}
+function reducer(state, action) {
+    switch (action.type) {
+        case "CHAT_MESSAGE":
+            return Object.assign(Object.assign({}, state), { chatMessages: [...state.chatMessages, action.payload] });
+        case "CLOUD_RECORDING_REQUEST_STARTED":
+            return Object.assign(Object.assign({}, state), { cloudRecording: {
+                    status: "requested",
+                } });
+        case "CLOUD_RECORDING_STARTED":
+            return Object.assign(Object.assign({}, state), { cloudRecording: {
+                    status: action.payload.status,
+                    startedAt: action.payload.startedAt,
+                } });
+        case "CLOUD_RECORDING_STARTED_ERROR":
+            return Object.assign(Object.assign({}, state), { cloudRecording: {
+                    status: action.payload.status,
+                    error: action.payload.error,
+                } });
+        case "CLOUD_RECORDING_STOPPED":
+            delete state.cloudRecording;
+            return Object.assign({}, state);
+        case "ROOM_JOINED":
+            return Object.assign(Object.assign({}, state), { localParticipant: action.payload.localParticipant, remoteParticipants: action.payload.remoteParticipants, waitingParticipants: action.payload.waitingParticipants, connectionStatus: "connected" });
+        case "CONNECTION_STATUS_CHANGED":
+            return Object.assign(Object.assign({}, state), { connectionStatus: action.payload.connectionStatus });
+        case "PARTICIPANT_AUDIO_ENABLED":
+            return Object.assign(Object.assign({}, state), { remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
+                    isAudioEnabled: action.payload.isAudioEnabled,
+                }) });
+        case "PARTICIPANT_JOINED":
+            return Object.assign(Object.assign({}, state), { remoteParticipants: [...state.remoteParticipants, action.payload.paritipant] });
+        case "PARTICIPANT_LEFT":
+            return Object.assign(Object.assign({}, state), { remoteParticipants: [...state.remoteParticipants.filter((p) => p.id !== action.payload.participantId)] });
+        case "PARTICIPANT_STREAM_ADDED":
+            return Object.assign(Object.assign({}, state), { remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
+                    stream: action.payload.stream,
+                }) });
+        case "PARTICIPANT_VIDEO_ENABLED":
+            return Object.assign(Object.assign({}, state), { remoteParticipants: updateParticipant(state.remoteParticipants, action.payload.participantId, {
+                    isVideoEnabled: action.payload.isVideoEnabled,
+                }) });
+        case "PARTICIPANT_METADATA_CHANGED":
+            return Object.assign(Object.assign({}, state), { remoteParticipants: [
+                    ...state.remoteParticipants.map((p) => p.id === action.payload.participantId ? Object.assign(Object.assign({}, p), { displayName: action.payload.displayName }) : p),
+                ] });
+        case "LOCAL_CLIENT_DISPLAY_NAME_CHANGED":
+            if (!state.localParticipant)
+                return state;
+            return Object.assign(Object.assign({}, state), { localParticipant: Object.assign(Object.assign({}, state.localParticipant), { displayName: action.payload.displayName }) });
+        case "SCREENSHARE_STARTED":
+            return Object.assign(Object.assign({}, state), { screenshares: addScreenshare(state.screenshares, {
+                    participantId: action.payload.participantId,
+                    id: action.payload.id,
+                    hasAudioTrack: action.payload.hasAudioTrack,
+                    stream: action.payload.stream,
+                    isLocal: action.payload.isLocal,
+                }) });
+        case "SCREENSHARE_STOPPED":
+            return Object.assign(Object.assign({}, state), { screenshares: state.screenshares.filter((ss) => ss.id !== action.payload.id) });
+        case "LOCAL_SCREENSHARE_START_ERROR":
+            return Object.assign(Object.assign({}, state), { localScreenshareStatus: undefined });
+        case "LOCAL_SCREENSHARE_STARTING":
+            return Object.assign(Object.assign({}, state), { localScreenshareStatus: "starting" });
+        case "LOCAL_SCREENSHARE_STARTED":
+            return Object.assign(Object.assign({}, state), { localScreenshareStatus: "active" });
+        case "LOCAL_SCREENSHARE_STOPPED":
+            return Object.assign(Object.assign({}, state), { localScreenshareStatus: undefined, screenshares: state.screenshares.filter((ss) => !ss.isLocal) });
+        case "LOCAL_CAMERA_ENABLED":
+            if (!state.localParticipant)
+                return state;
+            return Object.assign(Object.assign({}, state), { localParticipant: Object.assign(Object.assign({}, state.localParticipant), { isVideoEnabled: action.payload }) });
+        case "LOCAL_MICROPHONE_ENABLED":
+            if (!state.localParticipant)
+                return state;
+            return Object.assign(Object.assign({}, state), { localParticipant: Object.assign(Object.assign({}, state.localParticipant), { isAudioEnabled: action.payload }) });
+        case "STREAMING_STARTED":
+            return Object.assign(Object.assign({}, state), { liveStream: {
+                    status: action.payload.status,
+                    startedAt: action.payload.startedAt,
+                } });
+        case "STREAMING_STOPPED":
+            delete state.liveStream;
+            return Object.assign({}, state);
+        case "WAITING_PARTICIPANT_JOINED":
+            return Object.assign(Object.assign({}, state), { waitingParticipants: [
+                    ...state.waitingParticipants,
+                    { id: action.payload.participantId, displayName: action.payload.displayName },
+                ] });
+        case "WAITING_PARTICIPANT_LEFT":
+            return Object.assign(Object.assign({}, state), { waitingParticipants: state.waitingParticipants.filter((wp) => wp.id !== action.payload.participantId) });
+        default:
+            throw state;
+    }
+}
+const defaultRoomConnectionOptions = {
+    localMediaOptions: {
+        audio: true,
+        video: true,
+    },
+};
+export function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomConnectionOptions) {
+    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);
+    function createEventListener(eventName, listener, options) {
+        return {
+            eventName,
+            listener,
+            options,
+        };
+    }
+    const eventListeners = React.useMemo(() => [
+        createEventListener("chat_message", (e) => {
+            dispatch({ type: "CHAT_MESSAGE", payload: e.detail });
+        }),
+        createEventListener("cloud_recording_request_started", () => {
+            dispatch({ type: "CLOUD_RECORDING_REQUEST_STARTED" });
+        }),
+        createEventListener("cloud_recording_started", (e) => {
+            const { status, startedAt } = e.detail;
+            dispatch({ type: "CLOUD_RECORDING_STARTED", payload: { status, startedAt } });
+        }),
+        createEventListener("cloud_recording_started_error", (e) => {
+            dispatch({ type: "CLOUD_RECORDING_STARTED_ERROR", payload: e.detail });
+        }),
+        createEventListener("cloud_recording_stopped", () => {
+            dispatch({ type: "CLOUD_RECORDING_STOPPED" });
+        }),
+        createEventListener("local_camera_enabled", (e) => {
+            const { enabled } = e.detail;
+            dispatch({ type: "LOCAL_CAMERA_ENABLED", payload: enabled });
+        }),
+        createEventListener("local_microphone_enabled", (e) => {
+            const { enabled } = e.detail;
+            dispatch({ type: "LOCAL_MICROPHONE_ENABLED", payload: enabled });
+        }),
+        createEventListener("participant_audio_enabled", (e) => {
+            const { participantId, isAudioEnabled } = e.detail;
+            dispatch({ type: "PARTICIPANT_AUDIO_ENABLED", payload: { participantId, isAudioEnabled } });
+        }),
+        createEventListener("participant_joined", (e) => {
+            const { remoteParticipant } = e.detail;
+            dispatch({
+                type: "PARTICIPANT_JOINED",
+                payload: {
+                    paritipant: convertRemoteParticipantToRemoteParticipantState(remoteParticipant),
+                },
+            });
+        }),
+        createEventListener("participant_left", (e) => {
+            const { participantId } = e.detail;
+            dispatch({ type: "PARTICIPANT_LEFT", payload: { participantId } });
+        }),
+        createEventListener("participant_metadata_changed", (e) => {
+            const { participantId, displayName } = e.detail;
+            dispatch({ type: "PARTICIPANT_METADATA_CHANGED", payload: { participantId, displayName } });
+        }),
+        createEventListener("participant_stream_added", (e) => {
+            const { participantId, stream } = e.detail;
+            dispatch({ type: "PARTICIPANT_STREAM_ADDED", payload: { participantId, stream } });
+        }),
+        createEventListener("participant_video_enabled", (e) => {
+            const { participantId, isVideoEnabled } = e.detail;
+            dispatch({ type: "PARTICIPANT_VIDEO_ENABLED", payload: { participantId, isVideoEnabled } });
+        }),
+        createEventListener("connection_status_changed", (e) => {
+            const { connectionStatus } = e.detail;
+            dispatch({
+                type: "CONNECTION_STATUS_CHANGED",
+                payload: { connectionStatus },
+            });
+        }),
+        createEventListener("room_joined", (e) => {
+            const { localParticipant, remoteParticipants, waitingParticipants } = e.detail;
+            dispatch({
+                type: "ROOM_JOINED",
+                payload: {
+                    localParticipant,
+                    remoteParticipants: remoteParticipants.map(convertRemoteParticipantToRemoteParticipantState),
+                    waitingParticipants,
+                },
+            });
+        }),
+        createEventListener("screenshare_started", (e) => {
+            const { participantId, stream, id, hasAudioTrack, isLocal } = e.detail;
+            dispatch({
+                type: "SCREENSHARE_STARTED",
+                payload: { participantId, stream, id, hasAudioTrack, isLocal },
+            });
+        }),
+        createEventListener("screenshare_stopped", (e) => {
+            var _a;
+            const { participantId, id } = e.detail;
+            dispatch({
+                type: "SCREENSHARE_STOPPED",
+                payload: { participantId, id },
+            });
+            if (participantId === ((_a = state.localParticipant) === null || _a === void 0 ? void 0 : _a.id)) {
+                dispatch({ type: "LOCAL_SCREENSHARE_STOPPED" });
+            }
+        }),
+        createEventListener("streaming_started", (e) => {
+            const { status, startedAt } = e.detail;
+            dispatch({ type: "STREAMING_STARTED", payload: { status, startedAt } });
+        }),
+        createEventListener("streaming_stopped", () => {
+            dispatch({ type: "STREAMING_STOPPED" });
+        }),
+        createEventListener("waiting_participant_joined", (e) => {
+            const { participantId, displayName } = e.detail;
+            dispatch({
+                type: "WAITING_PARTICIPANT_JOINED",
+                payload: { participantId, displayName },
+            });
+        }),
+        createEventListener("waiting_participant_left", (e) => {
+            const { participantId } = e.detail;
+            dispatch({
+                type: "WAITING_PARTICIPANT_LEFT",
+                payload: { participantId },
+            });
+        }),
+    ], []);
+    useEffect(() => {
+        eventListeners.forEach(({ eventName, listener }) => {
+            roomConnection.addEventListener(eventName, listener);
+        });
+        roomConnection.join();
+        return () => {
+            eventListeners.forEach(({ eventName, listener }) => {
+                roomConnection.removeEventListener(eventName, listener);
+            });
+            roomConnection.leave();
+        };
+    }, []);
+    return {
+        state,
+        actions: {
+            knock: () => {
+                roomConnection.knock();
+            },
+            sendChatMessage: (text) => {
+                roomConnection.sendChatMessage(text);
+            },
+            setDisplayName: (displayName) => {
+                roomConnection.setDisplayName(displayName);
+                dispatch({ type: "LOCAL_CLIENT_DISPLAY_NAME_CHANGED", payload: { displayName } });
+            },
+            toggleCamera: (enabled) => {
+                roomConnection.localMedia.toggleCameraEnabled(enabled);
+            },
+            toggleMicrophone: (enabled) => {
+                roomConnection.localMedia.toggleMichrophoneEnabled(enabled);
+            },
+            acceptWaitingParticipant: (participantId) => {
+                roomConnection.acceptWaitingParticipant(participantId);
+            },
+            rejectWaitingParticipant: (participantId) => {
+                roomConnection.rejectWaitingParticipant(participantId);
+            },
+            startCloudRecording: () => {
+                var _a;
+                if (state.cloudRecording && ["recording", "requested"].includes((_a = state.cloudRecording) === null || _a === void 0 ? void 0 : _a.status)) {
+                    return;
+                }
+                roomConnection.startCloudRecording();
+            },
+            stopCloudRecording: () => {
+                roomConnection.stopCloudRecording();
+            },
+            startScreenshare: () => __awaiter(this, void 0, void 0, function* () {
+                dispatch({ type: "LOCAL_SCREENSHARE_STARTING" });
+                try {
+                    yield roomConnection.startScreenshare();
+                    dispatch({ type: "LOCAL_SCREENSHARE_STARTED" });
+                }
+                catch (error) {
+                    dispatch({ type: "LOCAL_SCREENSHARE_START_ERROR", payload: error });
+                }
+            }),
+            stopScreenshare: () => {
+                roomConnection.stopScreenshare();
+            },
+        },
+        components: {
+            VideoView: (props) => React.createElement(VideoView, Object.assign({}, props, {
+                onResize: ({ stream, width, height, }) => {
+                    roomConnection.updateStreamResolution({
+                        streamId: stream.id,
+                        width,
+                        height,
+                    });
+                },
+            })),
+        },
+        _ref: roomConnection,
+    };
+}

package/dist/utils/debounce.d.ts

@@ -0,0 +1,9 @@
+interface Options {
+    delay?: number;
+    edges?: boolean;
+}
+interface DebouncedFunction {
+    (...args: any[]): void;
+}
+export default function debounce(fn: DebouncedFunction, { delay, edges }?: Options): DebouncedFunction;
+export {};

package/dist/utils/debounce.js

@@ -0,0 +1,18 @@
+export default function debounce(fn, { delay = 500, edges } = {}) {
+    let timeout;
+    let nCalls = 0;
+    return (...args) => {
+        nCalls += 1;
+        if (edges && nCalls === 1) {
+            fn(...args);
+        }
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+            if (!edges || nCalls > 1) {
+                fn(...args);
+            }
+            timeout = undefined;
+            nCalls = 0;
+        }, delay);
+    };
+}

package/dist/utils/fakeAudioStream.d.ts

@@ -0,0 +1 @@
+export default function fakeAudioStream(): MediaStream;

package/dist/utils/fakeAudioStream.js

@@ -0,0 +1,18 @@
+export default function fakeAudioStream() {
+    const audioCtx = new AudioContext();
+    const oscillator = audioCtx.createOscillator();
+    const destination = audioCtx.createMediaStreamDestination();
+    oscillator.connect(destination);
+    oscillator.frequency.value = 400;
+    oscillator.type = "sine";
+    setInterval(() => {
+        if (oscillator.frequency.value <= 900) {
+            oscillator.frequency.value += 10;
+        }
+        else {
+            oscillator.frequency.value = 200;
+        }
+    }, 20);
+    oscillator.start();
+    return destination.stream;
+}

package/dist/utils/fakeWebcamFrame.d.ts

@@ -0,0 +1 @@
+export default function fakeWebcamFrame(canvas: HTMLCanvasElement): void;

package/dist/utils/fakeWebcamFrame.js

@@ -0,0 +1,49 @@
+let rotationAngle = 0;
+function drawWebcamFrame(canvas) {
+    const context = canvas.getContext("2d");
+    if (!context) {
+        console.error("Canvas context not available");
+        return;
+    }
+    const wheelRadius = 100;
+    const wheelCenterX = canvas.width / 2;
+    const wheelCenterY = canvas.height / 2;
+    context.fillStyle = "darkgreen";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.save();
+    context.translate(wheelCenterX, wheelCenterY);
+    context.rotate(rotationAngle);
+    const numSlices = 12;
+    const sliceAngle = (2 * Math.PI) / numSlices;
+    const colors = ["red", "orange", "yellow", "green", "blue", "purple"];
+    for (let i = 0; i < numSlices; i++) {
+        context.beginPath();
+        context.moveTo(0, 0);
+        context.arc(0, 0, wheelRadius, i * sliceAngle, (i + 1) * sliceAngle);
+        context.fillStyle = colors[i % colors.length];
+        context.fill();
+        context.closePath();
+    }
+    context.restore();
+    context.fillStyle = "white";
+    context.font = "42px Arial";
+    const topText = "Whereby Media Stream";
+    const topTextWidth = context.measureText(topText).width;
+    context.fillText(topText, canvas.width / 2 - topTextWidth / 2, 50);
+    context.font = "32px Arial";
+    const now = new Date();
+    const timeText = `time: ${now.getHours().toString().padStart(2, "0")}:${now
+        .getMinutes()
+        .toString()
+        .padStart(2, "0")}:${now.getSeconds().toString().padStart(2, "0")}.${now
+        .getMilliseconds()
+        .toString()
+        .padStart(3, "0")}`;
+    context.fillText(timeText, 10, canvas.height - 20);
+    context.fillText(`rotation angle: ${rotationAngle.toFixed(2)}`, canvas.width - canvas.width / 2, canvas.height - 20);
+    rotationAngle += 0.01;
+}
+export default function fakeWebcamFrame(canvas) {
+    drawWebcamFrame(canvas);
+    requestAnimationFrame(() => fakeWebcamFrame(canvas));
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { default as fakeAudioStream } from "./fakeAudioStream";
+export { default as fakeWebcamFrame } from "./fakeWebcamFrame";

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export { default as fakeAudioStream } from "./fakeAudioStream";
+export { default as fakeWebcamFrame } from "./fakeWebcamFrame";