@stream-io/video-client 1.21.0 → 1.22.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.22.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.21.0...@stream-io/video-client-1.22.0) (2025-05-08)
+
+### Features
+
+- Expo 53 Swift Config Plugin and React Native 0.79 compatibility ([#1714](https://github.com/GetStream/stream-video-js/issues/1714)) ([380331e](https://github.com/GetStream/stream-video-js/commit/380331e11fd6182c3111413aa25689a669dd3c9c))
+
+### Bug Fixes
+
+- graceful handling of LIVE_ENDED CallEnded reason ([#1783](https://github.com/GetStream/stream-video-js/issues/1783)) ([ff54390](https://github.com/GetStream/stream-video-js/commit/ff54390099e10c550b8bbac42658080a65007a30))
+- isolate mediaDevices traces ([#1779](https://github.com/GetStream/stream-video-js/issues/1779)) ([d8623f0](https://github.com/GetStream/stream-video-js/commit/d8623f0b06a6229bff96ea01dd1f2b851b7d3558)), closes [#1765](https://github.com/GetStream/stream-video-js/issues/1765)
+- make camera.flip() work more reliably with older devices ([#1781](https://github.com/GetStream/stream-video-js/issues/1781)) ([9dfbc55](https://github.com/GetStream/stream-video-js/commit/9dfbc556155c1ae9b528b50b140313c4decb024f)), closes [#1679](https://github.com/GetStream/stream-video-js/issues/1679)
+- use scoped locking for PeerConnection events ([#1785](https://github.com/GetStream/stream-video-js/issues/1785)) ([b0f93e8](https://github.com/GetStream/stream-video-js/commit/b0f93e83e70520b527efd94e9192ac7dca031864))
+
 ## [1.21.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.20.2...@stream-io/video-client-1.21.0) (2025-05-02)
 
 ### Features

package/dist/index.browser.es.js

@@ -8,75 +8,6 @@ import { ReplaySubject, combineLatest, BehaviorSubject, map, shareReplay, distin
 import { UAParser } from 'ua-parser-js';
 import { parse } from 'sdp-transform';
 
-class Tracer {
-    constructor(id) {
-        this.buffer = [];
-        this.enabled = true;
-        this.setEnabled = (enabled) => {
-            if (this.enabled === enabled)
-                return;
-            this.enabled = enabled;
-            this.buffer = [];
-        };
-        this.trace = (tag, data) => {
-            if (!this.enabled)
-                return;
-            this.buffer.push([tag, this.id, data, Date.now()]);
-        };
-        this.take = () => {
-            const snapshot = this.buffer;
-            this.buffer = [];
-            return {
-                snapshot,
-                rollback: () => {
-                    this.buffer.unshift(...snapshot);
-                },
-            };
-        };
-        this.dispose = () => {
-            this.buffer = [];
-        };
-        this.id = id;
-    }
-}
-
-const tracer = new Tracer(null);
-if (typeof navigator !== 'undefined' &&
-    typeof navigator.mediaDevices !== 'undefined') {
-    const dumpStream = (stream) => ({
-        id: stream.id,
-        tracks: stream.getTracks().map((track) => ({
-            id: track.id,
-            kind: track.kind,
-            label: track.label,
-            enabled: track.enabled,
-            muted: track.muted,
-            readyState: track.readyState,
-        })),
-    });
-    const trace = tracer.trace;
-    const target = navigator.mediaDevices;
-    for (const method of ['getUserMedia', 'getDisplayMedia']) {
-        const original = target[method];
-        if (!original)
-            continue;
-        let mark = 0;
-        target[method] = async function tracedMethod(constraints) {
-            const tag = `navigator.mediaDevices.${method}.${mark++}`;
-            trace(tag, constraints);
-            try {
-                const stream = await original.call(target, constraints);
-                trace(`${tag}.OnSuccess`, dumpStream(stream));
-                return stream;
-            }
-            catch (err) {
-                trace(`${tag}.OnFailure`, err.name);
-                throw err;
-            }
-        };
-    }
-}
-
 /* tslint:disable */
 /**
  * @export
@@ -5413,6 +5344,20 @@ const flatten = (report) => {
     });
     return stats;
 };
+/**
+ * Dump the provided MediaStream into a JSON object.
+ */
+const dumpStream = (stream) => ({
+    id: stream.id,
+    tracks: stream.getTracks().map((track) => ({
+        id: track.id,
+        kind: track.kind,
+        label: track.label,
+        enabled: track.enabled,
+        muted: track.muted,
+        readyState: track.readyState,
+    })),
+});
 const getSdkSignature = (clientDetails) => {
     const { sdk, ...platform } = clientDetails;
     const sdkName = getSdkName(sdk);
@@ -5701,7 +5646,7 @@ const aggregate = (stats) => {
     return report;
 };
 
-const version = "1.21.0";
+const version = "1.22.0";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -5838,7 +5783,7 @@ const getClientDetails = async () => {
 };
 
 class SfuStatsReporter {
-    constructor(sfuClient, { options, clientDetails, subscriber, publisher, microphone, camera, state, unifiedSessionId, }) {
+    constructor(sfuClient, { options, clientDetails, subscriber, publisher, microphone, camera, state, tracer, unifiedSessionId, }) {
         this.logger = getLogger(['SfuStatsReporter']);
         this.inputDevices = new Map();
         this.observeDevice = (device, kind) => {
@@ -5904,10 +5849,10 @@ class SfuStatsReporter {
             }
             const subscriberTrace = this.subscriber.tracer?.take();
             const publisherTrace = this.publisher?.tracer?.take();
-            const mediaTrace = tracer.take();
+            const tracer = this.tracer.take();
             const sfuTrace = this.sfuClient.getTrace();
             const traces = [
-                ...mediaTrace.snapshot,
+                ...tracer.snapshot,
                 ...(sfuTrace?.snapshot ?? []),
                 ...(publisherTrace?.snapshot ?? []),
                 ...(subscriberTrace?.snapshot ?? []),
@@ -5936,7 +5881,7 @@ class SfuStatsReporter {
             catch (err) {
                 publisherTrace?.rollback();
                 subscriberTrace?.rollback();
-                mediaTrace.rollback();
+                tracer.rollback();
                 sfuTrace?.rollback();
                 throw err;
             }
@@ -5979,6 +5924,7 @@ class SfuStatsReporter {
         this.microphone = microphone;
         this.camera = camera;
         this.state = state;
+        this.tracer = tracer;
         this.unifiedSessionId = unifiedSessionId;
         const { sdk, browser } = clientDetails;
         this.sdkName = getSdkName(sdk);
@@ -6264,6 +6210,38 @@ const getCodecFromStats = (stats, codecId) => {
     });
 };
 
+class Tracer {
+    constructor(id) {
+        this.buffer = [];
+        this.enabled = true;
+        this.setEnabled = (enabled) => {
+            if (this.enabled === enabled)
+                return;
+            this.enabled = enabled;
+            this.buffer = [];
+        };
+        this.trace = (tag, data) => {
+            if (!this.enabled)
+                return;
+            this.buffer.push([tag, this.id, data, Date.now()]);
+        };
+        this.take = () => {
+            const snapshot = this.buffer;
+            this.buffer = [];
+            return {
+                snapshot,
+                rollback: () => {
+                    this.buffer.unshift(...snapshot);
+                },
+            };
+        };
+        this.dispose = () => {
+            this.buffer = [];
+        };
+        this.id = id;
+    }
+}
+
 /**
  * A base class for the `Publisher` and `Subscriber` classes.
  * @internal
@@ -6277,13 +6255,15 @@ class BasePeerConnection {
         this.isDisposed = false;
         this.trackIdToTrackType = new Map();
         this.subscriptions = [];
+        this.lock = Math.random().toString(36).slice(2);
         /**
          * Handles events synchronously.
          * Consecutive events are queued and executed one after the other.
          */
         this.on = (event, fn) => {
             this.subscriptions.push(this.dispatcher.on(event, (e) => {
-                withoutConcurrency(`pc.${event}`, async () => fn(e)).catch((err) => {
+                const lockKey = `pc.${this.lock}.${event}`;
+                withoutConcurrency(lockKey, async () => fn(e)).catch((err) => {
                     if (this.isDisposed)
                         return;
                     this.logger('warn', `Error handling ${event}`, err);
@@ -6442,9 +6422,12 @@ class BasePeerConnection {
         this.pc.addEventListener('connectionstatechange', this.onConnectionStateChange);
         this.stats = new StatsTracer(this.pc, peerType, this.trackIdToTrackType);
         if (enableTracing) {
-            const tag = `${logTag}-${peerType === PeerType.SUBSCRIBER ? 'sub' : 'pub'}-${sfuClient.edgeName}`;
+            const tag = `${logTag}-${peerType === PeerType.SUBSCRIBER ? 'sub' : 'pub'}`;
             this.tracer = new Tracer(tag);
-            this.tracer.trace('create', connectionConfig);
+            this.tracer.trace('create', {
+                url: sfuClient.edgeName,
+                ...connectionConfig,
+            });
             traceRTCPeerConnection(this.pc, this.tracer.trace);
         }
     }
@@ -6999,7 +6982,7 @@ class Publisher extends BasePeerConnection {
          * @param options the optional offer options to use.
          */
         this.negotiate = async (options) => {
-            return withoutConcurrency('publisher.negotiate', async () => {
+            return withoutConcurrency(`publisher.negotiate.${this.lock}`, async () => {
                 const offer = await this.pc.createOffer(options);
                 const tracks = this.getAnnouncedTracks(offer.sdp);
                 if (!tracks.length)
@@ -7907,6 +7890,13 @@ const watchSfuCallEnded = (call) => {
         if (call.state.callingState === CallingState.LEFT)
             return;
         try {
+            if (e.reason === CallEndedReason.LIVE_ENDED) {
+                call.state.setBackstage(true);
+                // don't leave the call if the user has permission to join backstage
+                const { hasPermission } = call.permissionsContext;
+                if (hasPermission(OwnCapability.JOIN_BACKSTAGE))
+                    return;
+            }
             // `call.ended` event arrived after the call is already left
             // and all event handlers are detached. We need to manually
             // update the call state to reflect the call has ended.
@@ -9119,15 +9109,25 @@ const getVideoDevices = lazy(() => {
 const getAudioOutputDevices = lazy(() => {
     return merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput')), shareReplay(1));
 });
-const getStream = async (constraints) => {
-    const stream = await navigator.mediaDevices.getUserMedia(constraints);
-    if (isFirefox()) {
-        // When enumerating devices, Firefox will hide device labels unless there's been
-        // an active user media stream on the page. So we force device list updates after
-        // every successful getUserMedia call.
-        navigator.mediaDevices.dispatchEvent(new Event('devicechange'));
+let getUserMediaExecId = 0;
+const getStream = async (constraints, tracer) => {
+    const tag = `navigator.mediaDevices.getUserMedia.${getUserMediaExecId++}.`;
+    try {
+        tracer?.trace(tag, constraints);
+        const stream = await navigator.mediaDevices.getUserMedia(constraints);
+        tracer?.trace(`${tag}OnSuccess`, dumpStream(stream));
+        if (isFirefox()) {
+            // When enumerating devices, Firefox will hide device labels unless there's been
+            // an active user media stream on the page. So we force device list updates after
+            // every successful getUserMedia call.
+            navigator.mediaDevices.dispatchEvent(new Event('devicechange'));
+        }
+        return stream;
+    }
+    catch (error) {
+        tracer?.trace(`${tag}OnFailure`, error.name);
+        throw error;
     }
-    return stream;
 };
 function isNotFoundOrOverconstrainedError(error) {
     if (!error || typeof error !== 'object') {
@@ -9151,11 +9151,11 @@ function isNotFoundOrOverconstrainedError(error) {
  * Returns an audio media stream that fulfills the given constraints.
  * If no constraints are provided, it uses the browser's default ones.
  *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
  * @param trackConstraints the constraints to use when requesting the stream.
- * @returns the new `MediaStream` fulfilling the given constraints.
+ * @param tracer the tracer to use for tracing the stream creation.
+ * @returns a new `MediaStream` fulfilling the given constraints.
  */
-const getAudioStream = async (trackConstraints) => {
+const getAudioStream = async (trackConstraints, tracer) => {
     const constraints = {
         audio: {
             ...audioDeviceConstraints.audio,
@@ -9167,7 +9167,7 @@ const getAudioStream = async (trackConstraints) => {
             throwOnNotAllowed: true,
             forcePrompt: true,
         });
-        return await getStream(constraints);
+        return await getStream(constraints, tracer);
     }
     catch (error) {
         if (isNotFoundOrOverconstrainedError(error) && trackConstraints?.deviceId) {
@@ -9187,11 +9187,11 @@ const getAudioStream = async (trackConstraints) => {
  * Returns a video media stream that fulfills the given constraints.
  * If no constraints are provided, it uses the browser's default ones.
  *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
  * @param trackConstraints the constraints to use when requesting the stream.
+ * @param tracer the tracer to use for tracing the stream creation.
  * @returns a new `MediaStream` fulfilling the given constraints.
  */
-const getVideoStream = async (trackConstraints) => {
+const getVideoStream = async (trackConstraints, tracer) => {
     const constraints = {
         video: {
             ...videoDeviceConstraints.video,
@@ -9203,7 +9203,7 @@ const getVideoStream = async (trackConstraints) => {
             throwOnNotAllowed: true,
             forcePrompt: true,
         });
-        return await getStream(constraints);
+        return await getStream(constraints, tracer);
     }
     catch (error) {
         if (isNotFoundOrOverconstrainedError(error) && trackConstraints?.deviceId) {
@@ -9219,19 +9219,21 @@ const getVideoStream = async (trackConstraints) => {
         throw error;
     }
 };
+let getDisplayMediaExecId = 0;
 /**
  * Prompts the user for a permission to share a screen.
  * If the user grants the permission, a screen sharing stream is returned. Throws otherwise.
  *
  * The callers of this API are responsible to handle the possible errors.
  *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- *
  * @param options any additional options to pass to the [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) API.
+ * @param tracer the tracer to use for tracing the stream creation.
  */
-const getScreenShareStream = async (options) => {
+const getScreenShareStream = async (options, tracer) => {
+    const tag = `navigator.mediaDevices.getDisplayMedia.${getDisplayMediaExecId++}.`;
     try {
-        return await navigator.mediaDevices.getDisplayMedia({
+        tracer?.trace(tag, options);
+        const stream = await navigator.mediaDevices.getDisplayMedia({
             video: true,
             audio: {
                 channelCount: {
@@ -9245,8 +9247,11 @@ const getScreenShareStream = async (options) => {
             systemAudio: 'include',
             ...options,
         });
+        tracer?.trace(`${tag}OnSuccess`, dumpStream(stream));
+        return stream;
     }
     catch (e) {
+        tracer?.trace(`${tag}OnFailure`, e.name);
         getLogger(['devices'])('error', 'Failed to get screen share stream', e);
         throw e;
     }
@@ -9284,9 +9289,6 @@ const isMobile = () => /Mobi/i.test(navigator.userAgent);
 
 class InputMediaDeviceManager {
     constructor(call, state, trackType) {
-        this.call = call;
-        this.state = state;
-        this.trackType = trackType;
         /**
          * if true, stops the media stream when call is left
          */
@@ -9304,6 +9306,9 @@ class InputMediaDeviceManager {
         this.dispose = () => {
             this.subscriptions.forEach((s) => s());
         };
+        this.call = call;
+        this.state = state;
+        this.trackType = trackType;
         this.logger = getLogger([`${TrackType[trackType].toLowerCase()} manager`]);
         if (deviceIds$ &&
             !isReactNative() &&
@@ -9900,32 +9905,32 @@ class CameraManager extends InputMediaDeviceManager {
      * @param direction the direction of the camera to select.
      */
     async selectDirection(direction) {
-        if (this.isDirectionSupportedByDevice()) {
-            if (isReactNative()) {
-                const videoTrack = this.getTracks()[0];
-                if (!videoTrack) {
-                    this.logger('warn', 'No video track found to do direction selection');
-                    return;
-                }
-                await videoTrack.applyConstraints({
-                    facingMode: direction === 'front' ? 'user' : 'environment',
-                });
-                this.state.setDirection(direction);
-                this.state.setDevice(undefined);
-            }
-            else {
-                // web mobile
-                this.state.setDirection(direction);
-                // Providing both device id and direction doesn't work, so we deselect the device
-                this.state.setDevice(undefined);
-                this.getTracks().forEach((track) => {
-                    track.stop();
-                });
+        if (!this.isDirectionSupportedByDevice()) {
+            this.logger('warn', 'Setting direction is not supported on this device');
+            return;
+        }
+        // providing both device id and direction doesn't work, so we deselect the device
+        this.state.setDirection(direction);
+        this.state.setDevice(undefined);
+        if (isReactNative()) {
+            const videoTrack = this.getTracks()[0];
+            await videoTrack?.applyConstraints({
+                facingMode: direction === 'front' ? 'user' : 'environment',
+            });
+            return;
+        }
+        this.getTracks().forEach((track) => track.stop());
+        try {
+            await this.unmuteStream();
+        }
+        catch (error) {
+            if (error instanceof Error && error.name === 'NotReadableError') {
+                // the camera is already in use, and the device can't use it unless it's released.
+                // in that case, we need to stop the stream and start it again.
+                await this.muteStream();
                 await this.unmuteStream();
             }
-        }
-        else {
-            this.logger('warn', 'Camera direction ignored for desktop devices');
+            throw error;
         }
     }
     /**
@@ -10010,7 +10015,7 @@ class CameraManager extends InputMediaDeviceManager {
             constraints.facingMode =
                 this.state.direction === 'front' ? 'user' : 'environment';
         }
-        return getVideoStream(constraints);
+        return getVideoStream(constraints, this.call.tracer);
     }
 }
 
@@ -10421,7 +10426,7 @@ class MicrophoneManager extends InputMediaDeviceManager {
         return getAudioDevices();
     }
     getStream(constraints) {
-        return getAudioStream(constraints);
+        return getAudioStream(constraints, this.call.tracer);
     }
     async startSpeakingWhileMutedDetection(deviceId) {
         await withoutConcurrency(this.soundDetectorConcurrencyTag, async () => {
@@ -10564,7 +10569,7 @@ class ScreenShareManager extends InputMediaDeviceManager {
         if (!this.state.audioEnabled) {
             constraints.audio = false;
         }
-        return getScreenShareStream(constraints);
+        return getScreenShareStream(constraints, this.call.tracer);
     }
     async stopPublishStream() {
         return this.call.stopPublish(TrackType.SCREEN_SHARE, TrackType.SCREEN_SHARE_AUDIO);
@@ -10573,18 +10578,19 @@ class ScreenShareManager extends InputMediaDeviceManager {
      * Overrides the default `select` method to throw an error.
      */
     async select() {
-        throw new Error('This method is not supported in for Screen Share');
+        throw new Error('Not supported');
     }
 }
 
 class SpeakerState {
-    constructor() {
+    constructor(tracer) {
         this.selectedDeviceSubject = new BehaviorSubject('');
         this.volumeSubject = new BehaviorSubject(1);
         /**
          * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
          */
         this.isDeviceSelectionSupported = checkIfAudioOutputChangeSupported();
+        this.tracer = tracer;
         this.selectedDevice$ = this.selectedDeviceSubject
             .asObservable()
             .pipe(distinctUntilChanged());
@@ -10614,7 +10620,7 @@ class SpeakerState {
      */
     setDevice(deviceId) {
         setCurrentValue(this.selectedDeviceSubject, deviceId);
-        tracer.trace('navigator.mediaDevices.setSinkId', deviceId);
+        this.tracer.trace('navigator.mediaDevices.setSinkId', deviceId);
     }
     /**
      * @internal
@@ -10627,7 +10633,6 @@ class SpeakerState {
 
 class SpeakerManager {
     constructor(call) {
-        this.state = new SpeakerState();
         this.subscriptions = [];
         /**
          * Disposes the manager.
@@ -10638,6 +10643,7 @@ class SpeakerManager {
             this.subscriptions.forEach((s) => s.unsubscribe());
         };
         this.call = call;
+        this.state = new SpeakerState(call.tracer);
         if (deviceIds$ && !isReactNative()) {
             this.subscriptions.push(combineLatest([deviceIds$, this.state.selectedDevice$]).subscribe(([devices, deviceId]) => {
                 if (!deviceId) {
@@ -10731,6 +10737,7 @@ class Call {
          * The permissions context of this call.
          */
         this.permissionsContext = new PermissionsContext();
+        this.tracer = new Tracer(null);
         /**
          * The event dispatcher instance dedicated to this Call instance.
          * @private
@@ -11459,7 +11466,6 @@ class Call {
                     },
                 });
             }
-            tracer.setEnabled(enableTracing);
             this.statsReporter?.stop();
             this.statsReporter = createStatsReporter({
                 subscriber: this.subscriber,
@@ -11467,6 +11473,7 @@ class Call {
                 state: this.state,
                 datacenter: sfuClient.edgeName,
             });
+            this.tracer.setEnabled(enableTracing);
             this.sfuStatsReporter?.stop();
             if (statsOptions?.reporting_interval_ms > 0) {
                 this.unifiedSessionId ?? (this.unifiedSessionId = sfuClient.sessionId);
@@ -11478,6 +11485,7 @@ class Call {
                     microphone: this.microphone,
                     camera: this.camera,
                     state: this.state,
+                    tracer: this.tracer,
                     unifiedSessionId: this.unifiedSessionId,
                 });
                 this.sfuStatsReporter.start();
@@ -11711,6 +11719,7 @@ class Call {
                 }
             });
             const unregisterNetworkChanged = this.streamClient.on('network.changed', (e) => {
+                this.tracer.trace('network.changed', e);
                 if (!e.online) {
                     this.logger('debug', '[Reconnect] Going offline');
                     if (!this.hasJoinedOnce)
@@ -13714,7 +13723,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.21.0", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.22.0", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),