@stream-io/video-client 1.41.0 → 1.41.2

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

@@ -1,11 +1,14 @@
 import { Call } from '../Call';
 import { SpeakerState } from './SpeakerState';
+import { CallSettingsResponse } from '../gen/coordinator';
 export declare class SpeakerManager {
     readonly state: SpeakerState;
     private subscriptions;
     private areSubscriptionsSetUp;
     private readonly call;
+    private defaultDevice?;
     constructor(call: Call);
+    apply(settings: CallSettingsResponse): void;
     setup(): void;
     /**
      * Lists the available audio output devices

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

@@ -5,6 +5,7 @@ import type { TrackSubscriptionDetails } from '../gen/video/sfu/signal_rpc/signa
 import type { CallState } from '../store';
 import type { StreamSfuClient } from '../StreamSfuClient';
 import { SpeakerManager } from '../devices';
+import { Tracer } from '../stats';
 type VideoTrackSubscriptionOverride = {
     enabled: true;
     dimension: VideoDimension;
@@ -34,6 +35,8 @@ export declare class DynascaleManager {
     private logger;
     private callState;
     private speaker;
+    private tracer;
+    private useWebAudio;
     private audioContext;
     private sfuClient;
     private pendingSubscriptionsUpdate;
@@ -53,7 +56,7 @@ export declare class DynascaleManager {
     /**
      * Creates a new DynascaleManager instance.
      */
-    constructor(callState: CallState, speaker: SpeakerManager);
+    constructor(callState: CallState, speaker: SpeakerManager, tracer: Tracer);
     /**
      * Disposes the allocated resources and closes the audio context if it was created.
      */
@@ -79,6 +82,15 @@ export declare class DynascaleManager {
      * @param element the viewport element.
      */
     setViewport: <T extends HTMLElement>(element: T) => () => void;
+    /**
+     * Sets whether to use WebAudio API for audio playback.
+     * Must be set before joining the call.
+     *
+     * @internal
+     *
+     * @param useWebAudio whether to use WebAudio API.
+     */
+    setUseWebAudio: (useWebAudio: boolean) => void;
     /**
      * Binds a DOM <video> element to the given session id.
      * This method will make sure that the video element will play

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

@@ -0,0 +1,16 @@
+export type AudioSessionState = 'inactive' | 'active' | 'interrupted';
+export type AudioSessionType = 'auto' | 'playback' | 'transient' | 'transient-solo' | 'ambient' | 'play-and-record';
+export interface AudioSession extends EventTarget {
+    type: AudioSessionType;
+    state: AudioSessionState;
+    onstatechange: EventListenerOrEventListenerObject;
+}
+declare global {
+    interface Navigator {
+        /**
+         * `audioSession` is available in Safari only. See:
+         * https://github.com/w3c/audio-session/blob/main/explainer.md
+         */
+        audioSession?: AudioSession;
+    }
+}

package/dist/src/types.d.ts

@@ -285,8 +285,8 @@ export type StreamRNVideoSDKGlobals = {
         /**
          * Sets up the in call manager.
          */
-        setup({ default_device, }: {
-            default_device: AudioSettingsRequestDefaultDeviceEnum;
+        setup({ defaultDevice, }: {
+            defaultDevice: AudioSettingsRequestDefaultDeviceEnum;
         }): void;
         /**
          * Starts the in call manager.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.41.0",
+  "version": "1.41.2",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "browser": "dist/index.browser.es.js",
@@ -46,7 +46,7 @@
     "@openapitools/openapi-generator-cli": "^2.25.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@stream-io/audio-filters-web": "^0.7.1",
+    "@stream-io/audio-filters-web": "^0.7.2",
     "@stream-io/node-sdk": "^0.7.28",
     "@total-typescript/shoehorn": "^0.1.2",
     "@types/sdp-transform": "^2.15.0",

package/src/Call.ts

@@ -339,7 +339,11 @@ export class Call {
     this.microphone = new MicrophoneManager(this);
     this.speaker = new SpeakerManager(this);
     this.screenShare = new ScreenShareManager(this);
-    this.dynascaleManager = new DynascaleManager(this.state, this.speaker);
+    this.dynascaleManager = new DynascaleManager(
+      this.state,
+      this.speaker,
+      this.tracer,
+    );
   }
 
   /**
@@ -2694,9 +2698,7 @@ export class Call {
     settings: CallSettingsResponse,
     publish: boolean,
   ) => {
-    globalThis.streamRNVideoSDK?.callManager.setup({
-      default_device: settings.audio.default_device,
-    });
+    this.speaker.apply(settings);
     await this.camera.apply(settings.video, publish).catch((err) => {
       this.logger.warn('Camera init failed', err);
     });

package/src/devices/SpeakerManager.ts

@@ -3,12 +3,17 @@ import { Call } from '../Call';
 import { isReactNative } from '../helpers/platforms';
 import { SpeakerState } from './SpeakerState';
 import { deviceIds$, getAudioOutputDevices } from './devices';
+import {
+  CallSettingsResponse,
+  AudioSettingsRequestDefaultDeviceEnum,
+} from '../gen/coordinator';
 
 export class SpeakerManager {
   readonly state: SpeakerState;
   private subscriptions: Subscription[] = [];
   private areSubscriptionsSetUp = false;
   private readonly call: Call;
+  private defaultDevice?: AudioSettingsRequestDefaultDeviceEnum;
 
   constructor(call: Call) {
     this.call = call;
@@ -16,6 +21,41 @@ export class SpeakerManager {
     this.setup();
   }
 
+  apply(settings: CallSettingsResponse) {
+    if (!isReactNative()) {
+      return;
+    }
+    /// Determines if the speaker should be enabled based on a priority hierarchy of
+    /// settings.
+    ///
+    /// The priority order is as follows:
+    /// 1. If video camera is set to be on by default, speaker is enabled
+    /// 2. If audio speaker is set to be on by default, speaker is enabled
+    /// 3. If the default audio device is set to speaker, speaker is enabled
+    ///
+    /// This ensures that the speaker state aligns with the most important user
+    /// preference or system requirement.
+    const speakerOnWithSettingsPriority =
+      settings.video.camera_default_on ||
+      settings.audio.speaker_default_on ||
+      settings.audio.default_device ===
+        AudioSettingsRequestDefaultDeviceEnum.SPEAKER;
+
+    const defaultDevice = speakerOnWithSettingsPriority
+      ? AudioSettingsRequestDefaultDeviceEnum.SPEAKER
+      : AudioSettingsRequestDefaultDeviceEnum.EARPIECE;
+
+    if (this.defaultDevice !== defaultDevice) {
+      this.call.logger.debug('SpeakerManager: setting default device', {
+        defaultDevice,
+      });
+      this.defaultDevice = defaultDevice;
+      globalThis.streamRNVideoSDK?.callManager.setup({
+        defaultDevice,
+      });
+    }
+  }
+
   setup() {
     if (this.areSubscriptionsSetUp) {
       return;
@@ -51,11 +91,7 @@ export class SpeakerManager {
    * @returns an Observable that will be updated if a device is connected or disconnected
    */
   listDevices() {
-    if (isReactNative()) {
-      throw new Error(
-        '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',
-      );
-    }
+    assertUnsupportedInReactNative();
     return getAudioOutputDevices(this.call.tracer);
   }
 
@@ -67,11 +103,7 @@ export class SpeakerManager {
    * @param deviceId empty string means the system default
    */
   select(deviceId: string) {
-    if (isReactNative()) {
-      throw new Error(
-        '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',
-      );
-    }
+    assertUnsupportedInReactNative();
     this.state.setDevice(deviceId);
   }
 
@@ -93,11 +125,7 @@ export class SpeakerManager {
    * 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. Please visit https://getstream.io/video/docs/reactnative/core/camera-and-microphone/#speaker-management for more details',
-      );
-    }
+    assertUnsupportedInReactNative();
     if (volume && (volume < 0 || volume > 1)) {
       throw new Error('Volume must be between 0 and 1');
     }
@@ -125,3 +153,11 @@ export class SpeakerManager {
     });
   }
 }
+
+const assertUnsupportedInReactNative = () => {
+  if (isReactNative()) {
+    throw new Error(
+      'Unsupported in React Native. See: https://getstream.io/video/docs/react-native/guides/camera-and-microphone/#speaker-management',
+    );
+  }
+};

package/src/helpers/DynascaleManager.ts

@@ -27,6 +27,7 @@ import type { StreamSfuClient } from '../StreamSfuClient';
 import { SpeakerManager } from '../devices';
 import { getCurrentValue, setCurrentValue } from '../store/rxUtils';
 import { videoLoggerSystem } from '../logger';
+import { Tracer } from '../stats';
 
 const DEFAULT_VIEWPORT_VISIBILITY_STATE: Record<
   VideoTrackType,
@@ -69,6 +70,8 @@ export class DynascaleManager {
   private logger = videoLoggerSystem.getLogger('DynascaleManager');
   private callState: CallState;
   private speaker: SpeakerManager;
+  private tracer: Tracer;
+  private useWebAudio = isSafari();
   private audioContext: AudioContext | undefined;
   private sfuClient: StreamSfuClient | undefined;
   private pendingSubscriptionsUpdate: NodeJS.Timeout | null = null;
@@ -113,9 +116,10 @@ export class DynascaleManager {
   /**
    * Creates a new DynascaleManager instance.
    */
-  constructor(callState: CallState, speaker: SpeakerManager) {
+  constructor(callState: CallState, speaker: SpeakerManager, tracer: Tracer) {
     this.callState = callState;
     this.speaker = speaker;
+    this.tracer = tracer;
   }
 
   /**
@@ -190,6 +194,10 @@ export class DynascaleManager {
     override: VideoTrackSubscriptionOverride | undefined,
     sessionIds?: string[],
   ) => {
+    this.tracer.trace('setVideoTrackSubscriptionOverrides', [
+      override,
+      sessionIds,
+    ]);
     if (!sessionIds) {
       return setCurrentValue(
         this.videoTrackSubscriptionOverridesSubject,
@@ -297,6 +305,19 @@ export class DynascaleManager {
     return this.viewportTracker.setViewport(element);
   };
 
+  /**
+   * Sets whether to use WebAudio API for audio playback.
+   * Must be set before joining the call.
+   *
+   * @internal
+   *
+   * @param useWebAudio whether to use WebAudio API.
+   */
+  setUseWebAudio = (useWebAudio: boolean) => {
+    this.tracer.trace('setUseWebAudio', useWebAudio);
+    this.useWebAudio = useWebAudio;
+  };
+
   /**
    * Binds a DOM <video> element to the given session id.
    * This method will make sure that the video element will play
@@ -580,6 +601,7 @@ export class DynascaleManager {
             // we will play audio directly through the audio element in other browsers
             audioElement.muted = false;
             audioElement.play().catch((e) => {
+              this.tracer.trace('audioPlaybackError', e.message);
               this.logger.warn(`Failed to play audio stream`, e);
             });
           }
@@ -618,28 +640,54 @@ export class DynascaleManager {
   };
 
   private getOrCreateAudioContext = (): AudioContext | undefined => {
-    if (this.audioContext || !isSafari()) return this.audioContext;
+    if (!this.useWebAudio) return;
+    if (this.audioContext) return this.audioContext;
     const context = new AudioContext();
+    this.tracer.trace('audioContext.create', context.state);
     if (context.state === 'suspended') {
       document.addEventListener('click', this.resumeAudioContext);
     }
-    // @ts-expect-error audioSession is available in Safari only
+    context.addEventListener('statechange', () => {
+      this.tracer.trace('audioContext.state', context.state);
+      if (context.state === 'interrupted') {
+        this.resumeAudioContext();
+      }
+    });
+
     const audioSession = navigator.audioSession;
     if (audioSession) {
       // https://github.com/w3c/audio-session/blob/main/explainer.md
       audioSession.type = 'play-and-record';
+
+      let isSessionInterrupted = false;
+      audioSession.addEventListener('statechange', () => {
+        this.tracer.trace('audioSession.state', audioSession.state);
+        if (audioSession.state === 'interrupted') {
+          isSessionInterrupted = true;
+        } else if (isSessionInterrupted) {
+          this.resumeAudioContext();
+          isSessionInterrupted = false;
+        }
+      });
     }
     return (this.audioContext = context);
   };
 
   private resumeAudioContext = () => {
-    if (this.audioContext?.state === 'suspended') {
-      this.audioContext
-        .resume()
-        .catch((err) => this.logger.warn(`Can't resume audio context`, err))
-        .then(() => {
+    if (!this.audioContext) return;
+    const { state } = this.audioContext;
+    if (state === 'suspended' || state === 'interrupted') {
+      const tag = 'audioContext.resume';
+      this.audioContext.resume().then(
+        () => {
+          this.tracer.trace(tag, this.audioContext?.state);
           document.removeEventListener('click', this.resumeAudioContext);
-        });
+        },
+        (err) => {
+          this.tracer.trace(`${tag}Error`, this.audioContext?.state);
+          this.logger.warn(`Can't resume audio context`, err);
+        },
+      );
     }
   };
 }

package/src/helpers/__tests__/DynascaleManager.test.ts

@@ -34,7 +34,11 @@ describe('DynascaleManager', () => {
       clientStore: new StreamVideoWriteableStateStore(),
     });
     call.setSortParticipantsBy(noopComparator());
-    dynascaleManager = new DynascaleManager(call.state, call.speaker);
+    dynascaleManager = new DynascaleManager(
+      call.state,
+      call.speaker,
+      call.tracer,
+    );
   });
 
   afterEach(() => {
@@ -108,6 +112,8 @@ describe('DynascaleManager', () => {
         };
       });
 
+      dynascaleManager.setUseWebAudio(false);
+
       videoElement = document.createElement('video');
 
       // circumvent happy-dom's extensive validation rules
@@ -189,6 +195,7 @@ describe('DynascaleManager', () => {
 
     it('audio: Safari should use AudioContext for audio playback', () => {
       globalThis._isSafari = true;
+      dynascaleManager.setUseWebAudio(true); // enabled by default on Safari
 
       vi.useFakeTimers();
       const audioElement = document.createElement('audio');

package/src/helpers/types.ts

@@ -0,0 +1,26 @@
+export type AudioSessionState = 'inactive' | 'active' | 'interrupted';
+
+export type AudioSessionType =
+  | 'auto'
+  | 'playback'
+  | 'transient'
+  | 'transient-solo'
+  | 'ambient'
+  | 'play-and-record';
+
+export interface AudioSession extends EventTarget {
+  type: AudioSessionType;
+  state: AudioSessionState;
+
+  onstatechange: EventListenerOrEventListenerObject;
+}
+
+declare global {
+  interface Navigator {
+    /**
+     * `audioSession` is available in Safari only. See:
+     * https://github.com/w3c/audio-session/blob/main/explainer.md
+     */
+    audioSession?: AudioSession;
+  }
+}

package/src/rtc/__tests__/mocks/webrtc.mocks.ts

@@ -118,6 +118,7 @@ const AudioContextMock = vi.fn((): Partial<AudioContext> => {
     setSinkId: vi.fn(async function (sinkId: string) {
       this.sinkId = sinkId;
     }),
+    addEventListener: vi.fn(),
   };
 });
 vi.stubGlobal('AudioContext', AudioContextMock);

package/src/types.ts

@@ -351,9 +351,9 @@ export type StreamRNVideoSDKGlobals = {
      * Sets up the in call manager.
      */
     setup({
-      default_device,
+      defaultDevice,
     }: {
-      default_device: AudioSettingsRequestDefaultDeviceEnum;
+      defaultDevice: AudioSettingsRequestDefaultDeviceEnum;
     }): void;
 
     /**