@stream-io/video-client 0.3.0 → 0.3.2

package/src/devices/InputMediaDeviceManager.ts

@@ -0,0 +1,121 @@
+import { Observable } from 'rxjs';
+import { Call } from '../Call';
+import { CallingState } from '../store';
+import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
+import { disposeOfMediaStream } from './devices';
+import { isReactNative } from '../helpers/platforms';
+
+export abstract class InputMediaDeviceManager<
+  T extends InputMediaDeviceManagerState,
+> {
+  constructor(protected readonly call: Call, public readonly state: T) {}
+
+  /**
+   * Lists the available audio/video devices
+   *
+   * Note: It prompts the user for a permission to use devices (if not already granted)
+   *
+   * @returns an Observable that will be updated if a device is connected or disconnected
+   */
+  listDevices() {
+    return this.getDevices();
+  }
+
+  /**
+   * Starts camera/microphone
+   */
+  async enable() {
+    if (this.state.status === 'enabled') {
+      return;
+    }
+    await this.startStream();
+    this.state.setStatus('enabled');
+  }
+
+  /**
+   * Stops camera/microphone
+   * @returns
+   */
+  async disable() {
+    if (this.state.status === 'disabled') {
+      return;
+    }
+    await this.stopStream();
+    this.state.setStatus('disabled');
+  }
+
+  /**
+   * If current device statis is disabled, it will enable the device, else it will disable it.
+   * @returns
+   */
+  async toggle() {
+    if (this.state.status === 'enabled') {
+      return this.disable();
+    } else {
+      return this.enable();
+    }
+  }
+
+  /**
+   * Select device
+   *
+   * Note: this method is not supported in React Native
+   *
+   * @param deviceId
+   */
+  async select(deviceId: string | undefined) {
+    if (isReactNative()) {
+      throw new Error('This method is not supported in React Native');
+    }
+    if (deviceId === this.state.selectedDevice) {
+      return;
+    }
+    this.state.setDevice(deviceId);
+    await this.applySettingsToStream();
+  }
+
+  protected async applySettingsToStream() {
+    if (this.state.status === 'enabled') {
+      await this.stopStream();
+      await this.startStream();
+    }
+  }
+
+  abstract pause(): void;
+
+  abstract resume(): void;
+
+  protected abstract getDevices(): Observable<MediaDeviceInfo[]>;
+
+  protected abstract getStream(
+    constraints: MediaTrackConstraints,
+  ): Promise<MediaStream>;
+
+  protected abstract publishStream(stream: MediaStream): Promise<void>;
+
+  protected abstract stopPublishStream(): Promise<void>;
+
+  private async stopStream() {
+    if (!this.state.mediaStream) {
+      return;
+    }
+    if (this.call.state.callingState === CallingState.JOINED) {
+      await this.stopPublishStream();
+    } else if (this.state.mediaStream) {
+      disposeOfMediaStream(this.state.mediaStream);
+    }
+    this.state.setMediaStream(undefined);
+  }
+
+  private async startStream() {
+    if (this.state.mediaStream) {
+      return;
+    }
+    const constraints = { deviceId: this.state.selectedDevice };
+    const stream = await this.getStream(constraints);
+    if (this.call.state.callingState === CallingState.JOINED) {
+      await this.publishStream(stream);
+    }
+    this.state.setMediaStream(stream);
+  }
+}

package/src/devices/InputMediaDeviceManagerState.ts

@@ -0,0 +1,111 @@
+import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
+import { RxUtils } from '../store';
+
+export type InputDeviceStatus = 'enabled' | 'disabled' | undefined;
+
+export abstract class InputMediaDeviceManagerState {
+  protected statusSubject = new BehaviorSubject<InputDeviceStatus>(undefined);
+  protected mediaStreamSubject = new BehaviorSubject<MediaStream | undefined>(
+    undefined,
+  );
+  protected selectedDeviceSubject = new BehaviorSubject<string | undefined>(
+    undefined,
+  );
+
+  /**
+   * An Observable that emits the current media stream, or `undefined` if the device is currently disabled.
+   *
+   */
+  mediaStream$: Observable<MediaStream | undefined>;
+
+  /**
+   * An Observable that emits the currently selected device
+   */
+  selectedDevice$: Observable<string | undefined>;
+
+  /**
+   * An Observable that emits the device status
+   */
+  status$: Observable<InputDeviceStatus>;
+
+  constructor() {
+    this.mediaStream$ = this.mediaStreamSubject.asObservable();
+    this.selectedDevice$ = this.selectedDeviceSubject
+      .asObservable()
+      .pipe(distinctUntilChanged());
+    this.status$ = this.statusSubject.asObservable();
+  }
+
+  /**
+   * The device status
+   */
+  get status() {
+    return this.getCurrentValue(this.status$);
+  }
+
+  /**
+   * The currently selected device
+   */
+  get selectedDevice() {
+    return this.getCurrentValue(this.selectedDevice$);
+  }
+
+  /**
+   * The current media stream, or `undefined` if the device is currently disabled.
+   */
+  get mediaStream() {
+    return this.getCurrentValue(this.mediaStream$);
+  }
+
+  /**
+   * Gets the current value of an observable, or undefined if the observable has
+   * not emitted a value yet.
+   *
+   * @param observable$ the observable to get the value from.
+   */
+  getCurrentValue = RxUtils.getCurrentValue;
+
+  /**
+   * @internal
+   * @param status
+   */
+  setStatus(status: InputDeviceStatus) {
+    this.setCurrentValue(this.statusSubject, status);
+  }
+
+  /**
+   * @internal
+   * @param stream
+   */
+  setMediaStream(stream: MediaStream | undefined) {
+    this.setCurrentValue(this.mediaStreamSubject, stream);
+    if (stream) {
+      this.setDevice(this.getDeviceIdFromStream(stream));
+    }
+  }
+
+  /**
+   * @internal
+   * @param stream
+   */
+  setDevice(deviceId: string | undefined) {
+    this.setCurrentValue(this.selectedDeviceSubject, deviceId);
+  }
+
+  /**
+   * Updates the value of the provided Subject.
+   * An `update` can either be a new value or a function which takes
+   * the current value and returns a new value.
+   *
+   * @internal
+   *
+   * @param subject the subject to update.
+   * @param update the update to apply to the subject.
+   * @return the updated value.
+   */
+  protected setCurrentValue = RxUtils.setCurrentValue;
+
+  protected abstract getDeviceIdFromStream(
+    stream: MediaStream,
+  ): string | undefined;
+}

package/src/devices/MicrophoneManager.ts

@@ -0,0 +1,45 @@
+import { Observable } from 'rxjs';
+import { Call } from '../Call';
+import { InputMediaDeviceManager } from './InputMediaDeviceManager';
+import { MicrophoneManagerState } from './MicrophoneManagerState';
+import { getAudioDevices, getAudioStream } from './devices';
+import { TrackType } from '../gen/video/sfu/models/models';
+
+export class MicrophoneManager extends InputMediaDeviceManager<MicrophoneManagerState> {
+  constructor(call: Call) {
+    super(call, new MicrophoneManagerState());
+  }
+
+  protected getDevices(): Observable<MediaDeviceInfo[]> {
+    return getAudioDevices();
+  }
+  protected getStream(
+    constraints: MediaTrackConstraints,
+  ): Promise<MediaStream> {
+    return getAudioStream(constraints);
+  }
+  protected publishStream(stream: MediaStream): Promise<void> {
+    return this.call.publishAudioStream(stream);
+  }
+  protected stopPublishStream(): Promise<void> {
+    return this.call.stopPublish(TrackType.AUDIO);
+  }
+
+  /**
+   * Disables the audio tracks of the microphone
+   */
+  pause() {
+    this.state.mediaStream?.getAudioTracks().forEach((track) => {
+      track.enabled = false;
+    });
+  }
+
+  /**
+   * (Re)enables the audio tracks of the microphone
+   */
+  resume() {
+    this.state.mediaStream?.getAudioTracks().forEach((track) => {
+      track.enabled = true;
+    });
+  }
+}

package/src/devices/MicrophoneManagerState.ts

@@ -0,0 +1,9 @@
+import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
+
+export class MicrophoneManagerState extends InputMediaDeviceManagerState {
+  protected getDeviceIdFromStream(stream: MediaStream): string | undefined {
+    return stream.getAudioTracks()[0]?.getSettings().deviceId as
+      | string
+      | undefined;
+  }
+}

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

@@ -0,0 +1,150 @@
+import { Call } from '../../Call';
+import { StreamClient } from '../../coordinator/connection/client';
+import { CallingState, StreamVideoWriteableStateStore } from '../../store';
+
+import { afterEach, beforeEach, describe, vi, it, expect, Mock } from 'vitest';
+import { mockCall, mockVideoDevices, mockVideoStream } from './mocks';
+import { getVideoStream } from '../devices';
+import { TrackType } from '../../gen/video/sfu/models/models';
+import { CameraManager } from '../CameraManager';
+import { of } from 'rxjs';
+import { CallSettingsResponse } from '../../gen/coordinator';
+
+vi.mock('../devices.ts', () => {
+  console.log('MOCKING devices API');
+  return {
+    disposeOfMediaStream: vi.fn(),
+    getVideoDevices: vi.fn(() => {
+      return of(mockVideoDevices);
+    }),
+    getVideoStream: vi.fn(() => Promise.resolve(mockVideoStream())),
+  };
+});
+
+vi.mock('../../Call.ts', () => {
+  console.log('MOCKING Call');
+  return {
+    Call: vi.fn(() => mockCall()),
+  };
+});
+
+describe('CameraManager', () => {
+  let manager: CameraManager;
+
+  beforeEach(() => {
+    manager = new CameraManager(
+      new Call({
+        id: '',
+        type: '',
+        streamClient: new StreamClient('abc123'),
+        clientStore: new StreamVideoWriteableStateStore(),
+      }),
+    );
+  });
+
+  it('list devices', () => {
+    const spy = vi.fn();
+    manager.listDevices().subscribe(spy);
+
+    expect(spy).toHaveBeenCalledWith(mockVideoDevices);
+  });
+
+  it('get stream', async () => {
+    await manager.enable();
+
+    expect(getVideoStream).toHaveBeenCalledWith({
+      deviceId: undefined,
+    });
+  });
+
+  it('should get device id from stream', async () => {
+    expect(manager.state.selectedDevice).toBeUndefined();
+
+    await manager.enable();
+
+    expect(manager.state.selectedDevice).toBeDefined();
+  });
+
+  it('publish stream', async () => {
+    // @ts-expect-error
+    manager['call'].state.callingState = CallingState.JOINED;
+
+    await manager.enable();
+
+    expect(manager['call'].publishVideoStream).toHaveBeenCalledWith(
+      manager.state.mediaStream,
+    );
+  });
+
+  it('stop publish stream', async () => {
+    // @ts-expect-error
+    manager['call'].state.callingState = CallingState.JOINED;
+    await manager.enable();
+
+    await manager.disable();
+
+    expect(manager['call'].stopPublish).toHaveBeenCalledWith(TrackType.VIDEO);
+  });
+
+  it('flip', async () => {
+    await manager.selectDirection('front');
+
+    await manager.flip();
+
+    expect(manager.state.direction).toBe('back');
+  });
+
+  it('select camera direction', async () => {
+    expect(manager.state.direction).toBe(undefined);
+
+    await manager.enable();
+
+    expect(getVideoStream).toHaveBeenCalledWith({ deviceId: undefined });
+
+    await manager.selectDirection('front');
+
+    expect(getVideoStream).toHaveBeenCalledWith({
+      deviceId: undefined,
+      facingMode: 'user',
+    });
+
+    await manager.selectDirection('back');
+
+    expect(getVideoStream).toHaveBeenCalledWith({
+      deviceId: undefined,
+      facingMode: 'environment',
+    });
+  });
+
+  it(`shouldn't set deviceId and facingMode at the same time`, async () => {
+    await manager.enable();
+
+    await manager.flip();
+
+    expect(getVideoStream).toHaveBeenCalledWith({ facingMode: 'environment' });
+
+    const deviceId = mockVideoDevices[1].deviceId;
+    await manager.select(deviceId);
+
+    expect((getVideoStream as Mock).mock.lastCall[0]).toEqual({
+      deviceId,
+    });
+  });
+
+  it('should pause and resume tracks', async () => {
+    await manager.enable();
+
+    manager.pause();
+
+    expect(manager.state.mediaStream?.getVideoTracks()[0].enabled).toBe(false);
+
+    manager.resume();
+
+    expect(manager.state.mediaStream?.getVideoTracks()[0].enabled).toBe(true);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.resetModules();
+  });
+});

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

@@ -0,0 +1,159 @@
+import { Call } from '../../Call';
+import { StreamClient } from '../../coordinator/connection/client';
+import { CallingState, StreamVideoWriteableStateStore } from '../../store';
+
+import { afterEach, beforeEach, describe, vi, it, expect } from 'vitest';
+import { mockCall, mockVideoDevices, mockVideoStream } from './mocks';
+import { InputMediaDeviceManager } from '../InputMediaDeviceManager';
+import { InputMediaDeviceManagerState } from '../InputMediaDeviceManagerState';
+import { of } from 'rxjs';
+
+vi.mock('../../Call.ts', () => {
+  console.log('MOCKING Call');
+  return {
+    Call: vi.fn(() => mockCall()),
+  };
+});
+
+class TestInputMediaDeviceManagerState extends InputMediaDeviceManagerState {
+  public getDeviceIdFromStream = vi.fn(() => 'mock-device-id');
+}
+
+class TestInputMediaDeviceManager extends InputMediaDeviceManager<TestInputMediaDeviceManagerState> {
+  public getDevices = vi.fn(() => of(mockVideoDevices));
+  public getStream = vi.fn(() => Promise.resolve(mockVideoStream()));
+  public publishStream = vi.fn();
+  public stopPublishStream = vi.fn();
+  public pause = vi.fn();
+  public resume = vi.fn();
+
+  constructor(call: Call) {
+    super(call, new TestInputMediaDeviceManagerState());
+  }
+}
+
+describe('InputMediaDeviceManager.test', () => {
+  let manager: TestInputMediaDeviceManager;
+
+  beforeEach(() => {
+    manager = new TestInputMediaDeviceManager(
+      new Call({
+        id: '',
+        type: '',
+        streamClient: new StreamClient('abc123'),
+        clientStore: new StreamVideoWriteableStateStore(),
+      }),
+    );
+  });
+
+  it('list devices', () => {
+    const spy = vi.fn();
+    manager.listDevices().subscribe(spy);
+
+    expect(spy).toHaveBeenCalledWith(mockVideoDevices);
+  });
+
+  it('enable device - before joined to call', async () => {
+    vi.spyOn(manager, 'getStream');
+
+    await manager.enable();
+
+    expect(manager.getStream).toHaveBeenCalledWith({
+      deviceId: undefined,
+    });
+
+    expect(manager.state.mediaStream).toBeDefined();
+    expect(manager.state.status).toBe('enabled');
+  });
+
+  it('enable device - after joined to call', async () => {
+    // @ts-expect-error
+    manager['call'].state.callingState = CallingState.JOINED;
+
+    await manager.enable();
+
+    expect(manager.publishStream).toHaveBeenCalledWith(
+      manager.state.mediaStream,
+    );
+  });
+
+  it('enable device should set device id', async () => {
+    expect(manager.state.selectedDevice).toBeUndefined();
+
+    await manager.enable();
+
+    expect(manager.state.selectedDevice).toBeDefined();
+  });
+
+  it('disable device - before joined to call', async () => {
+    await manager.disable();
+
+    expect(manager.state.mediaStream).toBeUndefined();
+    expect(manager.state.status).toBe('disabled');
+  });
+
+  it('disable camera - after joined to call', async () => {
+    // @ts-expect-error
+    manager['call'].state.callingState = CallingState.JOINED;
+    await manager.enable();
+
+    await manager.disable();
+
+    expect(manager.stopPublishStream).toHaveBeenCalledWith();
+  });
+
+  it('toggle device', async () => {
+    vi.spyOn(manager, 'disable');
+    vi.spyOn(manager, 'enable');
+
+    await manager.toggle();
+
+    expect(manager.enable).toHaveBeenCalled();
+
+    await manager.toggle();
+
+    expect(manager.disable).toHaveBeenCalled();
+  });
+
+  it('select device when status is disabled', async () => {
+    const deviceId = mockVideoDevices[0].deviceId;
+    await manager.select(deviceId);
+
+    expect(manager.state.selectedDevice).toBe(deviceId);
+    expect(manager.getStream).not.toHaveBeenCalledWith();
+    expect(manager.publishStream).not.toHaveBeenCalled();
+  });
+
+  it('select device when status is enabled and in call', async () => {
+    // @ts-expect-error
+    manager['call'].state.callingState = CallingState.JOINED;
+    await manager.enable();
+
+    const deviceId = mockVideoDevices[1].deviceId;
+    await manager.select(deviceId);
+
+    expect(manager.stopPublishStream).toHaveBeenCalledWith();
+    expect(manager.getStream).toHaveBeenCalledWith({
+      deviceId,
+    });
+    expect(manager.publishStream).toHaveBeenCalled();
+  });
+
+  it(`changing media stream constraints shouldn't toggle status`, async () => {
+    await manager.enable();
+    const spy = vi.fn();
+    manager.state.status$.subscribe(spy);
+
+    expect(spy.mock.calls.length).toBe(1);
+
+    const deviceId = mockVideoDevices[1].deviceId;
+    await manager.select(deviceId);
+
+    expect(spy.mock.calls.length).toBe(1);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.resetModules();
+  });
+});

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

@@ -0,0 +1,103 @@
+import { Call } from '../../Call';
+import { StreamClient } from '../../coordinator/connection/client';
+import { CallingState, StreamVideoWriteableStateStore } from '../../store';
+
+import { afterEach, beforeEach, describe, vi, it, expect } from 'vitest';
+import { mockCall, mockAudioDevices, mockAudioStream } from './mocks';
+import { getAudioStream } from '../devices';
+import { TrackType } from '../../gen/video/sfu/models/models';
+import { MicrophoneManager } from '../MicrophoneManager';
+import { of } from 'rxjs';
+
+vi.mock('../devices.ts', () => {
+  console.log('MOCKING devices API');
+  return {
+    disposeOfMediaStream: vi.fn(),
+    getAudioDevices: vi.fn(() => {
+      return of(mockAudioDevices);
+    }),
+    getAudioStream: vi.fn(() => Promise.resolve(mockAudioStream())),
+  };
+});
+
+vi.mock('../../Call.ts', () => {
+  console.log('MOCKING Call');
+  return {
+    Call: vi.fn(() => mockCall()),
+  };
+});
+
+describe('MicrophoneManager', () => {
+  let manager: MicrophoneManager;
+
+  beforeEach(() => {
+    manager = new MicrophoneManager(
+      new Call({
+        id: '',
+        type: '',
+        streamClient: new StreamClient('abc123'),
+        clientStore: new StreamVideoWriteableStateStore(),
+      }),
+    );
+  });
+  it('list devices', () => {
+    const spy = vi.fn();
+    manager.listDevices().subscribe(spy);
+
+    expect(spy).toHaveBeenCalledWith(mockAudioDevices);
+  });
+
+  it('get stream', async () => {
+    await manager.enable();
+
+    expect(getAudioStream).toHaveBeenCalledWith({
+      deviceId: undefined,
+    });
+  });
+
+  it('should get device id from stream', async () => {
+    expect(manager.state.selectedDevice).toBeUndefined();
+
+    await manager.enable();
+
+    expect(manager.state.selectedDevice).toBeDefined();
+  });
+
+  it('publish stream', async () => {
+    // @ts-expect-error
+    manager['call'].state.callingState = CallingState.JOINED;
+
+    await manager.enable();
+
+    expect(manager['call'].publishAudioStream).toHaveBeenCalledWith(
+      manager.state.mediaStream,
+    );
+  });
+
+  it('stop publish stream', async () => {
+    // @ts-expect-error
+    manager['call'].state.callingState = CallingState.JOINED;
+    await manager.enable();
+
+    await manager.disable();
+
+    expect(manager['call'].stopPublish).toHaveBeenCalledWith(TrackType.AUDIO);
+  });
+
+  it('should pause and resume tracks', async () => {
+    await manager.enable();
+
+    manager.pause();
+
+    expect(manager.state.mediaStream?.getAudioTracks()[0].enabled).toBe(false);
+
+    manager.resume();
+
+    expect(manager.state.mediaStream?.getAudioTracks()[0].enabled).toBe(true);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.resetModules();
+  });
+});