@whereby.com/browser-sdk 2.0.0-alpha15 → 2.0.0-alpha16

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-alpha15", 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-alpha16", 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") {
@@ -6825,6 +6825,7 @@ class VegaRtcManager {
                 clientId,
                 stream: webcamStream,
                 streamId: camStreamId,
+                streamType: "webcam",
             });
 
             clientState.hasEmittedWebcamStream = true;
@@ -6836,6 +6837,7 @@ class VegaRtcManager {
                 clientId,
                 stream: screenStream,
                 streamId: screenShareStreamId,
+                streamType: "screenshare",
             });
 
             clientState.hasEmittedScreenStream = true;
@@ -8338,6 +8340,15 @@ class RemoteParticipant extends RoomParticipant {
         this.newJoiner = newJoiner;
         this.streams = streams.map((streamId) => ({ id: streamId, state: newJoiner ? "new_accept" : "to_accept" }));
     }
+    addStream(streamId, state) {
+        this.streams.push({ id: streamId, state });
+    }
+    removeStream(streamId) {
+        const index = this.streams.findIndex((s) => s.id === streamId);
+        if (index !== -1) {
+            this.streams.splice(index, 1);
+        }
+    }
     updateStreamState(streamId, state) {
         const stream = this.streams.find((s) => s.id === streamId);
         if (stream) {
@@ -8379,6 +8390,7 @@ class RoomConnection extends TypedEventTarget {
         super();
         this.localParticipant = null;
         this.remoteParticipants = [];
+        this.screenshares = [];
         this._deviceCredentials = null;
         this._ownsLocalMedia = false;
         this.organizationId = "";
@@ -8440,6 +8452,8 @@ class RoomConnection extends TypedEventTarget {
         this.signalSocket.on("room_joined", this._handleRoomJoined.bind(this));
         this.signalSocket.on("room_knocked", this._handleRoomKnocked.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));
         this.signalSocket.on("streaming_stopped", this._handleStreamingStopped.bind(this));
         this.signalSocket.on("disconnect", this._handleDisconnect.bind(this));
         this.signalSocket.on("connect_error", this._handleDisconnect.bind(this));
@@ -8657,6 +8671,33 @@ class RoomConnection extends TypedEventTarget {
     _handleStreamingStopped() {
         this.dispatchEvent(new CustomEvent("streaming_stopped"));
     }
+    _handleScreenshareStarted(screenshare) {
+        const { clientId: participantId, streamId: id, hasAudioTrack } = screenshare;
+        const remoteParticipant = this.remoteParticipants.find((p) => p.id === participantId);
+        if (!remoteParticipant) {
+            this.logger.log("WARN: Could not find participant for screenshare");
+            return;
+        }
+        const foundScreenshare = this.screenshares.find((s) => s.id === id);
+        if (foundScreenshare) {
+            this.logger.log("WARN: Screenshare already exists");
+            return;
+        }
+        remoteParticipant.addStream(id, "to_accept");
+        this._handleAcceptStreams([remoteParticipant]);
+        this.screenshares = [...this.screenshares, { participantId, id, hasAudioTrack, stream: undefined }];
+    }
+    _handleScreenshareStopped(screenshare) {
+        const { clientId: participantId, streamId: id } = screenshare;
+        const remoteParticipant = this.remoteParticipants.find((p) => p.id === participantId);
+        if (!remoteParticipant) {
+            this.logger.log("WARN: Could not find participant for screenshare");
+            return;
+        }
+        remoteParticipant.removeStream(id);
+        this.screenshares = this.screenshares.filter((s) => !(s.participantId === participantId && s.id === id));
+        this.dispatchEvent(new CustomEvent("screenshare_stopped", { detail: { participantId, id } }));
+    }
     _handleRtcEvent(eventName, data) {
         if (eventName === "rtc_manager_created") {
             return this._handleRtcManagerCreated(data);
@@ -8733,13 +8774,24 @@ class RoomConnection extends TypedEventTarget {
             });
         });
     }
-    _handleStreamAdded({ clientId, stream, streamId }) {
+    _handleStreamAdded({ clientId, stream, streamId, streamType }) {
         const remoteParticipant = this.remoteParticipants.find((p) => p.id === clientId);
         if (!remoteParticipant) {
             this.logger.log("WARN: Could not find participant for incoming stream");
             return;
         }
-        this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
+        const remoteParticipantStream = remoteParticipant.streams.find((s) => s.id === streamId);
+        if ((remoteParticipant.stream && remoteParticipant.stream.id === streamId) ||
+            (!remoteParticipant.stream && streamType === "webcam") ||
+            (!remoteParticipant.stream &&
+                !streamType &&
+                remoteParticipantStream &&
+                remoteParticipant.streams.indexOf(remoteParticipantStream) < 1)) {
+            this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
+            return;
+        }
+        // screenshare
+        this.dispatchEvent(new CustomEvent("screenshare_started", { detail: { participantId: clientId, stream, id: streamId } }));
     }
     _joinRoom() {
         this.signalSocket.emit("join_room", {
@@ -8865,6 +8917,7 @@ const initialState = {
     mostRecentChatMessage: null,
     remoteParticipants: [],
     roomConnectionStatus: "",
+    screenshares: [],
     streaming: {
         status: "",
         startedAt: null,
@@ -8883,6 +8936,13 @@ function updateParticipant(remoteParticipants, participantId, 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":
@@ -8925,6 +8985,15 @@ function reducer(state, action) {
             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,
+                }) });
+        case "SCREENSHARE_STOPPED":
+            return Object.assign(Object.assign({}, state), { screenshares: state.screenshares.filter((ss) => ss.participantId !== action.payload.participantId || ss.id !== action.payload.id) });
         case "STREAMING_STARTED":
             return Object.assign(Object.assign({}, state), { streaming: {
                     status: action.payload.status,
@@ -8996,6 +9065,14 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             const { participantId, displayName } = e.detail;
             dispatch({ type: "PARTICIPANT_METADATA_CHANGED", payload: { participantId, displayName } });
         });
+        roomConnection.addEventListener("screenshare_started", (e) => {
+            const { participantId, id, hasAudioTrack, stream } = e.detail;
+            dispatch({ type: "SCREENSHARE_STARTED", payload: { participantId, id, hasAudioTrack, stream } });
+        });
+        roomConnection.addEventListener("screenshare_stopped", (e) => {
+            const { participantId, id } = e.detail;
+            dispatch({ type: "SCREENSHARE_STOPPED", payload: { participantId, id } });
+        });
         roomConnection.addEventListener("streaming_started", (e) => {
             const { status, startedAt } = e.detail;
             dispatch({ type: "STREAMING_STARTED", payload: { status, startedAt } });
@@ -9049,7 +9126,7 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     };
 }
 
-const sdkVersion = "2.0.0-alpha15";
+const sdkVersion = "2.0.0-alpha16";
 
 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-alpha15", 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-alpha16", 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") {
@@ -6803,6 +6803,7 @@ class VegaRtcManager {
                 clientId,
                 stream: webcamStream,
                 streamId: camStreamId,
+                streamType: "webcam",
             });
 
             clientState.hasEmittedWebcamStream = true;
@@ -6814,6 +6815,7 @@ class VegaRtcManager {
                 clientId,
                 stream: screenStream,
                 streamId: screenShareStreamId,
+                streamType: "screenshare",
             });
 
             clientState.hasEmittedScreenStream = true;
@@ -8316,6 +8318,15 @@ class RemoteParticipant extends RoomParticipant {
         this.newJoiner = newJoiner;
         this.streams = streams.map((streamId) => ({ id: streamId, state: newJoiner ? "new_accept" : "to_accept" }));
     }
+    addStream(streamId, state) {
+        this.streams.push({ id: streamId, state });
+    }
+    removeStream(streamId) {
+        const index = this.streams.findIndex((s) => s.id === streamId);
+        if (index !== -1) {
+            this.streams.splice(index, 1);
+        }
+    }
     updateStreamState(streamId, state) {
         const stream = this.streams.find((s) => s.id === streamId);
         if (stream) {
@@ -8357,6 +8368,7 @@ class RoomConnection extends TypedEventTarget {
         super();
         this.localParticipant = null;
         this.remoteParticipants = [];
+        this.screenshares = [];
         this._deviceCredentials = null;
         this._ownsLocalMedia = false;
         this.organizationId = "";
@@ -8418,6 +8430,8 @@ class RoomConnection extends TypedEventTarget {
         this.signalSocket.on("room_joined", this._handleRoomJoined.bind(this));
         this.signalSocket.on("room_knocked", this._handleRoomKnocked.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));
         this.signalSocket.on("streaming_stopped", this._handleStreamingStopped.bind(this));
         this.signalSocket.on("disconnect", this._handleDisconnect.bind(this));
         this.signalSocket.on("connect_error", this._handleDisconnect.bind(this));
@@ -8635,6 +8649,33 @@ class RoomConnection extends TypedEventTarget {
     _handleStreamingStopped() {
         this.dispatchEvent(new CustomEvent("streaming_stopped"));
     }
+    _handleScreenshareStarted(screenshare) {
+        const { clientId: participantId, streamId: id, hasAudioTrack } = screenshare;
+        const remoteParticipant = this.remoteParticipants.find((p) => p.id === participantId);
+        if (!remoteParticipant) {
+            this.logger.log("WARN: Could not find participant for screenshare");
+            return;
+        }
+        const foundScreenshare = this.screenshares.find((s) => s.id === id);
+        if (foundScreenshare) {
+            this.logger.log("WARN: Screenshare already exists");
+            return;
+        }
+        remoteParticipant.addStream(id, "to_accept");
+        this._handleAcceptStreams([remoteParticipant]);
+        this.screenshares = [...this.screenshares, { participantId, id, hasAudioTrack, stream: undefined }];
+    }
+    _handleScreenshareStopped(screenshare) {
+        const { clientId: participantId, streamId: id } = screenshare;
+        const remoteParticipant = this.remoteParticipants.find((p) => p.id === participantId);
+        if (!remoteParticipant) {
+            this.logger.log("WARN: Could not find participant for screenshare");
+            return;
+        }
+        remoteParticipant.removeStream(id);
+        this.screenshares = this.screenshares.filter((s) => !(s.participantId === participantId && s.id === id));
+        this.dispatchEvent(new CustomEvent("screenshare_stopped", { detail: { participantId, id } }));
+    }
     _handleRtcEvent(eventName, data) {
         if (eventName === "rtc_manager_created") {
             return this._handleRtcManagerCreated(data);
@@ -8711,13 +8752,24 @@ class RoomConnection extends TypedEventTarget {
             });
         });
     }
-    _handleStreamAdded({ clientId, stream, streamId }) {
+    _handleStreamAdded({ clientId, stream, streamId, streamType }) {
         const remoteParticipant = this.remoteParticipants.find((p) => p.id === clientId);
         if (!remoteParticipant) {
             this.logger.log("WARN: Could not find participant for incoming stream");
             return;
         }
-        this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
+        const remoteParticipantStream = remoteParticipant.streams.find((s) => s.id === streamId);
+        if ((remoteParticipant.stream && remoteParticipant.stream.id === streamId) ||
+            (!remoteParticipant.stream && streamType === "webcam") ||
+            (!remoteParticipant.stream &&
+                !streamType &&
+                remoteParticipantStream &&
+                remoteParticipant.streams.indexOf(remoteParticipantStream) < 1)) {
+            this.dispatchEvent(new CustomEvent("participant_stream_added", { detail: { participantId: clientId, stream, streamId } }));
+            return;
+        }
+        // screenshare
+        this.dispatchEvent(new CustomEvent("screenshare_started", { detail: { participantId: clientId, stream, id: streamId } }));
     }
     _joinRoom() {
         this.signalSocket.emit("join_room", {
@@ -8843,6 +8895,7 @@ const initialState = {
     mostRecentChatMessage: null,
     remoteParticipants: [],
     roomConnectionStatus: "",
+    screenshares: [],
     streaming: {
         status: "",
         startedAt: null,
@@ -8861,6 +8914,13 @@ function updateParticipant(remoteParticipants, participantId, 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":
@@ -8903,6 +8963,15 @@ function reducer(state, action) {
             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,
+                }) });
+        case "SCREENSHARE_STOPPED":
+            return Object.assign(Object.assign({}, state), { screenshares: state.screenshares.filter((ss) => ss.participantId !== action.payload.participantId || ss.id !== action.payload.id) });
         case "STREAMING_STARTED":
             return Object.assign(Object.assign({}, state), { streaming: {
                     status: action.payload.status,
@@ -8974,6 +9043,14 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
             const { participantId, displayName } = e.detail;
             dispatch({ type: "PARTICIPANT_METADATA_CHANGED", payload: { participantId, displayName } });
         });
+        roomConnection.addEventListener("screenshare_started", (e) => {
+            const { participantId, id, hasAudioTrack, stream } = e.detail;
+            dispatch({ type: "SCREENSHARE_STARTED", payload: { participantId, id, hasAudioTrack, stream } });
+        });
+        roomConnection.addEventListener("screenshare_stopped", (e) => {
+            const { participantId, id } = e.detail;
+            dispatch({ type: "SCREENSHARE_STOPPED", payload: { participantId, id } });
+        });
         roomConnection.addEventListener("streaming_started", (e) => {
             const { status, startedAt } = e.detail;
             dispatch({ type: "STREAMING_STARTED", payload: { status, startedAt } });
@@ -9027,6 +9104,6 @@ function useRoomConnection(roomUrl, roomConnectionOptions) {
     };
 }
 
-const sdkVersion = "2.0.0-alpha15";
+const sdkVersion = "2.0.0-alpha16";
 
 export { VideoView, sdkVersion, useLocalMedia, useRoomConnection };

package/dist/types.d.ts

@@ -145,6 +145,8 @@ declare class RemoteParticipant extends RoomParticipant {
     readonly newJoiner: boolean;
     readonly streams: Stream[];
     constructor({ displayName, id, newJoiner, streams, isAudioEnabled, isVideoEnabled, }: RoomParticipantData & RemoteParticipantData);
+    addStream(streamId: string, state: StreamState): void;
+    removeStream(streamId: string): void;
     updateStreamState(streamId: string, state: StreamState): void;
 }
 declare class LocalParticipant extends RoomParticipant {
@@ -154,6 +156,13 @@ declare class LocalParticipant extends RoomParticipant {
 interface WaitingParticipant {
     id: string;
     displayName: string | null;
+}
+declare class Screenshare {
+    readonly participantId: string;
+    readonly id: string;
+    readonly hasAudioTrack: boolean;
+    readonly stream?: MediaStream;
+    constructor({ participantId, id, hasAudioTrack, stream }: Screenshare);
 }
 
 type Logger = Pick<Console, "debug" | "error" | "log" | "warn">;
@@ -204,6 +213,16 @@ type ParticipantMetadataChangedEvent = {
     participantId: string;
     displayName: string;
 };
+type ScreenshareStartedEvent = {
+    participantId: string;
+    id: string;
+    hasAudioTrack: boolean;
+    stream: MediaStream;
+};
+type ScreenshareStoppedEvent = {
+    participantId: string;
+    id: string;
+};
 type WaitingParticipantJoinedEvent = {
     participantId: string;
     displayName: string | null;
@@ -222,6 +241,8 @@ interface RoomEventsMap {
     participant_video_enabled: CustomEvent<ParticipantVideoEnabledEvent>;
     room_connection_status_changed: CustomEvent<RoomConnectionStatusChangedEvent>;
     room_joined: CustomEvent<RoomJoinedEvent>;
+    screenshare_started: CustomEvent<ScreenshareStartedEvent>;
+    screenshare_stopped: CustomEvent<ScreenshareStoppedEvent>;
     streaming_started: CustomEvent<StreamingState>;
     waiting_participant_joined: CustomEvent<WaitingParticipantJoinedEvent>;
     waiting_participant_left: CustomEvent<WaitingParticipantLeftEvent>;
@@ -236,6 +257,7 @@ declare class RoomConnection extends TypedEventTarget {
     localParticipant: LocalParticipant | null;
     roomUrl: URL;
     remoteParticipants: RemoteParticipant[];
+    screenshares: Screenshare[];
     readonly localMediaConstraints?: MediaStreamConstraints;
     readonly roomName: string;
     private organizationId;
@@ -274,6 +296,8 @@ declare class RoomConnection extends TypedEventTarget {
     private _handleDisconnect;
     private _handleCloudRecordingStopped;
     private _handleStreamingStopped;
+    private _handleScreenshareStarted;
+    private _handleScreenshareStopped;
     private _handleRtcEvent;
     private _handleRtcManagerCreated;
     private _handleRtcManagerDestroyed;
@@ -298,6 +322,7 @@ interface RoomConnectionState {
     localParticipant?: LocalParticipant;
     mostRecentChatMessage: ChatMessage | null;
     remoteParticipants: RemoteParticipantState[];
+    screenshares: Screenshare[];
     roomConnectionStatus: RoomConnectionStatus;
     streaming: StreamingState;
     waitingParticipants: WaitingParticipant[];
@@ -325,6 +350,6 @@ type RoomConnectionRef = {
 };
 declare function useRoomConnection(roomUrl: string, roomConnectionOptions: UseRoomConnectionOptions): RoomConnectionRef;
 
-declare const sdkVersion = "2.0.0-alpha15";
+declare const sdkVersion = "2.0.0-alpha16";
 
 export { _default as VideoView, sdkVersion, useLocalMedia, useRoomConnection };