@stream-io/video-client 0.4.4 → 0.4.6

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);
 };

package/src/devices/devices.ts

@@ -1,13 +1,10 @@
 import {
-  combineLatest,
   concatMap,
   debounceTime,
-  filter,
   from,
   map,
   merge,
   Observable,
-  pairwise,
   shareReplay,
 } from 'rxjs';
 import { getLogger } from '../logger';
@@ -61,8 +58,7 @@ const getDevices = (
 /**
  * [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 const checkIfAudioOutputChangeSupported = () => {
   if (typeof document === 'undefined') return false;
   const element = document.createElement('audio');
@@ -258,124 +254,16 @@ export const getScreenShareStream = async (
   }
 };
 
-const watchForDisconnectedDevice = (
-  kind: MediaDeviceKind,
-  deviceId$: Observable<string | undefined>,
-) => {
-  let devices$;
-  switch (kind) {
-    case 'audioinput':
-      devices$ = getAudioDevices();
-      break;
-    case 'videoinput':
-      devices$ = getVideoDevices();
-      break;
-    case 'audiooutput':
-      devices$ = getAudioOutputDevices();
-      break;
-  }
-  return combineLatest([devices$, deviceId$]).pipe(
-    filter(
-      ([devices, deviceId]) =>
-        !!deviceId && !devices.find((d) => d.deviceId === deviceId),
-    ),
-    map(() => true),
-  );
-};
-
-/**
- * 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 const watchForDisconnectedAudioDevice = (
-  deviceId$: Observable<string | undefined>,
-) => {
-  return watchForDisconnectedDevice('audioinput', deviceId$);
-};
-
-/**
- * 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 const watchForDisconnectedVideoDevice = (
-  deviceId$: Observable<string | undefined>,
-) => {
-  return watchForDisconnectedDevice('videoinput', deviceId$);
-};
-
-/**
- * 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 const watchForDisconnectedAudioOutputDevice = (
-  deviceId$: Observable<string | undefined>,
-) => {
-  return watchForDisconnectedDevice('audiooutput', deviceId$);
-};
-
-const watchForAddedDefaultDevice = (kind: MediaDeviceKind) => {
-  let devices$;
-  switch (kind) {
-    case 'audioinput':
-      devices$ = getAudioDevices();
-      break;
-    case 'videoinput':
-      devices$ = getVideoDevices();
-      break;
-    case 'audiooutput':
-      devices$ = getAudioOutputDevices();
-      break;
-    default:
-      throw new Error('Unknown MediaDeviceKind', kind);
-  }
-
-  return devices$.pipe(
-    pairwise(),
-    filter(([prev, current]) => {
-      const prevDefault = prev.find((device) => device.deviceId === 'default');
-      const currentDefault = current.find(
-        (device) => device.deviceId === 'default',
-      );
-      return !!(
-        current.length > prev.length &&
-        prevDefault &&
-        currentDefault &&
-        prevDefault.groupId !== currentDefault.groupId
-      );
-    }),
-    map(() => true),
-  );
-};
-
-/**
- * Notifies the subscriber about newly added default audio input device.
- * @returns Observable<boolean>
- */
-export const watchForAddedDefaultAudioDevice = () =>
-  watchForAddedDefaultDevice('audioinput');
-
-/**
- * Notifies the subscriber about newly added default audio output device.
- * @returns Observable<boolean>
- */
-export const watchForAddedDefaultAudioOutputDevice = () =>
-  watchForAddedDefaultDevice('audiooutput');
-
-/**
- * Notifies the subscriber about newly added default video input device.
- * @returns Observable<boolean>
- */
-export const watchForAddedDefaultVideoDevice = () =>
-  watchForAddedDefaultDevice('videoinput');
+export const deviceIds$ =
+  typeof navigator !== 'undefined' &&
+  typeof navigator.mediaDevices !== 'undefined'
+    ? memoizedObservable(() =>
+        merge(
+          from(navigator.mediaDevices.enumerateDevices()),
+          getDeviceChangeObserver(),
+        ).pipe(shareReplay(1)),
+      )()
+    : undefined;
 
 /**
  * Deactivates MediaStream (stops and removes tracks) to be later garbage collected

package/src/rtc/flows/join.ts

@@ -44,25 +44,6 @@ const doJoin = async (
     ...data,
     location,
   };
-
-  // FIXME OL: remove this once cascading is enabled by default
-  const cascadingModeParams = getCascadingModeParams();
-  if (cascadingModeParams) {
-    // FIXME OL: remove after SFU migration is done
-    if (data?.migrating_from && cascadingModeParams['next_sfu_id']) {
-      cascadingModeParams['sfu_id'] = cascadingModeParams['next_sfu_id'];
-    }
-    return httpClient.doAxiosRequest<JoinCallResponse, JoinCallRequest>(
-      'post',
-      `/call/${type}/${id}/join`,
-      request,
-      {
-        params: {
-          ...cascadingModeParams,
-        },
-      },
-    );
-  }
   return httpClient.post<JoinCallResponse, JoinCallRequest>(
     `/call/${type}/${id}/join`,
     request,
@@ -81,20 +62,6 @@ const toRtcConfiguration = (config?: ICEServer[]) => {
   return rtcConfig;
 };
 
-const getCascadingModeParams = () => {
-  if (typeof window === 'undefined') return null;
-  const params = new URLSearchParams(window.location?.search);
-  const cascadingEnabled = params.get('cascading') !== null;
-  if (cascadingEnabled) {
-    const rawParams: Record<string, string> = {};
-    params.forEach((value, key) => {
-      rawParams[key] = value;
-    });
-    return rawParams;
-  }
-  return null;
-};
-
 /**
  * Reconciles the local state of the source participant into the target participant.
  *