@stream-io/video-client 0.4.4 → 0.4.6

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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)
+
+
+### Bug Fixes
+
+* lift the debug helpers from the SDK to Pronto ([#1182](https://github.com/GetStream/stream-video-js/issues/1182)) ([8f31efc](https://github.com/GetStream/stream-video-js/commit/8f31efc71d9f85ef147d21b42f23876599c36072))
+
 ### [0.4.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.4.3...@stream-io/video-client-0.4.4) (2023-11-02)
 
 

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';
@@ -9137,19 +9137,6 @@ const doJoin = async (httpClient, type, id, data) => {
         ...data,
         location,
     };
-    // FIXME OL: remove this once cascading is enabled by default
-    const cascadingModeParams = getCascadingModeParams();
-    if (cascadingModeParams) {
-        // FIXME OL: remove after SFU migration is done
-        if (data?.migrating_from && cascadingModeParams['next_sfu_id']) {
-            cascadingModeParams['sfu_id'] = cascadingModeParams['next_sfu_id'];
-        }
-        return httpClient.doAxiosRequest('post', `/call/${type}/${id}/join`, request, {
-            params: {
-                ...cascadingModeParams,
-            },
-        });
-    }
     return httpClient.post(`/call/${type}/${id}/join`, request);
 };
 const toRtcConfiguration = (config) => {
@@ -9164,20 +9151,6 @@ const toRtcConfiguration = (config) => {
     };
     return rtcConfig;
 };
-const getCascadingModeParams = () => {
-    if (typeof window === 'undefined')
-        return null;
-    const params = new URLSearchParams(window.location?.search);
-    const cascadingEnabled = params.get('cascading') !== null;
-    if (cascadingEnabled) {
-        const rawParams = {};
-        params.forEach((value, key) => {
-            rawParams[key] = value;
-        });
-        return rawParams;
-    }
-    return null;
-};
 /**
  * Reconciles the local state of the source participant into the target participant.
  *
@@ -10005,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;
@@ -10166,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
  *
@@ -10275,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
@@ -10435,9 +10337,6 @@ class InputMediaDeviceManager {
             this.unmuteTracks();
         }
         else {
-            if (this.state.mediaStream) {
-                this.stopTracks();
-            }
             const defaultConstraints = this.state.defaultConstraints;
             const constraints = {
                 ...defaultConstraints,
@@ -10450,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);
     }
 }
 
@@ -10610,8 +10581,9 @@ class CameraManager extends InputMediaDeviceManager {
         };
     }
     /**
-     * Select the camera direaction
-     * @param direction
+     * Select the camera direction.
+     *
+     * @param direction the direction of the camera to select.
      */
     async selectDirection(direction) {
         this.state.setDirection(direction);
@@ -10641,6 +10613,7 @@ class CameraManager extends InputMediaDeviceManager {
             }
             catch (error) {
                 // couldn't enable device, target resolution will be applied the next time user attempts to start the device
+                this.logger('warn', 'could not apply target resolution', error);
             }
         }
         if (this.state.status === 'enabled') {
@@ -10648,11 +10621,21 @@ class CameraManager extends InputMediaDeviceManager {
                 .mediaStream.getVideoTracks()[0]
                 ?.getSettings();
             if (width !== this.targetResolution.width ||
-                height !== this.targetResolution.height)
+                height !== this.targetResolution.height) {
                 await this.applySettingsToStream();
-            this.logger('debug', `${width}x${height} target resolution applied to media stream`);
+                this.logger('debug', `${width}x${height} target resolution applied to media stream`);
+            }
         }
     }
+    /**
+     * Sets the preferred codec for encoding the video.
+     *
+     * @internal internal use only, not part of the public API.
+     * @param codec the codec to use for encoding the video.
+     */
+    setPreferredCodec(codec) {
+        this.preferredCodec = codec;
+    }
     getDevices() {
         return getVideoDevices();
     }
@@ -10668,7 +10651,9 @@ class CameraManager extends InputMediaDeviceManager {
         return getVideoStream(constraints);
     }
     publishStream(stream) {
-        return this.call.publishVideoStream(stream);
+        return this.call.publishVideoStream(stream, {
+            preferredCodec: this.preferredCodec,
+        });
     }
     stopPublishStream(stopTracks) {
         return this.call.stopPublish(TrackType.VIDEO, stopTracks);
@@ -11004,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
@@ -11121,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.
@@ -11251,13 +11255,6 @@ class Call {
                 this.state.setCallingState(callingState);
                 throw error;
             }
-            // FIXME OL: remove once cascading is implemented
-            if (typeof window !== 'undefined' && window.location?.search) {
-                const params = new URLSearchParams(window.location.search);
-                sfuServer.url = params.get('sfuUrl') || sfuServer.url;
-                sfuServer.ws_endpoint = params.get('sfuWsUrl') || sfuServer.ws_endpoint;
-                sfuServer.edge_name = params.get('sfuUrl') || sfuServer.edge_name;
-            }
             const previousSfuClient = this.sfuClient;
             const sfuClient = (this.sfuClient = new StreamSfuClient({
                 dispatcher: this.dispatcher,
@@ -11324,8 +11321,11 @@ class Call {
                     // restore previous publishing state
                     if (audioStream)
                         await this.publishAudioStream(audioStream);
-                    if (videoStream)
-                        await this.publishVideoStream(videoStream);
+                    if (videoStream) {
+                        await this.publishVideoStream(videoStream, {
+                            preferredCodec: this.camera.preferredCodec,
+                        });
+                    }
                     if (screenShare)
                         await this.publishScreenShareStream(screenShare);
                 }
@@ -11498,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
@@ -12351,9 +12351,11 @@ class Call {
             if (this.camera.state.status === 'enabled' &&
                 this.camera.state.mediaStream &&
                 !this.publisher?.isPublishing(TrackType.VIDEO)) {
-                await this.publishVideoStream(this.camera.state.mediaStream);
+                await this.publishVideoStream(this.camera.state.mediaStream, {
+                    preferredCodec: this.camera.preferredCodec,
+                });
             }
-            // Start camera if backend config speicifies, and there is no local setting
+            // Start camera if backend config specifies, and there is no local setting
             if (this.camera.state.status === undefined &&
                 this.state.settings?.video.camera_default_on) {
                 await this.camera.enable();
@@ -13968,7 +13970,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "0.4.4" ;
+            const version = "0.4.6" ;
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };
@@ -14503,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