@stream-io/video-client 1.18.3 → 1.18.4

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.18.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.18.3...@stream-io/video-client-1.18.4) (2025-03-10)
+
+
+### Bug Fixes
+
+* retryable client.connectUser() ([#1710](https://github.com/GetStream/stream-video-js/issues/1710)) ([10b6860](https://github.com/GetStream/stream-video-js/commit/10b6860e1d65c38d8eb0ba7d7ea18f0ca30f5abc))
+
 ## [1.18.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.18.2...@stream-io/video-client-1.18.3) (2025-03-05)
 
 

package/dist/index.browser.es.js

@@ -3302,7 +3302,8 @@ function isFunction(value) {
  */
 const KnownCodes = {
     TOKEN_EXPIRED: 40,
-    WS_CLOSED_SUCCESS: 1000};
+    WS_CLOSED_SUCCESS: 1000,
+};
 /**
  * retryInterval - A retry interval which increases acc to number of failures
  *
@@ -3314,9 +3315,6 @@ function retryInterval(numberOfFailures) {
     const min = Math.min(Math.max(250, (numberOfFailures - 1) * 2000), 5000);
     return Math.floor(Math.random() * (max - min) + min);
 }
-function randomId() {
-    return generateUUIDv4();
-}
 function hex(bytes) {
     let s = '';
     for (let i = 0; i < bytes.length; i++) {
@@ -3329,33 +3327,24 @@ function generateUUIDv4() {
     const bytes = getRandomBytes(16);
     bytes[6] = (bytes[6] & 0x0f) | 0x40; // version
     bytes[8] = (bytes[8] & 0xbf) | 0x80; // variant
-    return (hex(bytes.subarray(0, 4)) +
-        '-' +
-        hex(bytes.subarray(4, 6)) +
-        '-' +
-        hex(bytes.subarray(6, 8)) +
-        '-' +
-        hex(bytes.subarray(8, 10)) +
-        '-' +
-        hex(bytes.subarray(10, 16)));
-}
-function getRandomValuesWithMathRandom(bytes) {
-    const max = Math.pow(2, (8 * bytes.byteLength) / bytes.length);
-    for (let i = 0; i < bytes.length; i++) {
-        bytes[i] = Math.random() * max;
-    }
+    return [
+        hex(bytes.subarray(0, 4)),
+        hex(bytes.subarray(4, 6)),
+        hex(bytes.subarray(6, 8)),
+        hex(bytes.subarray(8, 10)),
+        hex(bytes.subarray(10, 16)),
+    ].join('-');
 }
 const getRandomValues = (() => {
-    if (typeof crypto !== 'undefined' &&
-        typeof crypto?.getRandomValues !== 'undefined') {
+    if (typeof crypto !== 'undefined' && crypto.getRandomValues) {
         return crypto.getRandomValues.bind(crypto);
     }
-    else if (typeof msCrypto !== 'undefined') {
-        return msCrypto.getRandomValues.bind(msCrypto);
-    }
-    else {
-        return getRandomValuesWithMathRandom;
-    }
+    return function getRandomValuesWithMathRandom(bytes) {
+        const max = Math.pow(2, (8 * bytes.byteLength) / bytes.length);
+        for (let i = 0; i < bytes.length; i++) {
+            bytes[i] = Math.random() * max;
+        }
+    };
 })();
 function getRandomBytes(length) {
     const bytes = new Uint8Array(length);
@@ -7465,7 +7454,7 @@ const aggregate = (stats) => {
     return report;
 };
 
-const version = "1.18.3";
+const version = "1.18.4";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -9344,10 +9333,9 @@ class CameraManager extends InputMediaDeviceManager {
                     this.logger('warn', 'No video track found to do direction selection');
                     return;
                 }
-                const constraints = {
+                await videoTrack.applyConstraints({
                     facingMode: direction === 'front' ? 'user' : 'environment',
-                };
-                await videoTrack.applyConstraints(constraints);
+                });
                 this.state.setDirection(direction);
                 this.state.setDevice(undefined);
             }
@@ -12011,9 +11999,7 @@ var https = null;
 class StableWSConnection {
     constructor(client) {
         this._log = (msg, extra = {}, level = 'info') => {
-            this.client.logger(level, 'connection:' + msg, {
-                ...extra,
-            });
+            this.client.logger(level, `connection:${msg}`, extra);
         };
         this.setClient = (client) => {
             this.client = client;
@@ -12067,7 +12053,7 @@ class StableWSConnection {
                 this.client.logger('error', `Token not set, can't connect authenticate`);
                 return;
             }
-            const authMessage = {
+            const authMessage = JSON.stringify({
                 token,
                 user_details: {
                     id: user.id,
@@ -12075,8 +12061,9 @@ class StableWSConnection {
                     image: user.image,
                     custom: user.custom,
                 },
-            };
-            this.ws?.send(JSON.stringify(authMessage));
+            });
+            this._log(`onopen() - Sending auth message ${authMessage}`, {}, 'trace');
+            this.ws?.send(authMessage);
             this._log('onopen() - onopen callback', { wsID });
         };
         this.onmessage = (wsID, event) => {
@@ -12089,10 +12076,12 @@ class StableWSConnection {
             // we wait till the first message before we consider the connection open.
             // the reason for this is that auth errors and similar errors trigger a ws.onopen and immediately
             // after that a ws.onclose.
-            if (!this.isResolved && data && data.type === 'connection.error') {
-                this.isResolved = true;
+            if (!this.isConnectionOpenResolved &&
+                data &&
+                data.type === 'connection.error') {
+                this.isConnectionOpenResolved = true;
                 if (data.error) {
-                    this.rejectPromise?.(this._errorFromWSEvent(data, false));
+                    this.rejectConnectionOpen?.(this._errorFromWSEvent(data, false));
                     return;
                 }
             }
@@ -12104,7 +12093,7 @@ class StableWSConnection {
                 this.scheduleNextPing();
             }
             if (data && data.type === 'connection.ok') {
-                this.resolvePromise?.(data);
+                this.resolveConnectionOpen?.(data);
                 this._setHealth(true);
             }
             if (data && data.type === 'connection.error' && data.error) {
@@ -12141,7 +12130,7 @@ class StableWSConnection {
                 error.wasClean = event.wasClean;
                 // @ts-expect-error
                 error.target = event.target;
-                this.rejectPromise?.(error);
+                this.rejectConnectionOpen?.(error);
                 this._log(`onclose() - WS connection reject with error ${event.reason}`, {
                     event,
                 });
@@ -12151,7 +12140,7 @@ class StableWSConnection {
                 this.totalFailures += 1;
                 this._setHealth(false);
                 this.isConnecting = false;
-                this.rejectPromise?.(this._errorFromWSEvent(event));
+                this.rejectConnectionOpen?.(this._errorFromWSEvent(event));
                 this._log(`onclose() - WS connection closed. Calling reconnect ...`, {
                     event,
                 });
@@ -12166,7 +12155,7 @@ class StableWSConnection {
             this.totalFailures += 1;
             this._setHealth(false);
             this.isConnecting = false;
-            this.rejectPromise?.(new Error(`WebSocket error: ${event}`));
+            this.rejectConnectionOpen?.(new Error(`WebSocket error: ${event}`));
             this._log(`onerror() - WS connection resulted into error`, { event });
             this._reconnect();
         };
@@ -12232,11 +12221,11 @@ class StableWSConnection {
          * _setupPromise - sets up the this.connectOpen promise
          */
         this._setupConnectionPromise = () => {
-            this.isResolved = false;
+            this.isConnectionOpenResolved = false;
             /** a promise that is resolved once ws.open is called */
             this.connectionOpenSafe = makeSafePromise(new Promise((resolve, reject) => {
-                this.resolvePromise = resolve;
-                this.rejectPromise = reject;
+                this.resolveConnectionOpen = resolve;
+                this.rejectConnectionOpen = reject;
             }));
         };
         /**
@@ -12287,7 +12276,7 @@ class StableWSConnection {
         /** To avoid reconnect if client is disconnected */
         this.isDisconnected = false;
         /** Boolean that indicates if the connection promise is resolved */
-        this.isResolved = false;
+        this.isConnectionOpenResolved = false;
         /** Boolean that indicates if we have a working connection to the server */
         this.isHealthy = false;
         /** Incremented when a new WS connection is made */
@@ -12432,9 +12421,8 @@ class StableWSConnection {
      */
     async _connect() {
         if (this.isConnecting)
-            return; // simply ignore _connect if it's currently trying to connect
+            return; // ignore _connect if it's currently trying to connect
         this.isConnecting = true;
-        this.requestID = randomId();
         let isTokenReady = false;
         try {
             this._log(`_connect() - waiting for token`);
@@ -12454,10 +12442,7 @@ class StableWSConnection {
             }
             this._setupConnectionPromise();
             const wsURL = this._buildUrl();
-            this._log(`_connect() - Connecting to ${wsURL}`, {
-                wsURL,
-                requestID: this.requestID,
-            });
+            this._log(`_connect() - Connecting to ${wsURL}`);
             const WS = this.client.options.WebSocketImpl ?? WebSocket;
             this.ws = new WS(wsURL);
             this.ws.onopen = this.onopen.bind(this, this.wsID);
@@ -12601,6 +12586,8 @@ const decodeBase64 = (s) => {
  */
 class TokenManager {
     constructor(secret) {
+        this.loadTokenPromise = null;
+        this.type = 'static';
         /**
          * Set the static string token or token provider.
          * Token provider should return a token string or a promise which resolves to string token.
@@ -12643,9 +12630,7 @@ class TokenManager {
             if (!this.secret && !tokenOrProvider) {
                 throw new Error('User token can not be empty');
             }
-            if (tokenOrProvider &&
-                typeof tokenOrProvider !== 'string' &&
-                !isFunction(tokenOrProvider)) {
+            if (typeof tokenOrProvider !== 'string' && !isFunction(tokenOrProvider)) {
                 throw new Error('User token should either be a string or a function');
             }
             if (typeof tokenOrProvider === 'string') {
@@ -12696,9 +12681,7 @@ class TokenManager {
             throw new Error(`User token is not set. Either client.connectUser wasn't called or client.disconnect was called`);
         };
         this.isStatic = () => this.type === 'static';
-        this.loadTokenPromise = null;
         this.secret = secret;
-        this.type = 'static';
     }
 }
 
@@ -12767,11 +12750,11 @@ class StreamClient {
          * connectUser - Set the current user and open a WebSocket connection
          *
          * @param user Data about this user. IE {name: "john"}
-         * @param {TokenOrProvider} userTokenOrProvider Token or provider
+         * @param {TokenOrProvider} tokenOrProvider Token or provider
          *
          * @return {ConnectAPIResponse} Returns a promise that resolves when the connection is setup
          */
-        this.connectUser = async (user, userTokenOrProvider) => {
+        this.connectUser = async (user, tokenOrProvider) => {
             if (!user.id) {
                 throw new Error('The "id" field on the user is missing');
             }
@@ -12779,9 +12762,9 @@ class StreamClient {
              * Calling connectUser multiple times is potentially the result of a  bad integration, however,
              * If the user id remains the same we don't throw error
              */
-            if (this.userID === user.id && this.setUserPromise) {
+            if (this.userID === user.id && this.connectUserTask) {
                 this.logger('warn', 'Consecutive calls to connectUser is detected, ideally you should only call this function once in your app.');
-                return this.setUserPromise;
+                return this.connectUserTask;
             }
             if (this.userID) {
                 throw new Error('Use client.disconnect() before trying to connect as a different user. connectUser was called twice.');
@@ -12792,26 +12775,24 @@ class StreamClient {
             // we generate the client id client side
             this.userID = user.id;
             this.anonymous = false;
-            const setTokenPromise = this._setToken(user, userTokenOrProvider, this.anonymous);
+            await this.tokenManager.setTokenOrProvider(tokenOrProvider, user, false);
             this._setUser(user);
-            const wsPromise = this.openConnection();
-            this.setUserPromise = Promise.all([setTokenPromise, wsPromise]).then((result) => result[1]);
+            this.connectUserTask = this.openConnection();
             try {
                 addConnectionEventListeners(this.updateNetworkConnectionStatus);
-                return await this.setUserPromise;
+                return await this.connectUserTask;
             }
             catch (err) {
                 if (this.persistUserOnConnectionFailure) {
                     // cleanup client to allow the user to retry connectUser again
-                    this.closeConnection();
+                    await this.closeConnection();
                 }
                 else {
-                    this.disconnectUser();
+                    await this.disconnectUser();
                 }
                 throw err;
             }
         };
-        this._setToken = (user, userTokenOrProvider, isAnonymous) => this.tokenManager.setTokenOrProvider(userTokenOrProvider, user, isAnonymous);
         this._setUser = (user) => {
             /**
              * This one is used by the frontend. This is a copy of the current user object stored on backend.
@@ -12855,7 +12836,7 @@ class StreamClient {
                 return;
             }
             this._setupConnectionIdPromise();
-            this.clientID = `${this.userID}--${randomId()}`;
+            this.clientID = `${this.userID}--${generateUUIDv4()}`;
             const newWsPromise = this.connect();
             this.wsPromiseSafe = makeSafePromise(newWsPromise);
             return await newWsPromise;
@@ -12893,7 +12874,7 @@ class StreamClient {
             addConnectionEventListeners(this.updateNetworkConnectionStatus);
             this._setupConnectionIdPromise();
             this.anonymous = true;
-            await this._setToken(user, tokenOrProvider, this.anonymous);
+            await this.tokenManager.setTokenOrProvider(tokenOrProvider, user, true);
             this._setUser(user);
             // some endpoints require a connection_id to be resolved.
             // as anonymous users aren't allowed to open WS connections, we just
@@ -13101,7 +13082,7 @@ class StreamClient {
         this.getUserAgent = () => {
             if (!this.cachedUserAgent) {
                 const { clientAppIdentifier = {} } = this.options;
-                const { sdkName = 'js', sdkVersion = "1.18.3", ...extras } = clientAppIdentifier;
+                const { sdkName = 'js', sdkVersion = "1.18.4", ...extras } = clientAppIdentifier;
                 this.cachedUserAgent = [
                     `stream-video-${sdkName}-v${sdkVersion}`,
                     ...Object.entries(extras).map(([key, value]) => `${key}=${value}`),
@@ -13120,7 +13101,7 @@ class StreamClient {
             if (!options.headers?.['x-client-request-id']) {
                 options.headers = {
                     ...options.headers,
-                    'x-client-request-id': randomId(),
+                    'x-client-request-id': generateUUIDv4(),
                 };
             }
             return {
@@ -13191,7 +13172,7 @@ class StreamClient {
         // WS connection is initialized when setUser is called
         this.wsConnection = null;
         this.wsPromiseSafe = null;
-        this.setUserPromise = null;
+        this.connectUserTask = null;
         // mapping between channel groups and configs
         this.anonymous = false;
         this.persistUserOnConnectionFailure =
@@ -13200,7 +13181,7 @@ class StreamClient {
         // generated from secret.
         this.tokenManager = new TokenManager(this.secret);
         this.consecutiveFailures = 0;
-        this.defaultWSTimeout = 15000;
+        this.defaultWSTimeout = this.options.defaultWsTimeout ?? 15000;
         this.logger = isFunction(inputOptions.logger)
             ? inputOptions.logger
             : () => null;
@@ -13277,6 +13258,7 @@ const createTokenOrProvider = (options) => {
  */
 class StreamVideoClient {
     constructor(apiKeyOrArgs, opts) {
+        this.effectsRegistered = false;
         this.eventHandlersToUnregister = [];
         this.connectionConcurrencyTag = Symbol('connectionConcurrencyTag');
         this.registerClientInstance = (apiKey, user) => {
@@ -13286,27 +13268,9 @@ class StreamVideoClient {
             }
             StreamVideoClient._instances.set(instanceKey, this);
         };
-        /**
-         * Connects the given user to the client.
-         * Only one user can connect at a time, if you want to change users, call `disconnectUser` before connecting a new user.
-         * If the connection is successful, the connected user [state variable](#readonlystatestore) will be updated accordingly.
-         *
-         * @param user the user to connect.
-         * @param token a token or a function that returns a token.
-         */
-        this.connectUser = async (user, token) => {
-            if (user.type === 'anonymous') {
-                user.id = '!anon';
-                return this.connectAnonymousUser(user, token);
-            }
-            const connectUser = user.type === 'guest'
-                ? () => this.streamClient.connectGuestUser(user)
-                : () => this.streamClient.connectUser(user, token);
-            const connectUserResponse = await withoutConcurrency(this.connectionConcurrencyTag, () => connectUser());
-            // connectUserResponse will be void if connectUser called twice for the same user
-            if (connectUserResponse?.me) {
-                this.writeableStateStore.setConnectedUser(connectUserResponse.me);
-            }
+        this.registerEffects = () => {
+            if (this.effectsRegistered)
+                return;
             this.eventHandlersToUnregister.push(this.on('connection.changed', (event) => {
                 if (!event.online)
                     return;
@@ -13326,7 +13290,7 @@ class StreamVideoClient {
             }));
             this.eventHandlersToUnregister.push(this.on('call.created', (event) => {
                 const { call, members } = event;
-                if (user.id === call.created_by.id) {
+                if (this.state.connectedUser?.id === call.created_by.id) {
                     this.logger('warn', 'Received `call.created` sent by the current user');
                     return;
                 }
@@ -13343,7 +13307,7 @@ class StreamVideoClient {
             }));
             this.eventHandlersToUnregister.push(this.on('call.ring', async (event) => {
                 const { call, members } = event;
-                if (user.id === call.created_by.id) {
+                if (this.state.connectedUser?.id === call.created_by.id) {
                     this.logger('debug', 'Received `call.ring` sent by the current user so ignoring the event');
                     return;
                 }
@@ -13367,6 +13331,53 @@ class StreamVideoClient {
                     await newCallInstance.get();
                 }
             }));
+            this.effectsRegistered = true;
+        };
+        /**
+         * Connects the given user to the client.
+         * Only one user can connect at a time, if you want to change users, call `disconnectUser` before connecting a new user.
+         * If the connection is successful, the connected user [state variable](#readonlystatestore) will be updated accordingly.
+         *
+         * @param user the user to connect.
+         * @param tokenOrProvider a token or a function that returns a token.
+         */
+        this.connectUser = async (user, tokenOrProvider) => {
+            if (user.type === 'anonymous') {
+                user.id = '!anon';
+                return this.connectAnonymousUser(user, tokenOrProvider);
+            }
+            const connectUserResponse = await withoutConcurrency(this.connectionConcurrencyTag, async () => {
+                const client = this.streamClient;
+                const { maxConnectUserRetries = 5, onConnectUserError, persistUserOnConnectionFailure, } = client.options;
+                const errorQueue = [];
+                for (let attempt = 0; attempt < maxConnectUserRetries; attempt++) {
+                    try {
+                        this.logger('trace', `Connecting user (${attempt})`, user);
+                        return user.type === 'guest'
+                            ? await client.connectGuestUser(user)
+                            : await client.connectUser(user, tokenOrProvider);
+                    }
+                    catch (err) {
+                        this.logger('warn', `Failed to connect a user (${attempt})`, err);
+                        errorQueue.push(err);
+                        if (attempt === maxConnectUserRetries - 1) {
+                            onConnectUserError?.(err, errorQueue);
+                            throw err;
+                        }
+                        // we need to force to disconnect the user if the client is
+                        // configured to persist the user on connection failure
+                        if (persistUserOnConnectionFailure) {
+                            await client.disconnectUser();
+                        }
+                        await sleep(retryInterval(attempt));
+                    }
+                }
+            });
+            // connectUserResponse will be void if connectUser called twice for the same user
+            if (connectUserResponse?.me) {
+                this.writeableStateStore.setConnectedUser(connectUserResponse.me);
+            }
+            this.registerEffects();
             return connectUserResponse;
         };
         /**
@@ -13378,16 +13389,19 @@ class StreamVideoClient {
          *                https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
          */
         this.disconnectUser = async (timeout) => {
-            const { user, key } = this.streamClient;
-            if (!user)
-                return;
-            await withoutConcurrency(this.connectionConcurrencyTag, () => this.streamClient.disconnectUser(timeout));
-            if (user.id) {
-                StreamVideoClient._instances.delete(getInstanceKey(key, user));
-            }
-            this.eventHandlersToUnregister.forEach((unregister) => unregister());
-            this.eventHandlersToUnregister = [];
-            this.writeableStateStore.setConnectedUser(undefined);
+            await withoutConcurrency(this.connectionConcurrencyTag, async () => {
+                const { user, key } = this.streamClient;
+                if (!user)
+                    return;
+                await this.streamClient.disconnectUser(timeout);
+                if (user.id) {
+                    StreamVideoClient._instances.delete(getInstanceKey(key, user));
+                }
+                this.eventHandlersToUnregister.forEach((unregister) => unregister());
+                this.eventHandlersToUnregister = [];
+                this.effectsRegistered = false;
+                this.writeableStateStore.setConnectedUser(undefined);
+            });
         };
         /**
          * You can subscribe to WebSocket events provided by the API.