@stream-io/video-client 0.3.0 → 0.3.2

package/dist/src/Call.d.ts

@@ -5,7 +5,10 @@ import { AcceptCallResponse, BlockUserResponse, EndCallResponse, GetCallResponse
 import { CallConstructor, CallLeaveOptions, DebounceType, JoinCallData, PublishOptions, SubscriptionChanges } from './types';
 import { ViewportTracker } from './helpers/ViewportTracker';
 import { PermissionsContext } from './permissions';
+import { StreamClient } from './coordinator/connection/client';
 import { CallEventHandler, CallEventTypes, EventTypes, Logger } from './coordinator/connection/types';
+import { CameraManager } from './devices/CameraManager';
+import { MicrophoneManager } from './devices/MicrophoneManager';
 /**
  * An object representation of a `Call`.
  */
@@ -35,6 +38,14 @@ export declare class Call {
      * updates from the backend.
      */
     watching: boolean;
+    /**
+     * Device manager for the camera
+     */
+    readonly camera: CameraManager;
+    /**
+     * Device manager for the microhpone
+     */
+    readonly microphone: MicrophoneManager;
     /**
      * Flag telling whether this call is a "ringing" call.
      */
@@ -55,7 +66,7 @@ export declare class Call {
     private statsReporter?;
     private dropTimeout;
     private readonly clientStore;
-    private readonly streamClient;
+    readonly streamClient: StreamClient;
     private sfuClient?;
     private reconnectAttempts;
     private maxReconnectAttempts;
@@ -249,6 +260,8 @@ export declare class Call {
      *
      *
      * @param deviceId the selected device, pass `undefined` to clear the device selection
+     *
+     * @deprecated use call.microphone.select
      */
     setAudioDevice: (deviceId?: string) => void;
     /**
@@ -257,6 +270,8 @@ export declare class Call {
      * This method only stores the selection, if you want to start publishing a media stream call the [`publishVideoStream` method](#publishvideostream) that will set `videoDeviceId` as well.
      *
      * @param deviceId the selected device, pass `undefined` to clear the device selection
+     *
+     * @deprecated use call.camera.select
      */
     setVideoDevice: (deviceId?: string) => void;
     /**
@@ -459,4 +474,6 @@ export declare class Call {
     sendCustomEvent: (payload: {
         [key: string]: any;
     }) => Promise<SendEventResponse>;
+    private initCamera;
+    private initMic;
 }

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

@@ -0,0 +1,31 @@
+import { Observable } from 'rxjs';
+import { Call } from '../Call';
+import { CameraDirection, CameraManagerState } from './CameraManagerState';
+import { InputMediaDeviceManager } from './InputMediaDeviceManager';
+export declare class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
+    constructor(call: Call);
+    /**
+     * Select the camera direaction
+     * @param direction
+     */
+    selectDirection(direction: Exclude<CameraDirection, undefined>): Promise<void>;
+    /**
+     * Flips the camera direction: if it's front it will change to back, if it's back, it will change to front.
+     *
+     * Note: if there is no available camera with the desired direction, this method will do nothing.
+     * @returns
+     */
+    flip(): Promise<void>;
+    protected getDevices(): Observable<MediaDeviceInfo[]>;
+    protected getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
+    protected publishStream(stream: MediaStream): Promise<void>;
+    protected stopPublishStream(): Promise<void>;
+    /**
+     * Disables the video tracks of the camera
+     */
+    pause(): void;
+    /**
+     * (Re)enables the video tracks of the camera
+     */
+    resume(): void;
+}

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

@@ -0,0 +1,28 @@
+import { Observable } from 'rxjs';
+import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
+export type CameraDirection = 'front' | 'back' | undefined;
+export declare class CameraManagerState extends InputMediaDeviceManagerState {
+    private directionSubject;
+    /**
+     * Observable that emits the preferred camera direction
+     * front - means the camera facing the user
+     * back - means the camera facing the environment
+     */
+    direction$: Observable<CameraDirection>;
+    constructor();
+    /**
+     * The preferred camera direction
+     * front - means the camera facing the user
+     * back - means the camera facing the environment
+     */
+    get direction(): CameraDirection;
+    /**
+     * @internal
+     */
+    setDirection(direction: CameraDirection): void;
+    /**
+     * @internal
+     */
+    setMediaStream(stream: MediaStream | undefined): void;
+    protected getDeviceIdFromStream(stream: MediaStream): string | undefined;
+}

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

@@ -0,0 +1,47 @@
+import { Observable } from 'rxjs';
+import { Call } from '../Call';
+import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
+export declare abstract class InputMediaDeviceManager<T extends InputMediaDeviceManagerState> {
+    protected readonly call: Call;
+    readonly state: T;
+    constructor(call: Call, state: T);
+    /**
+     * Lists the available audio/video devices
+     *
+     * Note: It prompts the user for a permission to use devices (if not already granted)
+     *
+     * @returns an Observable that will be updated if a device is connected or disconnected
+     */
+    listDevices(): Observable<MediaDeviceInfo[]>;
+    /**
+     * Starts camera/microphone
+     */
+    enable(): Promise<void>;
+    /**
+     * Stops camera/microphone
+     * @returns
+     */
+    disable(): Promise<void>;
+    /**
+     * If current device statis is disabled, it will enable the device, else it will disable it.
+     * @returns
+     */
+    toggle(): Promise<void>;
+    /**
+     * Select device
+     *
+     * Note: this method is not supported in React Native
+     *
+     * @param deviceId
+     */
+    select(deviceId: string | undefined): Promise<void>;
+    protected applySettingsToStream(): Promise<void>;
+    abstract pause(): void;
+    abstract resume(): void;
+    protected abstract getDevices(): Observable<MediaDeviceInfo[]>;
+    protected abstract getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
+    protected abstract publishStream(stream: MediaStream): Promise<void>;
+    protected abstract stopPublishStream(): Promise<void>;
+    private stopStream;
+    private startStream;
+}

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

@@ -0,0 +1,69 @@
+import { BehaviorSubject, Observable } from 'rxjs';
+import { RxUtils } from '../store';
+export type InputDeviceStatus = 'enabled' | 'disabled' | undefined;
+export declare abstract class InputMediaDeviceManagerState {
+    protected statusSubject: BehaviorSubject<InputDeviceStatus>;
+    protected mediaStreamSubject: BehaviorSubject<MediaStream | undefined>;
+    protected selectedDeviceSubject: BehaviorSubject<string | undefined>;
+    /**
+     * An Observable that emits the current media stream, or `undefined` if the device is currently disabled.
+     *
+     */
+    mediaStream$: Observable<MediaStream | undefined>;
+    /**
+     * An Observable that emits the currently selected device
+     */
+    selectedDevice$: Observable<string | undefined>;
+    /**
+     * An Observable that emits the device status
+     */
+    status$: Observable<InputDeviceStatus>;
+    constructor();
+    /**
+     * The device status
+     */
+    get status(): InputDeviceStatus;
+    /**
+     * The currently selected device
+     */
+    get selectedDevice(): string | undefined;
+    /**
+     * The current media stream, or `undefined` if the device is currently disabled.
+     */
+    get mediaStream(): MediaStream | undefined;
+    /**
+     * Gets the current value of an observable, or undefined if the observable has
+     * not emitted a value yet.
+     *
+     * @param observable$ the observable to get the value from.
+     */
+    getCurrentValue: <T>(observable$: Observable<T>) => T;
+    /**
+     * @internal
+     * @param status
+     */
+    setStatus(status: InputDeviceStatus): void;
+    /**
+     * @internal
+     * @param stream
+     */
+    setMediaStream(stream: MediaStream | undefined): void;
+    /**
+     * @internal
+     * @param stream
+     */
+    setDevice(deviceId: string | undefined): void;
+    /**
+     * Updates the value of the provided Subject.
+     * An `update` can either be a new value or a function which takes
+     * the current value and returns a new value.
+     *
+     * @internal
+     *
+     * @param subject the subject to update.
+     * @param update the update to apply to the subject.
+     * @return the updated value.
+     */
+    protected setCurrentValue: <T>(subject: import("rxjs").Subject<T>, update: RxUtils.Patch<T>) => T;
+    protected abstract getDeviceIdFromStream(stream: MediaStream): string | undefined;
+}

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

@@ -0,0 +1,19 @@
+import { Observable } from 'rxjs';
+import { Call } from '../Call';
+import { InputMediaDeviceManager } from './InputMediaDeviceManager';
+import { MicrophoneManagerState } from './MicrophoneManagerState';
+export declare class MicrophoneManager extends InputMediaDeviceManager<MicrophoneManagerState> {
+    constructor(call: Call);
+    protected getDevices(): Observable<MediaDeviceInfo[]>;
+    protected getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
+    protected publishStream(stream: MediaStream): Promise<void>;
+    protected stopPublishStream(): Promise<void>;
+    /**
+     * Disables the audio tracks of the microphone
+     */
+    pause(): void;
+    /**
+     * (Re)enables the audio tracks of the microphone
+     */
+    resume(): void;
+}

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

@@ -0,0 +1,4 @@
+import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
+export declare class MicrophoneManagerState extends InputMediaDeviceManagerState {
+    protected getDeviceIdFromStream(stream: MediaStream): string | undefined;
+}

package/dist/src/devices/__tests__/CameraManager.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/src/devices/__tests__/MicrophoneManager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/devices/__tests__/mocks.d.ts

@@ -0,0 +1,13 @@
+import { CallingState } from '../../store';
+export declare const mockVideoDevices: MediaDeviceInfo[];
+export declare const mockAudioDevices: MediaDeviceInfo[];
+export declare const mockCall: () => {
+    state: {
+        callingState: CallingState;
+    };
+    publishVideoStream: import("@vitest/spy").Mock<any, any>;
+    publishAudioStream: import("@vitest/spy").Mock<any, any>;
+    stopPublish: import("@vitest/spy").Mock<any, any>;
+};
+export declare const mockAudioStream: () => MediaStream;
+export declare const mockVideoStream: () => MediaStream;

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

@@ -1 +1,7 @@
 export * from './devices';
+export * from './InputMediaDeviceManager';
+export * from './InputMediaDeviceManagerState';
+export * from './CameraManager';
+export * from './CameraManagerState';
+export * from './MicrophoneManager';
+export * from './MicrophoneManagerState';

package/dist/src/types.d.ts

@@ -65,10 +65,14 @@ export interface StreamVideoParticipant extends Participant {
 export interface StreamVideoLocalParticipant extends StreamVideoParticipant {
     /**
      * The device ID of the currently selected audio input device of the local participant (returned by the [MediaDevices API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia))
+     *
+     * @deprecated use call.microphone.state.selectedDevice
      */
     audioDeviceId?: string;
     /**
      * The device ID of the currently selected video input device of the local participant (returned by the [MediaDevices API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia))
+     *
+     * @deprecated use call.camera.state.selectedDevice
      */
     videoDeviceId?: string;
     /**

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.0";
+export declare const version = "0.3.2";

package/package.json

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

package/src/Call.ts

@@ -9,7 +9,11 @@ import {
   Subscriber,
 } from './rtc';
 import { muteTypeToTrackType } from './rtc/helpers/tracks';
-import { GoAwayReason, TrackType } from './gen/video/sfu/models/models';
+import {
+  GoAwayReason,
+  SdkType,
+  TrackType,
+} from './gen/video/sfu/models/models';
 import {
   registerEventHandlers,
   registerRingingCallEventHandlers,
@@ -109,8 +113,11 @@ import {
   Logger,
   StreamCallEvent,
 } from './coordinator/connection/types';
-import { getClientDetails } from './client-details';
+import { getClientDetails, getSdkInfo } from './client-details';
 import { getLogger } from './logger';
+import { CameraManager } from './devices/CameraManager';
+import { MicrophoneManager } from './devices/MicrophoneManager';
+import { CameraDirection } from './devices/CameraManagerState';
 
 /**
  * An object representation of a `Call`.
@@ -147,6 +154,16 @@ export class Call {
    */
   watching: boolean;
 
+  /**
+   * Device manager for the camera
+   */
+  readonly camera: CameraManager;
+
+  /**
+   * Device manager for the microhpone
+   */
+  readonly microphone: MicrophoneManager;
+
   /**
    * Flag telling whether this call is a "ringing" call.
    */
@@ -175,7 +192,7 @@ export class Call {
   private dropTimeout: ReturnType<typeof setTimeout> | undefined;
 
   private readonly clientStore: StreamVideoWriteableStateStore;
-  private readonly streamClient: StreamClient;
+  public readonly streamClient: StreamClient;
   private sfuClient?: StreamSfuClient;
   private reconnectAttempts = 0;
   private maxReconnectAttempts = 10;
@@ -250,6 +267,9 @@ export class Call {
         (subscriptions) => this.sfuClient?.updateSubscriptions(subscriptions),
       ),
     );
+
+    this.camera = new CameraManager(this);
+    this.microphone = new MicrophoneManager(this);
   }
 
   private registerEffects() {
@@ -904,6 +924,12 @@ export class Call {
       this.reconnectAttempts = 0; // reset the reconnect attempts counter
       this.state.setCallingState(CallingState.JOINED);
 
+      // React uses a different device management for now
+      if (getSdkInfo()?.type !== SdkType.REACT) {
+        this.initCamera();
+        this.initMic();
+      }
+
       // 3. once we have the "joinResponse", and possibly reconciled the local state
       // we schedule a fast subscription update for all remote participants
       // that were visible before we reconnected or migrated to a new SFU.
@@ -1190,6 +1216,8 @@ export class Call {
    *
    *
    * @param deviceId the selected device, pass `undefined` to clear the device selection
+   *
+   * @deprecated use call.microphone.select
    */
   setAudioDevice = (deviceId?: string) => {
     if (!this.sfuClient) return;
@@ -1204,6 +1232,8 @@ export class Call {
    * This method only stores the selection, if you want to start publishing a media stream call the [`publishVideoStream` method](#publishvideostream) that will set `videoDeviceId` as well.
    *
    * @param deviceId the selected device, pass `undefined` to clear the device selection
+   *
+   * @deprecated use call.camera.select
    */
   setVideoDevice = (deviceId?: string) => {
     if (!this.sfuClient) return;
@@ -1681,4 +1711,71 @@ export class Call {
       { custom: payload },
     );
   };
+
+  private initCamera() {
+    if (
+      this.state.localParticipant?.videoStream ||
+      !this.permissionsContext.hasPermission('send-video')
+    ) {
+      return;
+    }
+
+    // Set camera direction if it's not yet set
+    // This will also start publishing if camera is enabled
+    if (!this.camera.state.direction && !this.camera.state.selectedDevice) {
+      let defaultDirection: CameraDirection = 'front';
+      const backendSetting = this.state.settings?.video.camera_facing;
+      if (backendSetting) {
+        defaultDirection = backendSetting === 'front' ? 'front' : 'back';
+      }
+      this.camera.selectDirection(defaultDirection);
+    } else if (this.camera.state.status === 'enabled') {
+      // Publish already started media streams (this is the case if there is a lobby screen before join)
+      // Wait for media stream
+      this.camera.state.mediaStream$
+        .pipe(takeWhile((s) => s === undefined, true))
+        .subscribe((stream) => {
+          if (!this.state.localParticipant?.videoStream) {
+            this.publishVideoStream(stream!);
+          }
+        });
+    }
+
+    // Apply backend config (this is the case if there is no lobby screen before join)
+    if (
+      this.camera.state.status === undefined &&
+      this.state.settings?.video.camera_default_on
+    ) {
+      void this.camera.enable();
+    }
+  }
+
+  private initMic() {
+    if (
+      this.state.localParticipant?.audioStream ||
+      !this.permissionsContext.hasPermission('send-audio')
+    ) {
+      return;
+    }
+
+    // Publish already started media streams (this is the case if there is a lobby screen before join)
+    if (this.microphone.state.status === 'enabled') {
+      // Wait for media stream
+      this.microphone.state.mediaStream$
+        .pipe(takeWhile((s) => s === undefined, true))
+        .subscribe((stream) => {
+          if (!this.state.localParticipant?.audioStream) {
+            this.publishAudioStream(stream!);
+          }
+        });
+    }
+
+    // Apply backend config (this is the case if there is no lobby screen before join)
+    if (
+      this.microphone.state.status === undefined &&
+      this.state.settings?.audio.mic_default_on
+    ) {
+      void this.microphone.enable();
+    }
+  }
 }

package/src/__tests__/StreamVideoClient.test.ts

@@ -7,6 +7,9 @@ import { StreamVideoServerClient } from '../StreamVideoServerClient';
 const apiKey = process.env.STREAM_API_KEY!;
 const secret = process.env.STREAM_SECRET!;
 
+vi.mock('../devices/CameraManager.ts');
+vi.mock('../devices/MicrophoneManager.ts');
+
 const tokenProvider = (userId: string) => {
   const serverClient = new StreamVideoServerClient(apiKey, { secret });
   return async () => {

package/src/devices/CameraManager.ts

@@ -0,0 +1,73 @@
+import { Observable } from 'rxjs';
+import { Call } from '../Call';
+import { CameraDirection, CameraManagerState } from './CameraManagerState';
+import { InputMediaDeviceManager } from './InputMediaDeviceManager';
+import { getVideoDevices, getVideoStream } from './devices';
+import { TrackType } from '../gen/video/sfu/models/models';
+
+export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
+  constructor(call: Call) {
+    super(call, new CameraManagerState());
+  }
+
+  /**
+   * Select the camera direaction
+   * @param direction
+   */
+  async selectDirection(direction: Exclude<CameraDirection, undefined>) {
+    this.state.setDirection(direction);
+    // Providing both device id and direction doesn't work, so we deselect the device
+    this.state.setDevice(undefined);
+    await this.applySettingsToStream();
+  }
+
+  /**
+   * Flips the camera direction: if it's front it will change to back, if it's back, it will change to front.
+   *
+   * Note: if there is no available camera with the desired direction, this method will do nothing.
+   * @returns
+   */
+  async flip() {
+    const newDirection = this.state.direction === 'front' ? 'back' : 'front';
+    this.selectDirection(newDirection);
+  }
+
+  protected getDevices(): Observable<MediaDeviceInfo[]> {
+    return getVideoDevices();
+  }
+  protected getStream(
+    constraints: MediaTrackConstraints,
+  ): Promise<MediaStream> {
+    // We can't set both device id and facing mode
+    // Device id has higher priority
+    if (!constraints.deviceId && this.state.direction) {
+      constraints.facingMode =
+        this.state.direction === 'front' ? 'user' : 'environment';
+    }
+    return getVideoStream(constraints);
+  }
+  protected publishStream(stream: MediaStream): Promise<void> {
+    return this.call.publishVideoStream(stream);
+  }
+  protected stopPublishStream(): Promise<void> {
+    return this.call.stopPublish(TrackType.VIDEO);
+  }
+
+  /**
+   * Disables the video tracks of the camera
+   */
+  pause() {
+    this.state.mediaStream?.getVideoTracks().forEach((track) => {
+      track.enabled = false;
+    });
+  }
+
+  /**
+   * (Re)enables the video tracks of the camera
+   */
+  resume() {
+    this.state.mediaStream?.getVideoTracks().forEach((track) => {
+      track.enabled = true;
+    });
+  }
+}

package/src/devices/CameraManagerState.ts

@@ -0,0 +1,61 @@
+import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
+import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
+import { isReactNative } from '../helpers/platforms';
+
+export type CameraDirection = 'front' | 'back' | undefined;
+
+export class CameraManagerState extends InputMediaDeviceManagerState {
+  private directionSubject = new BehaviorSubject<CameraDirection>(undefined);
+
+  /**
+   * Observable that emits the preferred camera direction
+   * front - means the camera facing the user
+   * back - means the camera facing the environment
+   */
+  direction$: Observable<CameraDirection>;
+
+  constructor() {
+    super();
+    this.direction$ = this.directionSubject
+      .asObservable()
+      .pipe(distinctUntilChanged());
+  }
+
+  /**
+   * The preferred camera direction
+   * front - means the camera facing the user
+   * back - means the camera facing the environment
+   */
+  get direction() {
+    return this.getCurrentValue(this.direction$);
+  }
+
+  /**
+   * @internal
+   */
+  setDirection(direction: CameraDirection) {
+    this.setCurrentValue(this.directionSubject, direction);
+  }
+
+  /**
+   * @internal
+   */
+  setMediaStream(stream: MediaStream | undefined): void {
+    super.setMediaStream(stream);
+    if (stream) {
+      // RN getSettings() doesn't return facingMode, so we don't verify camera direction
+      const direction = isReactNative()
+        ? this.direction
+        : stream.getVideoTracks()[0]?.getSettings().facingMode === 'environment'
+        ? 'back'
+        : 'front';
+      this.setDirection(direction);
+    }
+  }
+
+  protected getDeviceIdFromStream(stream: MediaStream): string | undefined {
+    return stream.getVideoTracks()[0]?.getSettings().deviceId as
+      | string
+      | undefined;
+  }
+}