@stream-io/video-client 1.4.2 → 1.4.3

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [1.4.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.4.2...@stream-io/video-client-1.4.3) (2024-06-25)
+
+
+### Bug Fixes
+
+* improve browser permission handling ([#1394](https://github.com/GetStream/stream-video-js/issues/1394)) ([c8ccb21](https://github.com/GetStream/stream-video-js/commit/c8ccb219a43464d1215987d99fd01d8b4a407eb5))
+
 ### [1.4.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.4.1...@stream-io/video-client-1.4.2) (2024-06-24)
 
 

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, merge, from, Observable, debounceTime, concatMap, pairwise, of, filter, debounce, timer } from 'rxjs';
+import { ReplaySubject, combineLatest, BehaviorSubject, map as map$1, shareReplay, distinctUntilChanged, takeWhile, distinctUntilKeyChanged, fromEventPattern, startWith, concatMap, merge, from, fromEvent, debounceTime, pairwise, of, filter, debounce, timer } from 'rxjs';
 import * as SDP from 'sdp-transform';
 import { UAParser } from 'ua-parser-js';
 import WebSocket from 'isomorphic-ws';
@@ -10812,6 +10812,127 @@ const CallTypes = new CallTypesRegistry([
     }),
 ]);
 
+class BrowserPermission {
+    constructor(permission) {
+        this.permission = permission;
+        this.disposeController = new AbortController();
+        this.wasPrompted = false;
+        this.listeners = new Set();
+        this.logger = getLogger(['permissions']);
+        const signal = this.disposeController.signal;
+        this.ready = (async () => {
+            const assumeGranted = (error) => {
+                this.logger('warn', "Can't query permissions, assuming granted", {
+                    permission,
+                    error,
+                });
+                this.setState('granted');
+            };
+            if (!canQueryPermissions()) {
+                return assumeGranted();
+            }
+            try {
+                const status = await navigator.permissions.query({
+                    name: permission.queryName,
+                });
+                if (!signal.aborted) {
+                    this.setState(status.state);
+                    status.addEventListener('change', () => this.setState(status.state), {
+                        signal,
+                    });
+                }
+            }
+            catch (err) {
+                assumeGranted(err);
+            }
+        })();
+    }
+    dispose() {
+        this.state = undefined;
+        this.disposeController.abort();
+    }
+    async getState() {
+        await this.ready;
+        if (!this.state) {
+            throw new Error('BrowserPermission instance possibly disposed');
+        }
+        return this.state;
+    }
+    async prompt({ forcePrompt = false, throwOnNotAllowed = false, } = {}) {
+        await withoutConcurrency(`permission-prompt-${this.permission.queryName}`, async () => {
+            if ((await this.getState()) !== 'prompt' ||
+                (this.wasPrompted && !forcePrompt)) {
+                const isGranted = this.state === 'granted';
+                if (!isGranted && throwOnNotAllowed) {
+                    throw new DOMException('Permission was not granted previously, and prompting again is not allowed', 'NotAllowedError');
+                }
+                return isGranted;
+            }
+            try {
+                this.wasPrompted = true;
+                const stream = await navigator.mediaDevices.getUserMedia(this.permission.constraints);
+                disposeOfMediaStream(stream);
+                return true;
+            }
+            catch (e) {
+                if (e instanceof DOMException && e.name === 'NotAllowedError') {
+                    this.logger('info', 'Browser permission was not granted', {
+                        permission: this.permission,
+                    });
+                    if (throwOnNotAllowed) {
+                        throw e;
+                    }
+                    return false;
+                }
+                this.logger('error', `Failed to getUserMedia`, {
+                    error: e,
+                    permission: this.permission,
+                });
+                throw e;
+            }
+        });
+    }
+    listen(cb) {
+        this.listeners.add(cb);
+        if (this.state)
+            cb(this.state);
+        return () => this.listeners.delete(cb);
+    }
+    asObservable() {
+        return fromEventPattern((handler) => this.listen(handler), (handler, unlisten) => unlisten()).pipe(
+        // In some browsers, the 'change' event doesn't reliably emit and hence,
+        // permissionState stays in 'prompt' state forever.
+        // Typically, this happens when a user grants one-time permission.
+        // Instead of checking if a permission is granted, we check if it isn't denied
+        map$1((state) => state !== 'denied'));
+    }
+    setState(state) {
+        if (this.state !== state) {
+            this.state = state;
+            this.listeners.forEach((listener) => listener(state));
+        }
+    }
+}
+function canQueryPermissions() {
+    return (!isReactNative() &&
+        typeof navigator !== 'undefined' &&
+        !!navigator.permissions?.query);
+}
+
+const uninitialized = Symbol('uninitialized');
+/**
+ * Lazily creates a value using a provided factory
+ */
+function lazy(factory) {
+    let value = uninitialized;
+    return () => {
+        if (value === uninitialized) {
+            value = factory();
+        }
+        return value;
+    };
+}
+
 /**
  * Returns an Observable that emits the list of available devices
  * that meet the given constraints.
@@ -10819,44 +10940,23 @@ const CallTypes = new CallTypesRegistry([
  * @param constraints the constraints to use when requesting the devices.
  * @param kind the kind of devices to enumerate.
  */
-const getDevices = (constraints, kind) => {
-    return new Observable((subscriber) => {
-        const enumerate = async () => {
-            let devices = await navigator.mediaDevices.enumerateDevices();
-            // some browsers report empty device labels (Firefox).
-            // in that case, we need to request permissions (via getUserMedia)
-            // to be able to get the device labels
-            const needsGetUserMedia = devices.some((device) => device.kind === kind && device.label === '');
-            if (needsGetUserMedia) {
-                let mediaStream;
-                try {
-                    mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
-                    devices = await navigator.mediaDevices.enumerateDevices();
-                }
-                finally {
-                    if (mediaStream)
-                        disposeOfMediaStream(mediaStream);
-                }
-            }
-            return devices;
-        };
-        enumerate()
-            .then((devices) => {
-            // notify subscribers and complete
-            subscriber.next(devices);
-            subscriber.complete();
-        })
-            .catch((error) => {
-            const logger = getLogger(['devices']);
-            logger('error', 'Failed to enumerate devices', error);
-            subscriber.error(error);
-        });
-    });
+const getDevices = (permission, kind) => {
+    return from((async () => {
+        let devices = await navigator.mediaDevices.enumerateDevices();
+        // for privacy reasons, most browsers don't give you device labels
+        // unless you have a corresponding camera or microphone permission
+        const shouldPromptForBrowserPermission = devices.some((device) => device.kind === kind && device.label === '');
+        if (shouldPromptForBrowserPermission) {
+            await permission.prompt({ throwOnNotAllowed: true });
+            devices = await navigator.mediaDevices.enumerateDevices();
+        }
+        return devices.filter((d) => d.kind === kind);
+    })());
 };
 /**
- * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
- *
- *  */
+ * Tells if the browser supports audio output change on 'audio' elements,
+ * see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId.
+ */
 const checkIfAudioOutputChangeSupported = () => {
     if (typeof document === 'undefined')
         return false;
@@ -10883,72 +10983,57 @@ const videoDeviceConstraints = {
     },
 };
 /**
- * Creates a memoized observable instance
- * that will be created only once and shared between all callers.
- *
- * @param create a function that creates an Observable.
- */
-const memoizedObservable = (create) => {
-    let memoized;
-    return () => {
-        if (!memoized)
-            memoized = create();
-        return memoized;
-    };
-};
-const getDeviceChangeObserver = memoizedObservable(() => {
-    // Audio and video devices are requested in two separate requests.
-    // That way, users will be presented with two separate prompts
-    // -> they can give access to just camera, or just microphone
-    return new Observable((subscriber) => {
-        // 'addEventListener' is not available in React Native
-        if (!navigator.mediaDevices.addEventListener)
-            return;
-        const notify = () => subscriber.next();
-        navigator.mediaDevices.addEventListener('devicechange', notify);
-        return () => {
-            navigator.mediaDevices.removeEventListener('devicechange', notify);
-        };
-    }).pipe(debounceTime(500), concatMap(() => from(navigator.mediaDevices.enumerateDevices())), shareReplay(1));
-});
-const getAudioDevicesObserver = memoizedObservable(() => {
-    return merge(getDevices(audioDeviceConstraints, 'audioinput'), getDeviceChangeObserver()).pipe(shareReplay(1));
-});
-const getAudioOutputDevicesObserver = memoizedObservable(() => {
-    return merge(getDevices(audioDeviceConstraints, 'audiooutput'), getDeviceChangeObserver()).pipe(shareReplay(1));
-});
-const getVideoDevicesObserver = memoizedObservable(() => {
-    return merge(getDevices(videoDeviceConstraints, 'videoinput'), getDeviceChangeObserver()).pipe(shareReplay(1));
+ * Keeps track of the browser permission to use microphone. This permission also
+ * affects an ability to enumerate audio devices.
+ */
+const getAudioBrowserPermission = lazy(() => new BrowserPermission({
+    constraints: audioDeviceConstraints,
+    queryName: 'microphone',
+}));
+/**
+ * Keeps track of the browser permission to use camera. This permission also
+ * affects an ability to enumerate video devices.
+ */
+const getVideoBrowserPermission = lazy(() => new BrowserPermission({
+    constraints: videoDeviceConstraints,
+    queryName: 'camera',
+}));
+const getDeviceChangeObserver = lazy(() => {
+    // 'addEventListener' is not available in React Native, returning
+    // an observable that will never fire
+    if (!navigator.mediaDevices.addEventListener)
+        return from([]);
+    return fromEvent(navigator.mediaDevices, 'devicechange').pipe(map$1(() => undefined), debounceTime(500));
 });
 /**
- * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audioinput' devices, if devices are added/removed the list is updated.
+ * Prompts the user for a permission to use audio devices (if not already granted
+ * and was not prompted before) and lists the available 'audioinput' devices,
+ * if devices are added/removed the list is updated, and if the permission is revoked,
+ * the observable errors.
  */
-const getAudioDevices = () => {
-    return getAudioDevicesObserver().pipe(map$1((values) => values.filter((d) => d.kind === 'audioinput')));
-};
+const getAudioDevices = lazy(() => {
+    return merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getAudioBrowserPermission(), 'audioinput')), shareReplay(1));
+});
 /**
- * Prompts the user for a permission to use video devices (if not already granted) and lists the available 'videoinput' devices, if devices are added/removed the list is updated.
+ * Prompts the user for a permission to use video devices (if not already granted
+ * and was not prompted before) and lists the available 'videoinput' devices,
+ * if devices are added/removed the list is updated, and if the permission is revoked,
+ * the observable errors.
  */
 const getVideoDevices = () => {
-    return getVideoDevicesObserver().pipe(map$1((values) => values.filter((d) => d.kind === 'videoinput')));
+    return merge(getDeviceChangeObserver(), getVideoBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getVideoBrowserPermission(), 'videoinput')), shareReplay(1));
 };
 /**
- * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audiooutput' devices, if devices are added/removed the list is updated. Selecting 'audiooutput' device only makes sense if [the browser has support for changing audio output on 'audio' elements](#checkifaudiooutputchangesupported)
+ * Prompts the user for a permission to use video devices (if not already granted
+ * and was not prompted before) and lists the available 'audiooutput' devices,
+ * if devices are added/removed the list is updated, and if the permission is revoked,
+ * the observable errors.
  */
 const getAudioOutputDevices = () => {
-    return getAudioOutputDevicesObserver().pipe(map$1((values) => values.filter((d) => d.kind === 'audiooutput')));
+    return merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(startWith(undefined), concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput')), shareReplay(1));
 };
 const getStream = async (constraints) => {
-    try {
-        return await navigator.mediaDevices.getUserMedia(constraints);
-    }
-    catch (e) {
-        getLogger(['devices'])('error', `Failed to getUserMedia`, {
-            error: e,
-            constraints: constraints,
-        });
-        throw e;
-    }
+    return await navigator.mediaDevices.getUserMedia(constraints);
 };
 /**
  * Returns an audio media stream that fulfills the given constraints.
@@ -10965,7 +11050,20 @@ const getAudioStream = async (trackConstraints) => {
             ...trackConstraints,
         },
     };
-    return getStream(constraints);
+    try {
+        await getAudioBrowserPermission().prompt({
+            throwOnNotAllowed: true,
+            forcePrompt: true,
+        });
+        return getStream(constraints);
+    }
+    catch (e) {
+        getLogger(['devices'])('error', 'Failed to get audio stream', {
+            error: e,
+            constraints: constraints,
+        });
+        throw e;
+    }
 };
 /**
  * Returns a video media stream that fulfills the given constraints.
@@ -10982,7 +11080,20 @@ const getVideoStream = async (trackConstraints) => {
             ...trackConstraints,
         },
     };
-    return getStream(constraints);
+    try {
+        await getVideoBrowserPermission().prompt({
+            throwOnNotAllowed: true,
+            forcePrompt: true,
+        });
+        return getStream(constraints);
+    }
+    catch (e) {
+        getLogger(['devices'])('error', 'Failed to get video stream', {
+            error: e,
+            constraints: constraints,
+        });
+        throw e;
+    }
 };
 /**
  * Prompts the user for a permission to share a screen.
@@ -11018,7 +11129,7 @@ const getScreenShareStream = async (options) => {
 };
 const deviceIds$ = typeof navigator !== 'undefined' &&
     typeof navigator.mediaDevices !== 'undefined'
-    ? memoizedObservable(() => merge(from(navigator.mediaDevices.enumerateDevices()), getDeviceChangeObserver()).pipe(shareReplay(1)))()
+    ? getDeviceChangeObserver().pipe(startWith(undefined), concatMap(() => navigator.mediaDevices.enumerateDevices()), shareReplay(1))
     : undefined;
 /**
  * Deactivates MediaStream (stops and removes tracks) to be later garbage collected
@@ -11401,12 +11512,11 @@ class InputMediaDeviceManagerState {
      * Constructs new InputMediaDeviceManagerState instance.
      *
      * @param disableMode the disable mode to use.
-     * @param permissionName the permission name to use for querying.
+     * @param permission the BrowserPermission to use for querying.
      * `undefined` means no permission is required.
      */
-    constructor(disableMode = 'stop-tracks', permissionName = undefined) {
+    constructor(disableMode = 'stop-tracks', permission) {
         this.disableMode = disableMode;
-        this.permissionName = permissionName;
         this.statusSubject = new BehaviorSubject(undefined);
         this.optimisticStatusSubject = new BehaviorSubject(undefined);
         this.mediaStreamSubject = new BehaviorSubject(undefined);
@@ -11437,43 +11547,6 @@ 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);
-            const permissionsAPIAvailable = !!navigator?.permissions?.query;
-            if (isReactNative() || !this.permissionName || !permissionsAPIAvailable) {
-                getLogger(['devices'])('warn', `Permissions can't be queried. Assuming granted.`);
-                return notifyGranted();
-            }
-            let permissionState;
-            const notify = () => {
-                subscriber.next(
-                // In some browsers, the 'change' event doesn't reliably emit and hence,
-                // permissionState stays in 'prompt' state forever.
-                // Typically, this happens when a user grants one-time permission.
-                // Instead of checking if a permission is granted, we check if it isn't denied
-                permissionState.state !== 'denied');
-            };
-            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.
@@ -11493,6 +11566,9 @@ class InputMediaDeviceManagerState {
          * @return the updated value.
          */
         this.setCurrentValue = setCurrentValue;
+        this.hasBrowserPermission$ = permission
+            ? permission.asObservable().pipe(shareReplay(1))
+            : of(true);
     }
     /**
      * The device status
@@ -11572,10 +11648,7 @@ class InputMediaDeviceManagerState {
 
 class CameraManagerState extends InputMediaDeviceManagerState {
     constructor() {
-        super('stop-tracks', 
-        // `camera` is not in the W3C standard yet,
-        // but it's supported by Chrome and Safari.
-        'camera');
+        super('stop-tracks', getVideoBrowserPermission());
         this.directionSubject = new BehaviorSubject(undefined);
         this.direction$ = this.directionSubject
             .asObservable()
@@ -11706,10 +11779,7 @@ class CameraManager extends InputMediaDeviceManager {
 
 class MicrophoneManagerState extends InputMediaDeviceManagerState {
     constructor(disableMode) {
-        super(disableMode, 
-        // `microphone` is not in the W3C standard yet,
-        // but it's supported by Chrome and Safari.
-        'microphone');
+        super(disableMode, getAudioBrowserPermission());
         this.speakingWhileMutedSubject = new BehaviorSubject(false);
         this.speakingWhileMuted$ = this.speakingWhileMutedSubject
             .asObservable()
@@ -15414,7 +15484,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "1.4.2" ;
+            const version = "1.4.3" ;
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };
@@ -15893,5 +15963,5 @@ class StreamVideoClient {
     }
 }
 
-export { AudioSettingsRequestDefaultDeviceEnum, AudioSettingsResponseDefaultDeviceEnum, BlockListOptionsBehaviorEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, ChannelConfigWithInfoAutomodBehaviorEnum, ChannelConfigWithInfoAutomodEnum, ChannelConfigWithInfoBlocklistBehaviorEnum, CreateDeviceRequestPushProviderEnum, DebounceType, DynascaleManager, ErrorFromResponse, InputMediaDeviceManager, InputMediaDeviceManagerState, MicrophoneManager, MicrophoneManagerState, NoiseCancellationSettingsModeEnum, OwnCapability, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, ScreenShareManager, ScreenShareState, events as SfuEvents, models as SfuModels, SpeakerManager, SpeakerState, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoWriteableStateStore, TranscriptionSettingsRequestModeEnum, TranscriptionSettingsResponseModeEnum, VideoSettingsRequestCameraFacingEnum, VideoSettingsResponseCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, deviceIds$, disposeOfMediaStream, dominantSpeaker, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceInfo, getLogger, getOSInfo, getScreenShareStream, getSdkInfo, getVideoDevices, getVideoStream, getWebRTCInfo, hasAudio, hasScreenShare, hasScreenShareAudio, hasVideo, isPinned, livestreamOrAudioRoomSortPreset, logLevels, logToConsole, name, noopComparator, paginatedLayoutSortPreset, pinned, publishingAudio, publishingVideo, reactionType, role, screenSharing, setDeviceInfo, setLogLevel, setLogger, setOSInfo, setSdkInfo, setWebRTCInfo, speakerLayoutSortPreset, speaking };
+export { AudioSettingsRequestDefaultDeviceEnum, AudioSettingsResponseDefaultDeviceEnum, BlockListOptionsBehaviorEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CameraManager, CameraManagerState, ChannelConfigWithInfoAutomodBehaviorEnum, ChannelConfigWithInfoAutomodEnum, ChannelConfigWithInfoBlocklistBehaviorEnum, CreateDeviceRequestPushProviderEnum, DebounceType, DynascaleManager, ErrorFromResponse, InputMediaDeviceManager, InputMediaDeviceManagerState, MicrophoneManager, MicrophoneManagerState, NoiseCancellationSettingsModeEnum, OwnCapability, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, ScreenShareManager, ScreenShareState, events as SfuEvents, models as SfuModels, SpeakerManager, SpeakerState, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoWriteableStateStore, TranscriptionSettingsRequestModeEnum, TranscriptionSettingsResponseModeEnum, VideoSettingsRequestCameraFacingEnum, VideoSettingsResponseCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, deviceIds$, disposeOfMediaStream, dominantSpeaker, getAudioBrowserPermission, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceInfo, getLogger, getOSInfo, getScreenShareStream, getSdkInfo, getVideoBrowserPermission, getVideoDevices, getVideoStream, getWebRTCInfo, hasAudio, hasScreenShare, hasScreenShareAudio, hasVideo, isPinned, livestreamOrAudioRoomSortPreset, logLevels, logToConsole, name, noopComparator, paginatedLayoutSortPreset, pinned, publishingAudio, publishingVideo, reactionType, role, screenSharing, setDeviceInfo, setLogLevel, setLogger, setOSInfo, setSdkInfo, setWebRTCInfo, speakerLayoutSortPreset, speaking };
 //# sourceMappingURL=index.browser.es.js.map