@stream-io/video-client 0.4.6 → 0.4.7

package/dist/src/devices/InputMediaDeviceManager.d.ts

@@ -51,11 +51,10 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
      */
     setDefaultConstraints(constraints: C): void;
     /**
-     * Select device
+     * Selects a device.
      *
      * Note: this method is not supported in React Native
-     *
-     * @param deviceId
+     * @param deviceId the device id to select.
      */
     select(deviceId: string | undefined): Promise<void>;
     removeSubscriptions: () => void;

package/dist/src/devices/InputMediaDeviceManagerState.d.ts

@@ -1,8 +1,9 @@
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { RxUtils } from '../store';
 export type InputDeviceStatus = 'enabled' | 'disabled' | undefined;
 export declare abstract class InputMediaDeviceManagerState<C = MediaTrackConstraints> {
     readonly disableMode: 'stop-tracks' | 'disable-tracks';
+    private readonly permissionName;
     protected statusSubject: BehaviorSubject<InputDeviceStatus>;
     protected mediaStreamSubject: BehaviorSubject<MediaStream | undefined>;
     protected selectedDeviceSubject: BehaviorSubject<string | undefined>;
@@ -15,20 +16,32 @@ export declare abstract class InputMediaDeviceManagerState<C = MediaTrackConstra
      * An Observable that emits the current media stream, or `undefined` if the device is currently disabled.
      *
      */
-    mediaStream$: import("rxjs").Observable<MediaStream | undefined>;
+    mediaStream$: Observable<MediaStream | undefined>;
     /**
      * An Observable that emits the currently selected device
      */
-    selectedDevice$: import("rxjs").Observable<string | undefined>;
+    selectedDevice$: Observable<string | undefined>;
     /**
      * An Observable that emits the device status
      */
-    status$: import("rxjs").Observable<InputDeviceStatus>;
+    status$: Observable<InputDeviceStatus>;
     /**
      * The default constraints for the device.
      */
-    defaultConstraints$: import("rxjs").Observable<C | undefined>;
-    constructor(disableMode?: 'stop-tracks' | 'disable-tracks');
+    defaultConstraints$: Observable<C | undefined>;
+    /**
+     * An observable that will emit `true` if browser/system permission
+     * is granted, `false` otherwise.
+     */
+    hasBrowserPermission$: Observable<boolean>;
+    /**
+     * 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' | 'disable-tracks', permissionName?: PermissionName | undefined);
     /**
      * The device status
      */
@@ -47,7 +60,7 @@ export declare abstract class InputMediaDeviceManagerState<C = MediaTrackConstra
      *
      * @param observable$ the observable to get the value from.
      */
-    getCurrentValue: <T>(observable$: import("rxjs").Observable<T>) => T;
+    getCurrentValue: <T>(observable$: Observable<T>) => T;
     /**
      * @internal
      * @param status

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "packageManager": "yarn@3.2.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/devices/CameraManagerState.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged, Observable } from 'rxjs';
 import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
 import { isReactNative } from '../helpers/platforms';
 
@@ -15,7 +15,12 @@ export class CameraManagerState extends InputMediaDeviceManagerState {
   direction$: Observable<CameraDirection>;
 
   constructor() {
-    super('stop-tracks');
+    super(
+      'stop-tracks',
+      // `camera` is not in the W3C standard yet,
+      // but it's supported by Chrome and Safari.
+      'camera' as PermissionName,
+    );
     this.direction$ = this.directionSubject
       .asObservable()
       .pipe(distinctUntilChanged());

package/src/devices/InputMediaDeviceManager.ts

@@ -118,11 +118,10 @@ export abstract class InputMediaDeviceManager<
   }
 
   /**
-   * 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: string | undefined) {
     if (isReactNative()) {

package/src/devices/InputMediaDeviceManagerState.ts

@@ -1,4 +1,10 @@
-import { BehaviorSubject, distinctUntilChanged } from 'rxjs';
+import {
+  BehaviorSubject,
+  distinctUntilChanged,
+  Observable,
+  shareReplay,
+} from 'rxjs';
+import { isReactNative } from '../helpers/platforms';
 import { RxUtils } from '../store';
 
 export type InputDeviceStatus = 'enabled' | 'disabled' | undefined;
@@ -43,10 +49,47 @@ export abstract class InputMediaDeviceManagerState<C = MediaTrackConstraints> {
    */
   defaultConstraints$ = this.defaultConstraintsSubject.asObservable();
 
+  /**
+   * An observable that will emit `true` if browser/system permission
+   * is granted, `false` otherwise.
+   */
+  hasBrowserPermission$ = new Observable<boolean>((subscriber) => {
+    const notifyGranted = () => subscriber.next(true);
+    if (isReactNative() || !this.permissionName) return notifyGranted();
+
+    let permissionState: PermissionStatus;
+    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));
+
+  /**
+   * 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(
     public readonly disableMode:
       | 'stop-tracks'
       | 'disable-tracks' = 'stop-tracks',
+    private readonly permissionName: PermissionName | undefined = undefined,
   ) {}
 
   /**

package/src/devices/MicrophoneManagerState.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged, Observable } from 'rxjs';
 import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
 
 export class MicrophoneManagerState extends InputMediaDeviceManagerState {
@@ -12,7 +12,12 @@ export class MicrophoneManagerState extends InputMediaDeviceManagerState {
   speakingWhileMuted$: Observable<boolean>;
 
   constructor() {
-    super('disable-tracks');
+    super(
+      'disable-tracks',
+      // `microphone` is not in the W3C standard yet,
+      // but it's supported by Chrome and Safari.
+      'microphone' as PermissionName,
+    );
 
     this.speakingWhileMuted$ = this.speakingWhileMutedSubject
       .asObservable()

package/src/devices/__tests__/InputMediaDeviceManager.test.ts

@@ -44,7 +44,14 @@ class TestInputMediaDeviceManager extends InputMediaDeviceManager<TestInputMedia
   public getTracks = () => this.state.mediaStream?.getTracks() ?? [];
 
   constructor(call: Call) {
-    super(call, new TestInputMediaDeviceManagerState(), TrackType.VIDEO);
+    super(
+      call,
+      new TestInputMediaDeviceManagerState(
+        'stop-tracks',
+        'camera' as PermissionName,
+      ),
+      TrackType.VIDEO,
+    );
   }
 }
 

package/src/devices/__tests__/InputMediaDeviceManagerState.test.ts

@@ -0,0 +1,88 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { InputMediaDeviceManagerState } from '../InputMediaDeviceManagerState';
+
+class TestInputMediaDeviceManagerState extends InputMediaDeviceManagerState {
+  constructor() {
+    super('stop-tracks', 'camera' as PermissionName);
+  }
+
+  getDeviceIdFromStream = vi.fn();
+}
+
+describe('InputMediaDeviceManagerState', () => {
+  let state: InputMediaDeviceManagerState;
+
+  beforeEach(() => {
+    state = new TestInputMediaDeviceManagerState();
+  });
+
+  describe('hasBrowserPermission', () => {
+    it('should emit true when permission is granted', async () => {
+      const permissionStatus: Partial<PermissionStatus> = {
+        state: 'granted',
+        addEventListener: vi.fn(),
+      };
+      const query = vi.fn(() => Promise.resolve(permissionStatus));
+      globalThis.navigator ??= {} as Navigator;
+      // @ts-ignore - navigator is readonly, but we need to mock it
+      globalThis.navigator.permissions = { query };
+
+      const hasPermission = await new Promise((resolve) => {
+        state.hasBrowserPermission$.subscribe((v) => resolve(v));
+      });
+      expect(hasPermission).toBe(true);
+      expect(query).toHaveBeenCalledWith({ name: 'camera' });
+      expect(permissionStatus.addEventListener).toHaveBeenCalled();
+    });
+
+    it(' should emit false when permission is denied', async () => {
+      const permissionStatus: Partial<PermissionStatus> = {
+        state: 'denied',
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+      };
+      const query = vi.fn(() => Promise.resolve(permissionStatus));
+      globalThis.navigator ??= {} as Navigator;
+      // @ts-ignore - navigator is readonly, but we need to mock it
+      globalThis.navigator.permissions = { query };
+
+      const hasPermission = await new Promise((resolve) => {
+        state.hasBrowserPermission$.subscribe((v) => resolve(v));
+      });
+      expect(hasPermission).toBe(false);
+      expect(query).toHaveBeenCalledWith({ name: 'camera' });
+      expect(permissionStatus.addEventListener).toHaveBeenCalled();
+    });
+
+    it('should emit false when prompt is needed', async () => {
+      const permissionStatus: Partial<PermissionStatus> = {
+        state: 'prompt',
+        addEventListener: vi.fn(),
+      };
+      const query = vi.fn(() => Promise.resolve(permissionStatus));
+      globalThis.navigator ??= {} as Navigator;
+      // @ts-ignore - navigator is readonly, but we need to mock it
+      globalThis.navigator.permissions = { query };
+
+      const hasPermission = await new Promise((resolve) => {
+        state.hasBrowserPermission$.subscribe((v) => resolve(v));
+      });
+      expect(hasPermission).toBe(false);
+      expect(query).toHaveBeenCalledWith({ name: 'camera' });
+      expect(permissionStatus.addEventListener).toHaveBeenCalled();
+    });
+
+    it('should emit true when permissions cannot be queried', async () => {
+      const query = vi.fn(() => Promise.reject());
+      globalThis.navigator ??= {} as Navigator;
+      // @ts-ignore - navigator is readonly, but we need to mock it
+      globalThis.navigator.permissions = { query };
+
+      const hasPermission = await new Promise((resolve) => {
+        state.hasBrowserPermission$.subscribe((v) => resolve(v));
+      });
+      expect(hasPermission).toBe(true);
+      expect(query).toHaveBeenCalledWith({ name: 'camera' });
+    });
+  });
+});