@stream-io/video-client 0.4.5 → 0.4.7

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.4.7](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.4.6...@stream-io/video-client-0.4.7) (2023-11-13)
+
+
+### Features
+
+* **device-api:** Browser Permissions API ([#1184](https://github.com/GetStream/stream-video-js/issues/1184)) ([a0b3573](https://github.com/GetStream/stream-video-js/commit/a0b3573b630ff8450953cdf1102fe722aea83f6f))
+
+### [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
@@ -10326,11 +10255,10 @@ class InputMediaDeviceManager {
         this.state.setDefaultConstraints(constraints);
     }
     /**
-     * Select device
+     * Selects a device.
      *
      * Note: this method is not supported in React Native
-     *
-     * @param deviceId
+     * @param deviceId the device id to select.
      */
     async select(deviceId) {
         if (isReactNative()) {
@@ -10408,9 +10336,6 @@ class InputMediaDeviceManager {
             this.unmuteTracks();
         }
         else {
-            if (this.state.mediaStream) {
-                this.stopTracks();
-            }
             const defaultConstraints = this.state.defaultConstraints;
             const constraints = {
                 ...defaultConstraints,
@@ -10423,13 +10348,93 @@ 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);
     }
 }
 
 class InputMediaDeviceManagerState {
-    constructor(disableMode = 'stop-tracks') {
+    /**
+     * Constructs new InputMediaDeviceManagerState instance.
+     *
+     * @param disableMode the disable mode to use.
+     * @param permissionName the permission name to use for querying.
+     * `undefined` means no permission is required.
+     */
+    constructor(disableMode = 'stop-tracks', permissionName = undefined) {
         this.disableMode = disableMode;
+        this.permissionName = permissionName;
         this.statusSubject = new BehaviorSubject(undefined);
         this.mediaStreamSubject = new BehaviorSubject(undefined);
         this.selectedDeviceSubject = new BehaviorSubject(undefined);
@@ -10453,6 +10458,33 @@ class InputMediaDeviceManagerState {
          * The default constraints for the device.
          */
         this.defaultConstraints$ = this.defaultConstraintsSubject.asObservable();
+        /**
+         * An observable that will emit `true` if browser/system permission
+         * is granted, `false` otherwise.
+         */
+        this.hasBrowserPermission$ = new Observable((subscriber) => {
+            const notifyGranted = () => subscriber.next(true);
+            if (isReactNative() || !this.permissionName)
+                return notifyGranted();
+            let permissionState;
+            const notify = () => subscriber.next(permissionState.state === 'granted');
+            navigator.permissions
+                .query({ name: this.permissionName })
+                .then((permissionStatus) => {
+                permissionState = permissionStatus;
+                permissionState.addEventListener('change', notify);
+                notify();
+            })
+                .catch(() => {
+                // permission doesn't exist or can't be queried -> assume it's granted
+                // an example would be Firefox,
+                // where neither camera microphone permission can be queried
+                notifyGranted();
+            });
+            return () => {
+                permissionState?.removeEventListener('change', notify);
+            };
+        }).pipe(shareReplay(1));
         /**
          * Gets the current value of an observable, or undefined if the observable has
          * not emitted a value yet.
@@ -10534,7 +10566,10 @@ class InputMediaDeviceManagerState {
 
 class CameraManagerState extends InputMediaDeviceManagerState {
     constructor() {
-        super('stop-tracks');
+        super('stop-tracks', 
+        // `camera` is not in the W3C standard yet,
+        // but it's supported by Chrome and Safari.
+        'camera');
         this.directionSubject = new BehaviorSubject(undefined);
         this.direction$ = this.directionSubject
             .asObservable()
@@ -10664,7 +10699,10 @@ class CameraManager extends InputMediaDeviceManager {
 
 class MicrophoneManagerState extends InputMediaDeviceManagerState {
     constructor() {
-        super('disable-tracks');
+        super('disable-tracks', 
+        // `microphone` is not in the W3C standard yet,
+        // but it's supported by Chrome and Safari.
+        'microphone');
         this.speakingWhileMutedSubject = new BehaviorSubject(false);
         this.speakingWhileMuted$ = this.speakingWhileMutedSubject
             .asObservable()
@@ -10991,6 +11029,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 +11161,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 +11538,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 +14010,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "0.4.5" ;
+            const version = "0.4.7" ;
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };
@@ -14488,5 +14545,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