@whereby.com/browser-sdk 2.0.0-alpha19 → 2.0.0-alpha20

package/dist/lib.cjs

@@ -150,7 +150,7 @@ heresy.define("WherebyEmbed", {
         if (roomUrl.searchParams.get("roomKey")) {
             this.url.searchParams.append("roomKey", roomUrl.searchParams.get("roomKey"));
         }
-        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha19", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
+        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha20", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
         // add to URL if set in any way
         (o, v) => (this[v.toLowerCase()] != null ? Object.assign(Object.assign({}, o), { [v]: this[v.toLowerCase()] }) : o), {}))).forEach(([k, v]) => {
             if (!this.url.searchParams.has(k) && typeof v === "string") {
@@ -3299,6 +3299,7 @@ class LocalMedia extends TypedLocalMediaEventTarget {
         this._constraints = constraints;
         this.stream = new MediaStream();
         this._rtcManagers = [];
+        this.screenshareStream = undefined;
         navigator.mediaDevices.addEventListener("devicechange", this._updateDeviceList.bind(this));
     }
     addRtcManager(rtcManager) {
@@ -3341,6 +3342,21 @@ class LocalMedia extends TypedLocalMediaEventTarget {
         audioTrack.enabled = newValue;
         this.dispatchEvent(new CustomEvent("microphone_enabled", { detail: { enabled: newValue } }));
     }
+    startScreenshare() {
+        return tslib.__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 tslib.__awaiter(this, void 0, void 0, function* () {
             const newStream = yield navigator.mediaDevices.getUserMedia({ video: { deviceId } });
@@ -8687,7 +8703,10 @@ class RoomConnection extends TypedEventTarget {
         }
         remoteParticipant.addStream(id, "to_accept");
         this._handleAcceptStreams([remoteParticipant]);
-        this.screenshares = [...this.screenshares, { participantId, id, hasAudioTrack, stream: undefined }];
+        this.screenshares = [
+            ...this.screenshares,
+            { participantId, id, hasAudioTrack, stream: undefined, isLocal: false },
+        ];
     }
     _handleScreenshareStopped(screenshare) {
         const { clientId: participantId, streamId: id } = screenshare;
@@ -8793,7 +8812,9 @@ class RoomConnection extends TypedEventTarget {
             return;
         }
         // screenshare
-        this.dispatchEvent(new CustomEvent("screenshare_started", { detail: { participantId: clientId, stream, id: streamId } }));
+        this.dispatchEvent(new CustomEvent("screenshare_started", {
+            detail: { participantId: clientId, stream, id: streamId, isLocal: false },
+        }));
     }
     _joinRoom() {
         this.signalSocket.emit("join_room", {
@@ -8921,6 +8942,42 @@ class RoomConnection extends TypedEventTarget {
         }
         reportedStreamResolutions.set(streamId, { width, height });
     }
+    startScreenshare() {
+        var _a;
+        return tslib.__awaiter(this, void 0, void 0, function* () {
+            const screenshareStream = this.localMedia.screenshareStream || (yield this.localMedia.startScreenshare());
+            (_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.addNewStream(screenshareStream.id, screenshareStream, false, true);
+            this.screenshares = [
+                ...this.screenshares,
+                {
+                    participantId: this.selfId || "",
+                    id: screenshareStream.id,
+                    hasAudioTrack: false,
+                    stream: screenshareStream,
+                    isLocal: true,
+                },
+            ];
+            this.dispatchEvent(new CustomEvent("screenshare_started", {
+                detail: {
+                    participantId: this.selfId || "",
+                    id: screenshareStream.id,
+                    hasAudioTrack: false,
+                    stream: screenshareStream,
+                    isLocal: true,
+                },
+            }));
+        });
+    }
+    stopScreenshare() {
+        var _a;
+        if (this.localMedia.screenshareStream) {
+            const { id } = this.localMedia.screenshareStream;
+            (_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.removeStream(id, this.localMedia.screenshareStream, null);
+            this.screenshares = this.screenshares.filter((s) => s.id !== id);
+            this.dispatchEvent(new CustomEvent("screenshare_stopped", { detail: { participantId: this.selfId, id } }));
+            this.localMedia.stopScreenshare();
+        }
+    }
 }
 
 const initialState = {
@@ -8930,7 +8987,9 @@ const initialState = {
         startedAt: null,
     },
     isJoining: false,
+    isStartingScreenshare: false,
     joinError: null,
+    startScreenshareError: null,
     mostRecentChatMessage: null,
     remoteParticipants: [],
     roomConnectionStatus: "",
@@ -9008,9 +9067,16 @@ function reducer(state, action) {
                     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.participantId !== action.payload.participantId || ss.id !== action.payload.id) });
+            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,
@@ -9095,10 +9161,10 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             });
         }),
         createEventListener("screenshare_started", (e) => {
-            const { participantId, stream, id, hasAudioTrack } = e.detail;
+            const { participantId, stream, id, hasAudioTrack, isLocal } = e.detail;
             dispatch({
                 type: "SCREENSHARE_STARTED",
-                payload: { participantId, stream, id, hasAudioTrack },
+                payload: { participantId, stream, id, hasAudioTrack, isLocal },
             });
         }),
         createEventListener("screenshare_stopped", (e) => {
@@ -9160,6 +9226,18 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             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__default["default"].createElement(VideoView, Object.assign({}, props, {
@@ -9176,7 +9254,7 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     };
 }
 
-const sdkVersion = "2.0.0-alpha19";
+const sdkVersion = "2.0.0-alpha20";
 
 exports.VideoView = VideoView;
 exports.sdkVersion = sdkVersion;

package/dist/lib.esm.js

@@ -128,7 +128,7 @@ define("WherebyEmbed", {
         if (roomUrl.searchParams.get("roomKey")) {
             this.url.searchParams.append("roomKey", roomUrl.searchParams.get("roomKey"));
         }
-        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha19", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
+        Object.entries(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ jsApi: true, we: "2.0.0-alpha20", iframeSource: subdomain }, (displayName && { displayName })), (lang && { lang })), (metadata && { metadata })), (groups && { groups })), (virtualBackgroundUrl && { virtualBackgroundUrl })), (avatarUrl && { avatarUrl })), (minimal != null && { embed: minimal })), boolAttrs.reduce(
         // add to URL if set in any way
         (o, v) => (this[v.toLowerCase()] != null ? Object.assign(Object.assign({}, o), { [v]: this[v.toLowerCase()] }) : o), {}))).forEach(([k, v]) => {
             if (!this.url.searchParams.has(k) && typeof v === "string") {
@@ -3277,6 +3277,7 @@ class LocalMedia extends TypedLocalMediaEventTarget {
         this._constraints = constraints;
         this.stream = new MediaStream();
         this._rtcManagers = [];
+        this.screenshareStream = undefined;
         navigator.mediaDevices.addEventListener("devicechange", this._updateDeviceList.bind(this));
     }
     addRtcManager(rtcManager) {
@@ -3319,6 +3320,21 @@ class LocalMedia extends TypedLocalMediaEventTarget {
         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 } });
@@ -8665,7 +8681,10 @@ class RoomConnection extends TypedEventTarget {
         }
         remoteParticipant.addStream(id, "to_accept");
         this._handleAcceptStreams([remoteParticipant]);
-        this.screenshares = [...this.screenshares, { participantId, id, hasAudioTrack, stream: undefined }];
+        this.screenshares = [
+            ...this.screenshares,
+            { participantId, id, hasAudioTrack, stream: undefined, isLocal: false },
+        ];
     }
     _handleScreenshareStopped(screenshare) {
         const { clientId: participantId, streamId: id } = screenshare;
@@ -8771,7 +8790,9 @@ class RoomConnection extends TypedEventTarget {
             return;
         }
         // screenshare
-        this.dispatchEvent(new CustomEvent("screenshare_started", { detail: { participantId: clientId, stream, id: streamId } }));
+        this.dispatchEvent(new CustomEvent("screenshare_started", {
+            detail: { participantId: clientId, stream, id: streamId, isLocal: false },
+        }));
     }
     _joinRoom() {
         this.signalSocket.emit("join_room", {
@@ -8899,6 +8920,42 @@ class RoomConnection extends TypedEventTarget {
         }
         reportedStreamResolutions.set(streamId, { width, height });
     }
+    startScreenshare() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const screenshareStream = this.localMedia.screenshareStream || (yield this.localMedia.startScreenshare());
+            (_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.addNewStream(screenshareStream.id, screenshareStream, false, true);
+            this.screenshares = [
+                ...this.screenshares,
+                {
+                    participantId: this.selfId || "",
+                    id: screenshareStream.id,
+                    hasAudioTrack: false,
+                    stream: screenshareStream,
+                    isLocal: true,
+                },
+            ];
+            this.dispatchEvent(new CustomEvent("screenshare_started", {
+                detail: {
+                    participantId: this.selfId || "",
+                    id: screenshareStream.id,
+                    hasAudioTrack: false,
+                    stream: screenshareStream,
+                    isLocal: true,
+                },
+            }));
+        });
+    }
+    stopScreenshare() {
+        var _a;
+        if (this.localMedia.screenshareStream) {
+            const { id } = this.localMedia.screenshareStream;
+            (_a = this.rtcManager) === null || _a === void 0 ? void 0 : _a.removeStream(id, this.localMedia.screenshareStream, null);
+            this.screenshares = this.screenshares.filter((s) => s.id !== id);
+            this.dispatchEvent(new CustomEvent("screenshare_stopped", { detail: { participantId: this.selfId, id } }));
+            this.localMedia.stopScreenshare();
+        }
+    }
 }
 
 const initialState = {
@@ -8908,7 +8965,9 @@ const initialState = {
         startedAt: null,
     },
     isJoining: false,
+    isStartingScreenshare: false,
     joinError: null,
+    startScreenshareError: null,
     mostRecentChatMessage: null,
     remoteParticipants: [],
     roomConnectionStatus: "",
@@ -8986,9 +9045,16 @@ function reducer(state, action) {
                     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.participantId !== action.payload.participantId || ss.id !== action.payload.id) });
+            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,
@@ -9073,10 +9139,10 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             });
         }),
         createEventListener("screenshare_started", (e) => {
-            const { participantId, stream, id, hasAudioTrack } = e.detail;
+            const { participantId, stream, id, hasAudioTrack, isLocal } = e.detail;
             dispatch({
                 type: "SCREENSHARE_STARTED",
-                payload: { participantId, stream, id, hasAudioTrack },
+                payload: { participantId, stream, id, hasAudioTrack, isLocal },
             });
         }),
         createEventListener("screenshare_stopped", (e) => {
@@ -9138,6 +9204,18 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             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, {
@@ -9154,6 +9232,6 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     };
 }
 
-const sdkVersion = "2.0.0-alpha19";
+const sdkVersion = "2.0.0-alpha20";
 
 export { VideoView, sdkVersion, useLocalMedia, useRoomConnection };

package/dist/types.d.ts

@@ -79,6 +79,7 @@ declare class LocalMedia extends TypedLocalMediaEventTarget {
     private _constraints;
     _rtcManagers: RtcManager[];
     stream: MediaStream;
+    screenshareStream?: MediaStream;
     constructor(constraints: MediaStreamConstraints);
     addRtcManager(rtcManager: RtcManager): void;
     removeRtcManager(rtcManager: RtcManager): void;
@@ -88,6 +89,8 @@ declare class LocalMedia extends TypedLocalMediaEventTarget {
     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;
@@ -168,7 +171,8 @@ declare class Screenshare {
     readonly id: string;
     readonly hasAudioTrack: boolean;
     readonly stream?: MediaStream;
-    constructor({ participantId, id, hasAudioTrack, stream }: Screenshare);
+    readonly isLocal: boolean;
+    constructor({ participantId, id, hasAudioTrack, stream, isLocal }: Screenshare);
 }
 
 type Logger = Pick<Console, "debug" | "error" | "log" | "warn">;
@@ -224,6 +228,7 @@ type ScreenshareStartedEvent = {
     id: string;
     hasAudioTrack: boolean;
     stream: MediaStream;
+    isLocal: boolean;
 };
 type ScreenshareStoppedEvent = {
     participantId: string;
@@ -326,6 +331,8 @@ declare class RoomConnection extends TypedEventTarget {
         width: number;
         height: number;
     }): void;
+    startScreenshare(): Promise<void>;
+    stopScreenshare(): void;
 }
 
 type RemoteParticipantState = Omit<RemoteParticipant, "updateStreamState">;
@@ -333,7 +340,9 @@ interface RoomConnectionState {
     chatMessages: ChatMessage[];
     cloudRecording: CloudRecordingState;
     isJoining: boolean;
+    isStartingScreenshare: boolean;
     joinError: unknown;
+    startScreenshareError: unknown;
     localParticipant?: LocalParticipant;
     mostRecentChatMessage: ChatMessage | null;
     remoteParticipants: RemoteParticipantState[];
@@ -353,6 +362,8 @@ interface RoomConnectionActions {
     toggleMicrophone(enabled?: boolean): void;
     acceptWaitingParticipant(participantId: string): void;
     rejectWaitingParticipant(participantId: string): void;
+    startScreenshare(): void;
+    stopScreenshare(): void;
 }
 type VideoViewComponentProps = Omit<React.ComponentProps<typeof _default>, "onResize">;
 interface RoomConnectionComponents {
@@ -366,6 +377,6 @@ type RoomConnectionRef = {
 };
 declare function useRoomConnection(roomUrl: string, roomConnectionOptions: UseRoomConnectionOptions): RoomConnectionRef;
 
-declare const sdkVersion = "2.0.0-alpha19";
+declare const sdkVersion = "2.0.0-alpha20";
 
 export { _default as VideoView, sdkVersion, useLocalMedia, useRoomConnection };