@stream-io/video-client 0.2.3 → 0.3.1

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,
@@ -105,11 +109,15 @@ import {
   CallEventHandler,
   CallEventTypes,
   EventHandler,
+  EventTypes,
   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`.
@@ -146,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.
    */
@@ -174,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;
@@ -200,7 +218,6 @@ export class Call {
     type,
     id,
     streamClient,
-    metadata,
     members,
     ownCapabilities,
     sortParticipantsBy,
@@ -225,13 +242,17 @@ export class Call {
       this.state.setSortParticipantsBy(participantSorter);
     }
 
-    this.state.setMetadata(metadata);
     this.state.setMembers(members || []);
     this.state.setOwnCapabilities(ownCapabilities || []);
     this.state.setCallingState(
       ringing ? CallingState.RINGING : CallingState.IDLE,
     );
 
+    this.on('all', (event) => {
+      // update state with the latest event data
+      this.state.updateFromEvent(event);
+    });
+
     this.leaveCallHooks.push(
       registerEventHandlers(this, this.state, this.dispatcher),
     );
@@ -246,14 +267,17 @@ export class Call {
         (subscriptions) => this.sfuClient?.updateSubscriptions(subscriptions),
       ),
     );
+
+    this.camera = new CameraManager(this);
+    this.microphone = new MicrophoneManager(this);
   }
 
   private registerEffects() {
     this.leaveCallHooks.push(
-      // handles updating the permissions context when the metadata changes.
-      createSubscription(this.state.metadata$, (metadata) => {
-        if (!metadata) return;
-        this.permissionsContext.setCallSettings(metadata.settings);
+      // handles updating the permissions context when the settings change.
+      createSubscription(this.state.settings$, (settings) => {
+        if (!settings) return;
+        this.permissionsContext.setCallSettings(settings);
       }),
 
       // handle the case when the user permissions are modified.
@@ -284,13 +308,10 @@ export class Call {
       }),
 
       // handles the case when the user is blocked by the call owner.
-      createSubscription(this.state.metadata$, async (metadata) => {
-        if (!metadata) return;
+      createSubscription(this.state.blockedUserIds$, async (blockedUserIds) => {
+        if (!blockedUserIds) return;
         const currentUserId = this.currentUserId;
-        if (
-          currentUserId &&
-          metadata.blocked_user_ids.includes(currentUserId)
-        ) {
+        if (currentUserId && blockedUserIds.includes(currentUserId)) {
           this.logger('info', 'Leaving call because of being blocked');
           await this.leave();
         }
@@ -329,9 +350,9 @@ export class Call {
    * @returns a function which can be called to unsubscribe from the given event(s)
    */
   on(eventName: SfuEventKinds, fn: SfuEventListener): () => void;
-  on(eventName: CallEventTypes, fn: CallEventHandler): () => void;
+  on(eventName: EventTypes, fn: CallEventHandler): () => void;
   on(
-    eventName: SfuEventKinds | CallEventTypes,
+    eventName: SfuEventKinds | EventTypes,
     fn: SfuEventListener | CallEventHandler,
   ) {
     if (isSfuEvent(eventName)) {
@@ -420,13 +441,6 @@ export class Call {
     this.state.setCallingState(CallingState.LEFT);
   };
 
-  /**
-   * A getter for the call metadata.
-   */
-  get data() {
-    return this.state.metadata;
-  }
-
   /**
    * A flag indicating whether the call is "ringing" type of call.
    */
@@ -445,7 +459,7 @@ export class Call {
    * A flag indicating whether the call was created by the current user.
    */
   get isCreatedByMe() {
-    return this.state.metadata?.created_by.id === this.currentUserId;
+    return this.state.createdBy?.id === this.currentUserId;
   }
 
   /**
@@ -469,7 +483,7 @@ export class Call {
       this.ringingSubject.next(true);
     }
 
-    this.state.setMetadata(response.call);
+    this.state.updateFromCallResponse(response.call);
     this.state.setMembers(response.members);
     this.state.setOwnCapabilities(response.own_capabilities);
 
@@ -496,7 +510,7 @@ export class Call {
       this.ringingSubject.next(true);
     }
 
-    this.state.setMetadata(response.call);
+    this.state.updateFromCallResponse(response.call);
     this.state.setMembers(response.members);
     this.state.setOwnCapabilities(response.own_capabilities);
 
@@ -598,7 +612,7 @@ export class Call {
     let connectionConfig: RTCConfiguration | undefined;
     try {
       const call = await join(this.streamClient, this.type, this.id, data);
-      this.state.setMetadata(call.metadata);
+      this.state.updateFromCallResponse(call.metadata);
       this.state.setMembers(call.members);
       this.state.setOwnCapabilities(call.ownCapabilities);
       connectionConfig = call.connectionConfig;
@@ -815,7 +829,7 @@ export class Call {
       });
     }
 
-    const audioSettings = this.data?.settings.audio;
+    const audioSettings = this.state.settings?.audio;
     const isDtxEnabled = !!audioSettings?.opus_dtx_enabled;
     const isRedEnabled = !!audioSettings?.redundant_coding_enabled;
 
@@ -910,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.
@@ -1196,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;
@@ -1210,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;
@@ -1516,7 +1540,7 @@ export class Call {
     >(`${this.streamClientBasePath}`, updates);
 
     const { call, members, own_capabilities } = response;
-    this.state.setMetadata(call);
+    this.state.updateFromCallResponse(call);
     this.state.setMembers(members);
     this.state.setOwnCapabilities(own_capabilities);
 
@@ -1617,23 +1641,23 @@ export class Call {
 
   private scheduleAutoDrop = () => {
     if (this.dropTimeout) clearTimeout(this.dropTimeout);
-    const subscription = this.state.metadata$
+    const subscription = this.state.settings$
       .pipe(
         pairwise(),
-        tap(([prevMeta, currentMeta]) => {
-          if (!(currentMeta && this.clientStore.connectedUser)) return;
+        tap(([prevSettings, currentSettings]) => {
+          if (!currentSettings || !this.clientStore.connectedUser) return;
 
           const isOutgoingCall =
-            this.currentUserId === currentMeta.created_by.id;
+            this.currentUserId === this.state.createdBy?.id;
 
           const [prevTimeoutMs, timeoutMs] = isOutgoingCall
             ? [
-                prevMeta?.settings.ring.auto_cancel_timeout_ms,
-                currentMeta.settings.ring.auto_cancel_timeout_ms,
+                prevSettings?.ring.auto_cancel_timeout_ms,
+                currentSettings.ring.auto_cancel_timeout_ms,
               ]
             : [
-                prevMeta?.settings.ring.incoming_call_timeout_ms,
-                currentMeta.settings.ring.incoming_call_timeout_ms,
+                prevSettings?.ring.incoming_call_timeout_ms,
+                currentSettings.ring.incoming_call_timeout_ms,
               ];
           if (
             typeof timeoutMs === 'undefined' ||
@@ -1658,7 +1682,6 @@ export class Call {
 
   /**
    * Retrieves the list of recordings for the current call or call session.
-   * Updates the call state with the returned array of CallRecording objects.
    *
    * If `callSessionId` is provided, it will return the recordings for that call session.
    * Otherwise, all recordings for the current call will be returned.
@@ -1672,13 +1695,9 @@ export class Call {
     if (callSessionId) {
       endpoint = `${endpoint}/${callSessionId}`;
     }
-    const response = await this.streamClient.get<ListRecordingsResponse>(
+    return this.streamClient.get<ListRecordingsResponse>(
       `${endpoint}/recordings`,
     );
-
-    this.state.setCallRecordingsList(response.recordings);
-
-    return response;
   };
 
   /**
@@ -1692,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/StreamVideoClient.ts

@@ -217,16 +217,15 @@ export class StreamVideoClient {
         }
 
         this.logger('info', `New call created and registered: ${call.cid}`);
-        this.writeableStateStore.registerCall(
-          new Call({
-            streamClient: this.streamClient,
-            type: call.type,
-            id: call.id,
-            metadata: call,
-            members,
-            clientStore: this.writeableStateStore,
-          }),
-        );
+        const newCall = new Call({
+          streamClient: this.streamClient,
+          type: call.type,
+          id: call.id,
+          members,
+          clientStore: this.writeableStateStore,
+        });
+        newCall.state.updateFromCallResponse(call);
+        this.writeableStateStore.registerCall(newCall);
       }),
     );
 
@@ -246,7 +245,6 @@ export class StreamVideoClient {
         // if `call.created` was received before `call.ring`.
         // In that case, we cleanup the already tracked call.
         const prevCall = this.writeableStateStore.findCall(call.type, call.id);
-        const prevMetadata = prevCall?.state.metadata;
         await prevCall?.leave();
         // we create a new call
         const theCall = new Call({
@@ -256,8 +254,8 @@ export class StreamVideoClient {
           members,
           clientStore: this.writeableStateStore,
           ringing: true,
-          metadata: prevMetadata,
         });
+        theCall.state.updateFromCallResponse(call);
         // we fetch the latest metadata for the call from the server
         await theCall.get();
         this.writeableStateStore.registerCall(theCall);
@@ -357,12 +355,12 @@ export class StreamVideoClient {
         streamClient: this.streamClient,
         id: c.call.id,
         type: c.call.type,
-        metadata: c.call,
         members: c.members,
         ownCapabilities: c.own_capabilities,
         watching: data.watch,
         clientStore: this.writeableStateStore,
       });
+      call.state.updateFromCallResponse(c.call);
       if (data.watch) {
         this.writeableStateStore.registerCall(call);
       }
@@ -374,10 +372,9 @@ export class StreamVideoClient {
     };
   };
 
-  queryUsers = async () => {
-    console.log('Querying users is not implemented yet.');
-  };
-
+  /**
+   * Returns a list of available data centers available for hosting calls.
+   */
   edges = async () => {
     return this.streamClient.get<GetEdgesResponse>(`/edges`);
   };

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;
+  }
+}

package/src/devices/InputMediaDeviceManager.ts

@@ -0,0 +1,121 @@
+import { Observable } from 'rxjs';
+import { Call } from '../Call';
+import { CallingState } from '../store';
+import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
+import { disposeOfMediaStream } from './devices';
+import { isReactNative } from '../helpers/platforms';
+
+export abstract class InputMediaDeviceManager<
+  T extends InputMediaDeviceManagerState,
+> {
+  constructor(protected readonly call: Call, public readonly 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() {
+    return this.getDevices();
+  }
+
+  /**
+   * Starts camera/microphone
+   */
+  async enable() {
+    if (this.state.status === 'enabled') {
+      return;
+    }
+    await this.startStream();
+    this.state.setStatus('enabled');
+  }
+
+  /**
+   * Stops camera/microphone
+   * @returns
+   */
+  async disable() {
+    if (this.state.status === 'disabled') {
+      return;
+    }
+    await this.stopStream();
+    this.state.setStatus('disabled');
+  }
+
+  /**
+   * If current device statis is disabled, it will enable the device, else it will disable it.
+   * @returns
+   */
+  async toggle() {
+    if (this.state.status === 'enabled') {
+      return this.disable();
+    } else {
+      return this.enable();
+    }
+  }
+
+  /**
+   * Select device
+   *
+   * Note: this method is not supported in React Native
+   *
+   * @param deviceId
+   */
+  async select(deviceId: string | undefined) {
+    if (isReactNative()) {
+      throw new Error('This method is not supported in React Native');
+    }
+    if (deviceId === this.state.selectedDevice) {
+      return;
+    }
+    this.state.setDevice(deviceId);
+    await this.applySettingsToStream();
+  }
+
+  protected async applySettingsToStream() {
+    if (this.state.status === 'enabled') {
+      await this.stopStream();
+      await this.startStream();
+    }
+  }
+
+  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 async stopStream() {
+    if (!this.state.mediaStream) {
+      return;
+    }
+    if (this.call.state.callingState === CallingState.JOINED) {
+      await this.stopPublishStream();
+    } else if (this.state.mediaStream) {
+      disposeOfMediaStream(this.state.mediaStream);
+    }
+    this.state.setMediaStream(undefined);
+  }
+
+  private async startStream() {
+    if (this.state.mediaStream) {
+      return;
+    }
+    const constraints = { deviceId: this.state.selectedDevice };
+    const stream = await this.getStream(constraints);
+    if (this.call.state.callingState === CallingState.JOINED) {
+      await this.publishStream(stream);
+    }
+    this.state.setMediaStream(stream);
+  }
+}