@stream-io/video-client 1.4.1 → 1.4.3

package/dist/index.cjs.js

@@ -143,6 +143,11 @@ const RecordSettingsRequestQualityEnum = {
     _720P: '720p',
     _1080P: '1080p',
     _1440P: '1440p',
+    PORTRAIT_360X640: 'portrait-360x640',
+    PORTRAIT_480X854: 'portrait-480x854',
+    PORTRAIT_720X1280: 'portrait-720x1280',
+    PORTRAIT_1080X1920: 'portrait-1080x1920',
+    PORTRAIT_1440X2560: 'portrait-1440x2560',
 };
 /**
  * @export
@@ -10828,6 +10833,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 rxjs.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
+        rxjs.map((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.
@@ -10835,44 +10961,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 rxjs.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 rxjs.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;
@@ -10899,72 +11004,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 rxjs.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(rxjs.debounceTime(500), rxjs.concatMap(() => rxjs.from(navigator.mediaDevices.enumerateDevices())), rxjs.shareReplay(1));
-});
-const getAudioDevicesObserver = memoizedObservable(() => {
-    return rxjs.merge(getDevices(audioDeviceConstraints, 'audioinput'), getDeviceChangeObserver()).pipe(rxjs.shareReplay(1));
-});
-const getAudioOutputDevicesObserver = memoizedObservable(() => {
-    return rxjs.merge(getDevices(audioDeviceConstraints, 'audiooutput'), getDeviceChangeObserver()).pipe(rxjs.shareReplay(1));
-});
-const getVideoDevicesObserver = memoizedObservable(() => {
-    return rxjs.merge(getDevices(videoDeviceConstraints, 'videoinput'), getDeviceChangeObserver()).pipe(rxjs.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 rxjs.from([]);
+    return rxjs.fromEvent(navigator.mediaDevices, 'devicechange').pipe(rxjs.map(() => undefined), rxjs.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(rxjs.map((values) => values.filter((d) => d.kind === 'audioinput')));
-};
+const getAudioDevices = lazy(() => {
+    return rxjs.merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(rxjs.startWith(undefined), rxjs.concatMap(() => getDevices(getAudioBrowserPermission(), 'audioinput')), rxjs.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(rxjs.map((values) => values.filter((d) => d.kind === 'videoinput')));
+    return rxjs.merge(getDeviceChangeObserver(), getVideoBrowserPermission().asObservable()).pipe(rxjs.startWith(undefined), rxjs.concatMap(() => getDevices(getVideoBrowserPermission(), 'videoinput')), rxjs.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(rxjs.map((values) => values.filter((d) => d.kind === 'audiooutput')));
+    return rxjs.merge(getDeviceChangeObserver(), getAudioBrowserPermission().asObservable()).pipe(rxjs.startWith(undefined), rxjs.concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput')), rxjs.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.
@@ -10981,7 +11071,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.
@@ -10998,7 +11101,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.
@@ -11034,7 +11150,7 @@ const getScreenShareStream = async (options) => {
 };
 const deviceIds$ = typeof navigator !== 'undefined' &&
     typeof navigator.mediaDevices !== 'undefined'
-    ? memoizedObservable(() => rxjs.merge(rxjs.from(navigator.mediaDevices.enumerateDevices()), getDeviceChangeObserver()).pipe(rxjs.shareReplay(1)))()
+    ? getDeviceChangeObserver().pipe(rxjs.startWith(undefined), rxjs.concatMap(() => navigator.mediaDevices.enumerateDevices()), rxjs.shareReplay(1))
     : undefined;
 /**
  * Deactivates MediaStream (stops and removes tracks) to be later garbage collected
@@ -11417,12 +11533,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 rxjs.BehaviorSubject(undefined);
         this.optimisticStatusSubject = new rxjs.BehaviorSubject(undefined);
         this.mediaStreamSubject = new rxjs.BehaviorSubject(undefined);
@@ -11453,43 +11568,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 rxjs.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(rxjs.shareReplay(1));
         /**
          * Gets the current value of an observable, or undefined if the observable has
          * not emitted a value yet.
@@ -11509,6 +11587,9 @@ class InputMediaDeviceManagerState {
          * @return the updated value.
          */
         this.setCurrentValue = setCurrentValue;
+        this.hasBrowserPermission$ = permission
+            ? permission.asObservable().pipe(rxjs.shareReplay(1))
+            : rxjs.of(true);
     }
     /**
      * The device status
@@ -11588,10 +11669,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 rxjs.BehaviorSubject(undefined);
         this.direction$ = this.directionSubject
             .asObservable()
@@ -11722,10 +11800,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 rxjs.BehaviorSubject(false);
         this.speakingWhileMuted$ = this.speakingWhileMutedSubject
             .asObservable()
@@ -15428,7 +15503,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "1.4.1" ;
+            const version = "1.4.3" ;
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };
@@ -15960,6 +16035,7 @@ exports.descending = descending;
 exports.deviceIds$ = deviceIds$;
 exports.disposeOfMediaStream = disposeOfMediaStream;
 exports.dominantSpeaker = dominantSpeaker;
+exports.getAudioBrowserPermission = getAudioBrowserPermission;
 exports.getAudioDevices = getAudioDevices;
 exports.getAudioOutputDevices = getAudioOutputDevices;
 exports.getAudioStream = getAudioStream;
@@ -15969,6 +16045,7 @@ exports.getLogger = getLogger;
 exports.getOSInfo = getOSInfo;
 exports.getScreenShareStream = getScreenShareStream;
 exports.getSdkInfo = getSdkInfo;
+exports.getVideoBrowserPermission = getVideoBrowserPermission;
 exports.getVideoDevices = getVideoDevices;
 exports.getVideoStream = getVideoStream;
 exports.getWebRTCInfo = getWebRTCInfo;