@stream-io/video-client 0.4.5 → 0.4.7

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

@@ -16,6 +16,8 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
      */
     disablePromise?: Promise<void>;
     logger: Logger;
+    private subscriptions;
+    private isTrackStoppedDueToTrackEnd;
     protected constructor(call: Call, state: T, trackType: TrackType);
     /**
      * Lists the available audio/video devices
@@ -49,13 +51,13 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
      */
     setDefaultConstraints(constraints: C): void;
     /**
-     * Select device
+     * Selects a device.
      *
      * Note: this method is not supported in React Native
-     *
-     * @param deviceId
+     * @param deviceId the device id to select.
      */
     select(deviceId: string | undefined): Promise<void>;
+    removeSubscriptions: () => void;
     protected applySettingsToStream(): Promise<void>;
     protected abstract getDevices(): Observable<MediaDeviceInfo[] | undefined>;
     protected abstract getStream(constraints: C): Promise<MediaStream>;
@@ -68,4 +70,7 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
     private stopTracks;
     private muteLocalStream;
     protected unmuteStream(): Promise<void>;
+    private get mediaDeviceKind();
+    private handleDisconnectedOrReplacedDevices;
+    private findDeviceInList;
 }

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

@@ -1,8 +1,9 @@
-import { BehaviorSubject } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { RxUtils } from '../store';
 export type InputDeviceStatus = 'enabled' | 'disabled' | undefined;
 export declare abstract class InputMediaDeviceManagerState<C = MediaTrackConstraints> {
     readonly disableMode: 'stop-tracks' | 'disable-tracks';
+    private readonly permissionName;
     protected statusSubject: BehaviorSubject<InputDeviceStatus>;
     protected mediaStreamSubject: BehaviorSubject<MediaStream | undefined>;
     protected selectedDeviceSubject: BehaviorSubject<string | undefined>;
@@ -15,20 +16,32 @@ export declare abstract class InputMediaDeviceManagerState<C = MediaTrackConstra
      * An Observable that emits the current media stream, or `undefined` if the device is currently disabled.
      *
      */
-    mediaStream$: import("rxjs").Observable<MediaStream | undefined>;
+    mediaStream$: Observable<MediaStream | undefined>;
     /**
      * An Observable that emits the currently selected device
      */
-    selectedDevice$: import("rxjs").Observable<string | undefined>;
+    selectedDevice$: Observable<string | undefined>;
     /**
      * An Observable that emits the device status
      */
-    status$: import("rxjs").Observable<InputDeviceStatus>;
+    status$: Observable<InputDeviceStatus>;
     /**
      * The default constraints for the device.
      */
-    defaultConstraints$: import("rxjs").Observable<C | undefined>;
-    constructor(disableMode?: 'stop-tracks' | 'disable-tracks');
+    defaultConstraints$: Observable<C | undefined>;
+    /**
+     * An observable that will emit `true` if browser/system permission
+     * is granted, `false` otherwise.
+     */
+    hasBrowserPermission$: Observable<boolean>;
+    /**
+     * Constructs new InputMediaDeviceManagerState instance.
+     *
+     * @param disableMode the disable mode to use.
+     * @param permissionName the permission name to use for querying.
+     * `undefined` means no permission is required.
+     */
+    constructor(disableMode?: 'stop-tracks' | 'disable-tracks', permissionName?: PermissionName | undefined);
     /**
      * The device status
      */
@@ -47,7 +60,7 @@ export declare abstract class InputMediaDeviceManagerState<C = MediaTrackConstra
      *
      * @param observable$ the observable to get the value from.
      */
-    getCurrentValue: <T>(observable$: import("rxjs").Observable<T>) => T;
+    getCurrentValue: <T>(observable$: Observable<T>) => T;
     /**
      * @internal
      * @param status

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

@@ -1,6 +1,8 @@
 import { SpeakerState } from './SpeakerState';
 export declare class SpeakerManager {
     readonly state: SpeakerState;
+    private subscriptions;
+    constructor();
     /**
      * Lists the available audio output devices
      *
@@ -17,6 +19,7 @@ export declare class SpeakerManager {
      * @param deviceId empty string means the system default
      */
     select(deviceId: string): void;
+    removeSubscriptions: () => void;
     /**
      * Set the volume of the audio elements
      * @param volume a number between 0 and 1

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

@@ -2,8 +2,7 @@ import { Observable } from 'rxjs';
 /**
  * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
  *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- */
+ *  */
 export declare const checkIfAudioOutputChangeSupported: () => boolean;
 /**
  * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audioinput' devices, if devices are added/removed the list is updated.
@@ -46,45 +45,7 @@ export declare const getVideoStream: (trackConstraints?: MediaTrackConstraints)
  * @param options any additional options to pass to the [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) API.
  */
 export declare const getScreenShareStream: (options?: DisplayMediaStreamOptions) => Promise<MediaStream>;
-/**
- * Notifies the subscriber if a given 'audioinput' device is disconnected
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @param deviceId$ an Observable that specifies which device to watch for
- * @returns
- */
-export declare const watchForDisconnectedAudioDevice: (deviceId$: Observable<string | undefined>) => Observable<boolean>;
-/**
- * Notifies the subscriber if a given 'videoinput' device is disconnected
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @param deviceId$ an Observable that specifies which device to watch for
- * @returns
- */
-export declare const watchForDisconnectedVideoDevice: (deviceId$: Observable<string | undefined>) => Observable<boolean>;
-/**
- * Notifies the subscriber if a given 'audiooutput' device is disconnected
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @param deviceId$ an Observable that specifies which device to watch for
- * @returns
- */
-export declare const watchForDisconnectedAudioOutputDevice: (deviceId$: Observable<string | undefined>) => Observable<boolean>;
-/**
- * Notifies the subscriber about newly added default audio input device.
- * @returns Observable<boolean>
- */
-export declare const watchForAddedDefaultAudioDevice: () => Observable<boolean>;
-/**
- * Notifies the subscriber about newly added default audio output device.
- * @returns Observable<boolean>
- */
-export declare const watchForAddedDefaultAudioOutputDevice: () => Observable<boolean>;
-/**
- * Notifies the subscriber about newly added default video input device.
- * @returns Observable<boolean>
- */
-export declare const watchForAddedDefaultVideoDevice: () => Observable<boolean>;
+export declare const deviceIds$: Observable<MediaDeviceInfo[]> | undefined;
 /**
  * Deactivates MediaStream (stops and removes tracks) to be later garbage collected
  *

package/package.json

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

package/src/Call.ts

@@ -507,6 +507,11 @@ export class Call {
 
     this.clientStore.unregisterCall(this);
     this.state.setCallingState(CallingState.LEFT);
+
+    this.camera.removeSubscriptions();
+    this.microphone.removeSubscriptions();
+    this.screenShare.removeSubscriptions();
+    this.speaker.removeSubscriptions();
   };
 
   /**
@@ -1004,7 +1009,11 @@ export class Call {
         await this.initCamera({ setStatus: true });
         await this.initMic({ setStatus: true });
       } catch (error) {
-        this.logger('warn', 'Camera and/or mic init failed during join call');
+        this.logger(
+          'warn',
+          'Camera and/or mic init failed during join call',
+          error,
+        );
       }
 
       // 3. once we have the "joinResponse", and possibly reconciled the local state

package/src/devices/CameraManagerState.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged, Observable } from 'rxjs';
 import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
 import { isReactNative } from '../helpers/platforms';
 
@@ -15,7 +15,12 @@ export class CameraManagerState extends InputMediaDeviceManagerState {
   direction$: Observable<CameraDirection>;
 
   constructor() {
-    super('stop-tracks');
+    super(
+      'stop-tracks',
+      // `camera` is not in the W3C standard yet,
+      // but it's supported by Chrome and Safari.
+      'camera' as PermissionName,
+    );
     this.direction$ = this.directionSubject
       .asObservable()
       .pipe(distinctUntilChanged());

package/src/devices/InputMediaDeviceManager.ts

@@ -1,4 +1,4 @@
-import { Observable } from 'rxjs';
+import { Observable, Subscription, combineLatest, pairwise } from 'rxjs';
 import { Call } from '../Call';
 import { CallingState } from '../store';
 import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
@@ -6,6 +6,7 @@ import { isReactNative } from '../helpers/platforms';
 import { Logger } from '../coordinator/connection/types';
 import { getLogger } from '../logger';
 import { TrackType } from '../gen/video/sfu/models/models';
+import { deviceIds$ } from './devices';
 
 export abstract class InputMediaDeviceManager<
   T extends InputMediaDeviceManagerState<C>,
@@ -20,6 +21,8 @@ export abstract class InputMediaDeviceManager<
    */
   disablePromise?: Promise<void>;
   logger: Logger;
+  private subscriptions: Subscription[] = [];
+  private isTrackStoppedDueToTrackEnd = false;
 
   protected constructor(
     protected readonly call: Call,
@@ -27,6 +30,13 @@ export abstract class InputMediaDeviceManager<
     protected readonly trackType: TrackType,
   ) {
     this.logger = getLogger([`${TrackType[trackType].toLowerCase()} manager`]);
+    if (
+      deviceIds$ &&
+      !isReactNative() &&
+      (this.trackType === TrackType.AUDIO || this.trackType === TrackType.VIDEO)
+    ) {
+      this.handleDisconnectedOrReplacedDevices();
+    }
   }
 
   /**
@@ -108,11 +118,10 @@ export abstract class InputMediaDeviceManager<
   }
 
   /**
-   * Select device
+   * Selects a device.
    *
    * Note: this method is not supported in React Native
-   *
-   * @param deviceId
+   * @param deviceId the device id to select.
    */
   async select(deviceId: string | undefined) {
     if (isReactNative()) {
@@ -125,6 +134,10 @@ export abstract class InputMediaDeviceManager<
     await this.applySettingsToStream();
   }
 
+  removeSubscriptions = () => {
+    this.subscriptions.forEach((s) => s.unsubscribe());
+  };
+
   protected async applySettingsToStream() {
     if (this.state.status === 'enabled') {
       await this.muteStream();
@@ -204,9 +217,6 @@ export abstract class InputMediaDeviceManager<
       stream = this.state.mediaStream;
       this.unmuteTracks();
     } else {
-      if (this.state.mediaStream) {
-        this.stopTracks();
-      }
       const defaultConstraints = this.state.defaultConstraints;
       const constraints: MediaTrackConstraints = {
         ...defaultConstraints,
@@ -219,6 +229,89 @@ export abstract class InputMediaDeviceManager<
     }
     if (this.state.mediaStream !== stream) {
       this.state.setMediaStream(stream);
+      this.getTracks().forEach((track) => {
+        track.addEventListener('ended', async () => {
+          if (this.enablePromise) {
+            await this.enablePromise;
+          }
+          if (this.disablePromise) {
+            await this.disablePromise;
+          }
+          if (this.state.status === 'enabled') {
+            this.isTrackStoppedDueToTrackEnd = true;
+            setTimeout(() => {
+              this.isTrackStoppedDueToTrackEnd = false;
+            }, 2000);
+            await this.disable();
+          }
+        });
+      });
+    }
+  }
+
+  private get mediaDeviceKind() {
+    if (this.trackType === TrackType.AUDIO) {
+      return 'audioinput';
+    }
+    if (this.trackType === TrackType.VIDEO) {
+      return 'videoinput';
     }
+    return '';
+  }
+
+  private handleDisconnectedOrReplacedDevices() {
+    this.subscriptions.push(
+      combineLatest([
+        deviceIds$!.pipe(pairwise()),
+        this.state.selectedDevice$,
+      ]).subscribe(async ([[prevDevices, currentDevices], deviceId]) => {
+        if (!deviceId) {
+          return;
+        }
+        if (this.enablePromise) {
+          await this.enablePromise;
+        }
+        if (this.disablePromise) {
+          await this.disablePromise;
+        }
+
+        let isDeviceDisconnected = false;
+        let isDeviceReplaced = false;
+        const currentDevice = this.findDeviceInList(currentDevices, deviceId);
+        const prevDevice = this.findDeviceInList(prevDevices, deviceId);
+        if (!currentDevice && prevDevice) {
+          isDeviceDisconnected = true;
+        } else if (
+          currentDevice &&
+          prevDevice &&
+          currentDevice.deviceId === prevDevice.deviceId &&
+          currentDevice.groupId !== prevDevice.groupId
+        ) {
+          isDeviceReplaced = true;
+        }
+
+        if (isDeviceDisconnected) {
+          await this.disable();
+          this.select(undefined);
+        }
+        if (isDeviceReplaced) {
+          if (
+            this.isTrackStoppedDueToTrackEnd &&
+            this.state.status === 'disabled'
+          ) {
+            await this.enable();
+            this.isTrackStoppedDueToTrackEnd = false;
+          } else {
+            await this.applySettingsToStream();
+          }
+        }
+      }),
+    );
+  }
+
+  private findDeviceInList(devices: MediaDeviceInfo[], deviceId: string) {
+    return devices.find(
+      (d) => d.deviceId === deviceId && d.kind === this.mediaDeviceKind,
+    );
   }
 }

package/src/devices/InputMediaDeviceManagerState.ts

@@ -1,4 +1,10 @@
-import { BehaviorSubject, distinctUntilChanged } from 'rxjs';
+import {
+  BehaviorSubject,
+  distinctUntilChanged,
+  Observable,
+  shareReplay,
+} from 'rxjs';
+import { isReactNative } from '../helpers/platforms';
 import { RxUtils } from '../store';
 
 export type InputDeviceStatus = 'enabled' | 'disabled' | undefined;
@@ -43,10 +49,47 @@ export abstract class InputMediaDeviceManagerState<C = MediaTrackConstraints> {
    */
   defaultConstraints$ = this.defaultConstraintsSubject.asObservable();
 
+  /**
+   * An observable that will emit `true` if browser/system permission
+   * is granted, `false` otherwise.
+   */
+  hasBrowserPermission$ = new Observable<boolean>((subscriber) => {
+    const notifyGranted = () => subscriber.next(true);
+    if (isReactNative() || !this.permissionName) return notifyGranted();
+
+    let permissionState: PermissionStatus;
+    const notify = () => subscriber.next(permissionState.state === 'granted');
+    navigator.permissions
+      .query({ name: this.permissionName })
+      .then((permissionStatus) => {
+        permissionState = permissionStatus;
+        permissionState.addEventListener('change', notify);
+        notify();
+      })
+      .catch(() => {
+        // permission doesn't exist or can't be queried -> assume it's granted
+        // an example would be Firefox,
+        // where neither camera microphone permission can be queried
+        notifyGranted();
+      });
+
+    return () => {
+      permissionState?.removeEventListener('change', notify);
+    };
+  }).pipe(shareReplay(1));
+
+  /**
+   * Constructs new InputMediaDeviceManagerState instance.
+   *
+   * @param disableMode the disable mode to use.
+   * @param permissionName the permission name to use for querying.
+   * `undefined` means no permission is required.
+   */
   constructor(
     public readonly disableMode:
       | 'stop-tracks'
       | 'disable-tracks' = 'stop-tracks',
+    private readonly permissionName: PermissionName | undefined = undefined,
   ) {}
 
   /**

package/src/devices/MicrophoneManagerState.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
+import { BehaviorSubject, distinctUntilChanged, Observable } from 'rxjs';
 import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
 
 export class MicrophoneManagerState extends InputMediaDeviceManagerState {
@@ -12,7 +12,12 @@ export class MicrophoneManagerState extends InputMediaDeviceManagerState {
   speakingWhileMuted$: Observable<boolean>;
 
   constructor() {
-    super('disable-tracks');
+    super(
+      'disable-tracks',
+      // `microphone` is not in the W3C standard yet,
+      // but it's supported by Chrome and Safari.
+      'microphone' as PermissionName,
+    );
 
     this.speakingWhileMuted$ = this.speakingWhileMutedSubject
       .asObservable()

package/src/devices/SpeakerManager.ts

@@ -1,9 +1,31 @@
+import { Subscription, combineLatest } from 'rxjs';
 import { isReactNative } from '../helpers/platforms';
 import { SpeakerState } from './SpeakerState';
-import { getAudioOutputDevices } from './devices';
+import { deviceIds$, getAudioOutputDevices } from './devices';
 
 export class SpeakerManager {
   public readonly state = new SpeakerState();
+  private subscriptions: Subscription[] = [];
+
+  constructor() {
+    if (deviceIds$ && !isReactNative()) {
+      this.subscriptions.push(
+        combineLatest([deviceIds$!, this.state.selectedDevice$]).subscribe(
+          ([devices, deviceId]) => {
+            if (!deviceId) {
+              return;
+            }
+            const device = devices.find(
+              (d) => d.deviceId === deviceId && d.kind === 'audiooutput',
+            );
+            if (!device) {
+              this.select('');
+            }
+          },
+        ),
+      );
+    }
+  }
 
   /**
    * Lists the available audio output devices
@@ -30,6 +52,10 @@ export class SpeakerManager {
     this.state.setDevice(deviceId);
   }
 
+  removeSubscriptions = () => {
+    this.subscriptions.forEach((s) => s.unsubscribe());
+  };
+
   /**
    * Set the volume of the audio elements
    * @param volume a number between 0 and 1

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

@@ -3,7 +3,12 @@ import { StreamClient } from '../../coordinator/connection/client';
 import { CallingState, StreamVideoWriteableStateStore } from '../../store';
 
 import { afterEach, beforeEach, describe, expect, it, Mock, vi } from 'vitest';
-import { mockCall, mockVideoDevices, mockVideoStream } from './mocks';
+import {
+  mockCall,
+  mockDeviceIds$,
+  mockVideoDevices,
+  mockVideoStream,
+} from './mocks';
 import { getVideoStream } from '../devices';
 import { TrackType } from '../../gen/video/sfu/models/models';
 import { CameraManager } from '../CameraManager';
@@ -17,6 +22,7 @@ vi.mock('../devices.ts', () => {
       return of(mockVideoDevices);
     }),
     getVideoStream: vi.fn(() => Promise.resolve(mockVideoStream())),
+    deviceIds$: mockDeviceIds$(),
   };
 });
 

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

@@ -3,7 +3,14 @@ import { StreamClient } from '../../coordinator/connection/client';
 import { CallingState, StreamVideoWriteableStateStore } from '../../store';
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { mockCall, mockVideoDevices, mockVideoStream } from './mocks';
+import {
+  MockTrack,
+  emitDeviceIds,
+  mockCall,
+  mockDeviceIds$,
+  mockVideoDevices,
+  mockVideoStream,
+} from './mocks';
 import { InputMediaDeviceManager } from '../InputMediaDeviceManager';
 import { InputMediaDeviceManagerState } from '../InputMediaDeviceManagerState';
 import { of } from 'rxjs';
@@ -16,8 +23,17 @@ vi.mock('../../Call.ts', () => {
   };
 });
 
+vi.mock('../devices.ts', () => {
+  console.log('MOCKING devices API');
+  return {
+    deviceIds$: mockDeviceIds$(),
+  };
+});
+
 class TestInputMediaDeviceManagerState extends InputMediaDeviceManagerState {
-  public getDeviceIdFromStream = vi.fn(() => 'mock-device-id');
+  public getDeviceIdFromStream = vi.fn(
+    (stream) => stream.getVideoTracks()[0].getSettings().deviceId,
+  );
 }
 
 class TestInputMediaDeviceManager extends InputMediaDeviceManager<TestInputMediaDeviceManagerState> {
@@ -28,7 +44,14 @@ class TestInputMediaDeviceManager extends InputMediaDeviceManager<TestInputMedia
   public getTracks = () => this.state.mediaStream?.getTracks() ?? [];
 
   constructor(call: Call) {
-    super(call, new TestInputMediaDeviceManagerState(), TrackType.VIDEO);
+    super(
+      call,
+      new TestInputMediaDeviceManagerState(
+        'stop-tracks',
+        'camera' as PermissionName,
+      ),
+      TrackType.VIDEO,
+    );
   }
 }
 
@@ -217,6 +240,93 @@ describe('InputMediaDeviceManager.test', () => {
     });
   });
 
+  it('should set status to disabled if track ends', async () => {
+    vi.useFakeTimers();
+
+    await manager.enable();
+
+    vi.spyOn(manager, 'enable');
+    vi.spyOn(manager, 'listDevices').mockImplementationOnce(() =>
+      of(mockVideoDevices.slice(1)),
+    );
+    await (
+      (manager.state.mediaStream?.getTracks()[0] as MockTrack).eventHandlers[
+        'ended'
+      ] as Function
+    )();
+    await vi.runAllTimersAsync();
+
+    expect(manager.state.status).toBe('disabled');
+    expect(manager.enable).not.toHaveBeenCalled();
+
+    vi.useRealTimers();
+  });
+
+  it('should restart track if the default device is replaced and status is enabled', async () => {
+    vi.useFakeTimers();
+    emitDeviceIds(mockVideoDevices);
+
+    await manager.enable();
+    const device = mockVideoDevices[0];
+    await manager.select(device.deviceId);
+
+    //@ts-expect-error
+    vi.spyOn(manager, 'applySettingsToStream');
+
+    emitDeviceIds([
+      { ...device, groupId: device.groupId + 'new' },
+      ...mockVideoDevices.slice(1),
+    ]);
+
+    await vi.runAllTimersAsync();
+
+    expect(manager['applySettingsToStream']).toHaveBeenCalledOnce();
+    expect(manager.state.status).toBe('enabled');
+
+    vi.useRealTimers();
+  });
+
+  it('should do nothing if default device is replaced and status is disabled', async () => {
+    vi.useFakeTimers();
+    emitDeviceIds(mockVideoDevices);
+
+    const device = mockVideoDevices[0];
+    await manager.select(device.deviceId);
+    await manager.disable();
+
+    emitDeviceIds([
+      { ...device, groupId: device.groupId + 'new' },
+      ...mockVideoDevices.slice(1),
+    ]);
+
+    await vi.runAllTimersAsync();
+
+    expect(manager.state.status).toBe('disabled');
+    expect(manager.disablePromise).toBeUndefined();
+    expect(manager.enablePromise).toBeUndefined();
+    expect(manager.state.selectedDevice).toBe(device.deviceId);
+
+    vi.useRealTimers();
+  });
+
+  it('should disable stream and deselect device if selected device is disconnected', async () => {
+    vi.useFakeTimers();
+    emitDeviceIds(mockVideoDevices);
+
+    await manager.enable();
+    const device = mockVideoDevices[0];
+    await manager.select(device.deviceId);
+
+    emitDeviceIds(mockVideoDevices.slice(1));
+
+    await vi.runAllTimersAsync();
+
+    expect(manager.state.selectedDevice).toBe(undefined);
+    expect(manager.state.status).toBe('disabled');
+
+    vi.useRealTimers();
+  });
+
   afterEach(() => {
     vi.clearAllMocks();
     vi.resetModules();