@stream-io/video-client 1.21.0 → 1.22.1

package/dist/index.es.js

@@ -9,75 +9,6 @@ import { UAParser } from 'ua-parser-js';
 import { parse } from 'sdp-transform';
 import https from 'https';
 
-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
@@ -1431,6 +1362,12 @@ class PublishOption$Type extends MessageType {
                 T: () => VideoDimension,
             },
             { no: 8, name: 'id', kind: 'scalar', T: 5 /*ScalarType.INT32*/ },
+            {
+                no: 9,
+                name: 'use_single_layer',
+                kind: 'scalar',
+                T: 8 /*ScalarType.BOOL*/,
+            },
         ]);
     }
 }
@@ -5414,6 +5351,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);
@@ -5702,7 +5653,7 @@ const aggregate = (stats) => {
     return report;
 };
 
-const version = "1.21.0";
+const version = "1.22.1";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -5839,7 +5790,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) => {
@@ -5905,10 +5856,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 ?? []),
@@ -5937,7 +5888,7 @@ class SfuStatsReporter {
             catch (err) {
                 publisherTrace?.rollback();
                 subscriberTrace?.rollback();
-                mediaTrace.rollback();
+                tracer.rollback();
                 sfuTrace?.rollback();
                 throw err;
             }
@@ -5965,6 +5916,11 @@ class SfuStatsReporter {
             clearTimeout(this.timeoutId);
             this.timeoutId = undefined;
         };
+        this.flush = () => {
+            this.run().catch((err) => {
+                this.logger('warn', 'Failed to flush report stats', err);
+            });
+        };
         this.scheduleOne = (timeout) => {
             clearTimeout(this.timeoutId);
             this.timeoutId = setTimeout(() => {
@@ -5980,6 +5936,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);
@@ -6265,6 +6222,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
@@ -6278,13 +6267,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);
@@ -6392,11 +6383,12 @@ class BasePeerConnection {
             // do nothing when ICE is restarting
             if (this.isIceRestarting)
                 return;
-            if (state === 'failed' || state === 'disconnected') {
+            if (state === 'failed') {
+                this.onUnrecoverableError?.('ICE connection failed');
+            }
+            else if (state === 'disconnected') {
                 this.logger('debug', `Attempting to restart ICE`);
                 this.restartIce().catch((e) => {
-                    if (this.isDisposed)
-                        return;
                     const reason = `ICE restart failed`;
                     this.logger('error', reason, e);
                     this.onUnrecoverableError?.(`${reason}: ${e}`);
@@ -6443,9 +6435,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);
         }
     }
@@ -6661,7 +6656,7 @@ const computeVideoLayers = (videoTrack, publishOption) => {
     const optimalVideoLayers = [];
     const settings = videoTrack.getSettings();
     const { width = 0, height = 0 } = settings;
-    const { bitrate, codec, fps, maxSpatialLayers = 3, maxTemporalLayers = 3, videoDimension = { width: 1280, height: 720 }, } = publishOption;
+    const { bitrate, codec, fps, maxSpatialLayers = 3, maxTemporalLayers = 3, videoDimension = { width: 1280, height: 720 }, useSingleLayer, } = publishOption;
     const maxBitrate = getComputedMaxBitrate(videoDimension, width, height, bitrate);
     let downscaleFactor = 1;
     let bitrateFactor = 1;
@@ -6678,7 +6673,7 @@ const computeVideoLayers = (videoTrack, publishOption) => {
         if (svcCodec) {
             // for SVC codecs, we need to set the scalability mode, and the
             // codec will handle the rest (layers, temporal layers, etc.)
-            layer.scalabilityMode = toScalabilityMode(maxSpatialLayers, maxTemporalLayers);
+            layer.scalabilityMode = toScalabilityMode(useSingleLayer ? 1 : maxSpatialLayers, maxTemporalLayers);
         }
         else {
             // for non-SVC codecs, we need to downscale proportionally (simulcast)
@@ -6693,7 +6688,7 @@ const computeVideoLayers = (videoTrack, publishOption) => {
     }
     // for simplicity, we start with all layers enabled, then this function
     // will clear/reassign the layers that are not needed
-    return withSimulcastConstraints(settings, optimalVideoLayers);
+    return withSimulcastConstraints(settings, optimalVideoLayers, useSingleLayer);
 };
 /**
  * Computes the maximum bitrate for a given resolution.
@@ -6727,7 +6722,7 @@ const getComputedMaxBitrate = (targetResolution, currentWidth, currentHeight, bi
  *
  * https://chromium.googlesource.com/external/webrtc/+/refs/heads/main/media/engine/simulcast.cc#90
  */
-const withSimulcastConstraints = (settings, optimalVideoLayers) => {
+const withSimulcastConstraints = (settings, optimalVideoLayers, useSingleLayer) => {
     let layers;
     const size = Math.max(settings.width || 0, settings.height || 0);
     if (size <= 320) {
@@ -6743,9 +6738,10 @@ const withSimulcastConstraints = (settings, optimalVideoLayers) => {
         layers = optimalVideoLayers;
     }
     const ridMapping = ['q', 'h', 'f'];
-    return layers.map((layer, index) => ({
+    return layers.map((layer, index, arr) => ({
         ...layer,
         rid: ridMapping[index], // reassign rid
+        active: useSingleLayer && index < arr.length - 1 ? false : layer.active,
     }));
 };
 
@@ -6832,6 +6828,9 @@ class Publisher extends BasePeerConnection {
                 direction: 'sendonly',
                 sendEncodings,
             });
+            const params = transceiver.sender.getParameters();
+            params.degradationPreference = 'maintain-framerate';
+            await transceiver.sender.setParameters(params);
             const trackType = publishOption.trackType;
             this.logger('debug', `Added ${TrackType[trackType]} transceiver`);
             this.transceiverCache.add(publishOption, transceiver);
@@ -7000,7 +6999,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)
@@ -7908,6 +7907,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.
@@ -9120,15 +9126,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') {
@@ -9152,11 +9168,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,
@@ -9168,7 +9184,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) {
@@ -9188,11 +9204,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,
@@ -9204,7 +9220,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) {
@@ -9220,19 +9236,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: {
@@ -9246,8 +9264,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;
     }
@@ -9285,9 +9306,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
          */
@@ -9305,6 +9323,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() &&
@@ -9901,32 +9922,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;
         }
     }
     /**
@@ -10011,7 +10032,7 @@ class CameraManager extends InputMediaDeviceManager {
             constraints.facingMode =
                 this.state.direction === 'front' ? 'user' : 'environment';
         }
-        return getVideoStream(constraints);
+        return getVideoStream(constraints, this.call.tracer);
     }
 }
 
@@ -10422,7 +10443,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 () => {
@@ -10565,7 +10586,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);
@@ -10574,18 +10595,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());
@@ -10615,7 +10637,7 @@ class SpeakerState {
      */
     setDevice(deviceId) {
         setCurrentValue(this.selectedDeviceSubject, deviceId);
-        tracer.trace('navigator.mediaDevices.setSinkId', deviceId);
+        this.tracer.trace('navigator.mediaDevices.setSinkId', deviceId);
     }
     /**
      * @internal
@@ -10628,7 +10650,6 @@ class SpeakerState {
 
 class SpeakerManager {
     constructor(call) {
-        this.state = new SpeakerState();
         this.subscriptions = [];
         /**
          * Disposes the manager.
@@ -10639,6 +10660,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) {
@@ -10732,6 +10754,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
@@ -10987,6 +11010,7 @@ class Call {
                 }
                 this.statsReporter?.stop();
                 this.statsReporter = undefined;
+                this.sfuStatsReporter?.flush();
                 this.sfuStatsReporter?.stop();
                 this.sfuStatsReporter = undefined;
                 this.subscriber?.dispose();
@@ -11300,7 +11324,7 @@ class Call {
             if (!performingRejoin && !performingFastReconnect && !performingMigration) {
                 this.sfuStatsReporter?.sendConnectionTime((Date.now() - connectStartTime) / 1000);
             }
-            if (performingRejoin) {
+            if (performingRejoin && isWsHealthy) {
                 const strategy = WebsocketReconnectStrategy[this.reconnectStrategy];
                 await previousSfuClient?.leaveAndClose(`Closing previous WS after reconnect with strategy: ${strategy}`);
             }
@@ -11460,7 +11484,6 @@ class Call {
                     },
                 });
             }
-            tracer.setEnabled(enableTracing);
             this.statsReporter?.stop();
             this.statsReporter = createStatsReporter({
                 subscriber: this.subscriber,
@@ -11468,6 +11491,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);
@@ -11479,6 +11503,7 @@ class Call {
                     microphone: this.microphone,
                     camera: this.camera,
                     state: this.state,
+                    tracer: this.tracer,
                     unifiedSessionId: this.unifiedSessionId,
                 });
                 this.sfuStatsReporter.start();
@@ -11551,10 +11576,10 @@ class Call {
          */
         this.reconnect = async (strategy, reason) => {
             if (this.state.callingState === CallingState.RECONNECTING ||
+                this.state.callingState === CallingState.MIGRATING ||
                 this.state.callingState === CallingState.RECONNECTING_FAILED)
                 return;
             return withoutConcurrency(this.reconnectConcurrencyTag, async () => {
-                this.logger('info', `[Reconnect] Reconnecting with strategy ${WebsocketReconnectStrategy[strategy]}`);
                 const reconnectStartTime = Date.now();
                 this.reconnectStrategy = strategy;
                 this.reconnectReason = reason;
@@ -11574,6 +11599,7 @@ class Call {
                     try {
                         // wait until the network is available
                         await this.networkAvailableTask?.promise;
+                        this.logger('info', `[Reconnect] Reconnecting with strategy ${WebsocketReconnectStrategy[this.reconnectStrategy]}`);
                         switch (this.reconnectStrategy) {
                             case WebsocketReconnectStrategy.UNSPECIFIED:
                             case WebsocketReconnectStrategy.DISCONNECT:
@@ -11613,6 +11639,7 @@ class Call {
                 } while (this.state.callingState !== CallingState.JOINED &&
                     this.state.callingState !== CallingState.RECONNECTING_FAILED &&
                     this.state.callingState !== CallingState.LEFT);
+                this.logger('info', '[Reconnect] Reconnection flow finished');
             });
         };
         /**
@@ -11712,6 +11739,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)
@@ -13713,7 +13741,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.1", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),