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

package/README.md

@@ -1,5 +1,6 @@
 # `@whereby.com/browser-sdk`
 
+> [!WARNING]
 > This is a pre-release of the v2 version of this library, adding support for
 > more custom integration using React hooks and plain JavaScript classes in
 > addition to the web component for embedding.
@@ -7,6 +8,8 @@
 Whereby browser SDK is a library for seamless integration of Whereby
 (https://whereby.com) video calls into your web application.
 
+**For a more detailed set of instructions, including the building of a [simple telehealth app](https://docs.whereby.com/whereby-101/create-your-video-experience/in-a-web-page/using-whereby-react-hooks-build-a-telehealth-app), please see our [documentation](https://docs.whereby.com/reference/react-hooks-reference).**
+
 ## Installation
 
 ```shell
@@ -20,7 +23,7 @@ yarn add @whereby.com/browser-sdk
 ```
 
 ## Usage
-
+> [!IMPORTANT]
 > In order to make use of this functionality, you must have a Whereby account
 > from which you can create room urls, either [manually or through our
 > API](https://docs.whereby.com/creating-and-deleting-rooms).
@@ -36,7 +39,7 @@ their device selection up-front. This hook works seamlessly with the
 `useRoomConnection` hook described below.
 
 ```js
-import { useLocalMedia, VideoView } from "@whereby.com/browser-sdk";
+import { useLocalMedia, VideoView } from "@whereby.com/browser-sdk/react";
 
 function MyPreCallUX() {
     const localMedia = useLocalMedia({ audio: false, video: true });
@@ -71,7 +74,7 @@ room, subscribe to state updates, and perform actions on the connection, like
 toggling camera or microphone.
 
 ```js
-import { useRoomConnection } from "@whereby.com/browser-sdk";
+import { useRoomConnection } from "@whereby.com/browser-sdk/react";
 
 function MyCallUX( { roomUrl, localStream }) {
     const { state, actions, components } = useRoomConnection(
@@ -99,7 +102,7 @@ function MyCallUX( { roomUrl, localStream }) {
 
 ```
 
-### Usage with Vite development environment
+#### 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:
@@ -123,7 +126,7 @@ client";` to the top of component, like in the following example:
 ```js
 "use client";
 
-import { VideoView, useLocalMedia } from "@whereby.com/browser-sdk";
+import { VideoView, useLocalMedia } from "@whereby.com/browser-sdk/react";
 
 export default function MyNextVideoExperience() {
   const { state, actions } = useLocalMedia({ audio: false, video: true });
@@ -145,7 +148,7 @@ to learn which attributes are supported.
 #### React
 
 ```js
-import "@whereby.com/browser-sdk";
+import "@whereby.com/browser-sdk/embed";
 
 const MyComponent = ({ roomUrl }) => {
     return <whereby-embed chat="off" room={roomUrl} />;
@@ -169,8 +172,7 @@ export default MyComponent;
 </html>
 ```
 
-**Note**
-
-Although we have just higlighted two combinations of how to load and use the
-web component, it should be possible to use this library with all the major
-frontend frameworks.
+> [!NOTE]
+> Although we have just higlighted two combinations of how to load and use the
+> web component, it should be possible to use this library with all the major
+> frontend frameworks.

package/dist/LocalMedia.d.ts

@@ -33,9 +33,14 @@ interface LocalMediaEventTarget extends EventTarget {
     addEventListener(type: string, callback: EventListenerOrEventListenerObject | null, options?: EventListenerOptions | boolean): void;
 }
 declare const TypedLocalMediaEventTarget: new () => LocalMediaEventTarget;
+export interface LocalMediaOptions {
+    audio: boolean;
+    video: boolean;
+}
 export default class LocalMedia extends TypedLocalMediaEventTarget {
-    private _constraints;
+    private _options;
     _rtcManagers: RtcManager[];
+    private _devices;
     stream: MediaStream;
     screenshareStream?: MediaStream;
     private _cameraEnabled;
@@ -43,7 +48,7 @@ export default class LocalMedia extends TypedLocalMediaEventTarget {
     private _isTogglingCameraEnabled;
     private _microphoneEnabled;
     private _currentMicrophoneDeviceId;
-    constructor(constraintsOrStream: MediaStreamConstraints | MediaStream);
+    constructor(optionsOrStream: LocalMediaOptions | MediaStream);
     addRtcManager(rtcManager: RtcManager): void;
     removeRtcManager(rtcManager: RtcManager): void;
     getCameraDeviceId(): string | undefined;
@@ -54,6 +59,8 @@ export default class LocalMedia extends TypedLocalMediaEventTarget {
     toggleMichrophoneEnabled(enabled?: boolean): void;
     startScreenshare(): Promise<MediaStream>;
     stopScreenshare(): void;
+    private _getConstraintsOptions;
+    private _setDevice;
     setCameraDevice(deviceId: string): Promise<void>;
     setMicrophoneDevice(deviceId: string): Promise<void>;
     private _updateDeviceList;

package/dist/LocalMedia.js

@@ -1,4 +1,5 @@
 import { __awaiter } from "tslib";
+import { getStream } from "@whereby/jslib-media/src/webrtc/MediaDevices";
 class LocalMediaEvent extends CustomEvent {
     constructor(eventType, eventInitDict) {
         super(eventType, eventInitDict);
@@ -6,16 +7,17 @@ class LocalMediaEvent extends CustomEvent {
 }
 const TypedLocalMediaEventTarget = EventTarget;
 export default class LocalMedia extends TypedLocalMediaEventTarget {
-    constructor(constraintsOrStream) {
+    constructor(optionsOrStream) {
         var _a, _b;
         super();
-        this._constraints = null;
+        this._options = null;
+        this._devices = [];
         this._isTogglingCameraEnabled = false;
-        if (constraintsOrStream instanceof MediaStream) {
-            this.stream = constraintsOrStream;
+        if (optionsOrStream instanceof MediaStream) {
+            this.stream = optionsOrStream;
         }
         else {
-            this._constraints = constraintsOrStream;
+            this._options = optionsOrStream;
             this.stream = new MediaStream();
         }
         this._cameraEnabled = ((_a = this.stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.enabled) || false;
@@ -54,7 +56,7 @@ export default class LocalMedia extends TypedLocalMediaEventTarget {
             }
             this._cameraEnabled = newValue;
             this.dispatchEvent(new LocalMediaEvent("camera_enabled", { detail: { enabled: this._cameraEnabled } }));
-            const shouldStopTrack = !!this._constraints;
+            const shouldStopTrack = !!this._options;
             this._isTogglingCameraEnabled = true;
             try {
                 if (this._cameraEnabled) {
@@ -62,15 +64,8 @@ export default class LocalMedia extends TypedLocalMediaEventTarget {
                         track.enabled = true;
                     }
                     else {
-                        const newStream = yield navigator.mediaDevices.getUserMedia({
-                            video: this._currentCameraDeviceId
-                                ? { deviceId: { exact: this._currentCameraDeviceId } }
-                                : true,
-                        });
-                        track = newStream.getVideoTracks()[0];
-                        if (track) {
-                            this.stream.addTrack(track);
-                        }
+                        yield getStream(Object.assign(Object.assign({}, this._getConstraintsOptions()), { audioId: false, videoId: this._currentCameraDeviceId, type: "exact" }), { replaceStream: this.stream });
+                        track = this.stream.getVideoTracks()[0];
                     }
                 }
                 else {
@@ -114,44 +109,47 @@ export default class LocalMedia extends TypedLocalMediaEventTarget {
         (_a = this.screenshareStream) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((track) => track.stop());
         this.screenshareStream = undefined;
     }
-    setCameraDevice(deviceId) {
+    _getConstraintsOptions() {
+        return {
+            devices: this._devices,
+            options: {
+                disableAEC: false,
+                disableAGC: false,
+                hd: true,
+                lax: false,
+                lowDataMode: false,
+                simulcast: true,
+                widescreen: true,
+            },
+        };
+    }
+    _setDevice({ audioId, videoId }) {
         return __awaiter(this, void 0, void 0, function* () {
-            this._currentCameraDeviceId = deviceId;
-            const newStream = yield navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: 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);
+            const { replacedTracks } = yield getStream(Object.assign(Object.assign({}, this._getConstraintsOptions()), { audioId,
+                videoId, type: "exact" }), { replaceStream: this.stream });
+            if (replacedTracks) {
+                replacedTracks.forEach((oldTrack) => {
+                    const newTrack = oldTrack.kind === "audio" ? this.stream.getAudioTracks()[0] : this.stream.getVideoTracks()[0];
+                    this._rtcManagers.forEach((rtcManager) => {
+                        rtcManager.replaceTrack(oldTrack, newTrack);
+                    });
                 });
-                this.stream.removeTrack(oldVideoTrack);
-                this.stream.addTrack(newVideoTrack);
             }
             this.dispatchEvent(new LocalMediaEvent("stream_updated", {
                 detail: { stream: this.stream },
             }));
         });
     }
+    setCameraDevice(deviceId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this._currentCameraDeviceId = deviceId;
+            yield this._setDevice({ videoId: this._currentCameraDeviceId, audioId: false });
+        });
+    }
     setMicrophoneDevice(deviceId) {
         return __awaiter(this, void 0, void 0, function* () {
             this._currentMicrophoneDeviceId = deviceId;
-            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 LocalMediaEvent("stream_updated", {
-                detail: { stream: this.stream },
-            }));
+            yield this._setDevice({ audioId: this._currentMicrophoneDeviceId, videoId: false });
         });
     }
     _updateDeviceList() {
@@ -165,6 +163,7 @@ export default class LocalMedia extends TypedLocalMediaEventTarget {
                         speakerDevices: devices.filter((d) => d.kind === "audiooutput"),
                     },
                 }));
+                this._devices = devices;
             }
             catch (error) {
                 this.dispatchEvent(new LocalMediaEvent("device_list_update_error", {
@@ -178,22 +177,20 @@ export default class LocalMedia extends TypedLocalMediaEventTarget {
     }
     start() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this._constraints) {
-                const newStream = yield navigator.mediaDevices.getUserMedia(this._constraints);
-                const cameraTrack = newStream.getVideoTracks()[0];
+            yield this._updateDeviceList();
+            if (this._options) {
+                yield getStream(Object.assign(Object.assign({}, this._getConstraintsOptions()), { audioId: this._options.audio, videoId: this._options.video }), { replaceStream: this.stream });
+                const cameraTrack = this.stream.getVideoTracks()[0];
                 if (cameraTrack) {
                     this._cameraEnabled = cameraTrack.enabled;
                     this._currentCameraDeviceId = cameraTrack.getSettings().deviceId;
-                    this.stream.addTrack(cameraTrack);
                 }
-                const microphoneTrack = newStream.getAudioTracks()[0];
+                const microphoneTrack = this.stream.getAudioTracks()[0];
                 if (microphoneTrack) {
                     this._microphoneEnabled = microphoneTrack.enabled;
                     this._currentMicrophoneDeviceId = microphoneTrack.getSettings().deviceId;
-                    this.stream.addTrack(microphoneTrack);
                 }
             }
-            this._updateDeviceList();
             this.dispatchEvent(new LocalMediaEvent("stream_updated", {
                 detail: { stream: this.stream },
             }));
@@ -202,7 +199,7 @@ export default class LocalMedia extends TypedLocalMediaEventTarget {
     }
     stop() {
         var _a;
-        if (this._constraints) {
+        if (this._options) {
             (_a = this.stream) === null || _a === void 0 ? void 0 : _a.getTracks().forEach((t) => {
                 t.stop();
             });

package/dist/RoomConnection.d.ts

@@ -1,11 +1,11 @@
 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">;
+import LocalMedia, { LocalMediaOptions } from "./LocalMedia";
+type Logger = Pick<Console, "debug" | "error" | "log" | "warn" | "info">;
 export interface RoomConnectionOptions {
     displayName?: string;
-    localMediaConstraints?: MediaStreamConstraints;
+    localMediaOptions?: LocalMediaOptions;
     roomKey?: string;
     logger?: Logger;
     localMedia?: LocalMedia;
@@ -14,8 +14,9 @@ export interface RoomConnectionOptions {
 export type ChatMessage = Pick<SignalChatMessage, "senderId" | "timestamp" | "text">;
 export type ConnectionStatus = "initializing" | "connecting" | "connected" | "room_locked" | "knocking" | "disconnecting" | "disconnected" | "knock_rejected";
 export type CloudRecordingState = {
-    status: "recording";
-    startedAt: number;
+    error?: string;
+    status: "recording" | "requested" | "error";
+    startedAt?: number;
 };
 export type LiveStreamState = {
     status: "streaming";
@@ -78,7 +79,9 @@ export type LocalMicrophoneEnabledEvent = {
 };
 export interface RoomEventsMap {
     chat_message: (e: CustomEvent<ChatMessage>) => void;
+    cloud_recording_request_started: (e: CustomEvent<CloudRecordingState>) => void;
     cloud_recording_started: (e: CustomEvent<CloudRecordingState>) => void;
+    cloud_recording_started_error: (e: CustomEvent<CloudRecordingState>) => void;
     cloud_recording_stopped: (e: CustomEvent<CloudRecordingState>) => void;
     local_camera_enabled: (e: CustomEvent<LocalCameraEnabledEvent>) => void;
     local_microphone_enabled: (e: CustomEvent<LocalMicrophoneEnabledEvent>) => void;
@@ -140,10 +143,11 @@ export default class RoomConnection extends TypedEventTarget {
     private displayName?;
     private externalId?;
     private _roomKey;
-    constructor(roomUrl: string, { displayName, localMedia, localMediaConstraints, logger, roomKey, externalId }: RoomConnectionOptions);
+    constructor(roomUrl: string, { displayName, localMedia, localMediaOptions: localMediaConstraints, logger, roomKey, externalId, }: RoomConnectionOptions);
     get roomKey(): string | null;
     private _handleNewChatMessage;
     private _handleCloudRecordingStarted;
+    private _handleRecorderClientJoined;
     private _handleStreamingStarted;
     private _handleNewClient;
     private _handleClientLeft;
@@ -180,5 +184,7 @@ export default class RoomConnection extends TypedEventTarget {
     }): void;
     startScreenshare(): Promise<void>;
     stopScreenshare(): void;
+    startCloudRecording(): void;
+    stopCloudRecording(): void;
 }
 export {};

package/dist/RoomConnection.js

@@ -54,7 +54,7 @@ const noop = () => {
 };
 const TypedEventTarget = EventTarget;
 export default class RoomConnection extends TypedEventTarget {
-    constructor(roomUrl, { displayName, localMedia, localMediaConstraints, logger, roomKey, externalId }) {
+    constructor(roomUrl, { displayName, localMedia, localMediaOptions: localMediaConstraints, logger, roomKey, externalId, }) {
         super();
         this.remoteParticipants = [];
         this.screenshares = [];
@@ -70,6 +70,7 @@ export default class RoomConnection extends TypedEventTarget {
         this.logger = logger || {
             debug: noop,
             error: noop,
+            info: noop,
             log: noop,
             warn: noop,
         };
@@ -116,6 +117,7 @@ export default class RoomConnection extends TypedEventTarget {
         this.signalSocket.on("knocker_left", this._handleKnockerLeft.bind(this));
         this.signalSocket.on("room_joined", this._handleRoomJoined.bind(this));
         this.signalSocket.on("room_knocked", this._handleRoomKnocked.bind(this));
+        this.signalSocket.on("cloud_recording_started", this._handleCloudRecordingStarted.bind(this));
         this.signalSocket.on("cloud_recording_stopped", this._handleCloudRecordingStopped.bind(this));
         this.signalSocket.on("screenshare_started", this._handleScreenshareStarted.bind(this));
         this.signalSocket.on("screenshare_stopped", this._handleScreenshareStopped.bind(this));
@@ -158,6 +160,7 @@ export default class RoomConnection extends TypedEventTarget {
                 h264On: false,
                 simulcastScreenshareOn: false,
             },
+            logger: this.logger,
         });
     }
     get roomKey() {
@@ -166,7 +169,14 @@ export default class RoomConnection extends TypedEventTarget {
     _handleNewChatMessage(message) {
         this.dispatchEvent(new RoomConnectionEvent("chat_message", { detail: message }));
     }
-    _handleCloudRecordingStarted({ client }) {
+    _handleCloudRecordingStarted(event) {
+        if (event.error) {
+            this.dispatchEvent(new RoomConnectionEvent("cloud_recording_started_error", {
+                detail: { error: event.error, status: "error" },
+            }));
+        }
+    }
+    _handleRecorderClientJoined({ client }) {
         this.dispatchEvent(new RoomConnectionEvent("cloud_recording_started", {
             detail: {
                 status: "recording",
@@ -186,7 +196,7 @@ export default class RoomConnection extends TypedEventTarget {
     }
     _handleNewClient({ client }) {
         if (client.role.roleName === "recorder") {
-            this._handleCloudRecordingStarted({ client });
+            this._handleRecorderClientJoined({ client });
         }
         if (client.role.roleName === "streamer") {
             this._handleStreamingStarted();
@@ -280,7 +290,7 @@ export default class RoomConnection extends TypedEventTarget {
             this.localParticipant = new LocalParticipant(Object.assign(Object.assign({}, localClient), { stream: this.localMedia.stream || undefined }));
             const recorderClient = clients.find((c) => c.role.roleName === "recorder");
             if (recorderClient) {
-                this._handleCloudRecordingStarted({ client: recorderClient });
+                this._handleRecorderClientJoined({ client: recorderClient });
             }
             const streamerClient = clients.find((c) => c.role.roleName === "streamer");
             if (streamerClient) {
@@ -624,4 +634,13 @@ export default class RoomConnection extends TypedEventTarget {
             this.localMedia.stopScreenshare();
         }
     }
+    startCloudRecording() {
+        this.signalSocket.emit("start_recording", {
+            recording: "cloud",
+        });
+        this.dispatchEvent(new RoomConnectionEvent("cloud_recording_request_started"));
+    }
+    stopCloudRecording() {
+        this.signalSocket.emit("stop_recording");
+    }
 }

package/dist/api/ApiClient.js

@@ -1,5 +1,5 @@
-import assert from "assert";
 import nodeBtoa from "btoa";
+import assert from "@whereby/jslib-media/src/utils/assert";
 import HttpClient from "./HttpClient";
 import MultipartHttpClient from "./MultipartHttpClient";
 import { assertString } from "./parameterAssertUtils";
@@ -38,8 +38,6 @@ class AuthenticatedHttpClient {
 }
 export default class ApiClient {
     constructor({ baseUrl = "https://api.appearin.net", fetchDeviceCredentials = noCredentials, } = {}) {
-        assertString(baseUrl, "baseUrl");
-        assert.ok(typeof fetchDeviceCredentials === "function", "fetchDeviceCredentials<Function> is required");
         this.authenticatedHttpClient = new AuthenticatedHttpClient({
             httpClient: new HttpClient({
                 baseUrl,
@@ -50,13 +48,13 @@ export default class ApiClient {
     }
     request(url, options) {
         assertString(url, "url");
-        assert.equal(url[0], "/", 'url<String> only accepts relative URLs beginning with "/".');
+        assert.ok(url[0] === "/", 'url<String> only accepts relative URLs beginning with "/".');
         assert.ok(options, "options are required");
         return this.authenticatedHttpClient.request(url, options);
     }
     requestMultipart(url, options) {
         assertString(url, "url");
-        assert.equal(url[0], "/", 'url<String> only accepts relative URLs beginning with "/".');
+        assert.ok(url[0] === "/", 'url<String> only accepts relative URLs beginning with "/".');
         assert.ok(options, "options are required");
         return this.authenticatedFormDataHttpClient.request(url, options);
     }

package/dist/api/HttpClient.js

@@ -1,9 +1,8 @@
-import assert from "assert";
+import assert from "@whereby/jslib-media/src/utils/assert";
 import axios from "axios";
 import Response from "./Response";
 import { assertString } from "./parameterAssertUtils";
 function _getAbsoluteUrl({ baseUrl, url }) {
-    assert.ok(typeof url === "string", "url<String> is required");
     return baseUrl ? baseUrl + url : url;
 }
 export default class HttpClient {
@@ -20,7 +19,7 @@ export default class HttpClient {
     }
     request(url, options) {
         assertString(url, "url");
-        assert.equal(url[0], "/", 'url<String> only accepts relative URLs beginning with "/".');
+        assert.ok(url[0] === "/", 'url<String> only accepts relative URLs beginning with "/".');
         assert.ok(options, "options are required");
         return this._requestAxios(url, options)
             .then((response) => {

package/dist/api/MultipartHttpClient.js

@@ -1,4 +1,4 @@
-import assert from "assert";
+import assert from "@whereby/jslib-media/src/utils/assert";
 export default class MultipartHttpClient {
     constructor({ httpClient }) {
         assert.ok(httpClient, "httpClient is required");

package/dist/api/OrganizationApiClient.js

@@ -1,16 +1,15 @@
-import assert from "assert";
+import assert from "@whereby/jslib-media/src/utils/assert";
 import { assertString } from "./parameterAssertUtils";
 const noOrganization = () => Promise.resolve(undefined);
 export default class OrganizationApiClient {
     constructor({ apiClient, fetchOrganization = noOrganization, }) {
         this._apiClient = apiClient;
-        assert.ok(typeof fetchOrganization === "function", "fetchOrganization<Function> is required");
         this._fetchOrganization = fetchOrganization;
         this._apiClient = apiClient;
     }
     _callRequestMethod(method, url, options) {
         assertString(url, "url");
-        assert.equal(url[0], "/", 'url<String> only accepts relative URLs beginning with "/".');
+        assert.ok(url[0] === "/", 'url<String> only accepts relative URLs beginning with "/".');
         assert.ok(options, "options are required");
         return this._fetchOrganization().then((organization) => {
             if (!organization) {

package/dist/api/models/Room.js

@@ -1,4 +1,4 @@
-import assert from "assert";
+import assert from "@whereby/jslib-media/src/utils/assert";
 export default class Room {
     constructor(properties = {}) {
         assert.ok(properties instanceof Object, "properties<object> must be empty or an object");

package/dist/api/organizationService/index.js

@@ -1,4 +1,4 @@
-import assert from "assert";
+import assert from "@whereby/jslib-media/src/utils/assert";
 import Organization from "../models/Organization";
 import { assertInstanceOf, assertTruthy, assertString, assertArray, assertNullOrString, assertRecord, } from "../parameterAssertUtils";
 import Response from "../Response";

package/dist/api/parameterAssertUtils.js

@@ -1,4 +1,4 @@
-import assert from "assert";
+import assert from "@whereby/jslib-media/src/utils/assert";
 export function assertTruthy(value, parameterName) {
     assert.ok(value, `${parameterName} is required`);
     return value;
@@ -22,7 +22,7 @@ export function assertInstanceOf(value, type, parameterName) {
 }
 export function assertRoomName(roomName, parameterName = "roomName") {
     assertString(roomName, parameterName);
-    assert.equal(typeof roomName === "string" && roomName[0], "/", `${parameterName} must begin with a '/'`);
+    assert.ok(typeof roomName === "string" && roomName[0] === "/", `${parameterName} must begin with a '/'`);
     return roomName;
 }
 export function assertArray(array, parameterName) {

package/dist/embed/index.js

@@ -31,10 +31,10 @@ define("WherebyEmbed", {
         this.iframe = ref();
     },
     onconnected() {
-        window.addEventListener("message", this.onmessage);
+        window.addEventListener("message", this.onmessage.bind(this));
     },
     ondisconnected() {
-        window.removeEventListener("message", this.onmessage);
+        window.removeEventListener("message", this.onmessage.bind(this));
     },
     observedAttributes: [
         "displayName",
@@ -87,8 +87,7 @@ define("WherebyEmbed", {
         this._postCommand("toggle_screenshare", [enabled]);
     },
     onmessage({ origin, data }) {
-        var _a;
-        if (origin !== ((_a = this.url) === null || _a === void 0 ? void 0 : _a.origin))
+        if (origin !== this.url.origin)
             return;
         const { type, payload: detail } = data;
         this.dispatchEvent(new CustomEvent(type, { detail }));

package/dist/react/VideoView.d.ts

@@ -11,5 +11,5 @@ interface VideoViewSelfProps {
     }) => void;
 }
 type VideoViewProps = VideoViewSelfProps & React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>;
-declare const _default: ({ muted, mirror, stream, onResize, ...rest }: VideoViewProps) => JSX.Element;
+declare const _default: ({ muted, mirror, stream, onResize, ...rest }: VideoViewProps) => React.JSX.Element;
 export default _default;

package/dist/react/VideoView.js

@@ -33,5 +33,5 @@ export default (_a) => {
             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" }, rest.style) })));
+    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) })));
 };

package/dist/react/useLocalMedia.d.ts

@@ -1,4 +1,4 @@
-import LocalMedia from "../LocalMedia";
+import LocalMedia, { LocalMediaOptions } from "../LocalMedia";
 interface LocalMediaState {
     currentCameraDeviceId?: string;
     currentMicrophoneDeviceId?: string;
@@ -24,5 +24,6 @@ export type LocalMediaRef = {
     actions: LocalMediaActions;
     _ref: LocalMedia;
 };
-export default function useLocalMedia(constraintsOrStream?: MediaStreamConstraints | MediaStream): LocalMediaRef;
+export type UseLocalMediaOptions = LocalMediaOptions;
+export default function useLocalMedia(optionsOrStream?: UseLocalMediaOptions | MediaStream): LocalMediaRef;
 export {};

package/dist/react/useLocalMedia.js

@@ -40,8 +40,8 @@ function reducer(state, action) {
             return state;
     }
 }
-export default function useLocalMedia(constraintsOrStream = { audio: true, video: true }) {
-    const [localMedia] = useState(() => new LocalMedia(constraintsOrStream));
+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) => {

package/dist/react/useRoomConnection.d.ts

@@ -38,7 +38,9 @@ interface RoomConnectionActions {
     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">;

package/dist/react/useRoomConnection.js

@@ -42,11 +42,20 @@ 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);
@@ -124,7 +133,7 @@ function reducer(state, action) {
     }
 }
 const defaultRoomConnectionOptions = {
-    localMediaConstraints: {
+    localMediaOptions: {
         audio: true,
         video: true,
     },
@@ -146,10 +155,16 @@ export function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomCo
         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" });
         }),
@@ -285,6 +300,16 @@ export function useRoomConnection(roomUrl, roomConnectionOptions = defaultRoomCo
             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 {

package/dist/utils/debounce.js

@@ -1,6 +1,4 @@
-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) => {

package/dist/{v2-beta1.js → v2-beta2.js}

@@ -1822,7 +1822,7 @@ var setupIncludes = (Class, tagName2, is, u) => {
 };
 
 // src/lib/version.ts
-var sdkVersion = "2.0.0-beta1";
+var sdkVersion = "2.0.0-beta2";
 
 // src/lib/embed/index.ts
 var boolAttrs = [
@@ -1856,10 +1856,10 @@ define("WherebyEmbed", {
     this.iframe = ref2();
   },
   onconnected() {
-    window.addEventListener("message", this.onmessage);
+    window.addEventListener("message", this.onmessage.bind(this));
   },
   ondisconnected() {
-    window.removeEventListener("message", this.onmessage);
+    window.removeEventListener("message", this.onmessage.bind(this));
   },
   observedAttributes: [
     "displayName",
@@ -1913,8 +1913,7 @@ define("WherebyEmbed", {
     this._postCommand("toggle_screenshare", [enabled]);
   },
   onmessage({ origin, data: data2 }) {
-    var _a;
-    if (origin !== ((_a = this.url) == null ? void 0 : _a.origin))
+    if (origin !== this.url.origin)
       return;
     const { type, payload: detail } = data2;
     this.dispatchEvent(new CustomEvent(type, { detail }));
@@ -1948,7 +1947,7 @@ define("WherebyEmbed", {
     }
     Object.entries(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
       jsApi: true,
-      we: "2.0.0-beta1",
+      we: "2.0.0-beta2",
       iframeSource: subdomain
     }, displayName && { displayName }), lang && { lang }), metadata && { metadata }), externalId && { externalId }), groups && { groups }), virtualBackgroundUrl && { virtualBackgroundUrl }), avatarUrl && { avatarUrl }), minimal != null && { embed: minimal }), boolAttrs.reduce(
       // add to URL if set in any way

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@whereby.com/browser-sdk",
-    "version": "2.0.0-beta1",
+    "version": "2.0.0-beta2",
     "description": "Modules for integration Whereby video in web apps",
     "author": "Whereby AS",
     "license": "MIT",
@@ -11,15 +11,21 @@
     "browserslist": "> 0.5%, last 2 versions, not dead",
     "source": "src/index.js",
     "exports": {
-        "./react":  "./dist/react/index.js",
-        "./embed":  "./dist/embed/index.js",
-        "./utils":  "./dist/utils/index.js"
+        "./react": "./dist/react/index.js",
+        "./embed": "./dist/embed/index.js",
+        "./utils": "./dist/utils/index.js"
     },
     "typesVersions": {
         "*": {
-            "react": ["dist/react/index.d.ts"],
-            "embed": ["dist/embed/index.d.ts"],
-            "utils": ["dist/utils/index.d.ts"]
+            "react": [
+                "dist/react/index.d.ts"
+            ],
+            "embed": [
+                "dist/embed/index.d.ts"
+            ],
+            "utils": [
+                "dist/utils/index.d.ts"
+            ]
         }
     },
     "files": [
@@ -30,8 +36,8 @@
         "prebuild": "rimraf dist",
         "build": "node build.js",
         "postbuild": "tsc --project tsconfig.build.json",
-        "build:storybook": "build-storybook",
-        "dev": "start-storybook -p 6006",
+        "build:storybook": "storybook build",
+        "dev": "storybook dev -p 6006",
         "install:e2e-sample-app": "cd test/sample-app && yarn custom_install",
         "start:e2e-sample-app": "cd test/sample-app && yarn start",
         "test": "yarn test:lint && yarn test:unit",
@@ -39,23 +45,25 @@
         "test:unit": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
         "test:unit:watch": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watch",
         "test:e2e": "playwright test",
-        "storybook": "start-storybook -p 6006",
-        "build-storybook": "build-storybook"
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
     },
     "devDependencies": {
         "@babel/core": "^7.18.5",
         "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+        "@babel/preset-env": "^7.23.2",
+        "@babel/preset-react": "^7.22.15",
+        "@babel/preset-typescript": "^7.23.2",
         "@playwright/test": "^1.38.1",
         "@rollup/plugin-commonjs": "^24.0.0",
         "@rollup/plugin-json": "^6.0.0",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-replace": "^4.0.0",
-        "@storybook/addon-actions": "^6.5.14",
-        "@storybook/addon-essentials": "^6.5.14",
-        "@storybook/addon-links": "^6.5.14",
-        "@storybook/builder-webpack5": "^6.5.14",
-        "@storybook/manager-webpack5": "^6.5.14",
-        "@storybook/react": "^6.5.14",
+        "@storybook/addon-actions": "^7.5.2",
+        "@storybook/addon-essentials": "^7.5.2",
+        "@storybook/addon-links": "^7.5.2",
+        "@storybook/react": "^7.5.2",
+        "@storybook/react-webpack5": "^7.5.2",
         "@testing-library/react": "^14.0.0",
         "@types/btoa": "^1.2.3",
         "@types/chrome": "^0.0.210",
@@ -78,6 +86,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rimraf": "^3.0.2",
+        "storybook": "^7.5.2",
         "ts-jest": "29.0.5",
         "tslib": "^2.4.1",
         "typescript": "^4.9.4",
@@ -85,8 +94,7 @@
     },
     "dependencies": {
         "@swc/helpers": "^0.3.13",
-        "@whereby/jslib-media": "whereby/jslib-media.git#1.3.3",
-        "assert": "^2.0.0",
+        "@whereby/jslib-media": "whereby/jslib-media.git#1.4.1",
         "axios": "^1.2.3",
         "btoa": "^1.2.1",
         "events": "^3.3.0",
@@ -95,5 +103,10 @@
     "peerDependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
+    },
+    "resolutions": {
+        "string-width": "^4",
+        "jackspeak": "2.1.1",
+        "wrap-ansi": "7.0.0"
     }
 }