@whereby.com/browser-sdk 2.0.0-alpha23 → 2.0.0-alpha26

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(constraintsOrStream = { audio: true, video: true }) {
+    const [localMedia] = useState(() => new LocalMedia(constraintsOrStream));
+    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,47 @@
+import React from "react";
+import VideoView from "./VideoView";
+import { LocalMediaRef } from "./useLocalMedia";
+import RoomConnection, { ChatMessage, CloudRecordingState, RoomConnectionOptions, RoomConnectionStatus, StreamingState } from "../RoomConnection";
+import { LocalParticipant, RemoteParticipant, Screenshare, WaitingParticipant } from "../RoomParticipant";
+type RemoteParticipantState = Omit<RemoteParticipant, "updateStreamState">;
+export interface RoomConnectionState {
+    chatMessages: ChatMessage[];
+    cloudRecording: CloudRecordingState;
+    isJoining: boolean;
+    isStartingScreenshare: boolean;
+    joinError: unknown;
+    startScreenshareError: unknown;
+    localParticipant?: LocalParticipant;
+    mostRecentChatMessage: ChatMessage | null;
+    remoteParticipants: RemoteParticipantState[];
+    screenshares: Screenshare[];
+    roomConnectionStatus: RoomConnectionStatus;
+    streaming: StreamingState;
+    waitingParticipants: WaitingParticipant[];
+}
+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;
+    startScreenshare(): 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,283 @@
+import React, { useEffect, useReducer, useState } from "react";
+import VideoView from "./VideoView";
+import RoomConnection from "../RoomConnection";
+const initialState = {
+    chatMessages: [],
+    cloudRecording: {
+        status: "",
+        startedAt: null,
+    },
+    isJoining: false,
+    isStartingScreenshare: false,
+    joinError: null,
+    startScreenshareError: null,
+    mostRecentChatMessage: null,
+    remoteParticipants: [],
+    roomConnectionStatus: "",
+    screenshares: [],
+    streaming: {
+        status: "",
+        startedAt: null,
+    },
+    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 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], mostRecentChatMessage: action.payload });
+        case "CLOUD_RECORDING_STARTED":
+            return Object.assign(Object.assign({}, state), { cloudRecording: {
+                    status: action.payload.status,
+                    startedAt: action.payload.startedAt,
+                } });
+        case "CLOUD_RECORDING_STOPPED":
+            return Object.assign(Object.assign({}, state), { cloudRecording: {
+                    status: "",
+                    startedAt: null,
+                } });
+        case "ROOM_JOINED":
+            return Object.assign(Object.assign({}, state), { localParticipant: action.payload.localParticipant, remoteParticipants: action.payload.remoteParticipants, waitingParticipants: action.payload.waitingParticipants, roomConnectionStatus: "connected" });
+        case "ROOM_CONNECTION_STATUS_CHANGED":
+            return Object.assign(Object.assign({}, state), { roomConnectionStatus: action.payload.roomConnectionStatus });
+        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), { isStartingScreenshare: false, startScreenshareError: action.payload });
+        case "LOCAL_SCREENSHARE_STARTING":
+            return Object.assign(Object.assign({}, state), { isStartingScreenshare: true });
+        case "LOCAL_SCREENSHARE_STOPPED":
+            return Object.assign(Object.assign({}, state), { screenshares: state.screenshares.filter((ss) => !ss.isLocal) });
+        case "STREAMING_STARTED":
+            return Object.assign(Object.assign({}, state), { streaming: {
+                    status: action.payload.status,
+                    startedAt: action.payload.startedAt,
+                } });
+        case "STREAMING_STOPPED":
+            return Object.assign(Object.assign({}, state), { streaming: {
+                    status: "",
+                    startedAt: null,
+                } });
+        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;
+    }
+}
+export function useRoomConnection(roomUrl, roomConnectionOptions) {
+    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_started", (e) => {
+            const { status, startedAt } = e.detail;
+            dispatch({ type: "CLOUD_RECORDING_STARTED", payload: { status, startedAt } });
+        }),
+        createEventListener("cloud_recording_stopped", () => {
+            dispatch({ type: "CLOUD_RECORDING_STOPPED" });
+        }),
+        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: 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("room_connection_status_changed", (e) => {
+            const { roomConnectionStatus } = e.detail;
+            dispatch({
+                type: "ROOM_CONNECTION_STATUS_CHANGED",
+                payload: { roomConnectionStatus },
+            });
+        }),
+        createEventListener("room_joined", (e) => {
+            const { localParticipant, remoteParticipants, waitingParticipants } = e.detail;
+            dispatch({
+                type: "ROOM_JOINED",
+                payload: { localParticipant, remoteParticipants, 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) => {
+            const { participantId, id } = e.detail;
+            dispatch({
+                type: "SCREENSHARE_STOPPED",
+                payload: { participantId, id },
+            });
+        }),
+        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);
+            },
+            startScreenshare: () => {
+                dispatch({ type: "LOCAL_SCREENSHARE_STARTING" });
+                try {
+                    roomConnection.startScreenshare();
+                }
+                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,20 @@
+import assert from "assert";
+export default function debounce(fn, { delay = 500, edges } = {}) {
+    assert.ok(typeof fn === "function", "fn<function> is required");
+    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));
+}