@stream-io/video-client 1.20.2 → 1.22.0

package/dist/index.cjs.js

@@ -10,74 +10,6 @@ var uaParserJs = require('ua-parser-js');
 var sdpTransform = require('sdp-transform');
 var https = require('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;
-        target[method] = async function tracedMethod(constraints) {
-            const tag = `navigator.mediaDevices.${method}`;
-            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
@@ -1796,6 +1728,47 @@ class AppleState$Type extends runtime.MessageType {
  * @generated MessageType for protobuf message stream.video.sfu.models.AppleState
  */
 const AppleState = new AppleState$Type();
+// @generated message type with reflection information, may provide speed optimized methods
+class PerformanceStats$Type extends runtime.MessageType {
+    constructor() {
+        super('stream.video.sfu.models.PerformanceStats', [
+            {
+                no: 1,
+                name: 'track_type',
+                kind: 'enum',
+                T: () => [
+                    'stream.video.sfu.models.TrackType',
+                    TrackType,
+                    'TRACK_TYPE_',
+                ],
+            },
+            { no: 2, name: 'codec', kind: 'message', T: () => Codec },
+            {
+                no: 3,
+                name: 'avg_frame_time_ms',
+                kind: 'scalar',
+                T: 2 /*ScalarType.FLOAT*/,
+            },
+            { no: 4, name: 'avg_fps', kind: 'scalar', T: 2 /*ScalarType.FLOAT*/ },
+            {
+                no: 5,
+                name: 'video_dimension',
+                kind: 'message',
+                T: () => VideoDimension,
+            },
+            {
+                no: 6,
+                name: 'target_bitrate',
+                kind: 'scalar',
+                T: 5 /*ScalarType.INT32*/,
+            },
+        ]);
+    }
+}
+/**
+ * @generated MessageType for protobuf message stream.video.sfu.models.PerformanceStats
+ */
+const PerformanceStats = new PerformanceStats$Type();
 
 var models = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1821,6 +1794,7 @@ var models = /*#__PURE__*/Object.freeze({
     Participant: Participant,
     ParticipantCount: ParticipantCount,
     get PeerType () { return PeerType; },
+    PerformanceStats: PerformanceStats,
     Pin: Pin,
     PublishOption: PublishOption,
     RTMPIngress: RTMPIngress,
@@ -2000,6 +1974,27 @@ class SendStatsRequest$Type extends runtime.MessageType {
                 kind: 'scalar',
                 T: 9 /*ScalarType.STRING*/,
             },
+            { no: 15, name: 'rtc_stats', kind: 'scalar', T: 9 /*ScalarType.STRING*/ },
+            {
+                no: 16,
+                name: 'encode_stats',
+                kind: 'message',
+                repeat: 1 /*RepeatType.PACKED*/,
+                T: () => PerformanceStats,
+            },
+            {
+                no: 17,
+                name: 'decode_stats',
+                kind: 'message',
+                repeat: 1 /*RepeatType.PACKED*/,
+                T: () => PerformanceStats,
+            },
+            {
+                no: 18,
+                name: 'unified_session_id',
+                kind: 'scalar',
+                T: 9 /*ScalarType.STRING*/,
+            },
         ]);
     }
 }
@@ -5351,6 +5346,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);
@@ -5471,30 +5480,17 @@ const createStatsReporter = ({ subscriber, publisher, state, datacenter, polling
                 }
             }
         }
-        const [subscriberStats, publisherStats] = await Promise.all([
-            subscriber
-                .getStats()
-                .then((report) => transform(report, {
-                kind: 'subscriber',
-                trackKind: 'video',
-                publisher,
-            }))
-                .then(aggregate),
-            publisher
-                ? publisher
-                    .getStats()
-                    .then((report) => transform(report, {
-                    kind: 'publisher',
-                    trackKind: 'video',
-                    publisher,
-                }))
-                    .then(aggregate)
-                : getEmptyStats(),
-        ]);
         const [subscriberRawStats, publisherRawStats] = await Promise.all([
             getRawStatsForTrack('subscriber'),
             publisher ? getRawStatsForTrack('publisher') : undefined,
         ]);
+        const process = (report, kind) => aggregate(transform(report, { kind, trackKind: 'video', publisher }));
+        const subscriberStats = subscriberRawStats
+            ? process(subscriberRawStats, 'subscriber')
+            : getEmptyStats();
+        const publisherStats = publisherRawStats
+            ? process(publisherRawStats, 'publisher')
+            : getEmptyStats();
         state.setCallStatsReport({
             datacenter,
             publisherStats,
@@ -5652,7 +5648,7 @@ const aggregate = (stats) => {
     return report;
 };
 
-const version = "1.20.2";
+const version = "1.22.0";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -5789,7 +5785,7 @@ const getClientDetails = async () => {
 };
 
 class SfuStatsReporter {
-    constructor(sfuClient, { options, clientDetails, subscriber, publisher, microphone, camera, state, }) {
+    constructor(sfuClient, { options, clientDetails, subscriber, publisher, microphone, camera, state, tracer, unifiedSessionId, }) {
         this.logger = getLogger(['SfuStatsReporter']);
         this.inputDevices = new Map();
         this.observeDevice = (device, kind) => {
@@ -5846,31 +5842,40 @@ class SfuStatsReporter {
         };
         this.run = async (telemetry) => {
             const [subscriberStats, publisherStats] = await Promise.all([
-                this.subscriber.getStats().then(flatten).then(JSON.stringify),
-                this.publisher?.getStats().then(flatten).then(JSON.stringify) ?? '[]',
+                this.subscriber.stats.get(),
+                this.publisher?.stats.get(),
             ]);
-            const subscriberTrace = this.subscriber.getTrace();
-            const publisherTrace = this.publisher?.getTrace();
-            const mediaTrace = tracer.take();
+            this.subscriber.tracer?.trace('getstats', subscriberStats.delta);
+            if (publisherStats) {
+                this.publisher?.tracer?.trace('getstats', publisherStats.delta);
+            }
+            const subscriberTrace = this.subscriber.tracer?.take();
+            const publisherTrace = this.publisher?.tracer?.take();
+            const tracer = this.tracer.take();
             const sfuTrace = this.sfuClient.getTrace();
-            const publisherTraces = [
-                ...mediaTrace.snapshot,
+            const traces = [
+                ...tracer.snapshot,
                 ...(sfuTrace?.snapshot ?? []),
                 ...(publisherTrace?.snapshot ?? []),
+                ...(subscriberTrace?.snapshot ?? []),
             ];
             try {
                 await this.sfuClient.sendStats({
                     sdk: this.sdkName,
                     sdkVersion: this.sdkVersion,
                     webrtcVersion: this.webRTCVersion,
-                    subscriberStats,
-                    subscriberRtcStats: subscriberTrace
-                        ? JSON.stringify(subscriberTrace.snapshot)
-                        : '',
-                    publisherStats,
-                    publisherRtcStats: publisherTraces.length > 0 ? JSON.stringify(publisherTraces) : '',
+                    subscriberStats: JSON.stringify(flatten(subscriberStats.stats)),
+                    publisherStats: publisherStats
+                        ? JSON.stringify(flatten(publisherStats.stats))
+                        : '[]',
+                    subscriberRtcStats: '',
+                    publisherRtcStats: '',
+                    rtcStats: JSON.stringify(traces),
+                    encodeStats: publisherStats?.performanceStats ?? [],
+                    decodeStats: subscriberStats.performanceStats,
                     audioDevices: this.inputDevices.get('mic'),
                     videoDevices: this.inputDevices.get('camera'),
+                    unifiedSessionId: this.unifiedSessionId,
                     deviceState: getDeviceState(),
                     telemetry,
                 });
@@ -5878,7 +5883,7 @@ class SfuStatsReporter {
             catch (err) {
                 publisherTrace?.rollback();
                 subscriberTrace?.rollback();
-                mediaTrace.rollback();
+                tracer.rollback();
                 sfuTrace?.rollback();
                 throw err;
             }
@@ -5903,6 +5908,16 @@ class SfuStatsReporter {
             this.inputDevices.clear();
             clearInterval(this.intervalId);
             this.intervalId = undefined;
+            clearTimeout(this.timeoutId);
+            this.timeoutId = undefined;
+        };
+        this.scheduleOne = (timeout) => {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = setTimeout(() => {
+                this.run().catch((err) => {
+                    this.logger('warn', 'Failed to report stats', err);
+                });
+            }, timeout);
         };
         this.sfuClient = sfuClient;
         this.options = options;
@@ -5911,6 +5926,8 @@ 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);
         this.sdkVersion = getSdkVersion(sdk);
@@ -5933,47 +5950,25 @@ const traceRTCPeerConnection = (pc, trace) => {
         trace('ontrack', `${e.track.kind}:${e.track.id} ${streams}`);
     });
     pc.addEventListener('signalingstatechange', () => {
-        trace('onsignalingstatechange', pc.signalingState);
+        trace('signalingstatechange', pc.signalingState);
     });
     pc.addEventListener('iceconnectionstatechange', () => {
-        trace('oniceconnectionstatechange', pc.iceConnectionState);
+        trace('iceconnectionstatechange', pc.iceConnectionState);
     });
     pc.addEventListener('icegatheringstatechange', () => {
-        trace('onicegatheringstatechange', pc.iceGatheringState);
+        trace('icegatheringstatechange', pc.iceGatheringState);
     });
     pc.addEventListener('connectionstatechange', () => {
-        trace('onconnectionstatechange', pc.connectionState);
+        trace('connectionstatechange', pc.connectionState);
     });
     pc.addEventListener('negotiationneeded', () => {
-        trace('onnegotiationneeded', undefined);
+        trace('negotiationneeded', undefined);
     });
     pc.addEventListener('datachannel', ({ channel }) => {
-        trace('ondatachannel', [channel.id, channel.label]);
-    });
-    let prev = {};
-    const getStats = () => {
-        pc.getStats(null)
-            .then((stats) => {
-            const now = toObject(stats);
-            trace('getstats', deltaCompression(prev, now));
-            prev = now;
-        })
-            .catch((err) => {
-            trace('getstatsOnFailure', err.toString());
-        });
-    };
-    const interval = setInterval(() => {
-        getStats();
-    }, 8000);
-    pc.addEventListener('connectionstatechange', () => {
-        const state = pc.connectionState;
-        if (state === 'connected' || state === 'failed') {
-            getStats();
-        }
+        trace('datachannel', [channel.id, channel.label]);
     });
     const origClose = pc.close;
     pc.close = function tracedClose() {
-        clearInterval(interval);
         trace('close', undefined);
         return origClose.call(this);
     };
@@ -6003,9 +5998,162 @@ const traceRTCPeerConnection = (pc, trace) => {
         };
     }
 };
-const toObject = (s) => {
+
+/**
+ * StatsTracer is a class that collects and processes WebRTC stats.
+ * It is used to track the performance of the WebRTC connection
+ * and to provide information about the media streams.
+ * It is used by both the Publisher and Subscriber classes.
+ *
+ * @internal
+ */
+class StatsTracer {
+    /**
+     * Creates a new StatsTracer instance.
+     */
+    constructor(pc, peerType, trackIdToTrackType) {
+        this.previousStats = {};
+        this.frameTimeHistory = [];
+        this.fpsHistory = [];
+        /**
+         * Get the stats from the RTCPeerConnection.
+         * When called, it will return the stats for the current connection.
+         * It will also return the delta between the current stats and the previous stats.
+         * This is used to track the performance of the connection.
+         *
+         * @internal
+         */
+        this.get = async () => {
+            const stats = await this.pc.getStats();
+            const currentStats = toObject(stats);
+            const performanceStats = this.withOverrides(this.peerType === PeerType.SUBSCRIBER
+                ? this.getDecodeStats(currentStats)
+                : this.getEncodeStats(currentStats));
+            const delta = deltaCompression(this.previousStats, currentStats);
+            // store the current data for the next iteration
+            this.previousStats = currentStats;
+            this.frameTimeHistory = this.frameTimeHistory.slice(-2);
+            this.fpsHistory = this.fpsHistory.slice(-2);
+            return { performanceStats, delta, stats };
+        };
+        /**
+         * Collects encode stats from the RTCPeerConnection.
+         */
+        this.getEncodeStats = (currentStats) => {
+            const encodeStats = [];
+            for (const rtp of Object.values(currentStats)) {
+                if (rtp.type !== 'outbound-rtp')
+                    continue;
+                const { codecId, framesSent = 0, kind, id, totalEncodeTime = 0, framesPerSecond = 0, frameHeight = 0, frameWidth = 0, targetBitrate = 0, mediaSourceId, } = rtp;
+                if (kind === 'audio' || !this.previousStats[id])
+                    continue;
+                const prevRtp = this.previousStats[id];
+                const deltaTotalEncodeTime = totalEncodeTime - (prevRtp.totalEncodeTime || 0);
+                const deltaFramesSent = framesSent - (prevRtp.framesSent || 0);
+                const framesEncodeTime = deltaFramesSent > 0
+                    ? (deltaTotalEncodeTime / deltaFramesSent) * 1000
+                    : 0;
+                this.frameTimeHistory.push(framesEncodeTime);
+                this.fpsHistory.push(framesPerSecond);
+                let trackType = TrackType.VIDEO;
+                if (mediaSourceId && currentStats[mediaSourceId]) {
+                    const mediaSource = currentStats[mediaSourceId];
+                    trackType =
+                        this.trackIdToTrackType.get(mediaSource.trackIdentifier) || trackType;
+                }
+                encodeStats.push({
+                    trackType,
+                    codec: getCodecFromStats(currentStats, codecId),
+                    avgFrameTimeMs: average(this.frameTimeHistory),
+                    avgFps: average(this.fpsHistory),
+                    targetBitrate: Math.round(targetBitrate),
+                    videoDimension: { width: frameWidth, height: frameHeight },
+                });
+            }
+            return encodeStats;
+        };
+        /**
+         * Collects decode stats from the RTCPeerConnection.
+         */
+        this.getDecodeStats = (currentStats) => {
+            let rtp = undefined;
+            let max = 0;
+            for (const item of Object.values(currentStats)) {
+                if (item.type !== 'inbound-rtp')
+                    continue;
+                const rtpItem = item;
+                const { kind, frameWidth = 0, frameHeight = 0 } = rtpItem;
+                const area = frameWidth * frameHeight;
+                if (kind === 'video' && area > max) {
+                    rtp = rtpItem;
+                    max = area;
+                }
+            }
+            if (!rtp || !this.previousStats[rtp.id])
+                return [];
+            const prevRtp = this.previousStats[rtp.id];
+            const { framesDecoded = 0, framesPerSecond = 0, totalDecodeTime = 0, trackIdentifier, } = rtp;
+            const deltaTotalDecodeTime = totalDecodeTime - (prevRtp.totalDecodeTime || 0);
+            const deltaFramesDecoded = framesDecoded - (prevRtp.framesDecoded || 0);
+            const framesDecodeTime = deltaFramesDecoded > 0
+                ? (deltaTotalDecodeTime / deltaFramesDecoded) * 1000
+                : 0;
+            this.frameTimeHistory.push(framesDecodeTime);
+            this.fpsHistory.push(framesPerSecond);
+            const trackType = this.trackIdToTrackType.get(trackIdentifier) || TrackType.VIDEO;
+            return [
+                PerformanceStats.create({
+                    trackType,
+                    codec: getCodecFromStats(currentStats, rtp.codecId),
+                    avgFrameTimeMs: average(this.frameTimeHistory),
+                    avgFps: average(this.fpsHistory),
+                    videoDimension: { width: rtp.frameWidth, height: rtp.frameHeight },
+                }),
+            ];
+        };
+        /**
+         * Applies cost overrides to the performance stats.
+         * This is used to override the default encode/decode times with custom values.
+         * This is useful for testing and debugging purposes, and it shouldn't be used in production.
+         */
+        this.withOverrides = (performanceStats) => {
+            if (this.costOverrides) {
+                for (const s of performanceStats) {
+                    const override = this.costOverrides.get(s.trackType);
+                    if (override !== undefined) {
+                        // override the average encode/decode time with the provided cost.
+                        // format: [override].[original-frame-time]
+                        s.avgFrameTimeMs = override + (s.avgFrameTimeMs || 0) / 1000;
+                    }
+                }
+            }
+            return performanceStats;
+        };
+        /**
+         * Set the encode/decode cost for a specific track type.
+         * This is used to override the default encode/decode times with custom values.
+         * This is useful for testing and debugging purposes, and it shouldn't be used in production.
+         *
+         * @internal
+         */
+        this.setCost = (cost, trackType = TrackType.VIDEO) => {
+            if (!this.costOverrides)
+                this.costOverrides = new Map();
+            this.costOverrides.set(trackType, cost);
+        };
+        this.pc = pc;
+        this.peerType = peerType;
+        this.trackIdToTrackType = trackIdToTrackType;
+    }
+}
+/**
+ * Convert the stat report to an object.
+ *
+ * @param report the stat report to convert.
+ */
+const toObject = (report) => {
     const obj = {};
-    s.forEach((v, k) => {
+    report.forEach((v, k) => {
         obj[k] = v;
     });
     return obj;
@@ -6028,12 +6176,13 @@ const deltaCompression = (oldStats, newStats) => {
         }
     }
     let timestamp = -Infinity;
-    for (const report of Object.values(newStats)) {
+    const values = Object.values(newStats);
+    for (const report of values) {
         if (report.timestamp > timestamp) {
             timestamp = report.timestamp;
         }
     }
-    for (const report of Object.values(newStats)) {
+    for (const report of values) {
         if (report.timestamp === timestamp) {
             report.timestamp = 0;
         }
@@ -6041,6 +6190,59 @@ const deltaCompression = (oldStats, newStats) => {
     newStats.timestamp = timestamp;
     return newStats;
 };
+/**
+ * Calculates an average value.
+ */
+const average = (arr) => arr.reduce((a, b) => a + b, 0) / arr.length;
+/**
+ * Create a Codec object from the codec stats.
+ *
+ * @param stats the stats report.
+ * @param codecId the codec ID to look for.
+ */
+const getCodecFromStats = (stats, codecId) => {
+    if (!codecId || !stats[codecId])
+        return;
+    const codecStats = stats[codecId];
+    return Codec.create({
+        name: codecStats.mimeType.split('/').pop(), // video/av1 -> av1
+        clockRate: codecStats.clockRate,
+        payloadType: codecStats.payloadType,
+        fmtp: codecStats.sdpFmtpLine,
+    });
+};
+
+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.
@@ -6050,17 +6252,20 @@ class BasePeerConnection {
     /**
      * Constructs a new `BasePeerConnection` instance.
      */
-    constructor(peerType, { sfuClient, connectionConfig, state, dispatcher, onUnrecoverableError, logTag, clientDetails, enableTracing, }) {
+    constructor(peerType, { sfuClient, connectionConfig, state, dispatcher, onUnrecoverableError, logTag, enableTracing, }) {
         this.isIceRestarting = false;
         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);
@@ -6100,10 +6305,10 @@ class BasePeerConnection {
             return this.pc.getStats(selector);
         };
         /**
-         * Returns the current tracing buffer.
+         * Maps the given track ID to the corresponding track type.
          */
-        this.getTrace = () => {
-            return this.tracer?.take();
+        this.getTrackType = (trackId) => {
+            return this.trackIdToTrackType.get(trackId);
         };
         /**
          * Handles the ICECandidate event and
@@ -6137,6 +6342,24 @@ class BasePeerConnection {
             }
             return JSON.stringify(candidate.toJSON());
         };
+        /**
+         * Handles the ConnectionStateChange event.
+         */
+        this.onConnectionStateChange = async () => {
+            const state = this.pc.connectionState;
+            this.logger('debug', `Connection state changed`, state);
+            if (!this.tracer)
+                return;
+            if (state === 'connected' || state === 'failed') {
+                try {
+                    const stats = await this.stats.get();
+                    this.tracer.trace('getstats', stats.delta);
+                }
+                catch (err) {
+                    this.tracer.trace('getstatsOnFailure', err.toString());
+                }
+            }
+        };
         /**
          * Handles the ICE connection state change event.
          */
@@ -6193,18 +6416,22 @@ class BasePeerConnection {
             logTag,
         ]);
         this.pc = new RTCPeerConnection(connectionConfig);
-        if (enableTracing) {
-            const tag = `${logTag}-${peerType === PeerType.SUBSCRIBER ? 'sub' : 'pub'}`;
-            this.tracer = new Tracer(tag);
-            this.tracer.trace('clientDetails', clientDetails);
-            this.tracer.trace('create', connectionConfig);
-            traceRTCPeerConnection(this.pc, this.tracer.trace);
-        }
         this.pc.addEventListener('icecandidate', this.onIceCandidate);
         this.pc.addEventListener('icecandidateerror', this.onIceCandidateError);
         this.pc.addEventListener('iceconnectionstatechange', this.onIceConnectionStateChange);
         this.pc.addEventListener('icegatheringstatechange', this.onIceGatherChange);
         this.pc.addEventListener('signalingstatechange', this.onSignalingChange);
+        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'}`;
+            this.tracer = new Tracer(tag);
+            this.tracer.trace('create', {
+                url: sfuClient.edgeName,
+                ...connectionConfig,
+            });
+            traceRTCPeerConnection(this.pc, this.tracer.trace);
+        }
     }
     /**
      * Disposes the `RTCPeerConnection` instance.
@@ -6570,7 +6797,7 @@ class Publisher extends BasePeerConnection {
                 }
                 else {
                     const previousTrack = transceiver.sender.track;
-                    await transceiver.sender.replaceTrack(trackToPublish);
+                    await this.updateTransceiver(transceiver, trackToPublish, trackType);
                     if (!isReactNative()) {
                         this.stopTrack(previousTrack);
                     }
@@ -6592,8 +6819,20 @@ class Publisher extends BasePeerConnection {
             const trackType = publishOption.trackType;
             this.logger('debug', `Added ${TrackType[trackType]} transceiver`);
             this.transceiverCache.add(publishOption, transceiver);
+            this.trackIdToTrackType.set(track.id, trackType);
             await this.negotiate();
         };
+        /**
+         * Updates the transceiver with the given track and track type.
+         */
+        this.updateTransceiver = async (transceiver, track, trackType) => {
+            const sender = transceiver.sender;
+            if (sender.track)
+                this.trackIdToTrackType.delete(sender.track.id);
+            await sender.replaceTrack(track);
+            if (track)
+                this.trackIdToTrackType.set(track.id, trackType);
+        };
         /**
          * Synchronizes the current Publisher state with the provided publish options.
          */
@@ -6623,7 +6862,7 @@ class Publisher extends BasePeerConnection {
                     continue;
                 // it is safe to stop the track here, it is a clone
                 this.stopTrack(transceiver.sender.track);
-                await transceiver.sender.replaceTrack(null);
+                await this.updateTransceiver(transceiver, null, publishOption.trackType);
             }
         };
         /**
@@ -6643,18 +6882,6 @@ class Publisher extends BasePeerConnection {
             }
             return false;
         };
-        /**
-         * Maps the given track ID to the corresponding track type.
-         */
-        this.getTrackType = (trackId) => {
-            for (const transceiverId of this.transceiverCache.items()) {
-                const { publishOption, transceiver } = transceiverId;
-                if (transceiver.sender.track?.id === trackId) {
-                    return publishOption.trackType;
-                }
-            }
-            return undefined;
-        };
         /**
          * Stops the cloned track that is being published to the SFU.
          */
@@ -6757,7 +6984,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)
@@ -6948,6 +7175,7 @@ class Subscriber extends BasePeerConnection {
             if (!trackType) {
                 return this.logger('error', `Unknown track type: ${rawTrackType}`);
             }
+            this.trackIdToTrackType.set(e.track.id, trackType);
             if (!participantToUpdate) {
                 this.logger('warn', `[onTrack]: Received track for unknown participant: ${trackId}`, e);
                 this.state.registerOrphanedTrack({
@@ -7291,12 +7519,22 @@ class StreamSfuClient {
          */
         this.abortController = new AbortController();
         this.createWebSocket = () => {
+            const eventsToTrace = {
+                callEnded: true,
+                changePublishQuality: true,
+                error: true,
+                goAway: true,
+            };
             this.signalWs = createWebSocketSignalChannel({
                 logTag: this.logTag,
                 endpoint: `${this.credentials.server.ws_endpoint}?tag=${this.logTag}`,
                 onMessage: (message) => {
                     this.lastMessageTimestamp = new Date();
                     this.scheduleConnectionCheck();
+                    const eventKind = message.eventPayload.oneofKind;
+                    if (eventsToTrace[eventKind]) {
+                        this.tracer?.trace(eventKind, message);
+                    }
                     this.dispatcher.dispatch(message, this.logTag);
                 },
             });
@@ -7389,7 +7627,8 @@ class StreamSfuClient {
         };
         this.sendStats = async (stats) => {
             await this.joinTask;
-            return retryable(() => this.rpc.sendStats({ ...stats, sessionId: this.sessionId }), this.abortController.signal);
+            // NOTE: we don't retry sending stats
+            return this.rpc.sendStats({ ...stats, sessionId: this.sessionId });
         };
         this.startNoiseCancellation = async () => {
             await this.joinTask;
@@ -7441,7 +7680,7 @@ class StreamSfuClient {
                 unsubscribe();
                 current.reject(new Error('Waiting for "joinResponse" has timed out'));
             }, this.joinResponseTimeout);
-            await this.send(SfuRequest.create({
+            const joinRequest = SfuRequest.create({
                 requestPayload: {
                     oneofKind: 'joinRequest',
                     joinRequest: JoinRequest.create({
@@ -7450,7 +7689,9 @@ class StreamSfuClient {
                         token: this.credentials.token,
                     }),
                 },
-            }));
+            });
+            this.tracer?.trace('joinRequest', joinRequest);
+            await this.send(joinRequest);
             return current.promise;
         };
         this.ping = async () => {
@@ -7511,7 +7752,9 @@ class StreamSfuClient {
         this.joinResponseTimeout = joinResponseTimeout;
         this.logTag = logTag;
         this.logger = getLogger(['SfuClient', logTag]);
-        this.tracer = enableTracing ? new Tracer(logTag) : undefined;
+        this.tracer = enableTracing
+            ? new Tracer(`${logTag}-${this.edgeName}`)
+            : undefined;
         this.rpc = createSignalClient({
             baseUrl: server.url,
             interceptors: [
@@ -7649,6 +7892,13 @@ const watchSfuCallEnded = (call) => {
         if (call.state.callingState === exports.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.
@@ -8411,7 +8661,6 @@ class DynascaleManager {
                         const { selectedDevice } = this.speaker.state;
                         if (selectedDevice && 'setSinkId' in audioElement) {
                             audioElement.setSinkId(selectedDevice);
-                            tracer.trace('navigator.mediaDevices.setSinkId', selectedDevice);
                         }
                     }
                 });
@@ -8421,7 +8670,6 @@ class DynascaleManager {
                 : this.speaker.state.selectedDevice$.subscribe((deviceId) => {
                     if (deviceId) {
                         audioElement.setSinkId(deviceId);
-                        tracer.trace('navigator.mediaDevices.setSinkId', deviceId);
                     }
                 });
             const volumeSubscription = rxjs.combineLatest([
@@ -8863,15 +9111,25 @@ const getVideoDevices = lazy(() => {
 const getAudioOutputDevices = lazy(() => {
     return rxjs.merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(rxjs.startWith(undefined), rxjs.concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput')), rxjs.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') {
@@ -8895,11 +9153,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,
@@ -8911,7 +9169,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) {
@@ -8931,11 +9189,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,
@@ -8947,7 +9205,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) {
@@ -8963,19 +9221,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: {
@@ -8989,8 +9249,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;
     }
@@ -9028,9 +9291,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
          */
@@ -9048,6 +9308,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() &&
@@ -9493,25 +9756,6 @@ class InputMediaDeviceManagerState {
          * The default constraints for the device.
          */
         this.defaultConstraints$ = this.defaultConstraintsSubject.asObservable();
-        /**
-         * Gets the current value of an observable, or undefined if the observable has
-         * not emitted a value yet.
-         *
-         * @param observable$ the observable to get the value from.
-         */
-        this.getCurrentValue = getCurrentValue;
-        /**
-         * Updates the value of the provided Subject.
-         * An `update` can either be a new value or a function which takes
-         * the current value and returns a new value.
-         *
-         * @internal
-         *
-         * @param subject the subject to update.
-         * @param update the update to apply to the subject.
-         * @return the updated value.
-         */
-        this.setCurrentValue = setCurrentValue;
         this.hasBrowserPermission$ = permission
             ? permission.asObservable().pipe(rxjs.shareReplay(1))
             : rxjs.of(true);
@@ -9526,39 +9770,39 @@ class InputMediaDeviceManagerState {
      * The device status
      */
     get status() {
-        return this.getCurrentValue(this.status$);
+        return getCurrentValue(this.status$);
     }
     /**
      * The requested device status. Useful for optimistic UIs
      */
     get optimisticStatus() {
-        return this.getCurrentValue(this.optimisticStatus$);
+        return getCurrentValue(this.optimisticStatus$);
     }
     /**
      * The currently selected device
      */
     get selectedDevice() {
-        return this.getCurrentValue(this.selectedDevice$);
+        return getCurrentValue(this.selectedDevice$);
     }
     /**
      * The current media stream, or `undefined` if the device is currently disabled.
      */
     get mediaStream() {
-        return this.getCurrentValue(this.mediaStream$);
+        return getCurrentValue(this.mediaStream$);
     }
     /**
      * @internal
      * @param status
      */
     setStatus(status) {
-        this.setCurrentValue(this.statusSubject, status);
+        setCurrentValue(this.statusSubject, status);
     }
     /**
      * @internal
      * @param pendingStatus
      */
     setPendingStatus(pendingStatus) {
-        this.setCurrentValue(this.optimisticStatusSubject, pendingStatus);
+        setCurrentValue(this.optimisticStatusSubject, pendingStatus);
     }
     /**
      * Updates the `mediaStream` state variable.
@@ -9569,7 +9813,7 @@ class InputMediaDeviceManagerState {
      * as this is the stream that holds the actual deviceId information.
      */
     setMediaStream(stream, rootStream) {
-        this.setCurrentValue(this.mediaStreamSubject, stream);
+        setCurrentValue(this.mediaStreamSubject, stream);
         if (rootStream) {
             this.setDevice(this.getDeviceIdFromStream(rootStream));
         }
@@ -9579,13 +9823,13 @@ class InputMediaDeviceManagerState {
      * @param deviceId the device id to set.
      */
     setDevice(deviceId) {
-        this.setCurrentValue(this.selectedDeviceSubject, deviceId);
+        setCurrentValue(this.selectedDeviceSubject, deviceId);
     }
     /**
      * Gets the default constraints for the device.
      */
     get defaultConstraints() {
-        return this.getCurrentValue(this.defaultConstraints$);
+        return getCurrentValue(this.defaultConstraints$);
     }
     /**
      * Sets the default constraints for the device.
@@ -9594,7 +9838,7 @@ class InputMediaDeviceManagerState {
      * @param constraints the constraints to set.
      */
     setDefaultConstraints(constraints) {
-        this.setCurrentValue(this.defaultConstraintsSubject, constraints);
+        setCurrentValue(this.defaultConstraintsSubject, constraints);
     }
 }
 
@@ -9612,13 +9856,13 @@ class CameraManagerState extends InputMediaDeviceManagerState {
      * back - means the camera facing the environment
      */
     get direction() {
-        return this.getCurrentValue(this.direction$);
+        return getCurrentValue(this.direction$);
     }
     /**
      * @internal
      */
     setDirection(direction) {
-        this.setCurrentValue(this.directionSubject, direction);
+        setCurrentValue(this.directionSubject, direction);
     }
     /**
      * @internal
@@ -9663,32 +9907,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;
         }
     }
     /**
@@ -9773,7 +10017,7 @@ class CameraManager extends InputMediaDeviceManager {
             constraints.facingMode =
                 this.state.direction === 'front' ? 'user' : 'environment';
         }
-        return getVideoStream(constraints);
+        return getVideoStream(constraints, this.call.tracer);
     }
 }
 
@@ -9791,13 +10035,13 @@ class MicrophoneManagerState extends InputMediaDeviceManagerState {
      * This feature is not available in the React Native SDK.
      */
     get speakingWhileMuted() {
-        return this.getCurrentValue(this.speakingWhileMuted$);
+        return getCurrentValue(this.speakingWhileMuted$);
     }
     /**
      * @internal
      */
     setSpeakingWhileMuted(isSpeaking) {
-        this.setCurrentValue(this.speakingWhileMutedSubject, isSpeaking);
+        setCurrentValue(this.speakingWhileMutedSubject, isSpeaking);
     }
     getDeviceIdFromStream(stream) {
         const [track] = stream.getAudioTracks();
@@ -10184,7 +10428,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 () => {
@@ -10249,19 +10493,19 @@ class ScreenShareState extends InputMediaDeviceManagerState {
      * The current screen share audio status.
      */
     get audioEnabled() {
-        return this.getCurrentValue(this.audioEnabled$);
+        return getCurrentValue(this.audioEnabled$);
     }
     /**
      * Set the current screen share audio status.
      */
     setAudioEnabled(isEnabled) {
-        this.setCurrentValue(this.audioEnabledSubject, isEnabled);
+        setCurrentValue(this.audioEnabledSubject, isEnabled);
     }
     /**
      * The current screen share settings.
      */
     get settings() {
-        return this.getCurrentValue(this.settings$);
+        return getCurrentValue(this.settings$);
     }
     /**
      * Set the current screen share settings.
@@ -10269,7 +10513,7 @@ class ScreenShareState extends InputMediaDeviceManagerState {
      * @param settings the screen share settings to set.
      */
     setSettings(settings) {
-        this.setCurrentValue(this.settingsSubject, settings);
+        setCurrentValue(this.settingsSubject, settings);
     }
 }
 
@@ -10327,7 +10571,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);
@@ -10336,37 +10580,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 rxjs.BehaviorSubject('');
         this.volumeSubject = new rxjs.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();
-        /**
-         * Gets the current value of an observable, or undefined if the observable has
-         * not emitted a value yet.
-         *
-         * @param observable$ the observable to get the value from.
-         */
-        this.getCurrentValue = getCurrentValue;
-        /**
-         * Updates the value of the provided Subject.
-         * An `update` can either be a new value or a function which takes
-         * the current value and returns a new value.
-         *
-         * @internal
-         *
-         * @param subject the subject to update.
-         * @param update the update to apply to the subject.
-         * @return the updated value.
-         */
-        this.setCurrentValue = setCurrentValue;
+        this.tracer = tracer;
         this.selectedDevice$ = this.selectedDeviceSubject
             .asObservable()
             .pipe(rxjs.distinctUntilChanged());
@@ -10380,7 +10606,7 @@ class SpeakerState {
      * Note: this feature is not supported in React Native
      */
     get selectedDevice() {
-        return this.getCurrentValue(this.selectedDevice$);
+        return getCurrentValue(this.selectedDevice$);
     }
     /**
      * The currently selected volume
@@ -10388,27 +10614,27 @@ class SpeakerState {
      * Note: this feature is not supported in React Native
      */
     get volume() {
-        return this.getCurrentValue(this.volume$);
+        return getCurrentValue(this.volume$);
     }
     /**
      * @internal
      * @param deviceId
      */
     setDevice(deviceId) {
-        this.setCurrentValue(this.selectedDeviceSubject, deviceId);
+        setCurrentValue(this.selectedDeviceSubject, deviceId);
+        this.tracer.trace('navigator.mediaDevices.setSinkId', deviceId);
     }
     /**
      * @internal
      * @param volume
      */
     setVolume(volume) {
-        this.setCurrentValue(this.volumeSubject, volume);
+        setCurrentValue(this.volumeSubject, volume);
     }
 }
 
 class SpeakerManager {
     constructor(call) {
-        this.state = new SpeakerState();
         this.subscriptions = [];
         /**
          * Disposes the manager.
@@ -10419,6 +10645,7 @@ class SpeakerManager {
             this.subscriptions.forEach((s) => s.unsubscribe());
         };
         this.call = call;
+        this.state = new SpeakerState(call.tracer);
         if (deviceIds$ && !isReactNative()) {
             this.subscriptions.push(rxjs.combineLatest([deviceIds$, this.state.selectedDevice$]).subscribe(([devices, deviceId]) => {
                 if (!deviceId) {
@@ -10512,6 +10739,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
@@ -10783,6 +11011,7 @@ class Call {
                 this.leaveCallHooks.forEach((hook) => hook());
                 this.initialized = false;
                 this.hasJoinedOnce = false;
+                this.unifiedSessionId = undefined;
                 this.ringingSubject.next(false);
                 this.cancelAutoDrop();
                 this.clientStore.unregisterCall(this);
@@ -11210,7 +11439,6 @@ class Call {
                 state: this.state,
                 connectionConfig,
                 logTag: String(this.sfuClientTag),
-                clientDetails,
                 enableTracing,
                 onUnrecoverableError: (reason) => {
                     this.reconnect(WebsocketReconnectStrategy.REJOIN, reason).catch((err) => {
@@ -11232,7 +11460,6 @@ class Call {
                     connectionConfig,
                     publishOptions,
                     logTag: String(this.sfuClientTag),
-                    clientDetails,
                     enableTracing,
                     onUnrecoverableError: (reason) => {
                         this.reconnect(WebsocketReconnectStrategy.REJOIN, reason).catch((err) => {
@@ -11241,7 +11468,6 @@ class Call {
                     },
                 });
             }
-            tracer.setEnabled(enableTracing);
             this.statsReporter?.stop();
             this.statsReporter = createStatsReporter({
                 subscriber: this.subscriber,
@@ -11249,8 +11475,10 @@ 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);
                 this.sfuStatsReporter = new SfuStatsReporter(sfuClient, {
                     clientDetails,
                     options: statsOptions,
@@ -11259,6 +11487,8 @@ class Call {
                     microphone: this.microphone,
                     camera: this.camera,
                     state: this.state,
+                    tracer: this.tracer,
+                    unifiedSessionId: this.unifiedSessionId,
                 });
                 this.sfuStatsReporter.start();
             }
@@ -11491,6 +11721,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)
@@ -11628,6 +11859,11 @@ class Call {
                     trackTypes.push(TrackType.SCREEN_SHARE_AUDIO);
                 }
             }
+            if (track.kind === 'video') {
+                // schedules calibration report - the SFU will use the performance stats
+                // to adjust the quality thresholds as early as possible
+                this.sfuStatsReporter?.scheduleOne(3000);
+            }
             await this.updateLocalStreamState(mediaStream, ...trackTypes);
         };
         /**
@@ -13487,7 +13723,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.20.2", ...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}`),