@stream-io/video-client 1.17.0 → 1.18.0

package/dist/src/coordinator/connection/client.d.ts

@@ -21,7 +21,7 @@ export declare class StreamClient {
     setUserPromise: ConnectAPIResponse | null;
     tokenManager: TokenManager;
     user?: UserWithId;
-    userAgent?: string;
+    private cachedUserAgent?;
     userID?: string;
     wsBaseURL?: string;
     wsConnection: StableWSConnection | null;
@@ -142,11 +142,6 @@ export declare class StreamClient {
      */
     connect: () => Promise<ConnectedEvent | undefined>;
     getUserAgent: () => string;
-    setUserAgent: (userAgent: string) => void;
-    /**
-     * _isUsingServerAuth - Returns true if we're using server side auth
-     */
-    _isUsingServerAuth: () => boolean;
     _enrichAxiosOptions: (options?: AxiosRequestConfig & {
         config?: AxiosRequestConfig;
     } & {

package/dist/src/coordinator/connection/types.d.ts

@@ -124,6 +124,18 @@ export type StreamClientOptions = Partial<AxiosRequestConfig> & {
      * timer throttling issues in inactive browser tabs.
      */
     enableTimerWorker?: boolean;
+    /**
+     * The client app identifier.
+     */
+    clientAppIdentifier?: ClientAppIdentifier;
+};
+export type ClientAppIdentifier = {
+    sdkName?: 'react' | 'react-native' | 'plain-javascript' | (string & {});
+    sdkVersion?: string;
+    app?: string;
+    app_version?: string;
+    os?: string;
+    device_model?: string;
 };
 export type TokenProvider = () => Promise<string>;
 export type TokenOrProvider = null | string | TokenProvider | undefined;

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

@@ -51,8 +51,6 @@ export declare class DynascaleManager {
     }>;
     /**
      * Creates a new DynascaleManager instance.
-     *
-     * @param call the call to manage.
      */
     constructor(callState: CallState, speaker: SpeakerManager);
     setSfuClient(sfuClient: StreamSfuClient | undefined): void;

package/dist/src/helpers/client-details.d.ts

@@ -5,14 +5,9 @@ type WebRTCInfoType = {
 export declare const setSdkInfo: (info: Sdk) => void;
 export declare const getSdkInfo: () => Sdk | undefined;
 export declare const setOSInfo: (info: OS) => void;
-export declare const getOSInfo: () => OS | undefined;
 export declare const setDeviceInfo: (info: Device) => void;
-export declare const getDeviceInfo: () => Device | undefined;
 export declare const getWebRTCInfo: () => WebRTCInfoType | undefined;
 export declare const setWebRTCInfo: (info: WebRTCInfoType) => void;
-export type LocalClientDetailsType = ClientDetails & {
-    webRTCInfo?: WebRTCInfoType;
-};
 export declare const setThermalState: (state: string) => void;
 export declare const setPowerState: (powerMode: boolean) => void;
 export declare const getDeviceState: () => {
@@ -24,5 +19,5 @@ export declare const getDeviceState: () => {
 } | {
     oneofKind: undefined;
 };
-export declare const getClientDetails: () => LocalClientDetailsType;
+export declare const getClientDetails: () => Promise<ClientDetails>;
 export {};

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

@@ -1,4 +1,4 @@
-import { StreamClientOptions, TokenOrProvider, User } from '../coordinator/connection/types';
+import type { StreamClientOptions, TokenOrProvider, User } from '../coordinator/connection/types';
 import { StreamClient } from '../coordinator/connection/client';
 import type { StreamVideoClientOptions } from '../StreamVideoClient';
 /**

package/dist/src/stats/SfuStatsReporter.d.ts

@@ -1,13 +1,12 @@
 import { StreamSfuClient } from '../StreamSfuClient';
 import { StatsOptions } from '../gen/coordinator';
 import { Publisher, Subscriber } from '../rtc';
-import { LocalClientDetailsType } from '../helpers/client-details';
-import { WebsocketReconnectStrategy } from '../gen/video/sfu/models/models';
+import { ClientDetails, WebsocketReconnectStrategy } from '../gen/video/sfu/models/models';
 import { CameraManager, MicrophoneManager } from '../devices';
 import { CallState } from '../store';
 export type SfuStatsReporterOptions = {
     options: StatsOptions;
-    clientDetails: LocalClientDetailsType;
+    clientDetails: ClientDetails;
     subscriber: Subscriber;
     publisher?: Publisher;
     microphone: MicrophoneManager;

package/dist/src/stats/utils.d.ts

@@ -1,18 +1,14 @@
-import { type LocalClientDetailsType } from '../helpers/client-details';
-import { Sdk } from '../gen/video/sfu/models/models';
+import { ClientDetails, Sdk } from '../gen/video/sfu/models/models';
 /**
  * Flatten the stats report into an array of stats objects.
  *
  * @param report the report to flatten.
  */
 export declare const flatten: (report: RTCStatsReport) => RTCStats[];
-export declare const getSdkSignature: (clientDetails: LocalClientDetailsType) => {
+export declare const getSdkSignature: (clientDetails: ClientDetails) => {
     os?: import("../gen/video/sfu/models/models").OS;
     browser?: import("../gen/video/sfu/models/models").Browser;
     device?: import("../gen/video/sfu/models/models").Device;
-    webRTCInfo?: {
-        version: string;
-    };
     sdkName: string;
     sdkVersion: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "packageManager": "yarn@3.2.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -31,7 +31,7 @@
     "@protobuf-ts/runtime": "^2.9.4",
     "@protobuf-ts/runtime-rpc": "^2.9.4",
     "@protobuf-ts/twirp-transport": "^2.9.4",
-    "axios": "^1.7.9",
+    "axios": "^1.8.1",
     "rxjs": "~7.8.1",
     "sdp-transform": "^2.15.0",
     "ua-parser-js": "^1.0.40",

package/src/Call.ts

@@ -601,6 +601,7 @@ export class Call {
       this.leaveCallHooks.forEach((hook) => hook());
       this.initialized = false;
       this.hasJoinedOnce = false;
+      this.ringingSubject.next(false);
       this.clientStore.unregisterCall(this);
 
       this.camera.dispose();
@@ -692,7 +693,7 @@ export class Call {
     this.state.setMembers(response.members);
     this.state.setOwnCapabilities(response.own_capabilities);
 
-    if (params?.ring || this.ringing) {
+    if (params?.ring) {
       // the call response can indicate where the call is still ringing or not
       this.ringingSubject.next(true);
     }
@@ -723,7 +724,7 @@ export class Call {
     this.state.setMembers(response.members);
     this.state.setOwnCapabilities(response.own_capabilities);
 
-    if (data?.ring || this.ringing) {
+    if (data?.ring) {
       // the call response can indicate where the call is still ringing or not
       this.ringingSubject.next(true);
     }
@@ -866,7 +867,7 @@ export class Call {
     this.sfuClient = sfuClient;
     this.dynascaleManager.setSfuClient(sfuClient);
 
-    const clientDetails = getClientDetails();
+    const clientDetails = await getClientDetails();
     // we don't need to send JoinRequest if we are re-using an existing healthy SFU client
     if (previousSfuClient !== sfuClient) {
       // prepare a generic SDP and send it to the SFU.
@@ -1192,7 +1193,7 @@ export class Call {
     this.state.setMembers(joinResponse.members);
     this.state.setOwnCapabilities(joinResponse.own_capabilities);
 
-    if (data?.ring && !this.ringing) {
+    if (data?.ring) {
       this.ringingSubject.next(true);
     }
 
@@ -2308,8 +2309,9 @@ export class Call {
       custom,
     }: Pick<CollectUserFeedbackRequest, 'reason' | 'custom'> = {},
   ): Promise<CollectUserFeedbackResponse> => {
-    const { sdkName, sdkVersion, ...platform } =
-      getSdkSignature(getClientDetails());
+    const { sdkName, sdkVersion, ...platform } = getSdkSignature(
+      await getClientDetails(),
+    );
     return this.streamClient.post<
       CollectUserFeedbackResponse,
       CollectUserFeedbackRequest

package/src/coordinator/connection/client.ts

@@ -38,6 +38,7 @@ import {
   CreateGuestResponse,
 } from '../../gen/coordinator';
 import { makeSafePromise, type SafePromise } from '../../helpers/promise';
+import { getLogLevel } from '../../logger';
 
 export class StreamClient {
   _user?: UserWithId;
@@ -61,7 +62,7 @@ export class StreamClient {
   setUserPromise: ConnectAPIResponse | null;
   tokenManager: TokenManager;
   user?: UserWithId;
-  userAgent?: string;
+  private cachedUserAgent?: string;
   userID?: string;
   wsBaseURL?: string;
   wsConnection: StableWSConnection | null;
@@ -218,10 +219,7 @@ export class StreamClient {
       );
     }
 
-    if (
-      (this._isUsingServerAuth() || this.node) &&
-      !this.options.allowServerSideConnect
-    ) {
+    if ((this.secret || this.node) && !this.options.allowServerSideConnect) {
       this.logger(
         'warn',
         'Please do not use connectUser server side. Use our @stream-io/node-sdk instead: https://getstream.io/video/docs/api/',
@@ -326,7 +324,7 @@ export class StreamClient {
       return;
     }
 
-    await this._setupConnectionIdPromise();
+    this._setupConnectionIdPromise();
 
     this.clientID = `${this.userID}--${randomId()}`;
     const newWsPromise = this.connect();
@@ -382,7 +380,7 @@ export class StreamClient {
     tokenOrProvider: TokenOrProvider,
   ) => {
     addConnectionEventListeners(this.updateNetworkConnectionStatus);
-    await this._setupConnectionIdPromise();
+    this._setupConnectionIdPromise();
 
     this.anonymous = true;
     await this._setToken(user, tokenOrProvider, this.anonymous);
@@ -469,6 +467,7 @@ export class StreamClient {
       config?: AxiosRequestConfig & { maxBodyLength?: number };
     },
   ) => {
+    if (getLogLevel() !== 'trace') return;
     this.logger('trace', `client: ${type} - Request - ${url}`, {
       payload: data,
       config,
@@ -480,6 +479,7 @@ export class StreamClient {
     url: string,
     response: AxiosResponse<T>,
   ) => {
+    if (getLogLevel() !== 'trace') return;
     this.logger(
       'trace',
       `client:${type} - Response - url: ${url} > status ${response.status}`,
@@ -666,25 +666,25 @@ export class StreamClient {
     return await this.wsConnection.connect(this.defaultWSTimeout);
   };
 
-  getUserAgent = () => {
-    const version = process.env.PKG_VERSION || '0.0.0-development';
-    return (
-      this.userAgent ||
-      `stream-video-javascript-client-${
-        this.node ? 'node' : 'browser'
-      }-${version}`
-    );
-  };
+  getUserAgent = (): string => {
+    if (!this.cachedUserAgent) {
+      const { clientAppIdentifier = {} } = this.options;
+      const {
+        sdkName = 'js',
+        sdkVersion = process.env.PKG_VERSION || '0.0.0',
+        ...extras
+      } = clientAppIdentifier;
+
+      this.cachedUserAgent = [
+        `stream-video-${sdkName}-v${sdkVersion}`,
+        ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),
+        `client_bundle=${process.env.CLIENT_BUNDLE || (this.node ? 'node' : 'browser')}`,
+      ].join('|');
+    }
 
-  setUserAgent = (userAgent: string) => {
-    this.userAgent = userAgent;
+    return this.cachedUserAgent;
   };
 
-  /**
-   * _isUsingServerAuth - Returns true if we're using server side auth
-   */
-  _isUsingServerAuth = () => !!this.secret;
-
   _enrichAxiosOptions = (
     options: AxiosRequestConfig & { config?: AxiosRequestConfig } & {
       publicEndpoint?: boolean;

package/src/coordinator/connection/connection.ts

@@ -329,7 +329,7 @@ export class StableWSConnection {
         return response;
       }
     } catch (err) {
-      await this.client._setupConnectionIdPromise();
+      this.client._setupConnectionIdPromise();
       this.isConnecting = false;
       // @ts-ignore
       this._log(`_connect() - Error - `, err);

package/src/coordinator/connection/types.ts

@@ -152,6 +152,20 @@ export type StreamClientOptions = Partial<AxiosRequestConfig> & {
    * timer throttling issues in inactive browser tabs.
    */
   enableTimerWorker?: boolean;
+
+  /**
+   * The client app identifier.
+   */
+  clientAppIdentifier?: ClientAppIdentifier;
+};
+
+export type ClientAppIdentifier = {
+  sdkName?: 'react' | 'react-native' | 'plain-javascript' | (string & {});
+  sdkVersion?: string;
+  app?: string;
+  app_version?: string;
+  os?: string;
+  device_model?: string;
 };
 
 export type TokenProvider = () => Promise<string>;

package/src/helpers/DynascaleManager.ts

@@ -112,8 +112,6 @@ export class DynascaleManager {
 
   /**
    * Creates a new DynascaleManager instance.
-   *
-   * @param call the call to manage.
    */
   constructor(callState: CallState, speaker: SpeakerManager) {
     this.callState = callState;

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

@@ -5,6 +5,7 @@ import {
   getInstanceKey,
 } from '../clientUtils';
 import { TokenProvider } from '../../coordinator/connection/types';
+import { getSdkInfo, setSdkInfo } from '../client-details';
 
 describe('clientUtils', () => {
   describe('getInstanceKey', () => {
@@ -46,14 +47,39 @@ describe('clientUtils', () => {
 
   describe('createCoordinatorClient', () => {
     it('should create a coordinator client', () => {
-      const client = createCoordinatorClient('apiKey', { timeout: 1000 });
+      const client = createCoordinatorClient('apiKey', {
+        timeout: 1000,
+        clientAppIdentifier: {
+          app: 'vitest',
+          app_version: '1.0.0',
+          device_model: 'iPhone',
+          os: 'iOS 18.4',
+        },
+      });
       expect(client).toBeDefined();
-      expect(client.userAgent).toBe(
-        'stream-video-javascript-client-node-0.0.0-development-video-plain_javascript-sdk-0.0.0',
+      expect(client.getUserAgent()).toBe(
+        'stream-video-plain_javascript-v0.0.0' +
+          '|app=vitest' +
+          '|app_version=1.0.0' +
+          '|device_model=iPhone' +
+          '|os=iOS 18.4' +
+          '|client_bundle=node',
       );
       expect(client.logger).toBeDefined();
       expect(client.options.persistUserOnConnectionFailure).toBe(true);
       expect(client.options.timeout).toBe(1000);
     });
+
+    it('should use default x-stream-client header', () => {
+      const sdk = getSdkInfo();
+      // @ts-expect-error
+      setSdkInfo(undefined);
+      const client = createCoordinatorClient('apiKey', {});
+      expect(client).toBeDefined();
+      expect(client.getUserAgent()).toBe(
+        `stream-video-js-v0.0.0|client_bundle=node`,
+      );
+      setSdkInfo(sdk!);
+    });
   });
 });

package/src/helpers/client-details.ts

@@ -42,18 +42,10 @@ export const setOSInfo = (info: OS) => {
   osInfo = info;
 };
 
-export const getOSInfo = () => {
-  return osInfo;
-};
-
 export const setDeviceInfo = (info: Device) => {
   deviceInfo = info;
 };
 
-export const getDeviceInfo = () => {
-  return deviceInfo;
-};
-
 export const getWebRTCInfo = () => {
   return webRtcInfo;
 };
@@ -62,10 +54,6 @@ export const setWebRTCInfo = (info: WebRTCInfoType) => {
   webRtcInfo = info;
 };
 
-export type LocalClientDetailsType = ClientDetails & {
-  webRTCInfo?: WebRTCInfoType;
-};
-
 export const setThermalState = (state: string) => {
   if (!osInfo) {
     deviceState = { oneofKind: undefined };
@@ -142,27 +130,43 @@ export const getDeviceState = () => {
   return deviceState;
 };
 
-export const getClientDetails = (): LocalClientDetailsType => {
+export const getClientDetails = async (): Promise<ClientDetails> => {
   if (isReactNative()) {
     // Since RN doesn't support web, sharing browser info is not required
     return {
-      sdk: getSdkInfo(),
-      os: getOSInfo(),
-      device: getDeviceInfo(),
+      sdk: sdkInfo,
+      os: osInfo,
+      device: deviceInfo,
     };
   }
 
+  // @ts-expect-error - userAgentData is not yet in the TS types
+  const userAgentDataApi = navigator.userAgentData;
+  let userAgentData:
+    | { platform?: string; platformVersion?: string }
+    | undefined;
+  if (userAgentDataApi && userAgentDataApi.getHighEntropyValues) {
+    try {
+      userAgentData = await userAgentDataApi.getHighEntropyValues([
+        'platform',
+        'platformVersion',
+      ]);
+    } catch (e) {
+      // Ignore the error
+    }
+  }
+
   const userAgent = new UAParser(navigator.userAgent);
   const { browser, os, device, cpu } = userAgent.getResult();
   return {
-    sdk: getSdkInfo(),
+    sdk: sdkInfo,
     browser: {
       name: browser.name || navigator.userAgent,
       version: browser.version || '',
     },
     os: {
-      name: os.name || '',
-      version: os.version || '',
+      name: userAgentData?.platform || os.name || '',
+      version: userAgentData?.platformVersion || os.version || '',
       architecture: cpu.architecture || '',
     },
     device: {

package/src/helpers/clientUtils.ts

@@ -1,4 +1,5 @@
-import {
+import type {
+  ClientAppIdentifier,
   StreamClientOptions,
   TokenOrProvider,
   User,
@@ -16,6 +17,23 @@ export const getInstanceKey = (apiKey: string, user: User) => {
   return `${apiKey}/${user.id}`;
 };
 
+/**
+ * Utility function to get the client app identifier.
+ */
+const getClientAppIdentifier = (
+  options?: StreamClientOptions,
+): ClientAppIdentifier => {
+  const appId = options?.clientAppIdentifier || {};
+  const sdkInfo = getSdkInfo();
+  if (sdkInfo) {
+    // ensure the sdk name and version are set correctly,
+    // overriding any user-provided values
+    appId.sdkName = SdkType[sdkInfo.type].toLowerCase();
+    appId.sdkVersion = `${sdkInfo.major}.${sdkInfo.minor}.${sdkInfo.patch}`;
+  }
+  return appId;
+};
+
 /**
  * Creates a coordinator client.
  */
@@ -23,22 +41,14 @@ export const createCoordinatorClient = (
   apiKey: string,
   options: StreamClientOptions | undefined,
 ) => {
+  const clientAppIdentifier = getClientAppIdentifier(options);
   const coordinatorLogger = getLogger(['coordinator']);
-  const streamClient = new StreamClient(apiKey, {
+  return new StreamClient(apiKey, {
     persistUserOnConnectionFailure: true,
     ...options,
+    clientAppIdentifier,
     logger: coordinatorLogger,
   });
-  const sdkInfo = getSdkInfo();
-  if (sdkInfo) {
-    const sdkName = SdkType[sdkInfo.type].toLowerCase();
-    const sdkVersion = `${sdkInfo.major}.${sdkInfo.minor}.${sdkInfo.patch}`;
-    const userAgent = streamClient.getUserAgent();
-    streamClient.setUserAgent(
-      `${userAgent}-video-${sdkName}-sdk-${sdkVersion}`,
-    );
-  }
-  return streamClient;
 };
 
 /**

package/src/rtc/BasePeerConnection.ts

@@ -206,6 +206,7 @@ export abstract class BasePeerConnection {
     const state = this.pc.iceConnectionState;
     this.logger('debug', `ICE connection state changed`, state);
 
+    if (this.state.callingState === CallingState.OFFLINE) return;
     if (this.state.callingState === CallingState.RECONNECTING) return;
 
     // do nothing when ICE is restarting

package/src/stats/SfuStatsReporter.ts

@@ -4,12 +4,9 @@ import { OwnCapability, StatsOptions } from '../gen/coordinator';
 import { getLogger } from '../logger';
 import { Publisher, Subscriber } from '../rtc';
 import { flatten, getSdkName, getSdkVersion } from './utils';
+import { getDeviceState, getWebRTCInfo } from '../helpers/client-details';
 import {
-  getDeviceState,
-  getWebRTCInfo,
-  LocalClientDetailsType,
-} from '../helpers/client-details';
-import {
+  ClientDetails,
   InputDevices,
   WebsocketReconnectStrategy,
 } from '../gen/video/sfu/models/models';
@@ -20,7 +17,7 @@ import { Telemetry } from '../gen/video/sfu/signal_rpc/signal';
 
 export type SfuStatsReporterOptions = {
   options: StatsOptions;
-  clientDetails: LocalClientDetailsType;
+  clientDetails: ClientDetails;
   subscriber: Subscriber;
   publisher?: Publisher;
   microphone: MicrophoneManager;

package/src/stats/utils.ts

@@ -1,5 +1,4 @@
-import { type LocalClientDetailsType } from '../helpers/client-details';
-import { Sdk, SdkType } from '../gen/video/sfu/models/models';
+import { ClientDetails, Sdk, SdkType } from '../gen/video/sfu/models/models';
 
 /**
  * Flatten the stats report into an array of stats objects.
@@ -14,7 +13,7 @@ export const flatten = (report: RTCStatsReport) => {
   return stats;
 };
 
-export const getSdkSignature = (clientDetails: LocalClientDetailsType) => {
+export const getSdkSignature = (clientDetails: ClientDetails) => {
   const { sdk, ...platform } = clientDetails;
   const sdkName = getSdkName(sdk);
   const sdkVersion = getSdkVersion(sdk);