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

package/README.md

@@ -99,6 +99,20 @@ function MyCallUX( { roomUrl, localStream }) {
 
 ```
 
+### Usage with Vite development environment
+
+There is a [known Vite issue](https://github.com/vitejs/vite/issues/1973) where modules trying to access `process.env` throw `Uncaught ReferenceError: process is not defined`.
+This can be solved in `vite.config.js` with the following line:
+
+``` javascript
+export default defineConfig({
+    ...rest,
+    define: {
+        'process.env': {}
+    },
+});
+```
+
 #### Usage with Next.js
 
 If you are integrating these React hooks with Next.js, you need to ensure your

package/dist/LocalMedia.d.ts

@@ -0,0 +1,53 @@
+import RtcManager from "@whereby/jslib-media/src/webrtc/RtcManager";
+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;
+export default class LocalMedia extends TypedLocalMediaEventTarget {
+    private _constraints;
+    _rtcManagers: RtcManager[];
+    stream: MediaStream;
+    screenshareStream?: MediaStream;
+    constructor(constraintsOrStream: MediaStreamConstraints | MediaStream);
+    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;
+    startScreenshare(): Promise<MediaStream>;
+    stopScreenshare(): void;
+    setCameraDevice(deviceId: string): Promise<void>;
+    setMicrophoneDevice(deviceId: string): Promise<void>;
+    private _updateDeviceList;
+    start(): Promise<MediaStream>;
+    stop(): void;
+}
+export {};

package/dist/LocalMedia.js

@@ -0,0 +1,154 @@
+import { __awaiter } from "tslib";
+const TypedLocalMediaEventTarget = EventTarget;
+export default class LocalMedia extends TypedLocalMediaEventTarget {
+    constructor(constraintsOrStream) {
+        super();
+        this._constraints = null;
+        if (constraintsOrStream instanceof MediaStream) {
+            this.stream = constraintsOrStream;
+        }
+        else {
+            this._constraints = constraintsOrStream;
+            this.stream = new MediaStream();
+        }
+        this._rtcManagers = [];
+        this.screenshareStream = undefined;
+        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 } }));
+    }
+    startScreenshare() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.screenshareStream) {
+                return this.screenshareStream;
+            }
+            const screenshareStream = yield navigator.mediaDevices.getDisplayMedia();
+            this.screenshareStream = screenshareStream;
+            return this.screenshareStream;
+        });
+    }
+    stopScreenshare() {
+        var _a;
+        (_a = this.screenshareStream) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((track) => track.stop());
+        this.screenshareStream = undefined;
+    }
+    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* () {
+            if (this._constraints) {
+                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;
+        if (this._constraints) {
+            (_a = this.stream) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((t) => {
+                t.stop();
+            });
+        }
+    }
+}

package/dist/RoomConnection.d.ts

@@ -0,0 +1,174 @@
+import { RtcStreamAddedPayload } from "@whereby/jslib-media/src/webrtc/RtcManagerDispatcher";
+import { LocalParticipant, RemoteParticipant, Screenshare, WaitingParticipant } from "./RoomParticipant";
+import { ChatMessage as SignalChatMessage } from "@whereby/jslib-media/src/utils/ServerSocket";
+import LocalMedia from "./LocalMedia";
+type Logger = Pick<Console, "debug" | "error" | "log" | "warn">;
+export interface RoomConnectionOptions {
+    displayName?: string;
+    localMediaConstraints?: MediaStreamConstraints;
+    roomKey?: string;
+    logger?: Logger;
+    localMedia?: LocalMedia;
+}
+export type ChatMessage = Pick<SignalChatMessage, "senderId" | "timestamp" | "text">;
+export type RoomConnectionStatus = "" | "connecting" | "connected" | "room_locked" | "knocking" | "disconnecting" | "disconnected" | "accepted" | "rejected";
+export type CloudRecordingState = {
+    status: "" | "recording";
+    startedAt: number | null;
+};
+export type StreamingState = {
+    status: "" | "streaming";
+    startedAt: number | null;
+};
+export type RoomJoinedEvent = {
+    localParticipant: LocalParticipant;
+    remoteParticipants: RemoteParticipant[];
+    waitingParticipants: WaitingParticipant[];
+};
+export type RoomConnectionStatusChangedEvent = {
+    roomConnectionStatus: RoomConnectionStatus;
+};
+export type ParticipantJoinedEvent = {
+    remoteParticipant: RemoteParticipant;
+};
+export type ParticipantLeftEvent = {
+    participantId: string;
+};
+export type ParticipantStreamAddedEvent = {
+    participantId: string;
+    stream: MediaStream;
+};
+export type ParticipantAudioEnabledEvent = {
+    participantId: string;
+    isAudioEnabled: boolean;
+};
+export type ParticipantVideoEnabledEvent = {
+    participantId: string;
+    isVideoEnabled: boolean;
+};
+export type ParticipantMetadataChangedEvent = {
+    participantId: string;
+    displayName: string;
+};
+export type ScreenshareStartedEvent = {
+    participantId: string;
+    id: string;
+    hasAudioTrack: boolean;
+    stream: MediaStream;
+    isLocal: boolean;
+};
+export type ScreenshareStoppedEvent = {
+    participantId: string;
+    id: string;
+};
+export type WaitingParticipantJoinedEvent = {
+    participantId: string;
+    displayName: string | null;
+};
+export type WaitingParticipantLeftEvent = {
+    participantId: string;
+};
+export interface RoomEventsMap {
+    chat_message: (e: CustomEvent<ChatMessage>) => void;
+    cloud_recording_started: (e: CustomEvent<CloudRecordingState>) => void;
+    cloud_recording_stopped: (e: CustomEvent<CloudRecordingState>) => void;
+    participant_audio_enabled: (e: CustomEvent<ParticipantAudioEnabledEvent>) => void;
+    participant_joined: (e: CustomEvent<ParticipantJoinedEvent>) => void;
+    participant_left: (e: CustomEvent<ParticipantLeftEvent>) => void;
+    participant_metadata_changed: (e: CustomEvent<ParticipantMetadataChangedEvent>) => void;
+    participant_stream_added: (e: CustomEvent<ParticipantStreamAddedEvent>) => void;
+    participant_video_enabled: (e: CustomEvent<ParticipantVideoEnabledEvent>) => void;
+    room_connection_status_changed: (e: CustomEvent<RoomConnectionStatusChangedEvent>) => void;
+    room_joined: (e: CustomEvent<RoomJoinedEvent>) => void;
+    screenshare_started: (e: CustomEvent<ScreenshareStartedEvent>) => void;
+    screenshare_stopped: (e: CustomEvent<ScreenshareStoppedEvent>) => void;
+    streaming_started: (e: CustomEvent<StreamingState>) => void;
+    streaming_stopped: (e: CustomEvent<StreamingState>) => void;
+    waiting_participant_joined: (e: CustomEvent<WaitingParticipantJoinedEvent>) => void;
+    waiting_participant_left: (e: CustomEvent<WaitingParticipantLeftEvent>) => void;
+}
+export declare function handleStreamAdded(remoteParticipants: RemoteParticipant[], { clientId, stream, streamId, streamType }: RtcStreamAddedPayload): CustomEvent<{
+    participantId: string;
+    stream: MediaStream;
+    streamId: string;
+}> | CustomEvent<{
+    participantId: string;
+    stream: MediaStream;
+    id: string;
+    isLocal: boolean;
+}> | undefined;
+interface RoomEventTarget extends EventTarget {
+    addEventListener<K extends keyof RoomEventsMap>(type: K, listener: RoomEventsMap[K], options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+    removeEventListener<K extends keyof RoomEventsMap>(type: K, listener: RoomEventsMap[K], options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
+}
+declare const TypedEventTarget: new () => RoomEventTarget;
+export default class RoomConnection extends TypedEventTarget {
+    localMedia: LocalMedia;
+    localParticipant: LocalParticipant | null;
+    roomUrl: URL;
+    remoteParticipants: RemoteParticipant[];
+    screenshares: Screenshare[];
+    readonly localMediaConstraints?: MediaStreamConstraints;
+    readonly roomName: string;
+    private organizationId;
+    private credentialsService;
+    private apiClient;
+    private organizationService;
+    private organizationServiceCache;
+    private organizationApiClient;
+    private roomService;
+    private _deviceCredentials;
+    private signalSocket;
+    private signalSocketManager;
+    private rtcManagerDispatcher?;
+    private rtcManager?;
+    private roomConnectionStatus;
+    private selfId;
+    private logger;
+    private _ownsLocalMedia;
+    private displayName?;
+    private _roomKey;
+    constructor(roomUrl: string, { displayName, localMedia, localMediaConstraints, logger, roomKey }: RoomConnectionOptions);
+    get roomKey(): string | null;
+    private _handleNewChatMessage;
+    private _handleCloudRecordingStarted;
+    private _handleStreamingStarted;
+    private _handleNewClient;
+    private _handleClientLeft;
+    private _handleClientAudioEnabled;
+    private _handleClientVideoEnabled;
+    private _handleClientMetadataReceived;
+    private _handleKnockHandled;
+    private _handleKnockerLeft;
+    private _handleRoomJoined;
+    private _handleRoomKnocked;
+    private _handleReconnect;
+    private _handleDisconnect;
+    private _handleCloudRecordingStopped;
+    private _handleStreamingStopped;
+    private _handleScreenshareStarted;
+    private _handleScreenshareStopped;
+    private _handleRtcEvent;
+    private _handleRtcManagerCreated;
+    private _handleRtcManagerDestroyed;
+    private _handleAcceptStreams;
+    private _handleStreamAdded;
+    private _joinRoom;
+    join(): Promise<void>;
+    knock(): void;
+    leave(): void;
+    sendChatMessage(text: string): void;
+    setDisplayName(displayName: string): void;
+    acceptWaitingParticipant(participantId: string): void;
+    rejectWaitingParticipant(participantId: string): void;
+    updateStreamResolution({ streamId, width, height }: {
+        streamId?: string;
+        width: number;
+        height: number;
+    }): void;
+    startScreenshare(): Promise<void>;
+    stopScreenshare(): void;
+}
+export {};