@stream-io/video-client 1.7.4 → 1.8.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.8.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.7.4...@stream-io/video-client-1.8.0) (2024-10-02)
+
+
+### Features
+
+* manual video quality selection ([#1486](https://github.com/GetStream/stream-video-js/issues/1486)) ([3a754af](https://github.com/GetStream/stream-video-js/commit/3a754afa1bd13d038b1023520ec8a5296ad2669e))
+
 ## [1.7.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.7.3...@stream-io/video-client-1.7.4) (2024-10-02)
 
 

package/dist/index.browser.es.js

@@ -5,7 +5,7 @@ import axios, { AxiosHeaders } from 'axios';
 export { AxiosError } from 'axios';
 import { TwirpFetchTransport, TwirpErrorCode } from '@protobuf-ts/twirp-transport';
 import { UAParser } from 'ua-parser-js';
-import { ReplaySubject, combineLatest, BehaviorSubject, map as map$1, shareReplay, distinctUntilChanged, takeWhile, distinctUntilKeyChanged, fromEventPattern, startWith, concatMap, merge, from, fromEvent, debounceTime, pairwise, of, debounce, timer } from 'rxjs';
+import { ReplaySubject, combineLatest, BehaviorSubject, map as map$1, shareReplay, distinctUntilChanged, takeWhile, distinctUntilKeyChanged, fromEventPattern, startWith, concatMap, merge, from, fromEvent, debounceTime, pairwise, of } from 'rxjs';
 import * as SDP from 'sdp-transform';
 import WebSocket$1 from 'isomorphic-ws';
 import { fromByteArray } from 'base64-js';
@@ -3020,7 +3020,7 @@ const retryable = async (rpc, signal) => {
     return result;
 };
 
-const version = "1.7.4";
+const version = "1.8.0";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -4291,6 +4291,34 @@ class CallState {
                 return p;
             }));
         };
+        /**
+         * Update track subscription configuration for one or more participants.
+         * You have to create a subscription for each participant for all the different kinds of tracks you want to receive.
+         * You can only subscribe for tracks after the participant started publishing the given kind of track.
+         *
+         * @param trackType the kind of subscription to update.
+         * @param changes the list of subscription changes to do.
+         * @param type the debounce type to use for the update.
+         */
+        this.updateParticipantTracks = (trackType, changes) => {
+            return this.updateParticipants(Object.entries(changes).reduce((acc, [sessionId, change]) => {
+                if (change.dimension) {
+                    change.dimension.height = Math.ceil(change.dimension.height);
+                    change.dimension.width = Math.ceil(change.dimension.width);
+                }
+                const prop = trackType === 'videoTrack'
+                    ? 'videoDimension'
+                    : trackType === 'screenShareTrack'
+                        ? 'screenShareDimension'
+                        : undefined;
+                if (prop) {
+                    acc[sessionId] = {
+                        [prop]: change.dimension,
+                    };
+                }
+                return acc;
+            }, {}));
+        };
         /**
          * Updates the call state with the data received from the server.
          *
@@ -7071,6 +7099,7 @@ const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
     videoTrack: VisibilityState.UNKNOWN,
     screenShareTrack: VisibilityState.UNKNOWN,
 };
+const globalOverrideKey = Symbol('globalOverrideKey');
 /**
  * A manager class that handles dynascale related tasks like:
  *
@@ -7087,12 +7116,64 @@ class DynascaleManager {
      *
      * @param call the call to manage.
      */
-    constructor(call) {
+    constructor(callState, speaker) {
         /**
          * The viewport tracker instance.
          */
         this.viewportTracker = new ViewportTracker();
         this.logger = getLogger(['DynascaleManager']);
+        this.pendingSubscriptionsUpdate = null;
+        this.videoTrackSubscriptionOverridesSubject = new BehaviorSubject({});
+        this.videoTrackSubscriptionOverrides$ = this.videoTrackSubscriptionOverridesSubject.asObservable();
+        this.incomingVideoSettings$ = this.videoTrackSubscriptionOverrides$.pipe(map$1((overrides) => {
+            const { [globalOverrideKey]: globalSettings, ...participants } = overrides;
+            return {
+                enabled: globalSettings?.enabled !== false,
+                preferredResolution: globalSettings?.enabled
+                    ? globalSettings.dimension
+                    : undefined,
+                participants: Object.fromEntries(Object.entries(participants).map(([sessionId, participantOverride]) => [
+                    sessionId,
+                    {
+                        enabled: participantOverride?.enabled !== false,
+                        preferredResolution: participantOverride?.enabled
+                            ? participantOverride.dimension
+                            : undefined,
+                    },
+                ])),
+                isParticipantVideoEnabled: (sessionId) => overrides[sessionId]?.enabled ??
+                    overrides[globalOverrideKey]?.enabled ??
+                    true,
+            };
+        }), shareReplay(1));
+        this.setVideoTrackSubscriptionOverrides = (override, sessionIds) => {
+            if (!sessionIds) {
+                return setCurrentValue(this.videoTrackSubscriptionOverridesSubject, override ? { [globalOverrideKey]: override } : {});
+            }
+            return setCurrentValue(this.videoTrackSubscriptionOverridesSubject, (overrides) => ({
+                ...overrides,
+                ...Object.fromEntries(sessionIds.map((id) => [id, override])),
+            }));
+        };
+        this.applyTrackSubscriptions = (debounceType = DebounceType.SLOW) => {
+            if (this.pendingSubscriptionsUpdate) {
+                clearTimeout(this.pendingSubscriptionsUpdate);
+            }
+            const updateSubscriptions = () => {
+                this.pendingSubscriptionsUpdate = null;
+                this.sfuClient
+                    ?.updateSubscriptions(this.trackSubscriptions)
+                    .catch((err) => {
+                    this.logger('debug', `Failed to update track subscriptions`, err);
+                });
+            };
+            if (debounceType) {
+                this.pendingSubscriptionsUpdate = setTimeout(updateSubscriptions, debounceType);
+            }
+            else {
+                updateSubscriptions();
+            }
+        };
         /**
          * Will begin tracking the given element for visibility changes within the
          * configured viewport element (`call.setViewport`).
@@ -7104,7 +7185,7 @@ class DynascaleManager {
          */
         this.trackElementVisibility = (element, sessionId, trackType) => {
             const cleanup = this.viewportTracker.observe(element, (entry) => {
-                this.call.state.updateParticipant(sessionId, (participant) => {
+                this.callState.updateParticipant(sessionId, (participant) => {
                     const previousVisibilityState = participant.viewportVisibilityState ??
                         DEFAULT_VIEWPORT_VISIBILITY_STATE;
                     // observer triggers when the element is "moved" to be a fullscreen element
@@ -7126,7 +7207,7 @@ class DynascaleManager {
                 // reset visibility state to UNKNOWN upon cleanup
                 // so that the layouts that are not actively observed
                 // can still function normally (runtime layout switching)
-                this.call.state.updateParticipant(sessionId, (participant) => {
+                this.callState.updateParticipant(sessionId, (participant) => {
                     const previousVisibilityState = participant.viewportVisibilityState ??
                         DEFAULT_VIEWPORT_VISIBILITY_STATE;
                     return {
@@ -7163,7 +7244,7 @@ class DynascaleManager {
          * @param trackType the kind of video.
          */
         this.bindVideoElement = (videoElement, sessionId, trackType) => {
-            const boundParticipant = this.call.state.findParticipantBySessionId(sessionId);
+            const boundParticipant = this.callState.findParticipantBySessionId(sessionId);
             if (!boundParticipant)
                 return;
             const requestTrackWithDimensions = (debounceType, dimension) => {
@@ -7175,9 +7256,12 @@ class DynascaleManager {
                     this.logger('debug', `Ignoring 0x0 dimension`, boundParticipant);
                     dimension = undefined;
                 }
-                this.call.updateSubscriptionsPartial(trackType, { [sessionId]: { dimension } }, debounceType);
+                this.callState.updateParticipantTracks(trackType, {
+                    [sessionId]: { dimension },
+                });
+                this.applyTrackSubscriptions(debounceType);
             };
-            const participant$ = this.call.state.participants$.pipe(map$1((participants) => participants.find((participant) => participant.sessionId === sessionId)), takeWhile((participant) => !!participant), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
+            const participant$ = this.callState.participants$.pipe(map$1((participants) => participants.find((participant) => participant.sessionId === sessionId)), takeWhile((participant) => !!participant), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
             /**
              * Since the video elements are now being removed from the DOM (React SDK) upon
              * visibility change, this subscription is not in use an stays here only for the
@@ -7292,10 +7376,10 @@ class DynascaleManager {
          * @returns a cleanup function that will unbind the audio element.
          */
         this.bindAudioElement = (audioElement, sessionId, trackType) => {
-            const participant = this.call.state.findParticipantBySessionId(sessionId);
+            const participant = this.callState.findParticipantBySessionId(sessionId);
             if (!participant || participant.isLocalParticipant)
                 return;
-            const participant$ = this.call.state.participants$.pipe(map$1((participants) => participants.find((p) => p.sessionId === sessionId)), takeWhile((p) => !!p), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
+            const participant$ = this.callState.participants$.pipe(map$1((participants) => participants.find((p) => p.sessionId === sessionId)), takeWhile((p) => !!p), distinctUntilChanged(), shareReplay({ bufferSize: 1, refCount: true }));
             const updateMediaStreamSubscription = participant$
                 .pipe(distinctUntilKeyChanged(trackType === 'screenShareAudioTrack'
                 ? 'screenShareAudioStream'
@@ -7315,7 +7399,7 @@ class DynascaleManager {
                         // audio output device shall be set after the audio element is played
                         // otherwise, the browser will not pick it up, and will always
                         // play audio through the system's default device
-                        const { selectedDevice } = this.call.speaker.state;
+                        const { selectedDevice } = this.speaker.state;
                         if (selectedDevice && 'setSinkId' in audioElement) {
                             audioElement.setSinkId(selectedDevice);
                         }
@@ -7324,13 +7408,13 @@ class DynascaleManager {
             });
             const sinkIdSubscription = !('setSinkId' in audioElement)
                 ? null
-                : this.call.speaker.state.selectedDevice$.subscribe((deviceId) => {
+                : this.speaker.state.selectedDevice$.subscribe((deviceId) => {
                     if (deviceId) {
                         audioElement.setSinkId(deviceId);
                     }
                 });
             const volumeSubscription = combineLatest([
-                this.call.speaker.state.volume$,
+                this.speaker.state.volume$,
                 participant$.pipe(distinctUntilKeyChanged('audioVolume')),
             ]).subscribe(([volume, p]) => {
                 audioElement.volume = p.audioVolume ?? volume;
@@ -7342,7 +7426,50 @@ class DynascaleManager {
                 updateMediaStreamSubscription.unsubscribe();
             };
         };
-        this.call = call;
+        this.callState = callState;
+        this.speaker = speaker;
+    }
+    setSfuClient(sfuClient) {
+        this.sfuClient = sfuClient;
+    }
+    get trackSubscriptions() {
+        const subscriptions = [];
+        for (const p of this.callState.remoteParticipants) {
+            // NOTE: audio tracks don't have to be requested explicitly
+            // as the SFU will implicitly subscribe us to all of them,
+            // once they become available.
+            if (p.videoDimension && hasVideo(p)) {
+                const override = this.videoTrackSubscriptionOverrides[p.sessionId] ??
+                    this.videoTrackSubscriptionOverrides[globalOverrideKey];
+                if (override?.enabled !== false) {
+                    subscriptions.push({
+                        userId: p.userId,
+                        sessionId: p.sessionId,
+                        trackType: TrackType.VIDEO,
+                        dimension: override?.dimension ?? p.videoDimension,
+                    });
+                }
+            }
+            if (p.screenShareDimension && hasScreenShare(p)) {
+                subscriptions.push({
+                    userId: p.userId,
+                    sessionId: p.sessionId,
+                    trackType: TrackType.SCREEN_SHARE,
+                    dimension: p.screenShareDimension,
+                });
+            }
+            if (hasScreenShareAudio(p)) {
+                subscriptions.push({
+                    userId: p.userId,
+                    sessionId: p.sessionId,
+                    trackType: TrackType.SCREEN_SHARE_AUDIO,
+                });
+            }
+        }
+        return subscriptions;
+    }
+    get videoTrackSubscriptionOverrides() {
+        return getCurrentValue(this.videoTrackSubscriptionOverrides$);
     }
 }
 
@@ -9161,10 +9288,6 @@ class Call {
          * The state of this call.
          */
         this.state = new CallState();
-        /**
-         * The DynascaleManager instance.
-         */
-        this.dynascaleManager = new DynascaleManager(this);
         /**
          * The permissions context of this call.
          */
@@ -9174,7 +9297,6 @@ class Call {
          * @private
          */
         this.dispatcher = new Dispatcher();
-        this.trackSubscriptionsSubject = new BehaviorSubject({ type: DebounceType.MEDIUM, data: [] });
         this.sfuClientTag = 0;
         this.reconnectConcurrencyTag = Symbol('reconnectConcurrencyTag');
         this.reconnectAttempts = 0;
@@ -9315,6 +9437,7 @@ class Call {
                 this.publisher = undefined;
                 await this.sfuClient?.leaveAndClose(reason);
                 this.sfuClient = undefined;
+                this.dynascaleManager.setSfuClient(undefined);
                 this.state.setCallingState(CallingState.LEFT);
                 // Call all leave call hooks, e.g. to clean up global event handlers
                 this.leaveCallHooks.forEach((hook) => hook());
@@ -9477,6 +9600,7 @@ class Call {
                 })
                 : previousSfuClient;
             this.sfuClient = sfuClient;
+            this.dynascaleManager.setSfuClient(sfuClient);
             const clientDetails = getClientDetails();
             // we don't need to send JoinRequest if we are re-using an existing healthy SFU client
             if (previousSfuClient !== sfuClient) {
@@ -9549,11 +9673,10 @@ class Call {
             const strategy = this.reconnectStrategy;
             const performingRejoin = strategy === WebsocketReconnectStrategy.REJOIN;
             const announcedTracks = this.publisher?.getAnnouncedTracks() || [];
-            const subscribedTracks = getCurrentValue(this.trackSubscriptionsSubject);
             return {
                 strategy,
                 announcedTracks,
-                subscriptions: subscribedTracks.data || [],
+                subscriptions: this.dynascaleManager.trackSubscriptions,
                 reconnectAttempt: this.reconnectAttempts,
                 fromSfuId: migratingFromSfuId || '',
                 previousSessionId: performingRejoin ? previousSessionId || '' : '',
@@ -9923,7 +10046,7 @@ class Call {
             const { remoteParticipants } = this.state;
             if (remoteParticipants.length <= 0)
                 return;
-            this.updateSubscriptions(remoteParticipants, DebounceType.FAST);
+            this.dynascaleManager.applyTrackSubscriptions(undefined);
         };
         /**
          * Starts publishing the given video stream to the call.
@@ -10046,71 +10169,6 @@ class Call {
                 this.logger('warn', 'Failed to notify stop of noise cancellation', err);
             });
         };
-        /**
-         * Update track subscription configuration for one or more participants.
-         * You have to create a subscription for each participant for all the different kinds of tracks you want to receive.
-         * You can only subscribe for tracks after the participant started publishing the given kind of track.
-         *
-         * @param trackType the kind of subscription to update.
-         * @param changes the list of subscription changes to do.
-         * @param type the debounce type to use for the update.
-         */
-        this.updateSubscriptionsPartial = (trackType, changes, type = DebounceType.SLOW) => {
-            const participants = this.state.updateParticipants(Object.entries(changes).reduce((acc, [sessionId, change]) => {
-                if (change.dimension) {
-                    change.dimension.height = Math.ceil(change.dimension.height);
-                    change.dimension.width = Math.ceil(change.dimension.width);
-                }
-                const prop = trackType === 'videoTrack'
-                    ? 'videoDimension'
-                    : trackType === 'screenShareTrack'
-                        ? 'screenShareDimension'
-                        : undefined;
-                if (prop) {
-                    acc[sessionId] = {
-                        [prop]: change.dimension,
-                    };
-                }
-                return acc;
-            }, {}));
-            this.updateSubscriptions(participants, type);
-        };
-        this.updateSubscriptions = (participants, type = DebounceType.SLOW) => {
-            const subscriptions = [];
-            for (const p of participants) {
-                // we don't want to subscribe to our own tracks
-                if (p.isLocalParticipant)
-                    continue;
-                // NOTE: audio tracks don't have to be requested explicitly
-                // as the SFU will implicitly subscribe us to all of them,
-                // once they become available.
-                if (p.videoDimension && hasVideo(p)) {
-                    subscriptions.push({
-                        userId: p.userId,
-                        sessionId: p.sessionId,
-                        trackType: TrackType.VIDEO,
-                        dimension: p.videoDimension,
-                    });
-                }
-                if (p.screenShareDimension && hasScreenShare(p)) {
-                    subscriptions.push({
-                        userId: p.userId,
-                        sessionId: p.sessionId,
-                        trackType: TrackType.SCREEN_SHARE,
-                        dimension: p.screenShareDimension,
-                    });
-                }
-                if (hasScreenShareAudio(p)) {
-                    subscriptions.push({
-                        userId: p.userId,
-                        sessionId: p.sessionId,
-                        trackType: TrackType.SCREEN_SHARE_AUDIO,
-                    });
-                }
-            }
-            // schedule update
-            this.trackSubscriptionsSubject.next({ type, data: subscriptions });
-        };
         /**
          * Will enhance the reported stats with additional participant-specific information (`callStatsReport$` state [store variable](./StreamVideoClient.md/#readonlystatestore)).
          * This is usually helpful when detailed stats for a specific participant are needed.
@@ -10690,6 +10748,33 @@ class Call {
                 imageElement.removeEventListener('error', handleError);
             };
         };
+        /**
+         * Specify preference for incoming video resolution. The preference will
+         * be matched as close as possible, but actual resolution will depend
+         * on the video source quality and client network conditions. Will enable
+         * incoming video, if previously disabled.
+         *
+         * @param resolution preferred resolution, or `undefined` to clear preference
+         * @param sessionIds optionally specify session ids of the participants this
+         * preference has effect on. Affects all participants by default.
+         */
+        this.setPreferredIncomingVideoResolution = (resolution, sessionIds) => {
+            this.dynascaleManager.setVideoTrackSubscriptionOverrides(resolution
+                ? {
+                    enabled: true,
+                    dimension: resolution,
+                }
+                : undefined, sessionIds);
+            this.dynascaleManager.applyTrackSubscriptions();
+        };
+        /**
+         * Enables or disables incoming video from all remote call participants,
+         * and removes any preference for preferred resolution.
+         */
+        this.setIncomingVideoEnabled = (enabled) => {
+            this.dynascaleManager.setVideoTrackSubscriptionOverrides(enabled ? undefined : { enabled: false });
+            this.dynascaleManager.applyTrackSubscriptions();
+        };
         this.type = type;
         this.id = id;
         this.cid = `${type}:${id}`;
@@ -10711,6 +10796,7 @@ class Call {
         this.microphone = new MicrophoneManager(this);
         this.speaker = new SpeakerManager(this);
         this.screenShare = new ScreenShareManager(this);
+        this.dynascaleManager = new DynascaleManager(this.state, this.speaker);
     }
     async setup() {
         await withoutConcurrency(this.joinLeaveConcurrencyTag, async () => {
@@ -10723,9 +10809,6 @@ class Call {
             this.leaveCallHooks.add(registerEventHandlers(this, this.dispatcher));
             this.registerEffects();
             this.registerReconnectHandlers();
-            this.leaveCallHooks.add(createSubscription(this.trackSubscriptionsSubject.pipe(debounce((v) => timer(v.type)), map$1((v) => v.data)), (subscriptions) => this.sfuClient?.updateSubscriptions(subscriptions).catch((err) => {
-                this.logger('debug', `Failed to update track subscriptions`, err);
-            })));
             if (this.state.callingState === CallingState.LEFT) {
                 this.state.setCallingState(CallingState.IDLE);
             }
@@ -12373,7 +12456,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "1.7.4";
+            const version = "1.8.0";
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };