@stream-io/video-client 0.4.5 → 0.4.6

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.4.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.4.5...@stream-io/video-client-0.4.6) (2023-11-13)
+
+
+### Features
+
+* handle device disconnection ([#1174](https://github.com/GetStream/stream-video-js/issues/1174)) ([ae3779f](https://github.com/GetStream/stream-video-js/commit/ae3779fbfd820d8ef85ad58dafb698e06c00a3e3))
+
 ### [0.4.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.4.4...@stream-io/video-client-0.4.5) (2023-11-07)
 
 

package/dist/index.browser.es.js

@@ -4,7 +4,7 @@ import { ServiceType, stackIntercept } from '@protobuf-ts/runtime-rpc';
 import axios, { AxiosHeaders } from 'axios';
 export { AxiosError } from 'axios';
 import { TwirpFetchTransport } from '@protobuf-ts/twirp-transport';
-import { ReplaySubject, combineLatest, BehaviorSubject, map as map$1, shareReplay, distinctUntilChanged, takeWhile, distinctUntilKeyChanged, filter, pairwise, merge, Observable, debounceTime, concatMap, from, of, tap, debounce, timer } from 'rxjs';
+import { ReplaySubject, combineLatest, BehaviorSubject, map as map$1, shareReplay, distinctUntilChanged, takeWhile, distinctUntilKeyChanged, merge, from, Observable, debounceTime, concatMap, pairwise, of, filter, tap, debounce, timer } from 'rxjs';
 import * as SDP from 'sdp-transform';
 import { UAParser } from 'ua-parser-js';
 import WebSocket from 'isomorphic-ws';
@@ -9978,8 +9978,7 @@ const getDevices = (constraints, kind) => {
 /**
  * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
  *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- */
+ *  */
 const checkIfAudioOutputChangeSupported = () => {
     if (typeof document === 'undefined')
         return false;
@@ -10139,90 +10138,10 @@ const getScreenShareStream = async (options) => {
         throw e;
     }
 };
-const watchForDisconnectedDevice = (kind, deviceId$) => {
-    let devices$;
-    switch (kind) {
-        case 'audioinput':
-            devices$ = getAudioDevices();
-            break;
-        case 'videoinput':
-            devices$ = getVideoDevices();
-            break;
-        case 'audiooutput':
-            devices$ = getAudioOutputDevices();
-            break;
-    }
-    return combineLatest([devices$, deviceId$]).pipe(filter(([devices, deviceId]) => !!deviceId && !devices.find((d) => d.deviceId === deviceId)), map$1(() => true));
-};
-/**
- * Notifies the subscriber if a given 'audioinput' device is disconnected
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @param deviceId$ an Observable that specifies which device to watch for
- * @returns
- */
-const watchForDisconnectedAudioDevice = (deviceId$) => {
-    return watchForDisconnectedDevice('audioinput', deviceId$);
-};
-/**
- * Notifies the subscriber if a given 'videoinput' device is disconnected
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @param deviceId$ an Observable that specifies which device to watch for
- * @returns
- */
-const watchForDisconnectedVideoDevice = (deviceId$) => {
-    return watchForDisconnectedDevice('videoinput', deviceId$);
-};
-/**
- * Notifies the subscriber if a given 'audiooutput' device is disconnected
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @param deviceId$ an Observable that specifies which device to watch for
- * @returns
- */
-const watchForDisconnectedAudioOutputDevice = (deviceId$) => {
-    return watchForDisconnectedDevice('audiooutput', deviceId$);
-};
-const watchForAddedDefaultDevice = (kind) => {
-    let devices$;
-    switch (kind) {
-        case 'audioinput':
-            devices$ = getAudioDevices();
-            break;
-        case 'videoinput':
-            devices$ = getVideoDevices();
-            break;
-        case 'audiooutput':
-            devices$ = getAudioOutputDevices();
-            break;
-        default:
-            throw new Error('Unknown MediaDeviceKind', kind);
-    }
-    return devices$.pipe(pairwise(), filter(([prev, current]) => {
-        const prevDefault = prev.find((device) => device.deviceId === 'default');
-        const currentDefault = current.find((device) => device.deviceId === 'default');
-        return !!(current.length > prev.length &&
-            prevDefault &&
-            currentDefault &&
-            prevDefault.groupId !== currentDefault.groupId);
-    }), map$1(() => true));
-};
-/**
- * Notifies the subscriber about newly added default audio input device.
- * @returns Observable<boolean>
- */
-const watchForAddedDefaultAudioDevice = () => watchForAddedDefaultDevice('audioinput');
-/**
- * Notifies the subscriber about newly added default audio output device.
- * @returns Observable<boolean>
- */
-const watchForAddedDefaultAudioOutputDevice = () => watchForAddedDefaultDevice('audiooutput');
-/**
- * Notifies the subscriber about newly added default video input device.
- * @returns Observable<boolean>
- */
-const watchForAddedDefaultVideoDevice = () => watchForAddedDefaultDevice('videoinput');
+const deviceIds$ = typeof navigator !== 'undefined' &&
+    typeof navigator.mediaDevices !== 'undefined'
+    ? memoizedObservable(() => merge(from(navigator.mediaDevices.enumerateDevices()), getDeviceChangeObserver()).pipe(shareReplay(1)))()
+    : undefined;
 /**
  * Deactivates MediaStream (stops and removes tracks) to be later garbage collected
  *
@@ -10248,7 +10167,17 @@ class InputMediaDeviceManager {
         this.call = call;
         this.state = state;
         this.trackType = trackType;
+        this.subscriptions = [];
+        this.isTrackStoppedDueToTrackEnd = false;
+        this.removeSubscriptions = () => {
+            this.subscriptions.forEach((s) => s.unsubscribe());
+        };
         this.logger = getLogger([`${TrackType[trackType].toLowerCase()} manager`]);
+        if (deviceIds$ &&
+            !isReactNative() &&
+            (this.trackType === TrackType.AUDIO || this.trackType === TrackType.VIDEO)) {
+            this.handleDisconnectedOrReplacedDevices();
+        }
     }
     /**
      * Lists the available audio/video devices
@@ -10408,9 +10337,6 @@ class InputMediaDeviceManager {
             this.unmuteTracks();
         }
         else {
-            if (this.state.mediaStream) {
-                this.stopTracks();
-            }
             const defaultConstraints = this.state.defaultConstraints;
             const constraints = {
                 ...defaultConstraints,
@@ -10423,7 +10349,79 @@ class InputMediaDeviceManager {
         }
         if (this.state.mediaStream !== stream) {
             this.state.setMediaStream(stream);
+            this.getTracks().forEach((track) => {
+                track.addEventListener('ended', async () => {
+                    if (this.enablePromise) {
+                        await this.enablePromise;
+                    }
+                    if (this.disablePromise) {
+                        await this.disablePromise;
+                    }
+                    if (this.state.status === 'enabled') {
+                        this.isTrackStoppedDueToTrackEnd = true;
+                        setTimeout(() => {
+                            this.isTrackStoppedDueToTrackEnd = false;
+                        }, 2000);
+                        await this.disable();
+                    }
+                });
+            });
+        }
+    }
+    get mediaDeviceKind() {
+        if (this.trackType === TrackType.AUDIO) {
+            return 'audioinput';
+        }
+        if (this.trackType === TrackType.VIDEO) {
+            return 'videoinput';
         }
+        return '';
+    }
+    handleDisconnectedOrReplacedDevices() {
+        this.subscriptions.push(combineLatest([
+            deviceIds$.pipe(pairwise()),
+            this.state.selectedDevice$,
+        ]).subscribe(async ([[prevDevices, currentDevices], deviceId]) => {
+            if (!deviceId) {
+                return;
+            }
+            if (this.enablePromise) {
+                await this.enablePromise;
+            }
+            if (this.disablePromise) {
+                await this.disablePromise;
+            }
+            let isDeviceDisconnected = false;
+            let isDeviceReplaced = false;
+            const currentDevice = this.findDeviceInList(currentDevices, deviceId);
+            const prevDevice = this.findDeviceInList(prevDevices, deviceId);
+            if (!currentDevice && prevDevice) {
+                isDeviceDisconnected = true;
+            }
+            else if (currentDevice &&
+                prevDevice &&
+                currentDevice.deviceId === prevDevice.deviceId &&
+                currentDevice.groupId !== prevDevice.groupId) {
+                isDeviceReplaced = true;
+            }
+            if (isDeviceDisconnected) {
+                await this.disable();
+                this.select(undefined);
+            }
+            if (isDeviceReplaced) {
+                if (this.isTrackStoppedDueToTrackEnd &&
+                    this.state.status === 'disabled') {
+                    await this.enable();
+                    this.isTrackStoppedDueToTrackEnd = false;
+                }
+                else {
+                    await this.applySettingsToStream();
+                }
+            }
+        }));
+    }
+    findDeviceInList(devices, deviceId) {
+        return devices.find((d) => d.deviceId === deviceId && d.kind === this.mediaDeviceKind);
     }
 }
 
@@ -10991,6 +10989,21 @@ class SpeakerState {
 class SpeakerManager {
     constructor() {
         this.state = new SpeakerState();
+        this.subscriptions = [];
+        this.removeSubscriptions = () => {
+            this.subscriptions.forEach((s) => s.unsubscribe());
+        };
+        if (deviceIds$ && !isReactNative()) {
+            this.subscriptions.push(combineLatest([deviceIds$, this.state.selectedDevice$]).subscribe(([devices, deviceId]) => {
+                if (!deviceId) {
+                    return;
+                }
+                const device = devices.find((d) => d.deviceId === deviceId && d.kind === 'audiooutput');
+                if (!device) {
+                    this.select('');
+                }
+            }));
+        }
     }
     /**
      * Lists the available audio output devices
@@ -11108,6 +11121,10 @@ class Call {
             this.leaveCallHooks.forEach((hook) => hook());
             this.clientStore.unregisterCall(this);
             this.state.setCallingState(CallingState.LEFT);
+            this.camera.removeSubscriptions();
+            this.microphone.removeSubscriptions();
+            this.screenShare.removeSubscriptions();
+            this.speaker.removeSubscriptions();
         };
         /**
          * Loads the information about the call.
@@ -11481,7 +11498,7 @@ class Call {
                     await this.initMic({ setStatus: true });
                 }
                 catch (error) {
-                    this.logger('warn', 'Camera and/or mic init failed during join call');
+                    this.logger('warn', 'Camera and/or mic init failed during join call', error);
                 }
                 // 3. once we have the "joinResponse", and possibly reconciled the local state
                 // we schedule a fast subscription update for all remote participants
@@ -13953,7 +13970,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "0.4.5" ;
+            const version = "0.4.6" ;
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };
@@ -14488,5 +14505,5 @@ class StreamVideoServerClient extends StreamVideoClient {
     }
 }
 
-export { AudioSettingsDefaultDeviceEnum, AudioSettingsRequestDefaultDeviceEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, CreateDeviceRequestPushProviderEnum, DebounceType, DynascaleManager, ErrorFromResponse, InputMediaDeviceManager, InputMediaDeviceManagerState, LayoutSettingsNameEnum, LayoutSettingsRequestNameEnum, MicrophoneManager, MicrophoneManagerState, OwnCapability, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, ScreenShareManager, ScreenShareState, events as SfuEvents, models as SfuModels, SpeakerManager, SpeakerState, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoServerClient, StreamVideoWriteableStateStore, TranscriptionSettingsModeEnum, TranscriptionSettingsRequestModeEnum, VideoSettingsCameraFacingEnum, VideoSettingsRequestCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, disposeOfMediaStream, dominantSpeaker, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceInfo, getLogger, getOSInfo, getScreenShareStream, getSdkInfo, getVideoDevices, getVideoStream, livestreamOrAudioRoomSortPreset, logLevels, logToConsole, name, noopComparator, paginatedLayoutSortPreset, pinned, publishingAudio, publishingVideo, reactionType, role, screenSharing, setDeviceInfo, setLogLevel, setLogger, setOSInfo, setSdkInfo, speakerLayoutSortPreset, speaking, watchForAddedDefaultAudioDevice, watchForAddedDefaultAudioOutputDevice, watchForAddedDefaultVideoDevice, watchForDisconnectedAudioDevice, watchForDisconnectedAudioOutputDevice, watchForDisconnectedVideoDevice };
+export { AudioSettingsDefaultDeviceEnum, AudioSettingsRequestDefaultDeviceEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, CreateDeviceRequestPushProviderEnum, DebounceType, DynascaleManager, ErrorFromResponse, InputMediaDeviceManager, InputMediaDeviceManagerState, LayoutSettingsNameEnum, LayoutSettingsRequestNameEnum, MicrophoneManager, MicrophoneManagerState, OwnCapability, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, ScreenShareManager, ScreenShareState, events as SfuEvents, models as SfuModels, SpeakerManager, SpeakerState, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoServerClient, StreamVideoWriteableStateStore, TranscriptionSettingsModeEnum, TranscriptionSettingsRequestModeEnum, VideoSettingsCameraFacingEnum, VideoSettingsRequestCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, deviceIds$, disposeOfMediaStream, dominantSpeaker, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceInfo, getLogger, getOSInfo, getScreenShareStream, getSdkInfo, getVideoDevices, getVideoStream, livestreamOrAudioRoomSortPreset, logLevels, logToConsole, name, noopComparator, paginatedLayoutSortPreset, pinned, publishingAudio, publishingVideo, reactionType, role, screenSharing, setDeviceInfo, setLogLevel, setLogger, setOSInfo, setSdkInfo, speakerLayoutSortPreset, speaking };
 //# sourceMappingURL=index.browser.es.js.map