@stream-io/video-client 0.0.1-alpha.82 → 0.0.1-alpha.83

package/dist/index.browser.es.js

@@ -3,7 +3,7 @@ import { MessageType, isJsonObject, typeofJsonValue, reflectionMergePartial, Unk
 import { TwirpFetchTransport } from '@protobuf-ts/twirp-transport';
 import { ServiceType, stackIntercept } from '@protobuf-ts/runtime-rpc';
 import { v4 } from 'uuid';
-import { ReplaySubject, BehaviorSubject, Subject, takeWhile, filter, debounceTime, startWith, pairwise, Observable, concatMap, from, shareReplay, merge, map as map$2, combineLatest, firstValueFrom } from 'rxjs';
+import { ReplaySubject, BehaviorSubject, Subject, takeWhile, debounceTime, startWith, pairwise, Observable, concatMap, from, shareReplay, merge, map as map$2, combineLatest, filter, firstValueFrom } from 'rxjs';
 import { take, combineLatestWith, map as map$1, distinctUntilChanged } from 'rxjs/operators';
 import axios, { AxiosHeaders } from 'axios';
 import WebSocket$1 from 'isomorphic-ws';
@@ -3821,28 +3821,27 @@ const createSignalClient = (options) => {
 };
 
 const createWebSocketSignalChannel = (opts) => {
-    return new Promise((resolve) => {
-        const { endpoint, onMessage } = opts;
-        const ws = new WebSocket(endpoint);
-        ws.binaryType = 'arraybuffer'; // do we need this?
-        ws.addEventListener('open', () => {
-            return resolve(ws);
-        });
-        ws.addEventListener('error', (e) => {
-            console.error('Error', e);
-        });
-        ws.addEventListener('close', (e) => {
-            console.warn('Signalling channel is closed', e);
-        });
-        if (onMessage) {
-            ws.addEventListener('message', (e) => {
-                const message = e.data instanceof ArrayBuffer
-                    ? SfuEvent.fromBinary(new Uint8Array(e.data))
-                    : SfuEvent.fromJsonString(e.data);
-                onMessage(message);
-            });
-        }
+    const { endpoint, onMessage } = opts;
+    const ws = new WebSocket(endpoint);
+    ws.binaryType = 'arraybuffer'; // do we need this?
+    ws.addEventListener('error', (e) => {
+        console.error('Error', e);
+    });
+    ws.addEventListener('close', (e) => {
+        console.warn('Signalling channel is closed', e);
     });
+    ws.addEventListener('open', (e) => {
+        console.log('Signalling channel is open', e);
+    });
+    if (onMessage) {
+        ws.addEventListener('message', (e) => {
+            const message = e.data instanceof ArrayBuffer
+                ? SfuEvent.fromBinary(new Uint8Array(e.data))
+                : SfuEvent.fromJsonString(e.data);
+            onMessage(message);
+        });
+    }
+    return ws;
 };
 
 /**
@@ -3891,17 +3890,23 @@ const toURL = (url) => {
         return null;
     }
 };
+/**
+ * The client used for exchanging information with the SFU.
+ */
 class StreamSfuClient {
     constructor(dispatcher, url, token) {
+        /**
+         * A buffer for ICE Candidates that are received before
+         * the PeerConnections are ready to handle them.
+         */
         this.iceTrickleBuffer = new IceTrickleBuffer();
-        this.close = () => {
-            this.signalReady.then((ws) => {
-                this.signalReady = Promise.reject('Connection closed');
-                // TODO OL: re-connect flow
-                ws.close(1000, 'Requested signal connection close');
-                this.dispatcher.offAll();
-                clearInterval(this.keepAliveInterval);
-            });
+        this.pingIntervalInMs = 25 * 1000;
+        this.unhealthyTimeoutInMs = this.pingIntervalInMs + 5 * 1000;
+        this.close = (code = 1000) => {
+            this.signalWs.close(code, 'Requested signal connection close');
+            this.unsubscribeIceTrickle();
+            clearInterval(this.keepAliveInterval);
+            clearTimeout(this.connectionCheckTimeout);
         };
         this.updateSubscriptions = (subscriptions) => __awaiter(this, void 0, void 0, function* () {
             return this.rpc.updateSubscriptions({
@@ -3945,7 +3950,35 @@ class StreamSfuClient {
                 signal.send(SfuRequest.toBinary(message));
             });
         };
-        this.dispatcher = dispatcher;
+        this.keepAlive = () => {
+            if (this.keepAliveInterval) {
+                clearInterval(this.keepAliveInterval);
+            }
+            this.keepAliveInterval = setInterval(() => {
+                console.log('Sending healthCheckRequest to SFU');
+                const message = SfuRequest.create({
+                    requestPayload: {
+                        oneofKind: 'healthCheckRequest',
+                        healthCheckRequest: {},
+                    },
+                });
+                void this.send(message);
+            }, this.pingIntervalInMs);
+        };
+        this.scheduleConnectionCheck = () => {
+            if (this.connectionCheckTimeout) {
+                clearTimeout(this.connectionCheckTimeout);
+            }
+            this.connectionCheckTimeout = setTimeout(() => {
+                if (this.lastMessageTimestamp) {
+                    const timeSinceLastMessage = new Date().getTime() - this.lastMessageTimestamp.getTime();
+                    if (timeSinceLastMessage > this.unhealthyTimeoutInMs) {
+                        console.log('SFU connection unhealthy, closing');
+                        this.close(4001);
+                    }
+                }
+            }, this.unhealthyTimeoutInMs);
+        };
         this.sessionId = v4();
         this.token = token;
         this.rpc = createSignalClient({
@@ -3972,36 +4005,25 @@ class StreamSfuClient {
         // connection is established. In that case, those events (ICE candidates)
         // need to be buffered and later added to the appropriate PeerConnection
         // once the remoteDescription is known and set.
-        this.dispatcher.on('iceTrickle', (e) => {
+        this.unsubscribeIceTrickle = dispatcher.on('iceTrickle', (e) => {
             if (e.eventPayload.oneofKind !== 'iceTrickle')
                 return;
             const { iceTrickle } = e.eventPayload;
             this.iceTrickleBuffer.push(iceTrickle);
         });
-        this.signalReady = createWebSocketSignalChannel({
+        this.signalWs = createWebSocketSignalChannel({
             endpoint: wsEndpoint,
             onMessage: (message) => {
-                this.dispatcher.dispatch(message);
+                this.lastMessageTimestamp = new Date();
+                this.scheduleConnectionCheck();
+                dispatcher.dispatch(message);
             },
         });
-    }
-    // FIXME: make this private
-    keepAlive() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.signalReady;
-            console.log('Registering healthcheck for SFU');
-            this.keepAliveInterval = setInterval(() => {
-                const message = SfuRequest.create({
-                    requestPayload: {
-                        oneofKind: 'healthCheckRequest',
-                        healthCheckRequest: {
-                            sessionId: this.sessionId,
-                        },
-                    },
-                });
-                console.log('Sending healthCheckRequest to SFU', message);
-                this.send(message);
-            }, 27000);
+        this.signalReady = new Promise((resolve) => {
+            this.signalWs.addEventListener('open', () => {
+                this.keepAlive();
+                resolve(this.signalWs);
+            });
         });
     }
 }
@@ -4019,8 +4041,9 @@ function getIceCandidate(candidate) {
     }
 }
 
-const createSubscriber = ({ rpcClient, connectionConfig, onTrack, }) => {
+const createSubscriber = ({ rpcClient, dispatcher, connectionConfig, onTrack, }) => {
     const subscriber = new RTCPeerConnection(connectionConfig);
+    attachDebugEventListeners(subscriber);
     subscriber.addEventListener('icecandidate', (e) => __awaiter(void 0, void 0, void 0, function* () {
         const { candidate } = e;
         if (!candidate) {
@@ -4032,22 +4055,11 @@ const createSubscriber = ({ rpcClient, connectionConfig, onTrack, }) => {
             peerType: PeerType.SUBSCRIBER,
         });
     }));
-    subscriber.addEventListener('icecandidateerror', (e) => {
-        const errorMessage = e instanceof RTCPeerConnectionIceErrorEvent &&
-            `${e.errorCode}: ${e.errorText}`;
-        console.error(`Subscriber: ICE Candidate error`, errorMessage, e);
-    });
-    subscriber.addEventListener('iceconnectionstatechange', (e) => {
-        console.log(`Subscriber: ICE Connection state changed`, subscriber.iceConnectionState, e);
-    });
-    subscriber.addEventListener('icegatheringstatechange', (e) => {
-        console.log(`Subscriber: ICE Gathering State`, subscriber.iceGatheringState, e);
-    });
     if (onTrack) {
         subscriber.addEventListener('track', onTrack);
     }
-    const { dispatcher, iceTrickleBuffer } = rpcClient;
-    dispatcher.on('subscriberOffer', (message) => __awaiter(void 0, void 0, void 0, function* () {
+    const { iceTrickleBuffer } = rpcClient;
+    const unsubscribe = dispatcher.on('subscriberOffer', (message) => __awaiter(void 0, void 0, void 0, function* () {
         if (message.eventPayload.oneofKind !== 'subscriberOffer')
             return;
         const { subscriberOffer } = message.eventPayload;
@@ -4062,7 +4074,7 @@ const createSubscriber = ({ rpcClient, connectionConfig, onTrack, }) => {
                 yield subscriber.addIceCandidate(iceCandidate);
             }
             catch (e) {
-                console.error(`[Subscriber] ICE candidate error`, e, candidate);
+                console.error(`Subscriber: ICE candidate error`, e, candidate);
             }
         }));
         // apply ice candidates
@@ -4073,8 +4085,30 @@ const createSubscriber = ({ rpcClient, connectionConfig, onTrack, }) => {
             sdp: answer.sdp || '',
         });
     }));
+    // we replace the close method of the subscriber PeerConnection
+    // so that we can preform some cleanups before closing the connection.
+    // We are doing this as currently there is no event that is fired
+    // when the subscriber PeerConnection is closed.
+    const originalClose = subscriber.close;
+    subscriber.close = () => {
+        unsubscribe();
+        originalClose.call(subscriber);
+    };
     return subscriber;
 };
+const attachDebugEventListeners = (subscriber) => {
+    subscriber.addEventListener('icecandidateerror', (e) => {
+        const errorMessage = e instanceof RTCPeerConnectionIceErrorEvent &&
+            `${e.errorCode}: ${e.errorText}`;
+        console.error(`Subscriber: ICE Candidate error`, errorMessage);
+    });
+    subscriber.addEventListener('iceconnectionstatechange', () => {
+        console.log(`Subscriber: ICE Connection state changed`, subscriber.iceConnectionState);
+    });
+    subscriber.addEventListener('icegatheringstatechange', () => {
+        console.log(`Subscriber: ICE Gathering State`, subscriber.iceGatheringState);
+    });
+};
 
 const findOptimalVideoLayers = (videoTrack) => {
     const steps = [
@@ -4221,8 +4255,8 @@ const getGenericSdp = (direction, preferredCodec) => __awaiter(void 0, void 0, v
 });
 
 /**
- * @internal
  * The `Publisher` is responsible for publishing/unpublishing media streams to/from the SFU
+ * @internal
  */
 class Publisher {
     constructor({ connectionConfig, rpcClient, isDtxEnabled }) {
@@ -4276,7 +4310,7 @@ class Publisher {
                 if (trackType === TrackType.VIDEO) {
                     const codecPreferences = getPreferredCodecs('video', opts.preferredCodec || 'vp8');
                     if ('setCodecPreferences' in transceiver && codecPreferences) {
-                        console.log(`set codec preferences`, codecPreferences);
+                        console.log(`set video codec preferences`, codecPreferences);
                         // @ts-ignore
                         transceiver.setCodecPreferences(codecPreferences);
                     }
@@ -4286,14 +4320,17 @@ class Publisher {
                     const codecPreferences = getPreferredCodecs('audio', opts.preferredCodec, returnOnlyMatched);
                     console.log('Preferred codec', opts.preferredCodec);
                     if ('setCodecPreferences' in transceiver && codecPreferences) {
-                        console.log(`set codec preferences`, codecPreferences);
+                        console.log(`set audio codec preferences`, codecPreferences);
                         // @ts-ignore
                         transceiver.setCodecPreferences(codecPreferences);
                     }
                 }
             }
             else {
-                (_a = transceiver.sender.track) === null || _a === void 0 ? void 0 : _a.stop();
+                // don't stop the track if we are re-publishing the same track
+                if (transceiver.sender.track !== track) {
+                    (_a = transceiver.sender.track) === null || _a === void 0 ? void 0 : _a.stop();
+                }
                 yield transceiver.sender.replaceTrack(track);
             }
         });
@@ -4317,16 +4354,21 @@ class Publisher {
         };
         /**
          * Stops publishing all tracks and stop all tracks.
+         *
+         * @param options - Options
+         * @param options.stopTracks - If `true` (default), all tracks will be stopped.
          */
-        this.stopPublishing = () => {
-            this.publisher.getSenders().forEach((s) => {
-                if (s.track) {
-                    s.track.stop();
-                }
-                if (this.publisher.signalingState !== 'closed') {
-                    this.publisher.removeTrack(s);
-                }
-            });
+        this.stopPublishing = (options = {}) => {
+            const { stopTracks = true } = options;
+            if (stopTracks) {
+                this.publisher.getSenders().forEach((s) => {
+                    var _a;
+                    (_a = s.track) === null || _a === void 0 ? void 0 : _a.stop();
+                    if (this.publisher.signalingState !== 'closed') {
+                        this.publisher.removeTrack(s);
+                    }
+                });
+            }
             this.publisher.close();
         };
         this.updateVideoPublishQuality = (enabledRids) => __awaiter(this, void 0, void 0, function* () {
@@ -4400,34 +4442,39 @@ class Publisher {
                 };
             });
             // TODO debounce for 250ms
-            const response = yield this.rpcClient.setPublisher({
+            const { response } = yield this.rpcClient.setPublisher({
                 sdp: offer.sdp || '',
                 tracks: trackInfos,
             });
-            yield this.publisher.setRemoteDescription({
-                type: 'answer',
-                sdp: response.response.sdp,
-            });
+            try {
+                yield this.publisher.setRemoteDescription({
+                    type: 'answer',
+                    sdp: response.sdp,
+                });
+            }
+            catch (e) {
+                console.error(`Publisher: setRemoteDescription error`, response.sdp, e);
+            }
             this.rpcClient.iceTrickleBuffer.publisherCandidates.subscribe((candidate) => __awaiter(this, void 0, void 0, function* () {
                 try {
                     const iceCandidate = JSON.parse(candidate.iceCandidate);
                     yield this.publisher.addIceCandidate(iceCandidate);
                 }
                 catch (e) {
-                    console.error(`[Publisher] ICE candidate error`, e, candidate);
+                    console.error(`Publisher: ICE candidate error`, e, candidate);
                 }
             }));
         });
         this.onIceCandidateError = (e) => {
             const errorMessage = e instanceof RTCPeerConnectionIceErrorEvent &&
                 `${e.errorCode}: ${e.errorText}`;
-            console.error(`Publisher: ICE Candidate error`, errorMessage, e);
+            console.error(`Publisher: ICE Candidate error`, errorMessage);
         };
-        this.onIceConnectionStateChange = (e) => {
-            console.log(`Publisher: ICE Connection state changed`, this.publisher.iceConnectionState, e);
+        this.onIceConnectionStateChange = () => {
+            console.log(`Publisher: ICE Connection state changed`, this.publisher.iceConnectionState);
         };
-        this.onIceGatheringStateChange = (e) => {
-            console.log(`Publisher: ICE Gathering State`, this.publisher.iceGatheringState, e);
+        this.onIceGatheringStateChange = () => {
+            console.log(`Publisher: ICE Gathering State`, this.publisher.iceGatheringState);
         };
         this.ridToVideoQuality = (rid) => {
             return rid === 'q'
@@ -4978,6 +5025,40 @@ const speakerLayoutSortPreset = combineComparators(pinned, screenSharing, domina
  */
 const livestreamOrAudioRoomSortPreset = combineComparators(ifInvisibleBy(dominantSpeaker), ifInvisibleBy(speaking), ifInvisibleBy(reactionType('raised-hand')), ifInvisibleBy(publishingVideo), ifInvisibleBy(publishingAudio), role('admin', 'host', 'speaker'));
 
+/**
+ * Represents the state of the current call.
+ */
+var CallingState;
+(function (CallingState) {
+    /**
+     * The call is in an idle state.
+     */
+    CallingState["IDLE"] = "idle";
+    /**
+     * The call is in the process of joining.
+     */
+    CallingState["JOINING"] = "joining";
+    /**
+     * The call is currently active.
+     */
+    CallingState["JOINED"] = "joined";
+    /**
+     * The call has been left.
+     */
+    CallingState["LEFT"] = "left";
+    /**
+     * The call is in the process of reconnecting.
+     */
+    CallingState["RECONNECTING"] = "reconnecting";
+    /**
+     * The call has failed to reconnect.
+     */
+    CallingState["RECONNECTING_FAILED"] = "reconnecting-failed";
+    /**
+     * The call is in offline mode.
+     */
+    CallingState["OFFLINE"] = "offline";
+})(CallingState || (CallingState = {}));
 /**
  * Holds the state of the current call.
  * @react You don't have to use this class directly, as we are exposing the state through Hooks.
@@ -5001,6 +5082,12 @@ class CallState {
          * @internal
          */
         this.membersSubject = new BehaviorSubject([]);
+        /**
+         * The calling state.
+         *
+         * @internal
+         */
+        this.callingStateSubject = new BehaviorSubject(CallingState.IDLE);
         /**
          * All participants of the current call (including the logged-in user).
          *
@@ -5142,6 +5229,7 @@ class CallState {
                 return acc;
             }, {});
         }));
+        this.callingState$ = this.callingStateSubject.asObservable();
     }
 }
 
@@ -5639,6 +5727,129 @@ const CallTypes = new CallTypesRegistry([
     }),
 ]);
 
+const sleep = (m) => new Promise((r) => setTimeout(r, m));
+function isFunction(value) {
+    return (value &&
+        (Object.prototype.toString.call(value) === '[object Function]' ||
+            'function' === typeof value ||
+            value instanceof Function));
+}
+// todo: rename so that it does not contain word "chat"
+const chatCodes = {
+    TOKEN_EXPIRED: 40,
+    WS_CLOSED_SUCCESS: 1000,
+};
+/**
+ * retryInterval - A retry interval which increases acc to number of failures
+ *
+ * @return {number} Duration to wait in milliseconds
+ */
+function retryInterval(numberOfFailures) {
+    // try to reconnect in 0.25-5 seconds (random to spread out the load from failures)
+    const max = Math.min(500 + numberOfFailures * 2000, 5000);
+    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++) {
+        s += bytes[i].toString(16).padStart(2, '0');
+    }
+    return s;
+}
+// https://tools.ietf.org/html/rfc4122
+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;
+    }
+}
+const getRandomValues = (() => {
+    if (typeof crypto !== 'undefined' &&
+        typeof (crypto === null || crypto === void 0 ? void 0 : crypto.getRandomValues) !== 'undefined') {
+        return crypto.getRandomValues.bind(crypto);
+    }
+    else if (typeof msCrypto !== 'undefined') {
+        return msCrypto.getRandomValues.bind(msCrypto);
+    }
+    else {
+        return getRandomValuesWithMathRandom;
+    }
+})();
+function getRandomBytes(length) {
+    const bytes = new Uint8Array(length);
+    getRandomValues(bytes);
+    return bytes;
+}
+function convertErrorToJson(err) {
+    const jsonObj = {};
+    if (!err)
+        return jsonObj;
+    try {
+        Object.getOwnPropertyNames(err).forEach((key) => {
+            jsonObj[key] = Object.getOwnPropertyDescriptor(err, key);
+        });
+    }
+    catch (_) {
+        return {
+            error: 'failed to serialize the error',
+        };
+    }
+    return jsonObj;
+}
+/**
+ * isOnline safely return the navigator.online value for browser env
+ * if navigator is not in global object, it always return true
+ */
+function isOnline() {
+    const nav = typeof navigator !== 'undefined'
+        ? navigator
+        : typeof window !== 'undefined' && window.navigator
+            ? window.navigator
+            : undefined;
+    if (!nav) {
+        console.warn('isOnline failed to access window.navigator and assume browser is online');
+        return true;
+    }
+    // RN navigator has undefined for onLine
+    if (typeof nav.onLine !== 'boolean') {
+        return true;
+    }
+    return nav.onLine;
+}
+/**
+ * listenForConnectionChanges - Adds an event listener fired on browser going online or offline
+ */
+function addConnectionEventListeners(cb) {
+    if (typeof window !== 'undefined' && window.addEventListener) {
+        window.addEventListener('offline', cb);
+        window.addEventListener('online', cb);
+    }
+}
+function removeConnectionEventListeners(cb) {
+    if (typeof window !== 'undefined' && window.removeEventListener) {
+        window.removeEventListener('offline', cb);
+        window.removeEventListener('online', cb);
+    }
+}
+
 const UPDATE_SUBSCRIPTIONS_DEBOUNCE_DURATION = 600;
 /**
  * A `Call` object represents the active call the user is part of.
@@ -5647,7 +5858,7 @@ const UPDATE_SUBSCRIPTIONS_DEBOUNCE_DURATION = 600;
 class Call {
     get preferredAudioCodec() {
         var _a;
-        const audioSettings = (_a = this.state.getCurrentValue(this.state.metadata$)) === null || _a === void 0 ? void 0 : _a.settings.audio;
+        const audioSettings = (_a = this.data) === null || _a === void 0 ? void 0 : _a.settings.audio;
         let preferredCodec = (audioSettings === null || audioSettings === void 0 ? void 0 : audioSettings.redundant_coding_enabled) === undefined
             ? 'opus'
             : audioSettings.redundant_coding_enabled
@@ -5666,7 +5877,7 @@ class Call {
      */
     constructor({ type, id, streamClient, metadata, members, sortParticipantsBy, clientStore, }) {
         /**
-         * ViewporTracker instance
+         * ViewportTracker instance
          */
         this.viewportTracker = new ViewportTracker();
         /**
@@ -5675,7 +5886,7 @@ class Call {
          */
         this.dispatcher = new Dispatcher();
         this.trackSubscriptionsSubject = new Subject();
-        this.joined$ = new BehaviorSubject(false);
+        this.reconnectAttempts = 0;
         /**
          * Remove subscription for WebSocket events that were created by the `on` method.
          * @param eventName
@@ -5690,10 +5901,9 @@ class Call {
          */
         this.leave = () => {
             var _a, _b, _c, _d;
-            if (!this.joined$.getValue()) {
+            if (this.state.getCurrentValue(this.state.callingState$) === CallingState.LEFT) {
                 throw new Error('Cannot leave call that has already been left.');
             }
-            this.joined$.next(false);
             (_a = this.statsReporter) === null || _a === void 0 ? void 0 : _a.stop();
             this.statsReporter = undefined;
             (_b = this.subscriber) === null || _b === void 0 ? void 0 : _b.close();
@@ -5702,13 +5912,19 @@ class Call {
             this.publisher = undefined;
             (_d = this.sfuClient) === null || _d === void 0 ? void 0 : _d.close();
             this.sfuClient = undefined;
+            this.dispatcher.offAll();
             this.clientStore.setCurrentValue(this.clientStore.activeCallSubject, undefined);
+            this.state.setCurrentValue(this.state.callingStateSubject, CallingState.LEFT);
         };
-        this.waitForJoinResponse = (timeout = 10000) => new Promise((resolve, reject) => {
+        this.waitForJoinResponse = (timeout = 5000) => new Promise((resolve, reject) => {
             const unsubscribe = this.on('joinResponse', (event) => {
-                resolve(event);
+                if (event.eventPayload.oneofKind !== 'joinResponse')
+                    return;
+                clearTimeout(timeoutId);
+                unsubscribe();
+                resolve(event.eventPayload.joinResponse);
             });
-            setTimeout(() => {
+            const timeoutId = setTimeout(() => {
                 unsubscribe();
                 reject(new Error('Waiting for "joinResponse" has timed out'));
             }, timeout);
@@ -5731,9 +5947,10 @@ class Call {
          */
         this.join = (data) => __awaiter(this, void 0, void 0, function* () {
             var _a;
-            if (this.joined$.getValue()) {
+            if ([CallingState.JOINED, CallingState.JOINING].includes(this.state.getCurrentValue(this.state.callingState$))) {
                 throw new Error(`Illegal State: Already joined.`);
             }
+            this.state.setCurrentValue(this.state.callingStateSubject, CallingState.JOINING);
             const call = yield join(this.streamClient, this.type, this.id, data);
             this.state.setCurrentValue(this.state.metadataSubject, call.metadata);
             this.state.setCurrentValue(this.state.membersSubject, call.members);
@@ -5749,12 +5966,79 @@ class Call {
                 sfuUrl = sfuUrlParam || call.sfuServer.url;
             }
             const sfuClient = (this.sfuClient = new StreamSfuClient(this.dispatcher, sfuUrl, call.token));
+            /**
+             * A closure which hides away the re-connection logic.
+             */
+            const rejoin = () => __awaiter(this, void 0, void 0, function* () {
+                var _b, _c, _d;
+                console.log(`Rejoining call ${this.cid} (${this.reconnectAttempts})...`);
+                this.reconnectAttempts++;
+                this.state.setCurrentValue(this.state.callingStateSubject, CallingState.RECONNECTING);
+                // take a snapshot of the current "local participant" state
+                // we'll need it for restoring the previous publishing state later
+                const localParticipant = this.state.getCurrentValue(this.state.localParticipant$);
+                (_b = this.subscriber) === null || _b === void 0 ? void 0 : _b.close();
+                (_c = this.publisher) === null || _c === void 0 ? void 0 : _c.stopPublishing({ stopTracks: false });
+                (_d = this.statsReporter) === null || _d === void 0 ? void 0 : _d.stop();
+                sfuClient.close(); // clean up previous connection
+                yield sleep(retryInterval(this.reconnectAttempts));
+                yield this.join(data);
+                console.log(`Rejoin: ${this.reconnectAttempts} successful!`);
+                if (localParticipant) {
+                    const { audioStream, videoStream, screenShareStream: screenShare, } = localParticipant;
+                    // restore previous publishing state
+                    if (audioStream)
+                        yield this.publishAudioStream(audioStream);
+                    if (videoStream)
+                        yield this.publishVideoStream(videoStream);
+                    if (screenShare)
+                        yield this.publishScreenShareStream(screenShare);
+                }
+                console.log(`Rejoin: state restored ${this.reconnectAttempts}`);
+            });
+            // reconnect if the connection was closed unexpectedly. example:
+            // - SFU crash or restart
+            // - network change
+            sfuClient.signalReady.then(() => {
+                sfuClient.signalWs.addEventListener('close', (e) => {
+                    // do nothing if the connection was closed on purpose
+                    if (e.code === 1000)
+                        return;
+                    if (this.reconnectAttempts >= 10) {
+                        console.log('Reconnect attempts exceeded. Giving up...');
+                        this.state.setCurrentValue(this.state.callingStateSubject, CallingState.RECONNECTING_FAILED);
+                    }
+                    else {
+                        void rejoin();
+                    }
+                });
+            });
+            // handlers for connection online/offline events
+            // Note: window.addEventListener is not available in React Native, hence the check
+            if (typeof window !== 'undefined' && window.addEventListener) {
+                const handleOnOffline = () => {
+                    window.removeEventListener('offline', handleOnOffline);
+                    console.log('Join: Going offline...');
+                    this.state.setCurrentValue(this.state.callingStateSubject, CallingState.OFFLINE);
+                };
+                const handleOnOnline = () => {
+                    window.removeEventListener('online', handleOnOnline);
+                    if (this.state.getCurrentValue(this.state.callingState$) ===
+                        CallingState.OFFLINE) {
+                        console.log('Join: Going online...');
+                        rejoin();
+                    }
+                };
+                window.addEventListener('offline', handleOnOffline);
+                window.addEventListener('online', handleOnOnline);
+            }
             this.subscriber = createSubscriber({
                 rpcClient: sfuClient,
+                dispatcher: this.dispatcher,
                 connectionConfig: call.connectionConfig,
                 onTrack: this.handleOnTrack,
             });
-            const audioSettings = (_a = this.state.getCurrentValue(this.state.metadata$)) === null || _a === void 0 ? void 0 : _a.settings.audio;
+            const audioSettings = (_a = this.data) === null || _a === void 0 ? void 0 : _a.settings.audio;
             let isDtxEnabled = (audioSettings === null || audioSettings === void 0 ? void 0 : audioSettings.opus_dtx_enabled) === undefined
                 ? false
                 : audioSettings === null || audioSettings === void 0 ? void 0 : audioSettings.opus_dtx_enabled;
@@ -5777,8 +6061,19 @@ class Call {
                 store: this.state,
                 edgeName: call.sfuServer.edge_name,
             });
-            const joinResponsePromise = this.waitForJoinResponse().then((event) => {
-                const { callState } = event.eventPayload.joinResponse;
+            try {
+                // 1. wait for the signal server to be ready before sending "joinRequest"
+                sfuClient.signalReady
+                    .catch((err) => console.warn('Signal ready failed', err))
+                    // prepare a generic SDP and send it to the SFU.
+                    // this is a throw-away SDP that the SFU will use to determine
+                    // the capabilities of the client (codec support, etc.)
+                    .then(() => getGenericSdp('recvonly', this.preferredAudioCodec))
+                    .then((sdp) => sfuClient.join({ subscriberSdp: sdp || '' }));
+                // 2. in parallel, wait for the SFU to send us the "joinResponse"
+                // this will throw an error if the SFU rejects the join request or
+                // fails to respond in time
+                const { callState } = yield this.waitForJoinResponse();
                 const currentParticipants = (callState === null || callState === void 0 ? void 0 : callState.participants) || [];
                 const ownCapabilities = {
                     ownCapabilities: call.metadata.own_capabilities,
@@ -5787,14 +6082,22 @@ class Call {
                     ? ownCapabilities
                     : {})))));
                 this.clientStore.setCurrentValue(this.clientStore.activeCallSubject, this);
-                sfuClient.keepAlive();
-                this.joined$.next(true);
-            });
-            const genericSdp = yield getGenericSdp('recvonly', this.preferredAudioCodec);
-            yield sfuClient.join({
-                subscriberSdp: genericSdp || '',
-            });
-            return joinResponsePromise;
+                this.reconnectAttempts = 0; // reset the reconnect attempts counter
+                this.state.setCurrentValue(this.state.callingStateSubject, CallingState.JOINED);
+                console.log(`Joined call ${this.cid}`);
+            }
+            catch (err) {
+                // join failed, try to rejoin
+                if (this.reconnectAttempts < 10) {
+                    yield rejoin();
+                    console.log(`Rejoin ${this.reconnectAttempts} successful!`);
+                }
+                else {
+                    console.log(`Rejoin failed for ${this.reconnectAttempts} times. Giving up.`);
+                    this.state.setCurrentValue(this.state.callingStateSubject, CallingState.RECONNECTING_FAILED);
+                    throw new Error('Join failed');
+                }
+            }
         });
         this.updateCallMembers = (data) => __awaiter(this, void 0, void 0, function* () {
             return yield this.streamClient.post(`${this.streamClientBasePath}/members`, data);
@@ -5814,7 +6117,7 @@ class Call {
          * @param opts the options to use when publishing the stream.
          */
         this.publishVideoStream = (videoStream, opts = {}) => __awaiter(this, void 0, void 0, function* () {
-            var _b;
+            var _e;
             // we should wait until we get a JoinResponse from the SFU,
             // otherwise we risk breaking the ICETrickle flow.
             yield this.assertCallJoined();
@@ -5828,7 +6131,7 @@ class Call {
             const trackType = TrackType.VIDEO;
             try {
                 yield this.publisher.publishStream(videoStream, videoTrack, trackType, opts);
-                yield ((_b = this.sfuClient) === null || _b === void 0 ? void 0 : _b.updateMuteState(trackType, false));
+                yield ((_e = this.sfuClient) === null || _e === void 0 ? void 0 : _e.updateMuteState(trackType, false));
             }
             catch (e) {
                 throw e;
@@ -6013,8 +6316,8 @@ class Call {
          * @returns
          */
         this.getStats = (kind, selector) => __awaiter(this, void 0, void 0, function* () {
-            var _c;
-            return (_c = this.statsReporter) === null || _c === void 0 ? void 0 : _c.getRawStatsForTrack(kind, selector);
+            var _f;
+            return (_f = this.statsReporter) === null || _f === void 0 ? void 0 : _f.getRawStatsForTrack(kind, selector);
         });
         /**
          * Will enhance the reported stats with additional participant-specific information (`callStatsReport$` state [store variable](./StreamVideoClient.md/#readonlystatestore)).
@@ -6102,8 +6405,8 @@ class Call {
          * @returns
          */
         this.updatePublishQuality = (enabledRids) => __awaiter(this, void 0, void 0, function* () {
-            var _d;
-            return (_d = this.publisher) === null || _d === void 0 ? void 0 : _d.updateVideoPublishQuality(enabledRids);
+            var _g;
+            return (_g = this.publisher) === null || _g === void 0 ? void 0 : _g.updateVideoPublishQuality(enabledRids);
         });
         this.handleOnTrack = (e) => {
             const [primaryStream] = e.streams;
@@ -6149,11 +6452,9 @@ class Call {
         };
         this.assertCallJoined = () => {
             return new Promise((resolve) => {
-                this.joined$
-                    .pipe(takeWhile((isJoined) => !isJoined, true), filter((isJoined) => isJoined))
-                    .subscribe(() => {
-                    resolve();
-                });
+                this.state.callingState$
+                    .pipe(takeWhile((state) => state !== CallingState.JOINED, true))
+                    .subscribe(() => resolve());
             });
         };
         this.sendReaction = (reaction) => __awaiter(this, void 0, void 0, function* () {
@@ -6817,129 +7118,6 @@ CallDropScheduler.getLatestCall = (from, compareTo) => {
 
 var https = null;
 
-const sleep = (m) => new Promise((r) => setTimeout(r, m));
-function isFunction(value) {
-    return (value &&
-        (Object.prototype.toString.call(value) === '[object Function]' ||
-            'function' === typeof value ||
-            value instanceof Function));
-}
-// todo: rename so that it does not contain word "chat"
-const chatCodes = {
-    TOKEN_EXPIRED: 40,
-    WS_CLOSED_SUCCESS: 1000,
-};
-/**
- * retryInterval - A retry interval which increases acc to number of failures
- *
- * @return {number} Duration to wait in milliseconds
- */
-function retryInterval(numberOfFailures) {
-    // try to reconnect in 0.25-25 seconds (random to spread out the load from failures)
-    const max = Math.min(500 + numberOfFailures * 2000, 25000);
-    const min = Math.min(Math.max(250, (numberOfFailures - 1) * 2000), 25000);
-    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++) {
-        s += bytes[i].toString(16).padStart(2, '0');
-    }
-    return s;
-}
-// https://tools.ietf.org/html/rfc4122
-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;
-    }
-}
-const getRandomValues = (() => {
-    if (typeof crypto !== 'undefined' &&
-        typeof (crypto === null || crypto === void 0 ? void 0 : crypto.getRandomValues) !== 'undefined') {
-        return crypto.getRandomValues.bind(crypto);
-    }
-    else if (typeof msCrypto !== 'undefined') {
-        return msCrypto.getRandomValues.bind(msCrypto);
-    }
-    else {
-        return getRandomValuesWithMathRandom;
-    }
-})();
-function getRandomBytes(length) {
-    const bytes = new Uint8Array(length);
-    getRandomValues(bytes);
-    return bytes;
-}
-function convertErrorToJson(err) {
-    const jsonObj = {};
-    if (!err)
-        return jsonObj;
-    try {
-        Object.getOwnPropertyNames(err).forEach((key) => {
-            jsonObj[key] = Object.getOwnPropertyDescriptor(err, key);
-        });
-    }
-    catch (_) {
-        return {
-            error: 'failed to serialize the error',
-        };
-    }
-    return jsonObj;
-}
-/**
- * isOnline safely return the navigator.online value for browser env
- * if navigator is not in global object, it always return true
- */
-function isOnline() {
-    const nav = typeof navigator !== 'undefined'
-        ? navigator
-        : typeof window !== 'undefined' && window.navigator
-            ? window.navigator
-            : undefined;
-    if (!nav) {
-        console.warn('isOnline failed to access window.navigator and assume browser is online');
-        return true;
-    }
-    // RN navigator has undefined for onLine
-    if (typeof nav.onLine !== 'boolean') {
-        return true;
-    }
-    return nav.onLine;
-}
-/**
- * listenForConnectionChanges - Adds an event listener fired on browser going online or offline
- */
-function addConnectionEventListeners(cb) {
-    if (typeof window !== 'undefined' && window.addEventListener) {
-        window.addEventListener('offline', cb);
-        window.addEventListener('online', cb);
-    }
-}
-function removeConnectionEventListeners(cb) {
-    if (typeof window !== 'undefined' && window.removeEventListener) {
-        window.removeEventListener('offline', cb);
-        window.removeEventListener('online', cb);
-    }
-}
-
 class InsightMetrics {
     constructor() {
         this.connectionStartTimestamp = null;
@@ -8550,7 +8728,7 @@ class StreamClient {
     }
     getUserAgent() {
         return (this.userAgent ||
-            `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${"0.0.1-alpha.81"}`);
+            `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${"0.0.1-alpha.82"}`);
     }
     setUserAgent(userAgent) {
         this.userAgent = userAgent;
@@ -9078,5 +9256,5 @@ const createSoundDetector = (audioStream, onSoundDetectedStateChanged, options =
     };
 };
 
-export { browsers as Browsers, CALL_CONFIG, Call, CallState, CallType, CallTypes, DeviceFieldsRequestPushProviderEnum, ErrorFromResponse, OwnCapability, RecordSettingsModeEnum, RecordSettingsQualityEnum, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, events as SfuEvents, models as SfuModels, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoWriteableStateStore, TranscriptionSettingsModeEnum, TranscriptionSettingsRequestModeEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, disposeOfMediaStream, dominantSpeaker, getAudioDevices, getAudioOutputDevices, getAudioStream, getScreenShareStream, getVideoDevices, getVideoStream, isStreamVideoLocalParticipant, livestreamOrAudioRoomSortPreset, name, noopComparator, pinned, publishingAudio, publishingVideo, reactionType, role, screenSharing, speakerLayoutSortPreset, speaking, watchForAddedDefaultAudioDevice, watchForAddedDefaultAudioOutputDevice, watchForAddedDefaultVideoDevice, watchForDisconnectedAudioDevice, watchForDisconnectedAudioOutputDevice, watchForDisconnectedVideoDevice };
+export { browsers as Browsers, CALL_CONFIG, Call, CallState, CallType, CallTypes, CallingState, DeviceFieldsRequestPushProviderEnum, ErrorFromResponse, OwnCapability, RecordSettingsModeEnum, RecordSettingsQualityEnum, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, events as SfuEvents, models as SfuModels, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoWriteableStateStore, TranscriptionSettingsModeEnum, TranscriptionSettingsRequestModeEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, disposeOfMediaStream, dominantSpeaker, getAudioDevices, getAudioOutputDevices, getAudioStream, getScreenShareStream, getVideoDevices, getVideoStream, isStreamVideoLocalParticipant, livestreamOrAudioRoomSortPreset, name, noopComparator, pinned, publishingAudio, publishingVideo, reactionType, role, screenSharing, speakerLayoutSortPreset, speaking, watchForAddedDefaultAudioDevice, watchForAddedDefaultAudioOutputDevice, watchForAddedDefaultVideoDevice, watchForDisconnectedAudioDevice, watchForDisconnectedAudioOutputDevice, watchForDisconnectedVideoDevice };
 //# sourceMappingURL=index.browser.es.js.map