@stream-io/video-client 1.20.1 → 1.21.0

package/dist/index.cjs.js

@@ -62,16 +62,17 @@ if (typeof navigator !== 'undefined' &&
         const original = target[method];
         if (!original)
             continue;
+        let mark = 0;
         target[method] = async function tracedMethod(constraints) {
-            const tag = `navigator.mediaDevices.${method}`;
+            const tag = `navigator.mediaDevices.${method}.${mark++}`;
             trace(tag, constraints);
             try {
                 const stream = await original.call(target, constraints);
-                trace(`${tag}OnSuccess`, dumpStream(stream));
+                trace(`${tag}.OnSuccess`, dumpStream(stream));
                 return stream;
             }
             catch (err) {
-                trace(`${tag}OnFailure`, err.name);
+                trace(`${tag}.OnFailure`, err.name);
                 throw err;
             }
         };
@@ -119,6 +120,7 @@ const FrameRecordingSettingsRequestQualityEnum = {
     _720P: '720p',
     _1080P: '1080p',
     _1440P: '1440p',
+    _2160P: '2160p',
 };
 /**
  * @export
@@ -191,11 +193,13 @@ const RTMPBroadcastRequestQualityEnum = {
     _720P: '720p',
     _1080P: '1080p',
     _1440P: '1440p',
+    _2160P: '2160p',
     PORTRAIT_360X640: 'portrait-360x640',
     PORTRAIT_480X854: 'portrait-480x854',
     PORTRAIT_720X1280: 'portrait-720x1280',
     PORTRAIT_1080X1920: 'portrait-1080x1920',
     PORTRAIT_1440X2560: 'portrait-1440x2560',
+    PORTRAIT_2160X3840: 'portrait-2160x3840',
 };
 /**
  * @export
@@ -206,11 +210,13 @@ const RTMPSettingsRequestQualityEnum = {
     _720P: '720p',
     _1080P: '1080p',
     _1440P: '1440p',
+    _2160P: '2160p',
     PORTRAIT_360X640: 'portrait-360x640',
     PORTRAIT_480X854: 'portrait-480x854',
     PORTRAIT_720X1280: 'portrait-720x1280',
     PORTRAIT_1080X1920: 'portrait-1080x1920',
     PORTRAIT_1440X2560: 'portrait-1440x2560',
+    PORTRAIT_2160X3840: 'portrait-2160x3840',
 };
 /**
  * @export
@@ -229,11 +235,13 @@ const RecordSettingsRequestQualityEnum = {
     _720P: '720p',
     _1080P: '1080p',
     _1440P: '1440p',
+    _2160P: '2160p',
     PORTRAIT_360X640: 'portrait-360x640',
     PORTRAIT_480X854: 'portrait-480x854',
     PORTRAIT_720X1280: 'portrait-720x1280',
     PORTRAIT_1080X1920: 'portrait-1080x1920',
     PORTRAIT_1440X2560: 'portrait-1440x2560',
+    PORTRAIT_2160X3840: 'portrait-2160x3840',
 };
 /**
  * @export
@@ -1789,6 +1797,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,
@@ -1814,6 +1863,7 @@ var models = /*#__PURE__*/Object.freeze({
     Participant: Participant,
     ParticipantCount: ParticipantCount,
     get PeerType () { return PeerType; },
+    PerformanceStats: PerformanceStats,
     Pin: Pin,
     PublishOption: PublishOption,
     RTMPIngress: RTMPIngress,
@@ -1993,6 +2043,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*/,
+            },
         ]);
     }
 }
@@ -4060,7 +4131,7 @@ class StreamVideoWriteableStateStore {
                         continue;
                     logger('info', `User disconnected, leaving call: ${call.cid}`);
                     await call
-                        .leave({ reason: 'client.disconnectUser() called' })
+                        .leave({ message: 'client.disconnectUser() called' })
                         .catch((err) => {
                         logger('error', `Error leaving call: ${call.cid}`, err);
                     });
@@ -5464,30 +5535,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,
@@ -5645,7 +5703,7 @@ const aggregate = (stats) => {
     return report;
 };
 
-const version = "1.20.1";
+const version = "1.21.0";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -5782,7 +5840,7 @@ const getClientDetails = async () => {
 };
 
 class SfuStatsReporter {
-    constructor(sfuClient, { options, clientDetails, subscriber, publisher, microphone, camera, state, }) {
+    constructor(sfuClient, { options, clientDetails, subscriber, publisher, microphone, camera, state, unifiedSessionId, }) {
         this.logger = getLogger(['SfuStatsReporter']);
         this.inputDevices = new Map();
         this.observeDevice = (device, kind) => {
@@ -5839,31 +5897,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();
+            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 mediaTrace = tracer.take();
             const sfuTrace = this.sfuClient.getTrace();
-            const publisherTraces = [
+            const traces = [
                 ...mediaTrace.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,
                 });
@@ -5896,6 +5963,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;
@@ -5904,6 +5981,7 @@ class SfuStatsReporter {
         this.microphone = microphone;
         this.camera = camera;
         this.state = state;
+        this.unifiedSessionId = unifiedSessionId;
         const { sdk, browser } = clientDetails;
         this.sdkName = getSdkName(sdk);
         this.sdkVersion = getSdkVersion(sdk);
@@ -5926,47 +6004,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);
     };
@@ -5996,9 +6052,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;
@@ -6021,12 +6230,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;
         }
@@ -6034,6 +6244,27 @@ 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,
+    });
+};
 
 /**
  * A base class for the `Publisher` and `Subscriber` classes.
@@ -6043,9 +6274,10 @@ 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 = [];
         /**
          * Handles events synchronously.
@@ -6093,10 +6325,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
@@ -6130,6 +6362,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.
          */
@@ -6186,18 +6436,19 @@ 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'}-${sfuClient.edgeName}`;
+            this.tracer = new Tracer(tag);
+            this.tracer.trace('create', connectionConfig);
+            traceRTCPeerConnection(this.pc, this.tracer.trace);
+        }
     }
     /**
      * Disposes the `RTCPeerConnection` instance.
@@ -6563,7 +6814,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);
                     }
@@ -6585,8 +6836,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.
          */
@@ -6616,7 +6879,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);
             }
         };
         /**
@@ -6636,18 +6899,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.
          */
@@ -6941,6 +7192,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({
@@ -7284,12 +7536,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);
                 },
             });
@@ -7382,7 +7644,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;
@@ -7434,7 +7697,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({
@@ -7443,7 +7706,9 @@ class StreamSfuClient {
                         token: this.credentials.token,
                     }),
                 },
-            }));
+            });
+            this.tracer?.trace('joinRequest', joinRequest);
+            await this.send(joinRequest);
             return current.promise;
         };
         this.ping = async () => {
@@ -7504,7 +7769,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: [
@@ -7603,13 +7870,17 @@ const watchCallRejected = (call) => {
                 .every((m) => rejectedBy[m.user_id]);
             if (everyoneElseRejected) {
                 call.logger('info', 'everyone rejected, leaving the call');
-                await call.leave({ reason: 'ring: everyone rejected' });
+                await call.leave({
+                    reject: true,
+                    reason: 'cancel',
+                    message: 'ring: everyone rejected',
+                });
             }
         }
         else {
             if (rejectedBy[eventCall.created_by.id]) {
                 call.logger('info', 'call creator rejected, leaving call');
-                await call.leave({ reason: 'ring: creator rejected' });
+                await call.leave({ message: 'ring: creator rejected' });
             }
         }
     };
@@ -7623,7 +7894,7 @@ const watchCallEnded = (call) => {
         if (callingState !== exports.CallingState.IDLE &&
             callingState !== exports.CallingState.LEFT) {
             call
-                .leave({ reason: 'call.ended event received', reject: false })
+                .leave({ message: 'call.ended event received', reject: false })
                 .catch((err) => {
                 call.logger('error', 'Failed to leave call after call.ended ', err);
             });
@@ -7643,7 +7914,7 @@ const watchSfuCallEnded = (call) => {
             // update the call state to reflect the call has ended.
             call.state.setEndedAt(new Date());
             const reason = CallEndedReason[e.reason];
-            await call.leave({ reason: `callEnded received: ${reason}` });
+            await call.leave({ message: `callEnded received: ${reason}` });
         }
         catch (err) {
             call.logger('error', 'Failed to leave call after being ended by the SFU', err);
@@ -7710,7 +7981,7 @@ const watchLiveEnded = (dispatcher, call) => {
             return;
         call.state.setBackstage(true);
         if (!call.permissionsContext.hasPermission(OwnCapability.JOIN_BACKSTAGE)) {
-            call.leave({ reason: 'live ended' }).catch((err) => {
+            call.leave({ message: 'live ended' }).catch((err) => {
                 call.logger('error', 'Failed to leave call after live ended', err);
             });
         }
@@ -8400,7 +8671,6 @@ class DynascaleManager {
                         const { selectedDevice } = this.speaker.state;
                         if (selectedDevice && 'setSinkId' in audioElement) {
                             audioElement.setSinkId(selectedDevice);
-                            tracer.trace('navigator.mediaDevices.setSinkId', selectedDevice);
                         }
                     }
                 });
@@ -8410,7 +8680,6 @@ class DynascaleManager {
                 : this.speaker.state.selectedDevice$.subscribe((deviceId) => {
                     if (deviceId) {
                         audioElement.setSinkId(deviceId);
-                        tracer.trace('navigator.mediaDevices.setSinkId', deviceId);
                     }
                 });
             const volumeSubscription = rxjs.combineLatest([
@@ -9482,25 +9751,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);
@@ -9515,39 +9765,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.
@@ -9558,7 +9808,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));
         }
@@ -9568,13 +9818,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.
@@ -9583,7 +9833,7 @@ class InputMediaDeviceManagerState {
      * @param constraints the constraints to set.
      */
     setDefaultConstraints(constraints) {
-        this.setCurrentValue(this.defaultConstraintsSubject, constraints);
+        setCurrentValue(this.defaultConstraintsSubject, constraints);
     }
 }
 
@@ -9601,13 +9851,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
@@ -9780,13 +10030,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();
@@ -10238,19 +10488,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.
@@ -10258,7 +10508,7 @@ class ScreenShareState extends InputMediaDeviceManagerState {
      * @param settings the screen share settings to set.
      */
     setSettings(settings) {
-        this.setCurrentValue(this.settingsSubject, settings);
+        setCurrentValue(this.settingsSubject, settings);
     }
 }
 
@@ -10337,25 +10587,6 @@ class SpeakerState {
          * [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.selectedDevice$ = this.selectedDeviceSubject
             .asObservable()
             .pipe(rxjs.distinctUntilChanged());
@@ -10369,7 +10600,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
@@ -10377,21 +10608,22 @@ 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);
+        tracer.trace('navigator.mediaDevices.setSinkId', deviceId);
     }
     /**
      * @internal
      * @param volume
      */
     setVolume(volume) {
-        this.setCurrentValue(this.volumeSubject, volume);
+        setCurrentValue(this.volumeSubject, volume);
     }
 }
 
@@ -10572,7 +10804,7 @@ class Call {
                 const currentUserId = this.currentUserId;
                 if (currentUserId && blockedUserIds.includes(currentUserId)) {
                     this.logger('info', 'Leaving call because of being blocked');
-                    await this.leave({ reason: 'user blocked' }).catch((err) => {
+                    await this.leave({ message: 'user blocked' }).catch((err) => {
                         this.logger('error', 'Error leaving call after being blocked', err);
                     });
                 }
@@ -10725,7 +10957,7 @@ class Call {
         /**
          * Leave the call and stop the media streams that were published by the call.
          */
-        this.leave = async ({ reject, reason = 'user is leaving the call', } = {}) => {
+        this.leave = async ({ reject, reason, message } = {}) => {
             await withoutConcurrency(this.joinLeaveConcurrencyTag, async () => {
                 const callingState = this.state.callingState;
                 if (callingState === exports.CallingState.LEFT) {
@@ -10743,7 +10975,7 @@ class Call {
                 }
                 if (callingState === exports.CallingState.RINGING && reject !== false) {
                     if (reject) {
-                        await this.reject('decline');
+                        await this.reject(reason ?? 'decline');
                     }
                     else {
                         // if reject was undefined, we still have to cancel the call automatically
@@ -10762,7 +10994,7 @@ class Call {
                 this.subscriber = undefined;
                 this.publisher?.dispose();
                 this.publisher = undefined;
-                await this.sfuClient?.leaveAndClose(reason);
+                await this.sfuClient?.leaveAndClose(message ?? reason ?? 'user is leaving the call');
                 this.sfuClient = undefined;
                 this.dynascaleManager.setSfuClient(undefined);
                 this.state.setCallingState(exports.CallingState.LEFT);
@@ -10772,6 +11004,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);
@@ -11199,7 +11432,6 @@ class Call {
                 state: this.state,
                 connectionConfig,
                 logTag: String(this.sfuClientTag),
-                clientDetails,
                 enableTracing,
                 onUnrecoverableError: (reason) => {
                     this.reconnect(WebsocketReconnectStrategy.REJOIN, reason).catch((err) => {
@@ -11221,7 +11453,6 @@ class Call {
                     connectionConfig,
                     publishOptions,
                     logTag: String(this.sfuClientTag),
-                    clientDetails,
                     enableTracing,
                     onUnrecoverableError: (reason) => {
                         this.reconnect(WebsocketReconnectStrategy.REJOIN, reason).catch((err) => {
@@ -11240,6 +11471,7 @@ class Call {
             });
             this.sfuStatsReporter?.stop();
             if (statsOptions?.reporting_interval_ms > 0) {
+                this.unifiedSessionId ?? (this.unifiedSessionId = sfuClient.sessionId);
                 this.sfuStatsReporter = new SfuStatsReporter(sfuClient, {
                     clientDetails,
                     options: statsOptions,
@@ -11248,6 +11480,7 @@ class Call {
                     microphone: this.microphone,
                     camera: this.camera,
                     state: this.state,
+                    unifiedSessionId: this.unifiedSessionId,
                 });
                 this.sfuStatsReporter.start();
             }
@@ -11469,7 +11702,7 @@ class Call {
                 if (strategy === WebsocketReconnectStrategy.UNSPECIFIED)
                     return;
                 if (strategy === WebsocketReconnectStrategy.DISCONNECT) {
-                    this.leave({ reason: 'SFU instructed to disconnect' }).catch((err) => {
+                    this.leave({ message: 'SFU instructed to disconnect' }).catch((err) => {
                         this.logger('warn', `Can't leave call after disconnect request`, err);
                     });
                 }
@@ -11617,6 +11850,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);
         };
         /**
@@ -12099,7 +12337,11 @@ class Call {
                 // e.g. it was already accepted and joined
                 if (this.state.callingState !== exports.CallingState.RINGING)
                     return;
-                this.leave({ reject: true, reason: 'timeout' }).catch((err) => {
+                this.leave({
+                    reject: true,
+                    reason: 'timeout',
+                    message: `ringing timeout - ${this.isCreatedByMe ? 'no one accepted' : `user didn't interact with incoming call screen`}`,
+                }).catch((err) => {
                     this.logger('error', 'Failed to drop call', err);
                 });
             }, timeoutInMs);
@@ -13472,7 +13714,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.20.1", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.21.0", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),