@stream-io/video-client 1.43.0 → 1.44.0

package/src/devices/MicrophoneManager.ts

@@ -1,4 +1,4 @@
-import { combineLatest, Observable } from 'rxjs';
+import { combineLatest, firstValueFrom, Observable } from 'rxjs';
 import type { INoiseCancellation } from '@stream-io/audio-filters-web';
 import { Call } from '../Call';
 import {
@@ -23,12 +23,12 @@ import { CallingState } from '../store';
 import {
   createSafeAsyncSubscription,
   createSubscription,
-  getCurrentValue,
 } from '../store/rxUtils';
 import { RNSpeechDetector } from '../helpers/RNSpeechDetector';
 import { withoutConcurrency } from '../helpers/concurrency';
 import { disposeOfMediaStream } from './utils';
 import { promiseWithResolvers } from '../helpers/promise';
+import { DevicePersistenceOptions } from './devicePersistence';
 
 export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState> {
   private speakingWhileMutedNotificationEnabled = true;
@@ -44,8 +44,17 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
 
   private silenceThresholdMs = 5000;
 
-  constructor(call: Call, disableMode: TrackDisableMode = 'stop-tracks') {
-    super(call, new MicrophoneManagerState(disableMode), TrackType.AUDIO);
+  constructor(
+    call: Call,
+    devicePersistence: Required<DevicePersistenceOptions>,
+    disableMode: TrackDisableMode = 'stop-tracks',
+  ) {
+    super(
+      call,
+      new MicrophoneManagerState(disableMode),
+      TrackType.AUDIO,
+      devicePersistence,
+    );
   }
 
   override setup(): void {
@@ -146,7 +155,7 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
           if (this.silenceThresholdMs <= 0) return;
 
           const deviceId = this.state.selectedDevice;
-          const devices = getCurrentValue(this.listDevices());
+          const devices = await firstValueFrom(this.listDevices());
           const label = devices.find((d) => d.deviceId === deviceId)?.label;
 
           this.noAudioDetectorCleanup = createNoAudioDetector(mediaStream, {
@@ -160,6 +169,7 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
                 deviceId,
                 label,
               };
+              console.log(event);
               this.call.tracer.trace('mic.capture_report', event);
               this.call.streamClient.dispatchEvent(event);
             },
@@ -335,10 +345,18 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
     // Wait for any in progress mic operation
     await this.statusChangeSettled();
 
-    const canPublish = this.call.permissionsContext.canPublish(this.trackType);
     // apply server-side settings only when the device state is pristine
-    // and server defaults are not deferred to application code
-    if (this.state.status === undefined && !this.deferServerDefaults) {
+    // and there are no persisted preferences
+    const shouldApplyDefaults =
+      this.state.status === undefined &&
+      this.state.optimisticStatus === undefined;
+    let persistedPreferencesApplied = false;
+    if (shouldApplyDefaults && this.devicePersistence.enabled) {
+      persistedPreferencesApplied = await this.applyPersistedPreferences(true);
+    }
+
+    const canPublish = this.call.permissionsContext.canPublish(this.trackType);
+    if (shouldApplyDefaults && !persistedPreferencesApplied) {
       if (canPublish && settings.mic_default_on) {
         await this.enable();
       }

package/src/devices/ScreenShareManager.ts

@@ -9,13 +9,19 @@ import { AudioBitrateProfile, TrackType } from '../gen/video/sfu/models/models';
 import { getScreenShareStream } from './devices';
 import { ScreenShareSettings } from '../types';
 import { createSubscription } from '../store/rxUtils';
+import { normalize } from './devicePersistence';
 
 export class ScreenShareManager extends AudioDeviceManager<
   ScreenShareState,
   DisplayMediaStreamOptions
 > {
   constructor(call: Call) {
-    super(call, new ScreenShareState(), TrackType.SCREEN_SHARE);
+    super(
+      call,
+      new ScreenShareState(),
+      TrackType.SCREEN_SHARE,
+      normalize({ enabled: false }),
+    );
   }
 
   override setup(): void {

package/src/devices/SpeakerManager.ts

@@ -1,30 +1,63 @@
-import { combineLatest, Subscription } from 'rxjs';
+import { combineLatest } from 'rxjs';
 import { Call } from '../Call';
 import { isReactNative } from '../helpers/platforms';
 import { SpeakerState } from './SpeakerState';
 import { deviceIds$, getAudioOutputDevices } from './devices';
 import {
-  CallSettingsResponse,
   AudioSettingsRequestDefaultDeviceEnum,
+  CallSettingsResponse,
 } from '../gen/coordinator';
+import {
+  createSyntheticDevice,
+  defaultDeviceId,
+  DevicePersistenceOptions,
+  readPreferences,
+  toPreferenceList,
+  writePreferences,
+} from './devicePersistence';
+import { createSubscription, getCurrentValue } from '../store/rxUtils';
 
 export class SpeakerManager {
   readonly state: SpeakerState;
-  private subscriptions: Subscription[] = [];
+  private subscriptions: (() => void)[] = [];
   private areSubscriptionsSetUp = false;
   private readonly call: Call;
   private defaultDevice?: AudioSettingsRequestDefaultDeviceEnum;
+  private readonly devicePersistence: Required<DevicePersistenceOptions>;
 
-  constructor(call: Call) {
+  constructor(
+    call: Call,
+    devicePreferences: Required<DevicePersistenceOptions>,
+  ) {
     this.call = call;
     this.state = new SpeakerState(call.tracer);
+    this.devicePersistence = devicePreferences;
     this.setup();
   }
 
   apply(settings: CallSettingsResponse) {
-    if (!isReactNative()) {
-      return;
+    return isReactNative() ? this.applyRN(settings) : this.applyWeb();
+  }
+
+  private applyWeb() {
+    const { enabled, storageKey } = this.devicePersistence;
+    if (!enabled) return;
+
+    const preferences = readPreferences(storageKey);
+    const preferenceList = toPreferenceList(preferences.speaker);
+    if (preferenceList.length === 0) return;
+
+    const preference = preferenceList[0];
+    const nextDeviceId =
+      preference.selectedDeviceId === defaultDeviceId
+        ? ''
+        : preference.selectedDeviceId;
+    if (this.state.selectedDevice !== nextDeviceId) {
+      this.select(nextDeviceId);
     }
+  }
+
+  private applyRN(settings: CallSettingsResponse) {
     /// Determines if the speaker should be enabled based on a priority hierarchy of
     /// settings.
     ///
@@ -57,29 +90,31 @@ export class SpeakerManager {
   }
 
   setup() {
-    if (this.areSubscriptionsSetUp) {
-      return;
-    }
-
+    if (this.areSubscriptionsSetUp) return;
     this.areSubscriptionsSetUp = true;
 
     if (deviceIds$ && !isReactNative()) {
       this.subscriptions.push(
-        combineLatest([deviceIds$!, this.state.selectedDevice$]).subscribe(
+        createSubscription(
+          combineLatest([deviceIds$, this.state.selectedDevice$]),
           ([devices, deviceId]) => {
-            if (!deviceId) {
-              return;
-            }
+            if (!deviceId) return;
             const device = devices.find(
               (d) => d.deviceId === deviceId && d.kind === 'audiooutput',
             );
-            if (!device) {
-              this.select('');
-            }
+            if (!device) this.select('');
           },
         ),
       );
     }
+
+    if (!isReactNative() && this.devicePersistence.enabled) {
+      this.subscriptions.push(
+        createSubscription(this.state.selectedDevice$, (selectedDevice) => {
+          this.persistSpeakerDevicePreference(selectedDevice);
+        }),
+      );
+    }
   }
 
   /**
@@ -113,7 +148,7 @@ export class SpeakerManager {
    * @internal
    */
   dispose = () => {
-    this.subscriptions.forEach((s) => s.unsubscribe());
+    this.subscriptions.forEach((unsubscribe) => unsubscribe());
     this.subscriptions = [];
     this.areSubscriptionsSetUp = false;
   };
@@ -152,6 +187,15 @@ export class SpeakerManager {
       return { audioVolume: volume };
     });
   }
+
+  private persistSpeakerDevicePreference(selectedDevice: string) {
+    const { storageKey } = this.devicePersistence;
+    const devices = getCurrentValue(this.listDevices()) || [];
+    const currentDevice =
+      devices.find((d) => d.deviceId === selectedDevice) ??
+      createSyntheticDevice(selectedDevice, 'audiooutput');
+    writePreferences(currentDevice, 'speaker', undefined, storageKey);
+  }
 }
 
 const assertUnsupportedInReactNative = () => {

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

@@ -5,20 +5,31 @@ import { CallingState, StreamVideoWriteableStateStore } from '../../store';
 import { afterEach, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
 import { fromPartial } from '@total-typescript/shoehorn';
 import {
+  createLocalStorageMock,
+  emitDeviceIds,
   mockBrowserPermission,
   mockCall,
   mockDeviceIds$,
   mockVideoDevices,
   mockVideoStream,
 } from './mocks';
+import { createVideoStreamForDevice } from './mediaStreamTestHelpers';
 import { TrackType } from '../../gen/video/sfu/models/models';
 import { CameraManager } from '../CameraManager';
 import { of } from 'rxjs';
 import { PermissionsContext } from '../../permissions';
 import { Tracer } from '../../stats';
+import {
+  defaultDeviceId,
+  readPreferences,
+  toPreferenceList,
+} from '../devicePersistence';
 
 const getVideoStream = vi.hoisted(() =>
-  vi.fn(() => Promise.resolve(mockVideoStream())),
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  vi.fn((_trackConstraints?: MediaTrackConstraints, _tracer?: Tracer) =>
+    Promise.resolve(mockVideoStream()),
+  ),
 );
 
 vi.mock('../devices.ts', () => {
@@ -62,13 +73,14 @@ describe('CameraManager', () => {
   let call: Call;
 
   beforeEach(() => {
+    const devicePersistence = { enabled: false, storageKey: '' };
     call = new Call({
       id: '',
       type: '',
-      streamClient: new StreamClient('abc123'),
+      streamClient: new StreamClient('abc123', { devicePersistence }),
       clientStore: new StreamVideoWriteableStateStore(),
     });
-    manager = new CameraManager(call);
+    manager = new CameraManager(call, devicePersistence);
   });
 
   it('list devices', () => {
@@ -243,13 +255,29 @@ describe('CameraManager', () => {
     it('should enable the camera when set on the dashboard', async () => {
       vi.spyOn(manager, 'enable');
       await manager.apply(
-        // @ts-expect-error - partial settings
-        {
+        fromPartial({
           enabled: true,
           target_resolution: { width: 640, height: 480 },
           camera_facing: 'front',
           camera_default_on: true,
-        },
+        }),
+        true,
+      );
+
+      expect(manager.state.direction).toBe('front');
+      expect(manager.state.status).toBe('enabled');
+      expect(manager['targetResolution']).toEqual({ width: 640, height: 480 });
+      expect(manager.enable).toHaveBeenCalled();
+    });
+
+    it('should enable the camera when enabled is not provided', async () => {
+      vi.spyOn(manager, 'enable');
+      await manager.apply(
+        fromPartial({
+          target_resolution: { width: 640, height: 480 },
+          camera_facing: 'front',
+          camera_default_on: true,
+        }),
         true,
       );
 
@@ -262,13 +290,12 @@ describe('CameraManager', () => {
     it('should not enable the camera when set on the dashboard', async () => {
       vi.spyOn(manager, 'enable');
       await manager.apply(
-        // @ts-expect-error - partial settings
-        {
+        fromPartial({
           enabled: true,
           target_resolution: { width: 640, height: 480 },
           camera_facing: 'front',
           camera_default_on: false,
-        },
+        }),
         true,
       );
 
@@ -278,22 +305,70 @@ describe('CameraManager', () => {
       expect(manager.enable).not.toHaveBeenCalled();
     });
 
-    it('should not turn on the camera when publish is false', async () => {
+    it('should skip defaults when preferences are applied', async () => {
+      const devicePersistence = { enabled: true, storageKey: '' };
+      const persistedManager = new CameraManager(call, devicePersistence);
+      const applySpy = vi
+        .spyOn(persistedManager as never, 'applyPersistedPreferences')
+        .mockResolvedValue(true);
+      const selectDirectionSpy = vi.spyOn(persistedManager, 'selectDirection');
+      const enableSpy = vi.spyOn(persistedManager, 'enable');
+
+      await persistedManager.apply(
+        fromPartial({
+          enabled: true,
+          target_resolution: { width: 640, height: 480 },
+          camera_facing: 'front',
+          camera_default_on: true,
+        }),
+        true,
+      );
+
+      expect(applySpy).toHaveBeenCalledWith(true);
+      expect(selectDirectionSpy).not.toHaveBeenCalled();
+      expect(enableSpy).not.toHaveBeenCalled();
+    });
+
+    it('should not apply defaults when device is not pristine', async () => {
+      manager.state.setStatus('enabled');
+      const selectDirectionSpy = vi.spyOn(manager, 'selectDirection');
+      const enableSpy = vi.spyOn(manager, 'enable');
+
+      await manager.apply(
+        fromPartial({
+          enabled: true,
+          target_resolution: { width: 640, height: 480 },
+          camera_facing: 'front',
+          camera_default_on: true,
+        }),
+        true,
+      );
+
+      expect(selectDirectionSpy).not.toHaveBeenCalled();
+      expect(enableSpy).not.toHaveBeenCalled();
+    });
+
+    it('should on the camera but not publish when publish is false', async () => {
+      manager['call'].state.setCallingState(CallingState.IDLE);
       vi.spyOn(manager, 'enable');
+      // @ts-expect-error - private api
+      vi.spyOn(manager, 'publishStream');
       await manager.apply(
-        // @ts-expect-error - partial settings
-        {
+        fromPartial({
+          enabled: true,
           target_resolution: { width: 640, height: 480 },
           camera_facing: 'front',
           camera_default_on: true,
-        },
+        }),
         false,
       );
 
       expect(manager.state.direction).toBe('front');
-      expect(manager.state.status).toBe(undefined);
+      expect(manager.state.status).toBe('enabled');
       expect(manager['targetResolution']).toEqual({ width: 640, height: 480 });
-      expect(manager.enable).not.toHaveBeenCalled();
+      expect(manager.enable).toHaveBeenCalled();
+      // @ts-expect-error - private api
+      expect(manager.publishStream).not.toHaveBeenCalled();
     });
 
     it('should not enable the camera when the user does not have permission', async () => {
@@ -304,6 +379,7 @@ describe('CameraManager', () => {
           target_resolution: { width: 640, height: 480 },
           camera_facing: 'front',
           camera_default_on: true,
+          enabled: true,
         }),
         true,
       );
@@ -319,12 +395,12 @@ describe('CameraManager', () => {
       // @ts-expect-error - private api
       vi.spyOn(manager, 'publishStream');
       await manager.apply(
-        // @ts-expect-error - partial settings
-        {
+        fromPartial({
           target_resolution: { width: 640, height: 480 },
           camera_facing: 'front',
           camera_default_on: true,
-        },
+          enabled: true,
+        }),
         true,
       );
 
@@ -334,13 +410,12 @@ describe('CameraManager', () => {
     it('should not turn on the camera when video is disabled', async () => {
       vi.spyOn(manager, 'enable');
       await manager.apply(
-        // @ts-expect-error - partial settings
-        {
+        fromPartial({
           enabled: false,
           target_resolution: { width: 640, height: 480 },
           camera_facing: 'front',
           camera_default_on: true,
-        },
+        }),
         false,
       );
 
@@ -349,6 +424,94 @@ describe('CameraManager', () => {
     });
   });
 
+  describe('Device Persistence Stress', () => {
+    it('persists the final camera and muted state after rapid toggles, switches, and unplug', async () => {
+      const storageKey = '@test/device-preferences-camera-stress';
+      const localStorageMock = createLocalStorageMock();
+      const originalWindow = globalThis.window;
+      Object.defineProperty(globalThis, 'window', {
+        configurable: true,
+        value: { localStorage: localStorageMock },
+      });
+
+      const getVideoStreamMock = vi.mocked(getVideoStream);
+      getVideoStreamMock.mockImplementation((constraints) => {
+        const requestedDeviceId = (constraints?.deviceId as { exact?: string })
+          ?.exact;
+        const selectedDevice =
+          mockVideoDevices.find((d) => d.deviceId === requestedDeviceId) ??
+          mockVideoDevices[0];
+        return Promise.resolve(
+          createVideoStreamForDevice(selectedDevice.deviceId),
+        );
+      });
+
+      const stressManager = new CameraManager(call, {
+        enabled: true,
+        storageKey,
+      });
+
+      try {
+        const finalDevice = mockVideoDevices[2];
+        emitDeviceIds(mockVideoDevices);
+
+        await Promise.allSettled([
+          stressManager.enable(),
+          stressManager.select(mockVideoDevices[1].deviceId),
+          stressManager.toggle(),
+          stressManager.select(finalDevice.deviceId),
+          stressManager.toggle(),
+          stressManager.enable(),
+        ]);
+        await stressManager.statusChangeSettled();
+        await stressManager.select(finalDevice.deviceId);
+        await stressManager.enable();
+        await stressManager.statusChangeSettled();
+
+        expect(stressManager.state.selectedDevice).toBe(finalDevice.deviceId);
+        expect(stressManager.state.status).toBe('enabled');
+
+        const persistedBeforeUnplug = toPreferenceList(
+          readPreferences(storageKey).camera,
+        );
+        expect(persistedBeforeUnplug[0]).toEqual({
+          selectedDeviceId: finalDevice.deviceId,
+          selectedDeviceLabel: finalDevice.label,
+          muted: false,
+        });
+
+        emitDeviceIds(
+          mockVideoDevices.filter((d) => d.deviceId !== finalDevice.deviceId),
+        );
+
+        await vi.waitFor(() => {
+          expect(stressManager.state.selectedDevice).toBe(undefined);
+          expect(stressManager.state.status).toBe('disabled');
+        });
+
+        const persistedAfterUnplug = toPreferenceList(
+          readPreferences(storageKey).camera,
+        );
+        expect(persistedAfterUnplug[0]).toEqual({
+          selectedDeviceId: defaultDeviceId,
+          selectedDeviceLabel: '',
+          muted: true,
+        });
+        expect(persistedAfterUnplug).toContainEqual({
+          selectedDeviceId: finalDevice.deviceId,
+          selectedDeviceLabel: finalDevice.label,
+          muted: true,
+        });
+      } finally {
+        stressManager.dispose();
+        Object.defineProperty(globalThis, 'window', {
+          configurable: true,
+          value: originalWindow,
+        });
+      }
+    });
+  });
+
   afterEach(() => {
     vi.clearAllMocks();
     vi.resetModules();