@stream-io/video-client 0.4.5 → 0.4.6

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
@@ -56,6 +58,7 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
      * @param deviceId
      */
     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 +71,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/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.6",
   "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/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();
+    }
   }
 
   /**
@@ -125,6 +135,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 +218,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 +230,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/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> {
@@ -217,6 +233,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();

package/src/devices/__tests__/MicrophoneManager.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 { mockAudioDevices, mockAudioStream, mockCall } from './mocks';
+import {
+  mockAudioDevices,
+  mockAudioStream,
+  mockCall,
+  mockDeviceIds$,
+} from './mocks';
 import { getAudioStream } from '../devices';
 import { TrackType } from '../../gen/video/sfu/models/models';
 import { MicrophoneManager } from '../MicrophoneManager';
@@ -22,6 +27,7 @@ vi.mock('../devices.ts', () => {
       return of(mockAudioDevices);
     }),
     getAudioStream: vi.fn(() => Promise.resolve(mockAudioStream())),
+    deviceIds$: mockDeviceIds$(),
   };
 });
 

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

@@ -4,7 +4,7 @@ import { Call } from '../../Call';
 import { StreamClient } from '../../coordinator/connection/client';
 import { CallingState, StreamVideoWriteableStateStore } from '../../store';
 import * as RxUtils from '../../store/rxUtils';
-import { mockCall, mockScreenShareStream } from './mocks';
+import { mockCall, mockDeviceIds$, mockScreenShareStream } from './mocks';
 import { getScreenShareStream } from '../devices';
 import { TrackType } from '../../gen/video/sfu/models/models';
 
@@ -14,6 +14,7 @@ vi.mock('../devices.ts', () => {
     disposeOfMediaStream: vi.fn(),
     getScreenShareStream: vi.fn(() => Promise.resolve(mockScreenShareStream())),
     checkIfAudioOutputChangeSupported: vi.fn(() => Promise.resolve(true)),
+    deviceIds$: () => mockDeviceIds$(),
   };
 });
 

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

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, vi, it, expect } from 'vitest';
-import { mockAudioDevices } from './mocks';
+import { emitDeviceIds, mockAudioDevices, mockDeviceIds$ } from './mocks';
 import { of } from 'rxjs';
 import { SpeakerManager } from '../SpeakerManager';
 import { checkIfAudioOutputChangeSupported } from '../devices';
@@ -9,6 +9,7 @@ vi.mock('../devices.ts', () => {
   return {
     getAudioOutputDevices: vi.fn(() => of(mockAudioDevices)),
     checkIfAudioOutputChangeSupported: vi.fn(() => true),
+    deviceIds$: mockDeviceIds$(),
   };
 });
 
@@ -59,6 +60,16 @@ describe('SpeakerManager.test', () => {
     expect(manager.state.volume).toBe(0.5);
   });
 
+  it('should disable device if selected device is disconnected', () => {
+    emitDeviceIds(mockAudioDevices);
+    const deviceId = mockAudioDevices[1].deviceId;
+    manager.select(deviceId);
+
+    emitDeviceIds(mockAudioDevices.slice(2));
+
+    expect(manager.state.selectedDevice).toBe('');
+  });
+
   afterEach(() => {
     vi.clearAllMocks();
     vi.resetModules();

package/src/devices/__tests__/mocks.ts

@@ -2,6 +2,7 @@ import { vi } from 'vitest';
 import { CallingState, CallState } from '../../store';
 import { OwnCapability } from '../../gen/coordinator';
 import { Call } from '../../Call';
+import { Subject } from 'rxjs';
 
 export const mockVideoDevices = [
   {
@@ -80,8 +81,14 @@ export const mockCall = (): Partial<Call> => {
   };
 };
 
+export type MockTrack = Partial<MediaStreamTrack> & {
+  eventHandlers: { [key: string]: EventListenerOrEventListenerObject };
+  readyState: string;
+};
+
 export const mockAudioStream = () => {
-  const track = {
+  const track: MockTrack = {
+    eventHandlers: {},
     getSettings: () => ({
       deviceId: mockAudioDevices[0].deviceId,
     }),
@@ -90,15 +97,22 @@ export const mockAudioStream = () => {
     stop: () => {
       track.readyState = 'ended';
     },
+    addEventListener: (
+      event: string,
+      handler: EventListenerOrEventListenerObject,
+    ) => {
+      track.eventHandlers[event] = handler;
+    },
   };
   return {
     getTracks: () => [track],
     getAudioTracks: () => [track],
-  } as MediaStream;
+  } as any as MediaStream;
 };
 
 export const mockVideoStream = () => {
-  const track = {
+  const track: MockTrack = {
+    eventHandlers: {},
     getSettings: () => ({
       deviceId: mockVideoDevices[0].deviceId,
       width: 1280,
@@ -109,15 +123,22 @@ export const mockVideoStream = () => {
     stop: () => {
       track.readyState = 'ended';
     },
+    addEventListener: (
+      event: string,
+      handler: EventListenerOrEventListenerObject,
+    ) => {
+      track.eventHandlers[event] = handler;
+    },
   };
   return {
     getTracks: () => [track],
     getVideoTracks: () => [track],
-  } as MediaStream;
+  } as any as MediaStream;
 };
 
 export const mockScreenShareStream = (includeAudio: boolean = true) => {
   const track = {
+    eventHandlers: {},
     getSettings: () => ({
       deviceId: 'screen',
     }),
@@ -126,11 +147,18 @@ export const mockScreenShareStream = (includeAudio: boolean = true) => {
     stop: () => {
       track.readyState = 'ended';
     },
+    addEventListener: (
+      event: string,
+      handler: EventListenerOrEventListenerObject,
+    ) => {
+      track.eventHandlers[event] = handler;
+    },
   };
 
   const tracks = [track];
   if (includeAudio) {
-    tracks.push({
+    const audioTrack = {
+      eventHandlers: {},
       getSettings: () => ({
         deviceId: 'screen-audio',
       }),
@@ -139,12 +167,33 @@ export const mockScreenShareStream = (includeAudio: boolean = true) => {
       stop: () => {
         track.readyState = 'ended';
       },
-    });
+      addEventListener: (
+        event: string,
+        handler: EventListenerOrEventListenerObject,
+      ) => {
+        audioTrack.eventHandlers[event] = handler;
+      },
+    };
+    tracks.push(audioTrack);
   }
 
   return {
     getTracks: () => tracks,
     getVideoTracks: () => tracks,
     getAudioTracks: () => tracks,
-  } as MediaStream;
+  } as any as MediaStream;
+};
+
+let deviceIds: Subject<MediaDeviceInfo[]>;
+export const mockDeviceIds$ = () => {
+  global.navigator = {
+    //@ts-expect-error
+    mediaDevices: {},
+  };
+  deviceIds = new Subject();
+  return deviceIds;
+};
+
+export const emitDeviceIds = (values: MediaDeviceInfo[]) => {
+  deviceIds.next(values);
 };