@stream-io/video-client 1.27.2 → 1.27.4

package/dist/src/StreamSfuClient.d.ts

@@ -139,7 +139,6 @@ export declare class StreamSfuClient {
      */
     constructor({ dispatcher, credentials, sessionId, cid, tag, joinResponseTimeout, onSignalClose, streamClient, enableTracing, }: StreamSfuClientConstructor);
     private createWebSocket;
-    private cleanUpWebSocket;
     get isHealthy(): boolean;
     get joinTask(): Promise<JoinResponse>;
     private handleWebSocketClose;

package/dist/src/helpers/browsers.d.ts

@@ -10,3 +10,10 @@ export declare const isFirefox: () => boolean;
  * Checks whether the current browser is Google Chrome.
  */
 export declare const isChrome: () => boolean;
+/**
+ * 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.
+ */
+export declare const isSupportedBrowser: () => Promise<boolean>;

package/dist/src/rtc/signal.d.ts

@@ -1,6 +1,8 @@
 import { DispatchableMessage, SfuEventKinds } from './Dispatcher';
+import { Tracer } from '../stats';
 export declare const createWebSocketSignalChannel: (opts: {
     endpoint: string;
     onMessage: <K extends SfuEventKinds>(message: DispatchableMessage<K>) => void;
     tag: string;
+    tracer: Tracer | undefined;
 }) => WebSocket;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.27.2",
+  "version": "1.27.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "browser": "dist/index.browser.es.js",

package/src/StreamSfuClient.ts

@@ -274,6 +274,7 @@ export 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();
@@ -285,10 +286,14 @@ export class StreamSfuClient {
       },
     });
 
+    let timeoutId: NodeJS.Timeout;
     this.signalReady = makeSafePromise(
       Promise.race<WebSocket>([
         new Promise((resolve, reject) => {
+          let didOpen = false;
           const onOpen = () => {
+            didOpen = true;
+            clearTimeout(timeoutId);
             this.signalWs.removeEventListener('open', onOpen);
             resolve(this.signalWs);
           };
@@ -298,28 +303,28 @@ export 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);
         }),
       ]),
     );
   };
 
-  private cleanUpWebSocket = () => {
-    this.signalWs.removeEventListener('close', this.handleWebSocketClose);
-  };
-
   get isHealthy() {
     return (
       this.signalWs.readyState === WebSocket.OPEN &&
@@ -343,7 +348,7 @@ export 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();
   };

package/src/helpers/__tests__/browsers.test.ts

@@ -0,0 +1,191 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { isChrome, isFirefox, isSafari, isSupportedBrowser } from '../browsers';
+import { getClientDetails } from '../client-details';
+import { ClientDetails } from '../../gen/video/sfu/models/models';
+
+describe('browsers', () => {
+  beforeEach(() => {
+    Object.defineProperty(globalThis, 'navigator', {
+      value: { userAgent: '' },
+      writable: true,
+    });
+  });
+
+  describe('isSafari', () => {
+    it('should return false if navigator is undefined', () => {
+      expect(isSafari()).toBe(false);
+    });
+
+    it('should return true for Safari user agent', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Safari/605.1.15';
+      expect(isSafari()).toBe(true);
+    });
+
+    it('should return false for Chrome user agent', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36';
+      expect(isSafari()).toBe(false);
+    });
+  });
+
+  describe('isFirefox', () => {
+    it('should return false if navigator is undefined', () => {
+      expect(isFirefox()).toBe(false);
+    });
+
+    it('should return true for Firefox user agent', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0';
+      expect(isFirefox()).toBe(true);
+    });
+
+    it('should return false for Chrome user agent', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36';
+      expect(isFirefox()).toBe(false);
+    });
+  });
+
+  describe('isChrome', () => {
+    it('should return false if navigator is undefined', () => {
+      expect(isChrome()).toBe(false);
+    });
+
+    it('should return true for Chrome user agent', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36';
+      expect(isChrome()).toBe(true);
+    });
+
+    it('should return false for Firefox user agent', () => {
+      // @ts-expect-error - mocking navigator
+      globalThis.navigator.userAgent =
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0';
+      expect(isChrome()).toBe(false);
+    });
+  });
+
+  describe('isSupportedBrowser', () => {
+    vi.mock('../client-details', () => ({
+      getClientDetails: vi.fn(),
+    }));
+
+    it('should return false if browser is undefined', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: undefined,
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(false);
+    });
+
+    it('should return true for supported Chrome version', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'Chrome', version: '124' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(true);
+    });
+
+    it('should return true for supported Chrome detailed version', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'Chrome', version: '124.0.7204.158' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(true);
+    });
+
+    it('should return false for unsupported Chrome version', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'Chrome', version: '123' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(false);
+    });
+
+    it('should return false for unsupported Chrome detailed version', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'Chrome', version: '123.0.1234.99' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(false);
+    });
+
+    it('should return true for supported Edge version', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'Edge', version: '124' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(true);
+    });
+
+    it('should return false for unsupported Edge version', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'Edge', version: '123' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(false);
+    });
+
+    it('should return true for supported Firefox version', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'Firefox', version: '124' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(true);
+    });
+
+    it('should return false for unsupported Firefox version', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'Firefox', version: '123' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(false);
+    });
+
+    it('should return true for supported Safari version', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'Safari', version: '17' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(true);
+    });
+
+    it('should return false for unsupported Safari version', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'Safari', version: '16' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(false);
+    });
+
+    it('should return true for supported WebKit version (WebView on iOS)', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'WebKit', version: '605' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(true);
+    });
+
+    it('should return false for unsupported WebKit version (WebView on iOS)', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'WebKit', version: '604' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(false);
+    });
+
+    it('should return true for supported WebView version (WebView on Android)', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'WebView', version: '124' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(true);
+    });
+
+    it('should return false for unsupported WebView version (WebView on Android)', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'WebView', version: '123' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(false);
+    });
+
+    it('should return false for unsupported browser', async () => {
+      vi.mocked(getClientDetails).mockResolvedValue({
+        browser: { name: 'Opera', version: '78' },
+      } as ClientDetails);
+      expect(await isSupportedBrowser()).toBe(false);
+    });
+  });
+});

package/src/helpers/browsers.ts

@@ -1,3 +1,5 @@
+import { getClientDetails } from './client-details';
+
 /**
  * Checks whether the current browser is Safari.
  */
@@ -21,3 +23,26 @@ export const isChrome = () => {
   if (typeof navigator === 'undefined') 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.
+ */
+export const isSupportedBrowser = async (): Promise<boolean> => {
+  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
+  );
+};

package/src/helpers/client-details.ts

@@ -143,13 +143,18 @@ export const getClientDetails = async (): Promise<ClientDetails> => {
   // @ts-expect-error - userAgentData is not yet in the TS types
   const userAgentDataApi = navigator.userAgentData;
   let userAgentData:
-    | { platform?: string; platformVersion?: string }
+    | {
+        platform?: string;
+        platformVersion?: string;
+        fullVersionList?: Array<{ brand: string; version: string }>;
+      }
     | undefined;
   if (userAgentDataApi && userAgentDataApi.getHighEntropyValues) {
     try {
       userAgentData = await userAgentDataApi.getHighEntropyValues([
         'platform',
         'platformVersion',
+        'fullVersionList',
       ]);
     } catch {
       // Ignore the error
@@ -158,11 +163,21 @@ export const getClientDetails = async (): Promise<ClientDetails> => {
 
   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: browser.name || navigator.userAgent,
-      version: browser.version || '',
+      name: uaBrowser?.brand || browser.name || navigator.userAgent,
+      version: uaBrowser?.version || browser.version || '',
     },
     os: {
       name: userAgentData?.platform || os.name || '',

package/src/rtc/signal.ts

@@ -1,13 +1,15 @@
 import { SfuEvent } from '../gen/video/sfu/event/events';
 import { getLogger } from '../logger';
 import { DispatchableMessage, SfuEventKinds } from './Dispatcher';
+import { Tracer } from '../stats';
 
 export const createWebSocketSignalChannel = (opts: {
   endpoint: string;
   onMessage: <K extends SfuEventKinds>(message: DispatchableMessage<K>) => void;
   tag: string;
+  tracer: Tracer | undefined;
 }) => {
-  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);
@@ -15,14 +17,17 @@ export const createWebSocketSignalChannel = (opts: {
 
   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) => {
@@ -34,11 +39,10 @@ export const createWebSocketSignalChannel = (opts: {
 
       onMessage(message as DispatchableMessage<SfuEventKinds>);
     } 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;