@stream-io/video-client 1.27.0 → 1.27.1

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

@@ -9,33 +9,33 @@ export declare const checkIfAudioOutputChangeSupported: () => boolean;
  * Keeps track of the browser permission to use microphone. This permission also
  * affects an ability to enumerate audio devices.
  */
-export declare const getAudioBrowserPermission: () => BrowserPermission;
+export declare const getAudioBrowserPermission: (...args: never[]) => BrowserPermission;
 /**
  * Keeps track of the browser permission to use camera. This permission also
  * affects an ability to enumerate video devices.
  */
-export declare const getVideoBrowserPermission: () => BrowserPermission;
+export declare const getVideoBrowserPermission: (...args: never[]) => BrowserPermission;
 /**
  * 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.
  */
-export declare const getAudioDevices: () => import("rxjs").Observable<MediaDeviceInfo[]>;
+export declare const getAudioDevices: (...args: (Tracer | undefined)[]) => import("rxjs").Observable<MediaDeviceInfo[]>;
 /**
  * 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.
  */
-export declare const getVideoDevices: () => import("rxjs").Observable<MediaDeviceInfo[]>;
+export declare const getVideoDevices: (...args: (Tracer | undefined)[]) => import("rxjs").Observable<MediaDeviceInfo[]>;
 /**
  * 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.
  */
-export declare const getAudioOutputDevices: () => import("rxjs").Observable<MediaDeviceInfo[]>;
+export declare const getAudioOutputDevices: (...args: (Tracer | undefined)[]) => import("rxjs").Observable<MediaDeviceInfo[]>;
 /**
  * Returns an audio media stream that fulfills the given constraints.
  * If no constraints are provided, it uses the browser's default ones.

package/dist/src/helpers/lazy.d.ts

@@ -1,4 +1,4 @@
 /**
  * Lazily creates a value using a provided factory
  */
-export declare function lazy<T>(factory: () => T): () => T;
+export declare function lazy<T, A>(factory: (...args: A[]) => T): (...args: A[]) => T;

package/dist/src/stats/rtc/Tracer.d.ts

@@ -1,11 +1,14 @@
-import type { Trace, TraceSlice } from './types';
+import type { RTCStatsDataType, Trace, TraceKey, TraceSlice } from './types';
 export declare class Tracer {
     private buffer;
     private enabled;
     private readonly id;
+    private keys?;
     constructor(id: string | null);
     setEnabled: (enabled: boolean) => void;
     trace: Trace;
+    traceOnce: (key: TraceKey, tag: string, data: RTCStatsDataType) => void;
+    resetTrace: (key: TraceKey) => void;
     take: () => TraceSlice;
     dispose: () => void;
 }

package/dist/src/stats/rtc/types.d.ts

@@ -1,5 +1,6 @@
 import type { PerformanceStats } from '../../gen/video/sfu/models/models';
 export type RTCStatsDataType = RTCConfiguration | RTCIceCandidate | RTCSignalingState | RTCIceConnectionState | RTCIceGatheringState | RTCPeerConnectionState | [number | null | string] | string | boolean | RTCOfferOptions | [string | RTCDataChannelInit | undefined] | (RTCOfferOptions | undefined) | RTCSessionDescriptionInit | (RTCIceCandidateInit | RTCIceCandidate) | object | null | undefined;
+export type TraceKey = 'device-enumeration' | (string & {});
 export type Trace = (tag: string, data: RTCStatsDataType) => void;
 export type TraceRecord = [
     tag: string,

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

@@ -18,5 +18,5 @@ declare class TimerWorker {
     private sendMessage;
 }
 export declare const enableTimerWorker: () => void;
-export declare const getTimers: () => TimerWorker;
+export declare const getTimers: (...args: never[]) => TimerWorker;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.27.0",
+  "version": "1.27.1",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "browser": "dist/index.browser.es.js",
@@ -40,7 +40,7 @@
     "@openapitools/openapi-generator-cli": "^2.13.4",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@stream-io/audio-filters-web": "^0.4.2",
+    "@stream-io/audio-filters-web": "^0.4.3",
     "@stream-io/node-sdk": "^0.4.24",
     "@types/sdp-transform": "^2.4.9",
     "@types/ua-parser-js": "^0.7.39",

package/src/Call.ts

@@ -1884,10 +1884,13 @@ export class Call {
    * @internal
    */
   notifyTrackMuteState = async (muted: boolean, ...trackTypes: TrackType[]) => {
-    if (!this.sfuClient) return;
-    await this.sfuClient.updateMuteStates(
-      trackTypes.map((trackType) => ({ trackType, muted })),
-    );
+    const key = `muteState.${this.cid}.${trackTypes.join('-')}`;
+    await withoutConcurrency(key, async () => {
+      if (!this.sfuClient) return;
+      await this.sfuClient.updateMuteStates(
+        trackTypes.map((trackType) => ({ trackType, muted })),
+      );
+    });
   };
 
   /**

package/src/coordinator/connection/connection.ts

@@ -580,7 +580,6 @@ export class StableWSConnection {
     this.totalFailures += 1;
     this._setHealth(false);
     this.isConnecting = false;
-    this.rejectConnectionOpen?.(new Error(`WebSocket error: ${event}`));
     this._log(`onerror() - WS connection resulted into error`, { event });
 
     this._reconnect();

package/src/devices/CameraManager.ts

@@ -149,7 +149,7 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
   }
 
   protected getDevices(): Observable<MediaDeviceInfo[]> {
-    return getVideoDevices();
+    return getVideoDevices(this.call.tracer);
   }
 
   protected getStream(

package/src/devices/InputMediaDeviceManager.ts

@@ -198,6 +198,10 @@ export abstract class InputMediaDeviceManager<
           entry.stop?.();
           this.filters = this.filters.filter((f) => f !== entry);
           await this.applySettingsToStream();
+          this.call.tracer.trace(
+            `unregisterFilter.${TrackType[this.trackType]}`,
+            null,
+          );
         }),
     };
   }
@@ -219,9 +223,7 @@ export abstract class InputMediaDeviceManager<
    */
   async select(deviceId: string | undefined) {
     if (isReactNative()) {
-      throw new Error(
-        'This method is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for reference.',
-      );
+      throw new Error('This method is not supported in React Native.');
     }
     const prevDeviceId = this.state.selectedDevice;
     if (deviceId === prevDeviceId) {

package/src/devices/MicrophoneManager.ts

@@ -195,6 +195,7 @@ export class MicrophoneManager extends InputMediaDeviceManager<MicrophoneManager
         this.logger('warn', 'Failed to unregister noise cancellation', err);
       });
 
+    this.call.tracer.trace('noiseCancellation.disabled', true);
     await this.call.notifyNoiseCancellationStopped();
   }
 
@@ -245,7 +246,7 @@ export class MicrophoneManager extends InputMediaDeviceManager<MicrophoneManager
   }
 
   protected getDevices(): Observable<MediaDeviceInfo[]> {
-    return getAudioDevices();
+    return getAudioDevices(this.call.tracer);
   }
 
   protected getStream(

package/src/devices/SpeakerManager.ts

@@ -56,7 +56,7 @@ export class SpeakerManager {
         'This feature is not supported in React Native. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for more details',
       );
     }
-    return getAudioOutputDevices();
+    return getAudioOutputDevices(this.call.tracer);
   }
 
   /**

package/src/devices/devices.ts

@@ -7,6 +7,7 @@ import {
   merge,
   shareReplay,
   startWith,
+  tap,
 } from 'rxjs';
 import { getLogger } from '../logger';
 import { BrowserPermission } from './BrowserPermission';
@@ -21,8 +22,13 @@ import { getCurrentValue } from '../store/rxUtils';
  *
  * @param permission a BrowserPermission instance.
  * @param kind the kind of devices to enumerate.
+ * @param tracer the tracer to use for tracing the device enumeration.
  */
-const getDevices = (permission: BrowserPermission, kind: MediaDeviceKind) => {
+const getDevices = (
+  permission: BrowserPermission,
+  kind: MediaDeviceKind,
+  tracer: Tracer | undefined,
+) => {
   return from(
     (async () => {
       let devices = await navigator.mediaDevices.enumerateDevices();
@@ -34,6 +40,11 @@ const getDevices = (permission: BrowserPermission, kind: MediaDeviceKind) => {
       if (shouldPromptForBrowserPermission && (await permission.prompt())) {
         devices = await navigator.mediaDevices.enumerateDevices();
       }
+      tracer?.traceOnce(
+        'device-enumeration',
+        'navigator.mediaDevices.enumerateDevices',
+        devices,
+      );
       return devices.filter(
         (device) =>
           device.kind === kind &&
@@ -99,11 +110,12 @@ export const getVideoBrowserPermission = lazy(
     }),
 );
 
-const getDeviceChangeObserver = lazy(() => {
+const getDeviceChangeObserver = lazy((tracer: Tracer | undefined) => {
   // 'addEventListener' is not available in React Native, returning
   // an observable that will never fire
   if (!navigator.mediaDevices.addEventListener) return from([]);
   return fromEvent(navigator.mediaDevices, 'devicechange').pipe(
+    tap(() => tracer?.resetTrace('device-enumeration')),
     map(() => undefined),
     debounceTime(500),
   );
@@ -115,13 +127,15 @@ const getDeviceChangeObserver = lazy(() => {
  * if devices are added/removed the list is updated, and if the permission is revoked,
  * the observable errors.
  */
-export const getAudioDevices = lazy(() => {
+export const getAudioDevices = lazy((tracer?: Tracer) => {
   return merge(
-    getDeviceChangeObserver(),
+    getDeviceChangeObserver(tracer),
     getAudioBrowserPermission().asObservable(),
   ).pipe(
     startWith(undefined),
-    concatMap(() => getDevices(getAudioBrowserPermission(), 'audioinput')),
+    concatMap(() =>
+      getDevices(getAudioBrowserPermission(), 'audioinput', tracer),
+    ),
     shareReplay(1),
   );
 });
@@ -132,13 +146,15 @@ export const getAudioDevices = lazy(() => {
  * if devices are added/removed the list is updated, and if the permission is revoked,
  * the observable errors.
  */
-export const getVideoDevices = lazy(() => {
+export const getVideoDevices = lazy((tracer?: Tracer) => {
   return merge(
-    getDeviceChangeObserver(),
+    getDeviceChangeObserver(tracer),
     getVideoBrowserPermission().asObservable(),
   ).pipe(
     startWith(undefined),
-    concatMap(() => getDevices(getVideoBrowserPermission(), 'videoinput')),
+    concatMap(() =>
+      getDevices(getVideoBrowserPermission(), 'videoinput', tracer),
+    ),
     shareReplay(1),
   );
 });
@@ -149,13 +165,15 @@ export const getVideoDevices = lazy(() => {
  * if devices are added/removed the list is updated, and if the permission is revoked,
  * the observable errors.
  */
-export const getAudioOutputDevices = lazy(() => {
+export const getAudioOutputDevices = lazy((tracer?: Tracer) => {
   return merge(
-    getDeviceChangeObserver(),
+    getDeviceChangeObserver(tracer),
     getAudioBrowserPermission().asObservable(),
   ).pipe(
     startWith(undefined),
-    concatMap(() => getDevices(getAudioBrowserPermission(), 'audiooutput')),
+    concatMap(() =>
+      getDevices(getAudioBrowserPermission(), 'audiooutput', tracer),
+    ),
     shareReplay(1),
   );
 });

package/src/helpers/lazy.ts

@@ -3,11 +3,11 @@ const uninitialized = Symbol('uninitialized');
 /**
  * Lazily creates a value using a provided factory
  */
-export function lazy<T>(factory: () => T): () => T {
+export function lazy<T, A>(factory: (...args: A[]) => T): (...args: A[]) => T {
   let value: T | typeof uninitialized = uninitialized;
-  return () => {
+  return (...args: A[]) => {
     if (value === uninitialized) {
-      value = factory();
+      value = factory(...args);
     }
 
     return value;

package/src/rtc/__tests__/videoLayers.test.ts

@@ -74,24 +74,22 @@ describe('videoLayers', () => {
   });
 
   it('should use predefined bitrate values when track dimensions cant be determined', () => {
-    const width = 0;
-    const height = 0;
     const bitrate = 3000000;
     const track = new MediaStreamTrack();
-    vi.spyOn(track, 'getSettings').mockReturnValue({ width, height });
+    vi.spyOn(track, 'getSettings').mockReturnValue({});
     const layers = computeVideoLayers(track, {
       bitrate,
       // @ts-expect-error - incomplete data
       codec: { name: 'vp8' },
       fps: 30,
-      videoDimension: { width, height },
+      videoDimension: { width: 320, height: 180 },
     });
     expect(layers).toEqual([
       {
         active: true,
         rid: 'q',
-        width: 0,
-        height: 0,
+        width: 320,
+        height: 180,
         maxBitrate: bitrate,
         scaleResolutionDownBy: 1,
         maxFramerate: 30,

package/src/rtc/videoLayers.ts

@@ -84,17 +84,17 @@ export const computeVideoLayers = (
 ): OptimalVideoLayer[] | undefined => {
   if (isAudioTrackType(publishOption.trackType)) return;
   const optimalVideoLayers: OptimalVideoLayer[] = [];
-  const settings = videoTrack.getSettings();
-  const { width = 0, height = 0 } = settings;
   const {
     bitrate,
     codec,
-    fps,
+    fps = 30,
     maxSpatialLayers = 3,
     maxTemporalLayers = 3,
     videoDimension = { width: 1280, height: 720 },
     useSingleLayer,
   } = publishOption;
+  const { width = videoDimension.width, height = videoDimension.height } =
+    videoTrack.getSettings();
   const maxBitrate = getComputedMaxBitrate(
     videoDimension,
     width,
@@ -137,7 +137,12 @@ export const computeVideoLayers = (
 
   // for simplicity, we start with all layers enabled, then this function
   // will clear/reassign the layers that are not needed
-  return withSimulcastConstraints(settings, optimalVideoLayers, useSingleLayer);
+  return withSimulcastConstraints(
+    width,
+    height,
+    optimalVideoLayers,
+    useSingleLayer,
+  );
 };
 
 /**
@@ -179,13 +184,14 @@ export const getComputedMaxBitrate = (
  * https://chromium.googlesource.com/external/webrtc/+/refs/heads/main/media/engine/simulcast.cc#90
  */
 const withSimulcastConstraints = (
-  settings: MediaTrackSettings,
+  width: number,
+  height: number,
   optimalVideoLayers: OptimalVideoLayer[],
   useSingleLayer: boolean,
 ) => {
   let layers: OptimalVideoLayer[];
 
-  const size = Math.max(settings.width || 0, settings.height || 0);
+  const size = Math.max(width, height);
   if (size <= 320) {
     // provide only one layer 320x240 (f), the one with the highest quality
     layers = optimalVideoLayers.filter((layer) => layer.rid === 'f');

package/src/stats/rtc/Tracer.ts

@@ -1,9 +1,16 @@
-import type { Trace, TraceRecord, TraceSlice } from './types';
+import type {
+  RTCStatsDataType,
+  Trace,
+  TraceKey,
+  TraceRecord,
+  TraceSlice,
+} from './types';
 
 export class Tracer {
   private buffer: TraceRecord[] = [];
   private enabled = true;
   private readonly id: string | null;
+  private keys?: Map<TraceKey, boolean>;
 
   constructor(id: string | null) {
     this.id = id;
@@ -20,6 +27,16 @@ export class Tracer {
     this.buffer.push([tag, this.id, data, Date.now()]);
   };
 
+  traceOnce = (key: TraceKey, tag: string, data: RTCStatsDataType) => {
+    if (this.keys?.has(key)) return;
+    this.trace(tag, data);
+    (this.keys ??= new Map()).set(key, true);
+  };
+
+  resetTrace = (key: TraceKey) => {
+    this.keys?.delete(key);
+  };
+
   take = (): TraceSlice => {
     const snapshot = this.buffer;
     this.buffer = [];
@@ -33,5 +50,6 @@ export class Tracer {
 
   dispose = () => {
     this.buffer = [];
+    this.keys?.clear();
   };
 }

package/src/stats/rtc/types.ts

@@ -19,6 +19,7 @@ export type RTCStatsDataType =
   | null
   | undefined;
 
+export type TraceKey = 'device-enumeration' | (string & {});
 export type Trace = (tag: string, data: RTCStatsDataType) => void;
 
 export type TraceRecord = [