@stream-io/video-client 1.27.2 → 1.27.4

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.27.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.27.3...@stream-io/video-client-1.27.4) (2025-08-13)
+
+### Bug Fixes
+
+- expose isSupportedBrowser() utility ([#1859](https://github.com/GetStream/stream-video-js/issues/1859)) ([f51a434](https://github.com/GetStream/stream-video-js/commit/f51a4341f57407210ab2e9ba57f41818ddbd7ed9))
+
+## [1.27.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.27.2...@stream-io/video-client-1.27.3) (2025-08-07)
+
+### Bug Fixes
+
+- extended telemetry data for the signal websocket ([#1881](https://github.com/GetStream/stream-video-js/issues/1881)) ([984703d](https://github.com/GetStream/stream-video-js/commit/984703dabb8c6189eaf4d6925421568f6d0fd7fc))
+
 ## [1.27.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.27.1...@stream-io/video-client-1.27.2) (2025-08-05)
 
 ### Bug Fixes

package/dist/index.browser.es.js

@@ -5643,6 +5643,151 @@ const getSdkVersion = (sdk) => {
     return sdk ? `${sdk.major}.${sdk.minor}.${sdk.patch}` : '0.0.0-development';
 };
 
+const version = "1.27.4";
+const [major, minor, patch] = version.split('.');
+let sdkInfo = {
+    type: SdkType.PLAIN_JAVASCRIPT,
+    major,
+    minor,
+    patch,
+};
+let osInfo;
+let deviceInfo;
+let webRtcInfo;
+let deviceState = { oneofKind: undefined };
+const setSdkInfo = (info) => {
+    sdkInfo = info;
+};
+const getSdkInfo = () => {
+    return sdkInfo;
+};
+const setOSInfo = (info) => {
+    osInfo = info;
+};
+const setDeviceInfo = (info) => {
+    deviceInfo = info;
+};
+const getWebRTCInfo = () => {
+    return webRtcInfo;
+};
+const setWebRTCInfo = (info) => {
+    webRtcInfo = info;
+};
+const setThermalState = (state) => {
+    if (!osInfo) {
+        deviceState = { oneofKind: undefined };
+        return;
+    }
+    if (osInfo.name === 'android') {
+        const thermalState = AndroidThermalState[state] ||
+            AndroidThermalState.UNSPECIFIED;
+        deviceState = {
+            oneofKind: 'android',
+            android: {
+                thermalState,
+                isPowerSaverMode: deviceState?.oneofKind === 'android' &&
+                    deviceState.android.isPowerSaverMode,
+            },
+        };
+    }
+    if (osInfo.name.toLowerCase() === 'ios') {
+        const thermalState = AppleThermalState[state] ||
+            AppleThermalState.UNSPECIFIED;
+        deviceState = {
+            oneofKind: 'apple',
+            apple: {
+                thermalState,
+                isLowPowerModeEnabled: deviceState?.oneofKind === 'apple' &&
+                    deviceState.apple.isLowPowerModeEnabled,
+            },
+        };
+    }
+};
+const setPowerState = (powerMode) => {
+    if (!osInfo) {
+        deviceState = { oneofKind: undefined };
+        return;
+    }
+    if (osInfo.name === 'android') {
+        deviceState = {
+            oneofKind: 'android',
+            android: {
+                thermalState: deviceState?.oneofKind === 'android'
+                    ? deviceState.android.thermalState
+                    : AndroidThermalState.UNSPECIFIED,
+                isPowerSaverMode: powerMode,
+            },
+        };
+    }
+    if (osInfo.name.toLowerCase() === 'ios') {
+        deviceState = {
+            oneofKind: 'apple',
+            apple: {
+                thermalState: deviceState?.oneofKind === 'apple'
+                    ? deviceState.apple.thermalState
+                    : AppleThermalState.UNSPECIFIED,
+                isLowPowerModeEnabled: powerMode,
+            },
+        };
+    }
+};
+const getDeviceState = () => {
+    return deviceState;
+};
+const getClientDetails = async () => {
+    if (isReactNative()) {
+        // Since RN doesn't support web, sharing browser info is not required
+        return {
+            sdk: sdkInfo,
+            os: osInfo,
+            device: deviceInfo,
+        };
+    }
+    // @ts-expect-error - userAgentData is not yet in the TS types
+    const userAgentDataApi = navigator.userAgentData;
+    let userAgentData;
+    if (userAgentDataApi && userAgentDataApi.getHighEntropyValues) {
+        try {
+            userAgentData = await userAgentDataApi.getHighEntropyValues([
+                'platform',
+                'platformVersion',
+                'fullVersionList',
+            ]);
+        }
+        catch {
+            // Ignore the error
+        }
+    }
+    const userAgent = new UAParser(navigator.userAgent);
+    const { browser, os, device, cpu } = userAgent.getResult();
+    // If userAgentData is available, it means we are in a modern Chromium browser,
+    // and we can use it to get more accurate browser information.
+    // We hook into the fullVersionList to find the browser name and version and
+    // eventually detect exotic browsers like Samsung Internet, AVG Secure Browser, etc.
+    // who by default they identify themselves as "Chromium" in the user agent string.
+    // Eliminates the generic "Chromium" name and "Not)A_Brand" name from the list.
+    // https://wicg.github.io/ua-client-hints/#create-arbitrary-brands-section
+    const uaBrowser = userAgentData?.fullVersionList?.find((v) => !v.brand.includes('Chromium') && !v.brand.match(/[()\-./:;=?_]/g));
+    return {
+        sdk: sdkInfo,
+        browser: {
+            name: uaBrowser?.brand || browser.name || navigator.userAgent,
+            version: uaBrowser?.version || browser.version || '',
+        },
+        os: {
+            name: userAgentData?.platform || os.name || '',
+            version: userAgentData?.platformVersion || os.version || '',
+            architecture: cpu.architecture || '',
+        },
+        device: {
+            name: [device.vendor, device.model, device.type]
+                .filter(Boolean)
+                .join(' '),
+            version: '',
+        },
+    };
+};
+
 /**
  * Checks whether the current browser is Safari.
  */
@@ -5667,12 +5812,34 @@ const isChrome = () => {
         return false;
     return navigator.userAgent?.includes('Chrome');
 };
+/**
+ * Checks whether the current browser is among the list of first-class supported browsers.
+ * This includes Chrome, Edge, Firefox, and Safari.
+ *
+ * Although the Stream Video SDK may work in other browsers, these are the ones we officially support.
+ */
+const isSupportedBrowser = async () => {
+    const { browser } = await getClientDetails();
+    if (!browser)
+        return false; // we aren't running in a browser
+    const name = browser.name.toLowerCase();
+    const [major] = browser.version.split('.');
+    const version = parseInt(major, 10);
+    return ((name.includes('chrome') && version >= 124) ||
+        (name.includes('edge') && version >= 124) ||
+        (name.includes('firefox') && version >= 124) ||
+        (name.includes('safari') && version >= 17) ||
+        (name.includes('webkit') && version >= 605) || // WebView on iOS
+        (name.includes('webview') && version >= 124) // WebView on Android
+    );
+};
 
 var browsers = /*#__PURE__*/Object.freeze({
     __proto__: null,
     isChrome: isChrome,
     isFirefox: isFirefox,
-    isSafari: isSafari
+    isSafari: isSafari,
+    isSupportedBrowser: isSupportedBrowser
 });
 
 /**
@@ -5914,142 +6081,6 @@ const aggregate = (stats) => {
     return report;
 };
 
-const version = "1.27.2";
-const [major, minor, patch] = version.split('.');
-let sdkInfo = {
-    type: SdkType.PLAIN_JAVASCRIPT,
-    major,
-    minor,
-    patch,
-};
-let osInfo;
-let deviceInfo;
-let webRtcInfo;
-let deviceState = { oneofKind: undefined };
-const setSdkInfo = (info) => {
-    sdkInfo = info;
-};
-const getSdkInfo = () => {
-    return sdkInfo;
-};
-const setOSInfo = (info) => {
-    osInfo = info;
-};
-const setDeviceInfo = (info) => {
-    deviceInfo = info;
-};
-const getWebRTCInfo = () => {
-    return webRtcInfo;
-};
-const setWebRTCInfo = (info) => {
-    webRtcInfo = info;
-};
-const setThermalState = (state) => {
-    if (!osInfo) {
-        deviceState = { oneofKind: undefined };
-        return;
-    }
-    if (osInfo.name === 'android') {
-        const thermalState = AndroidThermalState[state] ||
-            AndroidThermalState.UNSPECIFIED;
-        deviceState = {
-            oneofKind: 'android',
-            android: {
-                thermalState,
-                isPowerSaverMode: deviceState?.oneofKind === 'android' &&
-                    deviceState.android.isPowerSaverMode,
-            },
-        };
-    }
-    if (osInfo.name.toLowerCase() === 'ios') {
-        const thermalState = AppleThermalState[state] ||
-            AppleThermalState.UNSPECIFIED;
-        deviceState = {
-            oneofKind: 'apple',
-            apple: {
-                thermalState,
-                isLowPowerModeEnabled: deviceState?.oneofKind === 'apple' &&
-                    deviceState.apple.isLowPowerModeEnabled,
-            },
-        };
-    }
-};
-const setPowerState = (powerMode) => {
-    if (!osInfo) {
-        deviceState = { oneofKind: undefined };
-        return;
-    }
-    if (osInfo.name === 'android') {
-        deviceState = {
-            oneofKind: 'android',
-            android: {
-                thermalState: deviceState?.oneofKind === 'android'
-                    ? deviceState.android.thermalState
-                    : AndroidThermalState.UNSPECIFIED,
-                isPowerSaverMode: powerMode,
-            },
-        };
-    }
-    if (osInfo.name.toLowerCase() === 'ios') {
-        deviceState = {
-            oneofKind: 'apple',
-            apple: {
-                thermalState: deviceState?.oneofKind === 'apple'
-                    ? deviceState.apple.thermalState
-                    : AppleThermalState.UNSPECIFIED,
-                isLowPowerModeEnabled: powerMode,
-            },
-        };
-    }
-};
-const getDeviceState = () => {
-    return deviceState;
-};
-const getClientDetails = async () => {
-    if (isReactNative()) {
-        // Since RN doesn't support web, sharing browser info is not required
-        return {
-            sdk: sdkInfo,
-            os: osInfo,
-            device: deviceInfo,
-        };
-    }
-    // @ts-expect-error - userAgentData is not yet in the TS types
-    const userAgentDataApi = navigator.userAgentData;
-    let userAgentData;
-    if (userAgentDataApi && userAgentDataApi.getHighEntropyValues) {
-        try {
-            userAgentData = await userAgentDataApi.getHighEntropyValues([
-                'platform',
-                'platformVersion',
-            ]);
-        }
-        catch {
-            // Ignore the error
-        }
-    }
-    const userAgent = new UAParser(navigator.userAgent);
-    const { browser, os, device, cpu } = userAgent.getResult();
-    return {
-        sdk: sdkInfo,
-        browser: {
-            name: browser.name || navigator.userAgent,
-            version: browser.version || '',
-        },
-        os: {
-            name: userAgentData?.platform || os.name || '',
-            version: userAgentData?.platformVersion || os.version || '',
-            architecture: cpu.architecture || '',
-        },
-        device: {
-            name: [device.vendor, device.model, device.type]
-                .filter(Boolean)
-                .join(' '),
-            version: '',
-        },
-    };
-};
-
 class SfuStatsReporter {
     constructor(sfuClient, { options, clientDetails, subscriber, publisher, microphone, camera, state, tracer, unifiedSessionId, }) {
         this.logger = getLogger(['SfuStatsReporter']);
@@ -7633,19 +7664,22 @@ class Subscriber extends BasePeerConnection {
 }
 
 const createWebSocketSignalChannel = (opts) => {
-    const { endpoint, onMessage, tag } = opts;
+    const { endpoint, onMessage, tag, tracer } = opts;
     const logger = getLogger(['SfuClientWS', tag]);
     logger('debug', 'Creating signaling WS channel:', endpoint);
     const ws = new WebSocket(endpoint);
     ws.binaryType = 'arraybuffer'; // do we need this?
     ws.addEventListener('error', (e) => {
         logger('error', 'Signaling WS channel error', e);
+        tracer?.trace('signal.ws.error', e);
     });
     ws.addEventListener('close', (e) => {
         logger('info', 'Signaling WS channel is closed', e);
+        tracer?.trace('signal.ws.close', e);
     });
     ws.addEventListener('open', (e) => {
         logger('info', 'Signaling WS channel is open', e);
+        tracer?.trace('signal.ws.open', e);
     });
     ws.addEventListener('message', (e) => {
         try {
@@ -7655,7 +7689,9 @@ const createWebSocketSignalChannel = (opts) => {
             onMessage(message);
         }
         catch (err) {
-            logger('error', 'Failed to decode a message. Check whether the Proto models match.', { event: e, error: err });
+            const message = 'Failed to decode a message. Check whether the Proto models match.';
+            logger('error', message, { event: e, error: err });
+            tracer?.trace('signal.ws.message.error', message);
         }
     });
     return ws;
@@ -7927,6 +7963,7 @@ class StreamSfuClient {
             this.signalWs = createWebSocketSignalChannel({
                 tag: this.tag,
                 endpoint: `${this.credentials.server.ws_endpoint}?${new URLSearchParams(params).toString()}`,
+                tracer: this.tracer,
                 onMessage: (message) => {
                     this.lastMessageTimestamp = new Date();
                     this.scheduleConnectionCheck();
@@ -7937,9 +7974,13 @@ class StreamSfuClient {
                     this.dispatcher.dispatch(message, this.tag);
                 },
             });
+            let timeoutId;
             this.signalReady = makeSafePromise(Promise.race([
                 new Promise((resolve, reject) => {
+                    let didOpen = false;
                     const onOpen = () => {
+                        didOpen = true;
+                        clearTimeout(timeoutId);
                         this.signalWs.removeEventListener('open', onOpen);
                         resolve(this.signalWs);
                     };
@@ -7947,19 +7988,25 @@ class StreamSfuClient {
                     this.signalWs.addEventListener('close', (e) => {
                         this.handleWebSocketClose(e);
                         // Normally, this shouldn't have any effect, because WS should never emit 'close'
-                        // before emitting 'open'. However, strager things have happened, and we don't
-                        // want to leave signalReady in pending state.
-                        reject(new Error(`SFU WS closed or connection can't be established`));
+                        // before emitting 'open'. However, stranger things have happened, and we don't
+                        // want to leave signalReady in a pending state.
+                        const message = didOpen
+                            ? `SFU WS closed: ${e.code} ${e.reason}`
+                            : `SFU WS connection can't be established: ${e.code} ${e.reason}`;
+                        this.tracer?.trace('signal.close', message);
+                        clearTimeout(timeoutId);
+                        reject(new Error(message));
                     });
                 }),
                 new Promise((resolve, reject) => {
-                    setTimeout(() => reject(new Error('SFU WS connection timed out')), this.joinResponseTimeout);
+                    timeoutId = setTimeout(() => {
+                        const message = `SFU WS connection failed to open after ${this.joinResponseTimeout}ms`;
+                        this.tracer?.trace('signal.timeout', message);
+                        reject(new Error(message));
+                    }, this.joinResponseTimeout);
                 }),
             ]));
         };
-        this.cleanUpWebSocket = () => {
-            this.signalWs.removeEventListener('close', this.handleWebSocketClose);
-        };
         this.handleWebSocketClose = (e) => {
             this.signalWs.removeEventListener('close', this.handleWebSocketClose);
             getTimers().clearInterval(this.keepAliveInterval);
@@ -7971,7 +8018,7 @@ class StreamSfuClient {
             if (this.signalWs.readyState === WebSocket.OPEN) {
                 this.logger('debug', `Closing SFU WS connection: ${code} - ${reason}`);
                 this.signalWs.close(code, `js-client: ${reason}`);
-                this.cleanUpWebSocket();
+                this.signalWs.removeEventListener('close', this.handleWebSocketClose);
             }
             this.dispose();
         };
@@ -14498,7 +14545,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.27.2", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.27.4", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),