@stream-io/video-client 0.3.12 → 0.3.14

package/dist/src/Call.d.ts

@@ -7,7 +7,9 @@ import { DynascaleManager } from './helpers/DynascaleManager';
 import { PermissionsContext } from './permissions';
 import { StreamClient } from './coordinator/connection/client';
 import { CallEventHandler, CallEventTypes, EventTypes, Logger } from './coordinator/connection/types';
-import { CameraManager, MicrophoneManager } from './devices';
+import { CameraManager } from './devices/CameraManager';
+import { MicrophoneManager } from './devices/MicrophoneManager';
+import { SpeakerManager } from './devices/SpeakerManager';
 /**
  * An object representation of a `Call`.
  */
@@ -45,6 +47,7 @@ export declare class Call {
      * The DynascaleManager instance.
      */
     readonly dynascaleManager: DynascaleManager;
+    readonly speaker: SpeakerManager;
     /**
      * Flag telling whether this call is a "ringing" call.
      */
@@ -251,6 +254,8 @@ export declare class Call {
      *
      *
      * @param deviceId the selected device, `undefined` means the user wants to use the system's default audio output
+     *
+     * @deprecated use `call.speaker` instead
      */
     setAudioOutputDevice: (deviceId?: string) => void;
     /**

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

@@ -28,6 +28,5 @@ export declare class CameraManager extends InputMediaDeviceManager<CameraManager
     protected getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
     protected publishStream(stream: MediaStream): Promise<void>;
     protected stopPublishStream(stopTracks: boolean): Promise<void>;
-    protected muteTracks(): void;
-    protected unmuteTracks(): void;
+    protected getTrack(): MediaStreamTrack | undefined;
 }

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

@@ -1,9 +1,12 @@
 import { Observable } from 'rxjs';
 import { Call } from '../Call';
 import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
+import { Logger } from '../coordinator/connection/types';
+import { TrackType } from '../gen/video/sfu/models/models';
 export declare abstract class InputMediaDeviceManager<T extends InputMediaDeviceManagerState> {
     protected readonly call: Call;
     readonly state: T;
+    protected readonly trackType: TrackType;
     /**
      * @internal
      */
@@ -12,7 +15,8 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
      * @internal
      */
     disablePromise?: Promise<void>;
-    constructor(call: Call, state: T);
+    logger: Logger;
+    constructor(call: Call, state: T, trackType: TrackType);
     /**
      * Lists the available audio/video devices
      *
@@ -54,8 +58,11 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
     protected abstract getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
     protected abstract publishStream(stream: MediaStream): Promise<void>;
     protected abstract stopPublishStream(stopTracks: boolean): Promise<void>;
-    protected abstract muteTracks(): void;
-    protected abstract unmuteTracks(): void;
+    protected abstract getTrack(): undefined | MediaStreamTrack;
     private muteStream;
+    private muteTrack;
+    private unmuteTrack;
+    private stopTrack;
+    private muteLocalStream;
     private unmuteStream;
 }

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

@@ -8,6 +8,5 @@ export declare class MicrophoneManager extends InputMediaDeviceManager<Microphon
     protected getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
     protected publishStream(stream: MediaStream): Promise<void>;
     protected stopPublishStream(stopTracks: boolean): Promise<void>;
-    protected muteTracks(): void;
-    protected unmuteTracks(): void;
+    protected getTrack(): MediaStreamTrack | undefined;
 }

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

@@ -0,0 +1,28 @@
+import { SpeakerState } from './SpeakerState';
+export declare class SpeakerManager {
+    readonly state: SpeakerState;
+    constructor();
+    /**
+     * Lists the available audio output 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(): import("rxjs").Observable<MediaDeviceInfo[]>;
+    /**
+     * Select device
+     *
+     * Note: this method is not supported in React Native
+     *
+     * @param deviceId empty string means the system default
+     */
+    select(deviceId: string): void;
+    /**
+     * Set the volume of the audio elements
+     * @param volume a number between 0 and 1
+     *
+     * Note: this method is not supported in React Native
+     */
+    setVolume(volume: number): void;
+}

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

@@ -0,0 +1,64 @@
+import { BehaviorSubject, Observable } from 'rxjs';
+import { RxUtils } from '../store';
+export declare class SpeakerState {
+    protected selectedDeviceSubject: BehaviorSubject<string>;
+    protected volumeSubject: BehaviorSubject<number>;
+    /**
+     * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
+     */
+    readonly isDeviceSelectionSupported: boolean;
+    /**
+     * An Observable that emits the currently selected device
+     *
+     * Note: this feature is not supported in React Native
+     */
+    selectedDevice$: Observable<string>;
+    /**
+     * An Observable that emits the currently selected volume
+     *
+     * Note: this feature is not supported in React Native
+     */
+    volume$: Observable<number>;
+    constructor();
+    /**
+     * The currently selected device
+     *
+     * Note: this feature is not supported in React Native
+     */
+    get selectedDevice(): string;
+    /**
+     * The currently selected volume
+     *
+     * Note: this feature is not supported in React Native
+     */
+    get volume(): number;
+    /**
+     * 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 deviceId
+     */
+    setDevice(deviceId: string): void;
+    /**
+     * @internal
+     * @param volume
+     */
+    setVolume(volume: number): 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;
+}

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

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

package/dist/src/rtc/Publisher.d.ts

@@ -85,6 +85,12 @@ export declare class Publisher {
      * @param trackType the track type to check.
      */
     isPublishing: (trackType: TrackType) => boolean;
+    /**
+     * Returns true if the given track type is currently live
+     *
+     * @param trackType the track type to check.
+     */
+    isLive: (trackType: TrackType) => boolean;
     private notifyTrackMuteStateChanged;
     /**
      * Stops publishing all tracks and stop all tracks.

package/dist/src/types.d.ts

@@ -77,6 +77,8 @@ export interface StreamVideoLocalParticipant extends StreamVideoParticipant {
      * The device ID of the currently selected audio output device of the local participant (returned by the [MediaDevices API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia))
      *
      * If the value is not defined, the user hasn't selected any device (in these cases the default system audio output could be used)
+     *
+     * @deprecated use call.speaker.state.selectedDevice
      */
     audioOutputDeviceId?: string;
 }

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.12";
+export declare const version = "0.3.14";

package/package.json

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

package/src/Call.ts

@@ -116,7 +116,10 @@ import {
 } from './coordinator/connection/types';
 import { getClientDetails, getSdkInfo } from './client-details';
 import { getLogger } from './logger';
-import { CameraDirection, CameraManager, MicrophoneManager } from './devices';
+import { CameraManager } from './devices/CameraManager';
+import { MicrophoneManager } from './devices/MicrophoneManager';
+import { CameraDirection } from './devices/CameraManagerState';
+import { SpeakerManager } from './devices/SpeakerManager';
 
 /**
  * An object representation of a `Call`.
@@ -163,6 +166,11 @@ export class Call {
    */
   readonly dynascaleManager = new DynascaleManager(this);
 
+  /*
+   * Device manager for the speaker
+   */
+  readonly speaker: SpeakerManager;
+
   /**
    * Flag telling whether this call is a "ringing" call.
    */
@@ -269,6 +277,38 @@ export class Call {
 
     this.camera = new CameraManager(this);
     this.microphone = new MicrophoneManager(this);
+
+    this.state.localParticipant$.subscribe(async (p) => {
+      // Mute via device manager
+      // If integrator doesn't use device manager, we mute using stopPublish
+      if (
+        !p?.publishedTracks.includes(TrackType.VIDEO) &&
+        this.publisher?.isPublishing(TrackType.VIDEO)
+      ) {
+        this.logger(
+          'info',
+          `Local participant's video track is muted remotely`,
+        );
+        await this.camera.disable();
+        if (this.publisher.isPublishing(TrackType.VIDEO)) {
+          this.stopPublish(TrackType.VIDEO);
+        }
+      }
+      if (
+        !p?.publishedTracks.includes(TrackType.AUDIO) &&
+        this.publisher?.isPublishing(TrackType.AUDIO)
+      ) {
+        this.logger(
+          'info',
+          `Local participant's audio track is muted remotely`,
+        );
+        await this.microphone.disable();
+        if (this.publisher.isPublishing(TrackType.AUDIO)) {
+          this.stopPublish(TrackType.AUDIO);
+        }
+      }
+    });
+    this.speaker = new SpeakerManager();
   }
 
   private registerEffects() {
@@ -300,10 +340,50 @@ export class Call {
           const hasPermission = this.permissionsContext.hasPermission(
             permission as OwnCapability,
           );
-          if (!hasPermission && this.publisher.isPublishing(trackType)) {
-            this.stopPublish(trackType).catch((err) => {
-              this.logger('error', `Error stopping publish ${trackType}`, err);
-            });
+          if (
+            !hasPermission &&
+            (this.publisher.isPublishing(trackType) ||
+              this.publisher.isLive(trackType))
+          ) {
+            // Stop tracks, then notify device manager
+            this.stopPublish(trackType)
+              .catch((err) => {
+                this.logger(
+                  'error',
+                  `Error stopping publish ${trackType}`,
+                  err,
+                );
+              })
+              .then(() => {
+                if (
+                  trackType === TrackType.VIDEO &&
+                  this.camera.state.status === 'enabled'
+                ) {
+                  this.camera
+                    .disable()
+                    .catch((err) =>
+                      this.logger(
+                        'error',
+                        `Error disabling camera after pemission revoked`,
+                        err,
+                      ),
+                    );
+                }
+                if (
+                  trackType === TrackType.AUDIO &&
+                  this.microphone.state.status === 'enabled'
+                ) {
+                  this.microphone
+                    .disable()
+                    .catch((err) =>
+                      this.logger(
+                        'error',
+                        `Error disabling microphone after pemission revoked`,
+                        err,
+                      ),
+                    );
+                }
+              });
           }
         }
       }),
@@ -1103,7 +1183,10 @@ export class Call {
    * @param stopTrack if `true` the track will be stopped, else it will be just disabled
    */
   stopPublish = async (trackType: TrackType, stopTrack: boolean = true) => {
-    this.logger('info', `stopPublish ${TrackType[trackType]}`);
+    this.logger(
+      'info',
+      `stopPublish ${TrackType[trackType]}, stop tracks: ${stopTrack}`,
+    );
     await this.publisher?.unpublishStream(trackType, stopTrack);
   };
 
@@ -1230,6 +1313,8 @@ export class Call {
    *
    *
    * @param deviceId the selected device, `undefined` means the user wants to use the system's default audio output
+   *
+   * @deprecated use `call.speaker` instead
    */
   setAudioOutputDevice = (deviceId?: string) => {
     if (!this.sfuClient) return;

package/src/StreamSfuClient.ts

@@ -396,5 +396,9 @@ const retryable = async <I extends object, O extends SfuResponseWithError>(
     retryAttempt < MAX_RETRIES
   );
 
+  if (rpcCallResult.response.error) {
+    throw rpcCallResult.response.error;
+  }
+
   return rpcCallResult;
 };

package/src/coordinator/connection/location.ts

@@ -5,7 +5,7 @@ const HINT_URL = `https://hint.stream-io-video.com/`;
 
 export const getLocationHint = async (
   hintUrl: string = HINT_URL,
-  timeout: number = 1500,
+  timeout: number = 2000,
 ) => {
   const abortController = new AbortController();
   const timeoutId = setTimeout(() => abortController.abort(), timeout);
@@ -18,7 +18,7 @@ export const getLocationHint = async (
     logger('debug', `Location header: ${awsPop}`);
     return awsPop.substring(0, 3); // AMS1-P2 -> AMS
   } catch (e) {
-    logger('error', `Failed to get location hint from ${HINT_URL}`, e);
+    logger('warn', `Failed to get location hint from ${HINT_URL}`, e);
     return 'ERR';
   } finally {
     clearTimeout(timeoutId);

package/src/devices/CameraManager.ts

@@ -12,7 +12,7 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
   };
 
   constructor(call: Call) {
-    super(call, new CameraManagerState());
+    super(call, new CameraManagerState(), TrackType.VIDEO);
   }
 
   /**
@@ -59,6 +59,10 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
         height !== this.targetResolution.height
       )
         await this.applySettingsToStream();
+      this.logger(
+        'debug',
+        `${width}x${height} target resolution applied to media stream`,
+      );
     }
   }
 
@@ -85,12 +89,7 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
     return this.call.stopPublish(TrackType.VIDEO, stopTracks);
   }
 
-  protected muteTracks(): void {
-    this.state.mediaStream
-      ?.getVideoTracks()
-      .forEach((t) => (t.enabled = false));
-  }
-  protected unmuteTracks(): void {
-    this.state.mediaStream?.getVideoTracks().forEach((t) => (t.enabled = true));
+  protected getTrack() {
+    return this.state.mediaStream?.getVideoTracks()[0];
   }
 }

package/src/devices/InputMediaDeviceManager.ts

@@ -2,8 +2,10 @@ 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';
+import { Logger } from '../coordinator/connection/types';
+import { getLogger } from '../logger';
+import { TrackType } from '../gen/video/sfu/models/models';
 
 export abstract class InputMediaDeviceManager<
   T extends InputMediaDeviceManagerState,
@@ -16,7 +18,15 @@ export abstract class InputMediaDeviceManager<
    * @internal
    */
   disablePromise?: Promise<void>;
-  constructor(protected readonly call: Call, public readonly state: T) {}
+  logger: Logger;
+
+  constructor(
+    protected readonly call: Call,
+    public readonly state: T,
+    protected readonly trackType: TrackType,
+  ) {
+    this.logger = getLogger([`${TrackType[trackType].toLowerCase()} manager`]);
+  }
 
   /**
    * Lists the available audio/video devices
@@ -129,32 +139,68 @@ export abstract class InputMediaDeviceManager<
 
   protected abstract stopPublishStream(stopTracks: boolean): Promise<void>;
 
-  protected abstract muteTracks(): void;
-
-  protected abstract unmuteTracks(): void;
+  protected abstract getTrack(): undefined | MediaStreamTrack;
 
   private async muteStream(stopTracks: boolean = true) {
     if (!this.state.mediaStream) {
       return;
     }
+    this.logger('debug', `${stopTracks ? 'Stopping' : 'Disabling'} stream`);
     if (this.call.state.callingState === CallingState.JOINED) {
       await this.stopPublishStream(stopTracks);
-    } else if (this.state.mediaStream) {
-      stopTracks
-        ? disposeOfMediaStream(this.state.mediaStream)
-        : this.muteTracks();
     }
-    if (stopTracks) {
+    this.muteLocalStream(stopTracks);
+    if (this.getTrack()?.readyState === 'ended') {
+      // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the stream
+      if (typeof this.state.mediaStream.release === 'function') {
+        // @ts-expect-error
+        this.state.mediaStream.release();
+      }
       this.state.setMediaStream(undefined);
     }
   }
 
+  private muteTrack() {
+    const track = this.getTrack();
+    if (!track || !track.enabled) {
+      return;
+    }
+    track.enabled = false;
+  }
+
+  private unmuteTrack() {
+    const track = this.getTrack();
+    if (!track || track.enabled) {
+      return;
+    }
+    track.enabled = true;
+  }
+
+  private stopTrack() {
+    const track = this.getTrack();
+    if (!track || track.readyState === 'ended') {
+      return;
+    }
+    track.stop();
+  }
+
+  private muteLocalStream(stopTracks: boolean) {
+    if (!this.state.mediaStream) {
+      return;
+    }
+    stopTracks ? this.stopTrack() : this.muteTrack();
+  }
+
   private async unmuteStream() {
+    this.logger('debug', 'Starting stream');
     let stream: MediaStream;
-    if (this.state.mediaStream) {
+    if (this.state.mediaStream && this.getTrack()?.readyState === 'live') {
       stream = this.state.mediaStream;
-      this.unmuteTracks();
+      this.unmuteTrack();
     } else {
+      if (this.state.mediaStream) {
+        this.stopTrack();
+      }
       const constraints = { deviceId: this.state.selectedDevice };
       stream = await this.getStream(constraints);
     }

package/src/devices/MicrophoneManager.ts

@@ -7,7 +7,7 @@ import { TrackType } from '../gen/video/sfu/models/models';
 
 export class MicrophoneManager extends InputMediaDeviceManager<MicrophoneManagerState> {
   constructor(call: Call) {
-    super(call, new MicrophoneManagerState());
+    super(call, new MicrophoneManagerState(), TrackType.AUDIO);
   }
 
   protected getDevices(): Observable<MediaDeviceInfo[]> {
@@ -25,12 +25,7 @@ export class MicrophoneManager extends InputMediaDeviceManager<MicrophoneManager
     return this.call.stopPublish(TrackType.AUDIO, stopTracks);
   }
 
-  protected muteTracks(): void {
-    this.state.mediaStream
-      ?.getAudioTracks()
-      .forEach((t) => (t.enabled = false));
-  }
-  protected unmuteTracks(): void {
-    this.state.mediaStream?.getAudioTracks().forEach((t) => (t.enabled = true));
+  protected getTrack() {
+    return this.state.mediaStream?.getAudioTracks()[0];
   }
 }

package/src/devices/SpeakerManager.ts

@@ -0,0 +1,50 @@
+import { isReactNative } from '../helpers/platforms';
+import { SpeakerState } from './SpeakerState';
+import { getAudioOutputDevices } from './devices';
+
+export class SpeakerManager {
+  public readonly state = new SpeakerState();
+
+  constructor() {}
+
+  /**
+   * Lists the available audio output 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 getAudioOutputDevices();
+  }
+
+  /**
+   * Select device
+   *
+   * Note: this method is not supported in React Native
+   *
+   * @param deviceId empty string means the system default
+   */
+  select(deviceId: string) {
+    if (isReactNative()) {
+      throw new Error('This feature is not supported in React Native');
+    }
+    this.state.setDevice(deviceId);
+  }
+
+  /**
+   * Set the volume of the audio elements
+   * @param volume a number between 0 and 1
+   *
+   * Note: this method is not supported in React Native
+   */
+  setVolume(volume: number) {
+    if (isReactNative()) {
+      throw new Error('This feature is not supported in React Native');
+    }
+    if (volume && (volume < 0 || volume > 1)) {
+      throw new Error('Volume must be between 0 and 1');
+    }
+    this.state.setVolume(volume);
+  }
+}