@stream-io/video-client 1.20.0 → 1.20.2

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.20.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.20.1...@stream-io/video-client-1.20.2) (2025-05-01)
+
+### Bug Fixes
+
+- add options for 4K RTMP and Recording ([#1775](https://github.com/GetStream/stream-video-js/issues/1775)) ([c09213d](https://github.com/GetStream/stream-video-js/commit/c09213df5fc8a46f5a8c5c1ef18f07fd05e1d547))
+- use timeout reason when auto-dropping calls (instead of decline) ([#1776](https://github.com/GetStream/stream-video-js/issues/1776)) ([a043148](https://github.com/GetStream/stream-video-js/commit/a04314814e728c3d05d53c8940e9c223fec18fcc))
+
+## [1.20.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.20.0...@stream-io/video-client-1.20.1) (2025-04-29)
+
+### Bug Fixes
+
+- dispose media stream if it cannot be published ([#1771](https://github.com/GetStream/stream-video-js/issues/1771)) ([83fbfd7](https://github.com/GetStream/stream-video-js/commit/83fbfd7bb77bd9a06d6955e6b48bb8238e573f57))
+- use more granular permission state for stats reporter ([#1774](https://github.com/GetStream/stream-video-js/issues/1774)) ([55afdfc](https://github.com/GetStream/stream-video-js/commit/55afdfcdac55fad25ba32978caf55a2f25f7580b))
+
 ## [1.20.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.19.3...@stream-io/video-client-1.20.0) (2025-04-24)
 
 - bump test timeout ([7d922ed](https://github.com/GetStream/stream-video-js/commit/7d922ed34c46851a257fb36ee644f1ff5e4cb917))

package/dist/index.browser.es.js

@@ -117,6 +117,7 @@ const FrameRecordingSettingsRequestQualityEnum = {
     _720P: '720p',
     _1080P: '1080p',
     _1440P: '1440p',
+    _2160P: '2160p',
 };
 /**
  * @export
@@ -189,11 +190,13 @@ const RTMPBroadcastRequestQualityEnum = {
     _720P: '720p',
     _1080P: '1080p',
     _1440P: '1440p',
+    _2160P: '2160p',
     PORTRAIT_360X640: 'portrait-360x640',
     PORTRAIT_480X854: 'portrait-480x854',
     PORTRAIT_720X1280: 'portrait-720x1280',
     PORTRAIT_1080X1920: 'portrait-1080x1920',
     PORTRAIT_1440X2560: 'portrait-1440x2560',
+    PORTRAIT_2160X3840: 'portrait-2160x3840',
 };
 /**
  * @export
@@ -204,11 +207,13 @@ const RTMPSettingsRequestQualityEnum = {
     _720P: '720p',
     _1080P: '1080p',
     _1440P: '1440p',
+    _2160P: '2160p',
     PORTRAIT_360X640: 'portrait-360x640',
     PORTRAIT_480X854: 'portrait-480x854',
     PORTRAIT_720X1280: 'portrait-720x1280',
     PORTRAIT_1080X1920: 'portrait-1080x1920',
     PORTRAIT_1440X2560: 'portrait-1440x2560',
+    PORTRAIT_2160X3840: 'portrait-2160x3840',
 };
 /**
  * @export
@@ -227,11 +232,13 @@ const RecordSettingsRequestQualityEnum = {
     _720P: '720p',
     _1080P: '1080p',
     _1440P: '1440p',
+    _2160P: '2160p',
     PORTRAIT_360X640: 'portrait-360x640',
     PORTRAIT_480X854: 'portrait-480x854',
     PORTRAIT_720X1280: 'portrait-720x1280',
     PORTRAIT_1080X1920: 'portrait-1080x1920',
     PORTRAIT_1440X2560: 'portrait-1440x2560',
+    PORTRAIT_2160X3840: 'portrait-2160x3840',
 };
 /**
  * @export
@@ -4058,7 +4065,7 @@ class StreamVideoWriteableStateStore {
                         continue;
                     logger('info', `User disconnected, leaving call: ${call.cid}`);
                     await call
-                        .leave({ reason: 'client.disconnectUser() called' })
+                        .leave({ message: 'client.disconnectUser() called' })
                         .catch((err) => {
                         logger('error', `Error leaving call: ${call.cid}`, err);
                     });
@@ -5643,7 +5650,7 @@ const aggregate = (stats) => {
     return report;
 };
 
-const version = "1.20.0";
+const version = "1.20.2";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -5784,9 +5791,9 @@ class SfuStatsReporter {
         this.logger = getLogger(['SfuStatsReporter']);
         this.inputDevices = new Map();
         this.observeDevice = (device, kind) => {
-            const { hasBrowserPermission$ } = device.state;
+            const { browserPermissionState$ } = device.state;
             this.unsubscribeDevicePermissionsSubscription?.();
-            this.unsubscribeDevicePermissionsSubscription = createSubscription(combineLatest([hasBrowserPermission$, this.state.ownCapabilities$]), ([hasPermission, ownCapabilities]) => {
+            this.unsubscribeDevicePermissionsSubscription = createSubscription(combineLatest([browserPermissionState$, this.state.ownCapabilities$]), ([browserPermissionState, ownCapabilities]) => {
                 // cleanup the previous listDevices() subscription in case
                 // permissions or capabilities have changed.
                 // we will subscribe again if everything is in order.
@@ -5794,7 +5801,7 @@ class SfuStatsReporter {
                 const hasCapability = kind === 'mic'
                     ? ownCapabilities.includes(OwnCapability.SEND_AUDIO)
                     : ownCapabilities.includes(OwnCapability.SEND_VIDEO);
-                if (!hasPermission || !hasCapability) {
+                if (browserPermissionState !== 'granted' || !hasCapability) {
                     this.inputDevices.set(kind, {
                         currentDevice: '',
                         availableDevices: [],
@@ -7601,13 +7608,17 @@ const watchCallRejected = (call) => {
                 .every((m) => rejectedBy[m.user_id]);
             if (everyoneElseRejected) {
                 call.logger('info', 'everyone rejected, leaving the call');
-                await call.leave({ reason: 'ring: everyone rejected' });
+                await call.leave({
+                    reject: true,
+                    reason: 'cancel',
+                    message: 'ring: everyone rejected',
+                });
             }
         }
         else {
             if (rejectedBy[eventCall.created_by.id]) {
                 call.logger('info', 'call creator rejected, leaving call');
-                await call.leave({ reason: 'ring: creator rejected' });
+                await call.leave({ message: 'ring: creator rejected' });
             }
         }
     };
@@ -7621,7 +7632,7 @@ const watchCallEnded = (call) => {
         if (callingState !== CallingState.IDLE &&
             callingState !== CallingState.LEFT) {
             call
-                .leave({ reason: 'call.ended event received', reject: false })
+                .leave({ message: 'call.ended event received', reject: false })
                 .catch((err) => {
                 call.logger('error', 'Failed to leave call after call.ended ', err);
             });
@@ -7641,7 +7652,7 @@ const watchSfuCallEnded = (call) => {
             // update the call state to reflect the call has ended.
             call.state.setEndedAt(new Date());
             const reason = CallEndedReason[e.reason];
-            await call.leave({ reason: `callEnded received: ${reason}` });
+            await call.leave({ message: `callEnded received: ${reason}` });
         }
         catch (err) {
             call.logger('error', 'Failed to leave call after being ended by the SFU', err);
@@ -7708,7 +7719,7 @@ const watchLiveEnded = (dispatcher, call) => {
             return;
         call.state.setBackstage(true);
         if (!call.permissionsContext.hasPermission(OwnCapability.JOIN_BACKSTAGE)) {
-            call.leave({ reason: 'live ended' }).catch((err) => {
+            call.leave({ message: 'live ended' }).catch((err) => {
                 call.logger('error', 'Failed to leave call after live ended', err);
             });
         }
@@ -8728,6 +8739,9 @@ class BrowserPermission {
         // Instead of checking if a permission is granted, we check if it isn't denied
         map((state) => state !== 'denied'));
     }
+    asStateObservable() {
+        return this.getStateObservable();
+    }
     getIsPromptingObservable() {
         return this.getStateObservable().pipe(map((state) => state === 'prompting'));
     }
@@ -9254,122 +9268,130 @@ class InputMediaDeviceManager {
         this.logger('debug', 'Starting stream');
         let stream;
         let rootStream;
-        if (this.state.mediaStream &&
-            this.getTracks().every((t) => t.readyState === 'live')) {
-            stream = this.state.mediaStream;
-            this.enableTracks();
-        }
-        else {
-            const defaultConstraints = this.state.defaultConstraints;
-            const constraints = {
-                ...defaultConstraints,
-                deviceId: this.state.selectedDevice
-                    ? { exact: this.state.selectedDevice }
-                    : undefined,
-            };
-            /**
-             * Chains two media streams together.
-             *
-             * In our case, filters MediaStreams are derived from their parent MediaStream.
-             * However, once a child filter's track is stopped,
-             * the tracks of the parent MediaStream aren't automatically stopped.
-             * This leads to a situation where the camera indicator light is still on
-             * even though the user stopped publishing video.
-             *
-             * This function works around this issue by stopping the parent MediaStream's tracks
-             * as well once the child filter's tracks are stopped.
-             *
-             * It works by patching the stop() method of the child filter's tracks to also stop
-             * the parent MediaStream's tracks of the same type. Here we assume that
-             * the parent MediaStream has only one track of each type.
-             *
-             * @param parentStream the parent MediaStream. Omit for the root stream.
-             */
-            const chainWith = (parentStream) => async (filterStream) => {
-                if (!parentStream)
-                    return filterStream;
-                // TODO OL: take care of track.enabled property as well
-                const parent = await parentStream;
-                filterStream.getTracks().forEach((track) => {
-                    const originalStop = track.stop;
-                    track.stop = function stop() {
-                        originalStop.call(track);
-                        parent.getTracks().forEach((parentTrack) => {
-                            if (parentTrack.kind === track.kind) {
-                                parentTrack.stop();
-                            }
-                        });
-                    };
-                });
-                parent.getTracks().forEach((parentTrack) => {
-                    // When the parent stream abruptly ends, we propagate the event
-                    // to the filter stream.
-                    // This usually happens when the camera/microphone permissions
-                    // are revoked or when the device is disconnected.
-                    const handleParentTrackEnded = () => {
-                        filterStream.getTracks().forEach((track) => {
-                            if (parentTrack.kind !== track.kind)
-                                return;
-                            track.stop();
-                            track.dispatchEvent(new Event('ended')); // propagate the event
+        try {
+            if (this.state.mediaStream &&
+                this.getTracks().every((t) => t.readyState === 'live')) {
+                stream = this.state.mediaStream;
+                this.enableTracks();
+            }
+            else {
+                const defaultConstraints = this.state.defaultConstraints;
+                const constraints = {
+                    ...defaultConstraints,
+                    deviceId: this.state.selectedDevice
+                        ? { exact: this.state.selectedDevice }
+                        : undefined,
+                };
+                /**
+                 * Chains two media streams together.
+                 *
+                 * In our case, filters MediaStreams are derived from their parent MediaStream.
+                 * However, once a child filter's track is stopped,
+                 * the tracks of the parent MediaStream aren't automatically stopped.
+                 * This leads to a situation where the camera indicator light is still on
+                 * even though the user stopped publishing video.
+                 *
+                 * This function works around this issue by stopping the parent MediaStream's tracks
+                 * as well once the child filter's tracks are stopped.
+                 *
+                 * It works by patching the stop() method of the child filter's tracks to also stop
+                 * the parent MediaStream's tracks of the same type. Here we assume that
+                 * the parent MediaStream has only one track of each type.
+                 *
+                 * @param parentStream the parent MediaStream. Omit for the root stream.
+                 */
+                const chainWith = (parentStream) => async (filterStream) => {
+                    if (!parentStream)
+                        return filterStream;
+                    // TODO OL: take care of track.enabled property as well
+                    const parent = await parentStream;
+                    filterStream.getTracks().forEach((track) => {
+                        const originalStop = track.stop;
+                        track.stop = function stop() {
+                            originalStop.call(track);
+                            parent.getTracks().forEach((parentTrack) => {
+                                if (parentTrack.kind === track.kind) {
+                                    parentTrack.stop();
+                                }
+                            });
+                        };
+                    });
+                    parent.getTracks().forEach((parentTrack) => {
+                        // When the parent stream abruptly ends, we propagate the event
+                        // to the filter stream.
+                        // This usually happens when the camera/microphone permissions
+                        // are revoked or when the device is disconnected.
+                        const handleParentTrackEnded = () => {
+                            filterStream.getTracks().forEach((track) => {
+                                if (parentTrack.kind !== track.kind)
+                                    return;
+                                track.stop();
+                                track.dispatchEvent(new Event('ended')); // propagate the event
+                            });
+                        };
+                        parentTrack.addEventListener('ended', handleParentTrackEnded);
+                        this.subscriptions.push(() => {
+                            parentTrack.removeEventListener('ended', handleParentTrackEnded);
                         });
-                    };
-                    parentTrack.addEventListener('ended', handleParentTrackEnded);
+                    });
+                    return filterStream;
+                };
+                // the rootStream represents the stream coming from the actual device
+                // e.g. camera or microphone stream
+                rootStream = this.getStream(constraints);
+                // we publish the last MediaStream of the chain
+                stream = await this.filters.reduce((parent, entry) => parent
+                    .then((inputStream) => {
+                    const { stop, output } = entry.start(inputStream);
+                    entry.stop = stop;
+                    return output;
+                })
+                    .then(chainWith(parent), (error) => {
+                    this.logger('warn', 'Filter failed to start and will be ignored', error);
+                    return parent;
+                }), rootStream);
+            }
+            if (this.call.state.callingState === CallingState.JOINED) {
+                await this.publishStream(stream);
+            }
+            if (this.state.mediaStream !== stream) {
+                this.state.setMediaStream(stream, await rootStream);
+                const handleTrackEnded = async () => {
+                    await this.statusChangeSettled();
+                    if (this.enabled) {
+                        this.isTrackStoppedDueToTrackEnd = true;
+                        setTimeout(() => {
+                            this.isTrackStoppedDueToTrackEnd = false;
+                        }, 2000);
+                        await this.disable();
+                    }
+                };
+                const createTrackMuteHandler = (muted) => () => {
+                    if (!isMobile() || this.trackType !== TrackType.VIDEO)
+                        return;
+                    this.call.notifyTrackMuteState(muted, this.trackType).catch((err) => {
+                        this.logger('warn', 'Error while notifying track mute state', err);
+                    });
+                };
+                stream.getTracks().forEach((track) => {
+                    const muteHandler = createTrackMuteHandler(true);
+                    const unmuteHandler = createTrackMuteHandler(false);
+                    track.addEventListener('mute', muteHandler);
+                    track.addEventListener('unmute', unmuteHandler);
+                    track.addEventListener('ended', handleTrackEnded);
                     this.subscriptions.push(() => {
-                        parentTrack.removeEventListener('ended', handleParentTrackEnded);
+                        track.removeEventListener('mute', muteHandler);
+                        track.removeEventListener('unmute', unmuteHandler);
+                        track.removeEventListener('ended', handleTrackEnded);
                     });
                 });
-                return filterStream;
-            };
-            // the rootStream represents the stream coming from the actual device
-            // e.g. camera or microphone stream
-            rootStream = this.getStream(constraints);
-            // we publish the last MediaStream of the chain
-            stream = await this.filters.reduce((parent, entry) => parent
-                .then((inputStream) => {
-                const { stop, output } = entry.start(inputStream);
-                entry.stop = stop;
-                return output;
-            })
-                .then(chainWith(parent), (error) => {
-                this.logger('warn', 'Filter failed to start and will be ignored', error);
-                return parent;
-            }), rootStream);
-        }
-        if (this.call.state.callingState === CallingState.JOINED) {
-            await this.publishStream(stream);
+            }
         }
-        if (this.state.mediaStream !== stream) {
-            this.state.setMediaStream(stream, await rootStream);
-            const handleTrackEnded = async () => {
-                await this.statusChangeSettled();
-                if (this.enabled) {
-                    this.isTrackStoppedDueToTrackEnd = true;
-                    setTimeout(() => {
-                        this.isTrackStoppedDueToTrackEnd = false;
-                    }, 2000);
-                    await this.disable();
-                }
-            };
-            const createTrackMuteHandler = (muted) => () => {
-                if (!isMobile() || this.trackType !== TrackType.VIDEO)
-                    return;
-                this.call.notifyTrackMuteState(muted, this.trackType).catch((err) => {
-                    this.logger('warn', 'Error while notifying track mute state', err);
-                });
-            };
-            stream.getTracks().forEach((track) => {
-                const muteHandler = createTrackMuteHandler(true);
-                const unmuteHandler = createTrackMuteHandler(false);
-                track.addEventListener('mute', muteHandler);
-                track.addEventListener('unmute', unmuteHandler);
-                track.addEventListener('ended', handleTrackEnded);
-                this.subscriptions.push(() => {
-                    track.removeEventListener('mute', muteHandler);
-                    track.removeEventListener('unmute', unmuteHandler);
-                    track.removeEventListener('ended', handleTrackEnded);
-                });
-            });
+        catch (err) {
+            if (rootStream) {
+                disposeOfMediaStream(await rootStream);
+            }
+            throw err;
         }
     }
     get mediaDeviceKind() {
@@ -9491,6 +9513,9 @@ class InputMediaDeviceManagerState {
         this.hasBrowserPermission$ = permission
             ? permission.asObservable().pipe(shareReplay(1))
             : of(true);
+        this.browserPermissionState$ = permission
+            ? permission.asStateObservable().pipe(shareReplay(1))
+            : of('prompt');
         this.isPromptingPermission$ = permission
             ? permission.getIsPromptingObservable().pipe(shareReplay(1))
             : of(false);
@@ -10556,7 +10581,7 @@ class Call {
                 const currentUserId = this.currentUserId;
                 if (currentUserId && blockedUserIds.includes(currentUserId)) {
                     this.logger('info', 'Leaving call because of being blocked');
-                    await this.leave({ reason: 'user blocked' }).catch((err) => {
+                    await this.leave({ message: 'user blocked' }).catch((err) => {
                         this.logger('error', 'Error leaving call after being blocked', err);
                     });
                 }
@@ -10709,7 +10734,7 @@ class Call {
         /**
          * Leave the call and stop the media streams that were published by the call.
          */
-        this.leave = async ({ reject, reason = 'user is leaving the call', } = {}) => {
+        this.leave = async ({ reject, reason, message } = {}) => {
             await withoutConcurrency(this.joinLeaveConcurrencyTag, async () => {
                 const callingState = this.state.callingState;
                 if (callingState === CallingState.LEFT) {
@@ -10727,7 +10752,7 @@ class Call {
                 }
                 if (callingState === CallingState.RINGING && reject !== false) {
                     if (reject) {
-                        await this.reject('decline');
+                        await this.reject(reason ?? 'decline');
                     }
                     else {
                         // if reject was undefined, we still have to cancel the call automatically
@@ -10746,7 +10771,7 @@ class Call {
                 this.subscriber = undefined;
                 this.publisher?.dispose();
                 this.publisher = undefined;
-                await this.sfuClient?.leaveAndClose(reason);
+                await this.sfuClient?.leaveAndClose(message ?? reason ?? 'user is leaving the call');
                 this.sfuClient = undefined;
                 this.dynascaleManager.setSfuClient(undefined);
                 this.state.setCallingState(CallingState.LEFT);
@@ -11453,7 +11478,7 @@ class Call {
                 if (strategy === WebsocketReconnectStrategy.UNSPECIFIED)
                     return;
                 if (strategy === WebsocketReconnectStrategy.DISCONNECT) {
-                    this.leave({ reason: 'SFU instructed to disconnect' }).catch((err) => {
+                    this.leave({ message: 'SFU instructed to disconnect' }).catch((err) => {
                         this.logger('warn', `Can't leave call after disconnect request`, err);
                     });
                 }
@@ -12083,7 +12108,11 @@ class Call {
                 // e.g. it was already accepted and joined
                 if (this.state.callingState !== CallingState.RINGING)
                     return;
-                this.leave({ reject: true, reason: 'timeout' }).catch((err) => {
+                this.leave({
+                    reject: true,
+                    reason: 'timeout',
+                    message: `ringing timeout - ${this.isCreatedByMe ? 'no one accepted' : `user didn't interact with incoming call screen`}`,
+                }).catch((err) => {
                     this.logger('error', 'Failed to drop call', err);
                 });
             }, timeoutInMs);
@@ -13458,7 +13487,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.20.0", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.20.2", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),