@stream-io/video-client 0.3.2 → 0.3.3

package/dist/src/Call.d.ts

@@ -217,8 +217,9 @@ export declare class Call {
      *
      *
      * @param trackType the track type to stop publishing.
+     * @param stopTrack if `true` the track will be stopped, else it will be just disabled
      */
-    stopPublish: (trackType: TrackType) => Promise<void>;
+    stopPublish: (trackType: TrackType, stopTrack?: boolean) => Promise<void>;
     /**
      * Update track subscription configuration for one or more participants.
      * You have to create a subscription for each participant for all the different kinds of tracks you want to receive.

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

@@ -19,13 +19,7 @@ export declare class CameraManager extends InputMediaDeviceManager<CameraManager
     protected getDevices(): Observable<MediaDeviceInfo[]>;
     protected getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
     protected publishStream(stream: MediaStream): Promise<void>;
-    protected stopPublishStream(): Promise<void>;
-    /**
-     * Disables the video tracks of the camera
-     */
-    pause(): void;
-    /**
-     * (Re)enables the video tracks of the camera
-     */
-    resume(): void;
+    protected stopPublishStream(stopTracks: boolean): Promise<void>;
+    protected muteTracks(): void;
+    protected unmuteTracks(): void;
 }

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

@@ -19,11 +19,17 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
     enable(): Promise<void>;
     /**
      * Stops camera/microphone
+     *
      * @returns
      */
     disable(): Promise<void>;
+    /**
+     * If status was previously enabled, it will reenable the device.
+     */
+    resume(): Promise<void>;
     /**
      * If current device statis is disabled, it will enable the device, else it will disable it.
+     *
      * @returns
      */
     toggle(): Promise<void>;
@@ -36,12 +42,12 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
      */
     select(deviceId: string | undefined): Promise<void>;
     protected applySettingsToStream(): Promise<void>;
-    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 stopStream;
-    private startStream;
+    protected abstract stopPublishStream(stopTracks: boolean): Promise<void>;
+    protected abstract muteTracks(): void;
+    protected abstract unmuteTracks(): void;
+    private muteStream;
+    private unmuteStream;
 }

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

@@ -2,9 +2,14 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { RxUtils } from '../store';
 export type InputDeviceStatus = 'enabled' | 'disabled' | undefined;
 export declare abstract class InputMediaDeviceManagerState {
+    readonly disableMode: 'stop-tracks' | 'disable-tracks';
     protected statusSubject: BehaviorSubject<InputDeviceStatus>;
     protected mediaStreamSubject: BehaviorSubject<MediaStream | undefined>;
     protected selectedDeviceSubject: BehaviorSubject<string | undefined>;
+    /**
+     * @internal
+     */
+    prevStatus: InputDeviceStatus;
     /**
      * An Observable that emits the current media stream, or `undefined` if the device is currently disabled.
      *
@@ -18,7 +23,7 @@ export declare abstract class InputMediaDeviceManagerState {
      * An Observable that emits the device status
      */
     status$: Observable<InputDeviceStatus>;
-    constructor();
+    constructor(disableMode?: 'stop-tracks' | 'disable-tracks');
     /**
      * The device status
      */

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

@@ -7,13 +7,7 @@ export declare class MicrophoneManager extends InputMediaDeviceManager<Microphon
     protected getDevices(): Observable<MediaDeviceInfo[]>;
     protected getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
     protected publishStream(stream: MediaStream): Promise<void>;
-    protected stopPublishStream(): Promise<void>;
-    /**
-     * Disables the audio tracks of the microphone
-     */
-    pause(): void;
-    /**
-     * (Re)enables the audio tracks of the microphone
-     */
-    resume(): void;
+    protected stopPublishStream(stopTracks: boolean): Promise<void>;
+    protected muteTracks(): void;
+    protected unmuteTracks(): void;
 }

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

@@ -1,4 +1,5 @@
 import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
 export declare class MicrophoneManagerState extends InputMediaDeviceManagerState {
+    constructor();
     protected getDeviceIdFromStream(stream: MediaStream): string | undefined;
 }

package/dist/src/rtc/Publisher.d.ts

@@ -76,8 +76,9 @@ export declare class Publisher {
      * Stops publishing the given track type to the SFU, if it is currently being published.
      * Underlying track will be stopped and removed from the publisher.
      * @param trackType the track type to unpublish.
+     * @param stopTrack specifies whether track should be stopped or just disabled
      */
-    unpublishStream: (trackType: TrackType) => Promise<void>;
+    unpublishStream: (trackType: TrackType, stopTrack: boolean) => Promise<void>;
     /**
      * Returns true if the given track type is currently being published to the SFU.
      *

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.2";
+export declare const version = "0.3.3";

package/package.json

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

package/src/Call.ts

@@ -1092,10 +1092,11 @@ export class Call {
    *
    *
    * @param trackType the track type to stop publishing.
+   * @param stopTrack if `true` the track will be stopped, else it will be just disabled
    */
-  stopPublish = async (trackType: TrackType) => {
+  stopPublish = async (trackType: TrackType, stopTrack: boolean = true) => {
     this.logger('info', `stopPublish ${TrackType[trackType]}`);
-    await this.publisher?.unpublishStream(trackType);
+    await this.publisher?.unpublishStream(trackType, stopTrack);
   };
 
   /**

package/src/devices/CameraManager.ts

@@ -49,25 +49,16 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
   protected publishStream(stream: MediaStream): Promise<void> {
     return this.call.publishVideoStream(stream);
   }
-  protected stopPublishStream(): Promise<void> {
-    return this.call.stopPublish(TrackType.VIDEO);
+  protected stopPublishStream(stopTracks: boolean): Promise<void> {
+    return this.call.stopPublish(TrackType.VIDEO, stopTracks);
   }
 
-  /**
-   * Disables the video tracks of the camera
-   */
-  pause() {
-    this.state.mediaStream?.getVideoTracks().forEach((track) => {
-      track.enabled = false;
-    });
+  protected muteTracks(): void {
+    this.state.mediaStream
+      ?.getVideoTracks()
+      .forEach((t) => (t.enabled = false));
   }
-
-  /**
-   * (Re)enables the video tracks of the camera
-   */
-  resume() {
-    this.state.mediaStream?.getVideoTracks().forEach((track) => {
-      track.enabled = true;
-    });
+  protected unmuteTracks(): void {
+    this.state.mediaStream?.getVideoTracks().forEach((t) => (t.enabled = true));
   }
 }

package/src/devices/CameraManagerState.ts

@@ -15,7 +15,7 @@ export class CameraManagerState extends InputMediaDeviceManagerState {
   direction$: Observable<CameraDirection>;
 
   constructor() {
-    super();
+    super('stop-tracks');
     this.direction$ = this.directionSubject
       .asObservable()
       .pipe(distinctUntilChanged());

package/src/devices/InputMediaDeviceManager.ts

@@ -28,24 +28,39 @@ export abstract class InputMediaDeviceManager<
     if (this.state.status === 'enabled') {
       return;
     }
-    await this.startStream();
+    await this.unmuteStream();
     this.state.setStatus('enabled');
   }
 
   /**
    * Stops camera/microphone
+   *
    * @returns
    */
   async disable() {
     if (this.state.status === 'disabled') {
       return;
     }
-    await this.stopStream();
+    this.state.prevStatus = this.state.status;
+    await this.muteStream(this.state.disableMode === 'stop-tracks');
     this.state.setStatus('disabled');
   }
 
+  /**
+   * If status was previously enabled, it will reenable the device.
+   */
+  async resume() {
+    if (
+      this.state.prevStatus === 'enabled' &&
+      this.state.status === 'disabled'
+    ) {
+      this.enable();
+    }
+  }
+
   /**
    * If current device statis is disabled, it will enable the device, else it will disable it.
+   *
    * @returns
    */
   async toggle() {
@@ -76,15 +91,11 @@ export abstract class InputMediaDeviceManager<
 
   protected async applySettingsToStream() {
     if (this.state.status === 'enabled') {
-      await this.stopStream();
-      await this.startStream();
+      await this.muteStream();
+      await this.unmuteStream();
     }
   }
 
-  abstract pause(): void;
-
-  abstract resume(): void;
-
   protected abstract getDevices(): Observable<MediaDeviceInfo[]>;
 
   protected abstract getStream(
@@ -93,26 +104,37 @@ export abstract class InputMediaDeviceManager<
 
   protected abstract publishStream(stream: MediaStream): Promise<void>;
 
-  protected abstract stopPublishStream(): Promise<void>;
+  protected abstract stopPublishStream(stopTracks: boolean): Promise<void>;
+
+  protected abstract muteTracks(): void;
+
+  protected abstract unmuteTracks(): void;
 
-  private async stopStream() {
+  private async muteStream(stopTracks: boolean = true) {
     if (!this.state.mediaStream) {
       return;
     }
     if (this.call.state.callingState === CallingState.JOINED) {
-      await this.stopPublishStream();
+      await this.stopPublishStream(stopTracks);
     } else if (this.state.mediaStream) {
-      disposeOfMediaStream(this.state.mediaStream);
+      stopTracks
+        ? disposeOfMediaStream(this.state.mediaStream)
+        : this.muteTracks();
+    }
+    if (stopTracks) {
+      this.state.setMediaStream(undefined);
     }
-    this.state.setMediaStream(undefined);
   }
 
-  private async startStream() {
+  private async unmuteStream() {
+    let stream: MediaStream;
     if (this.state.mediaStream) {
-      return;
+      stream = this.state.mediaStream;
+      this.unmuteTracks();
+    } else {
+      const constraints = { deviceId: this.state.selectedDevice };
+      stream = await this.getStream(constraints);
     }
-    const constraints = { deviceId: this.state.selectedDevice };
-    const stream = await this.getStream(constraints);
     if (this.call.state.callingState === CallingState.JOINED) {
       await this.publishStream(stream);
     }

package/src/devices/InputMediaDeviceManagerState.ts

@@ -11,6 +11,10 @@ export abstract class InputMediaDeviceManagerState {
   protected selectedDeviceSubject = new BehaviorSubject<string | undefined>(
     undefined,
   );
+  /**
+   * @internal
+   */
+  prevStatus: InputDeviceStatus;
 
   /**
    * An Observable that emits the current media stream, or `undefined` if the device is currently disabled.
@@ -28,12 +32,18 @@ export abstract class InputMediaDeviceManagerState {
    */
   status$: Observable<InputDeviceStatus>;
 
-  constructor() {
+  constructor(
+    public readonly disableMode:
+      | 'stop-tracks'
+      | 'disable-tracks' = 'stop-tracks',
+  ) {
     this.mediaStream$ = this.mediaStreamSubject.asObservable();
     this.selectedDevice$ = this.selectedDeviceSubject
       .asObservable()
       .pipe(distinctUntilChanged());
-    this.status$ = this.statusSubject.asObservable();
+    this.status$ = this.statusSubject
+      .asObservable()
+      .pipe(distinctUntilChanged());
   }
 
   /**

package/src/devices/MicrophoneManager.ts

@@ -21,25 +21,16 @@ export class MicrophoneManager extends InputMediaDeviceManager<MicrophoneManager
   protected publishStream(stream: MediaStream): Promise<void> {
     return this.call.publishAudioStream(stream);
   }
-  protected stopPublishStream(): Promise<void> {
-    return this.call.stopPublish(TrackType.AUDIO);
+  protected stopPublishStream(stopTracks: boolean): Promise<void> {
+    return this.call.stopPublish(TrackType.AUDIO, stopTracks);
   }
 
-  /**
-   * Disables the audio tracks of the microphone
-   */
-  pause() {
-    this.state.mediaStream?.getAudioTracks().forEach((track) => {
-      track.enabled = false;
-    });
+  protected muteTracks(): void {
+    this.state.mediaStream
+      ?.getAudioTracks()
+      .forEach((t) => (t.enabled = false));
   }
-
-  /**
-   * (Re)enables the audio tracks of the microphone
-   */
-  resume() {
-    this.state.mediaStream?.getAudioTracks().forEach((track) => {
-      track.enabled = true;
-    });
+  protected unmuteTracks(): void {
+    this.state.mediaStream?.getAudioTracks().forEach((t) => (t.enabled = true));
   }
 }

package/src/devices/MicrophoneManagerState.ts

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

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

@@ -8,7 +8,6 @@ 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');
@@ -83,7 +82,10 @@ describe('CameraManager', () => {
 
     await manager.disable();
 
-    expect(manager['call'].stopPublish).toHaveBeenCalledWith(TrackType.VIDEO);
+    expect(manager['call'].stopPublish).toHaveBeenCalledWith(
+      TrackType.VIDEO,
+      true,
+    );
   });
 
   it('flip', async () => {
@@ -131,18 +133,6 @@ describe('CameraManager', () => {
     });
   });
 
-  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

@@ -7,6 +7,14 @@ import { mockCall, mockVideoDevices, mockVideoStream } from './mocks';
 import { InputMediaDeviceManager } from '../InputMediaDeviceManager';
 import { InputMediaDeviceManagerState } from '../InputMediaDeviceManagerState';
 import { of } from 'rxjs';
+import { disposeOfMediaStream } from '../devices';
+
+vi.mock('../devices.ts', () => {
+  console.log('MOCKING devices');
+  return {
+    disposeOfMediaStream: vi.fn(),
+  };
+});
 
 vi.mock('../../Call.ts', () => {
   console.log('MOCKING Call');
@@ -24,8 +32,8 @@ class TestInputMediaDeviceManager extends InputMediaDeviceManager<TestInputMedia
   public getStream = vi.fn(() => Promise.resolve(mockVideoStream()));
   public publishStream = vi.fn();
   public stopPublishStream = vi.fn();
-  public pause = vi.fn();
-  public resume = vi.fn();
+  public muteTracks = vi.fn();
+  public unmuteTracks = vi.fn();
 
   constructor(call: Call) {
     super(call, new TestInputMediaDeviceManagerState());
@@ -92,14 +100,14 @@ describe('InputMediaDeviceManager.test', () => {
     expect(manager.state.status).toBe('disabled');
   });
 
-  it('disable camera - after joined to call', async () => {
+  it('disable device - after joined to call', async () => {
     // @ts-expect-error
     manager['call'].state.callingState = CallingState.JOINED;
     await manager.enable();
 
     await manager.disable();
 
-    expect(manager.stopPublishStream).toHaveBeenCalledWith();
+    expect(manager.stopPublishStream).toHaveBeenCalledWith(true);
   });
 
   it('toggle device', async () => {
@@ -124,6 +132,16 @@ describe('InputMediaDeviceManager.test', () => {
     expect(manager.publishStream).not.toHaveBeenCalled();
   });
 
+  it('select device when status is enabled', async () => {
+    await manager.enable();
+    const prevStream = manager.state.mediaStream;
+
+    const deviceId = mockVideoDevices[1].deviceId;
+    await manager.select(deviceId);
+
+    expect(disposeOfMediaStream).toHaveBeenCalledWith(prevStream);
+  });
+
   it('select device when status is enabled and in call', async () => {
     // @ts-expect-error
     manager['call'].state.callingState = CallingState.JOINED;
@@ -132,7 +150,7 @@ describe('InputMediaDeviceManager.test', () => {
     const deviceId = mockVideoDevices[1].deviceId;
     await manager.select(deviceId);
 
-    expect(manager.stopPublishStream).toHaveBeenCalledWith();
+    expect(manager.stopPublishStream).toHaveBeenCalledWith(true);
     expect(manager.getStream).toHaveBeenCalledWith({
       deviceId,
     });
@@ -152,6 +170,31 @@ describe('InputMediaDeviceManager.test', () => {
     expect(spy.mock.calls.length).toBe(1);
   });
 
+  it('should resume previously enabled state', async () => {
+    vi.spyOn(manager, 'enable');
+
+    await manager.enable();
+
+    expect(manager.enable).toHaveBeenCalledTimes(1);
+
+    await manager.disable();
+    await manager.resume();
+
+    expect(manager.enable).toHaveBeenCalledTimes(2);
+  });
+
+  it(`shouldn't resume if previous state is disabled`, async () => {
+    vi.spyOn(manager, 'enable');
+
+    await manager.disable();
+
+    expect(manager.enable).not.toHaveBeenCalled();
+
+    await manager.resume();
+
+    expect(manager.enable).not.toHaveBeenCalled();
+  });
+
   afterEach(() => {
     vi.clearAllMocks();
     vi.resetModules();

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

@@ -81,19 +81,20 @@ describe('MicrophoneManager', () => {
 
     await manager.disable();
 
-    expect(manager['call'].stopPublish).toHaveBeenCalledWith(TrackType.AUDIO);
+    expect(manager['call'].stopPublish).toHaveBeenCalledWith(
+      TrackType.AUDIO,
+      false,
+    );
   });
 
-  it('should pause and resume tracks', async () => {
+  it('disable-enable mic should set track.enabled', async () => {
     await manager.enable();
 
-    manager.pause();
-
-    expect(manager.state.mediaStream?.getAudioTracks()[0].enabled).toBe(false);
+    expect(manager.state.mediaStream!.getAudioTracks()[0].enabled).toBe(true);
 
-    manager.resume();
+    await manager.disable();
 
-    expect(manager.state.mediaStream?.getAudioTracks()[0].enabled).toBe(true);
+    expect(manager.state.mediaStream!.getAudioTracks()[0].enabled).toBe(false);
   });
 
   afterEach(() => {

package/src/rtc/Publisher.ts

@@ -283,6 +283,9 @@ export class Publisher {
         previousTrack.removeEventListener('ended', handleTrackEnded);
         track.addEventListener('ended', handleTrackEnded);
       }
+      if (!track.enabled) {
+        track.enabled = true;
+      }
       await transceiver.sender.replaceTrack(track);
     }
 
@@ -298,8 +301,9 @@ export class Publisher {
    * Stops publishing the given track type to the SFU, if it is currently being published.
    * Underlying track will be stopped and removed from the publisher.
    * @param trackType the track type to unpublish.
+   * @param stopTrack specifies whether track should be stopped or just disabled
    */
-  unpublishStream = async (trackType: TrackType) => {
+  unpublishStream = async (trackType: TrackType, stopTrack: boolean) => {
     const transceiver = this.pc
       .getTransceivers()
       .find((t) => t === this.transceiverRegistry[trackType] && t.sender.track);
@@ -308,7 +312,9 @@ export class Publisher {
       transceiver.sender.track &&
       transceiver.sender.track.readyState === 'live'
     ) {
-      transceiver.sender.track.stop();
+      stopTrack
+        ? transceiver.sender.track.stop()
+        : (transceiver.sender.track.enabled = false);
       return this.notifyTrackMuteStateChanged(
         undefined,
         transceiver.sender.track,

package/src/rtc/__tests__/Publisher.test.ts

@@ -139,7 +139,7 @@ describe('Publisher', () => {
     expect(state.localParticipant?.videoDeviceId).toEqual('test-device-id-2');
 
     // stop publishing
-    await publisher.unpublishStream(TrackType.VIDEO);
+    await publisher.unpublishStream(TrackType.VIDEO, true);
     expect(newTrack.stop).toHaveBeenCalled();
     expect(state.localParticipant?.publishedTracks).not.toContain(
       TrackType.VIDEO,
@@ -147,6 +147,72 @@ describe('Publisher', () => {
     expect(state.localParticipant?.videoDeviceId).toEqual('test-device-id-2');
   });
 
+  it('can publish and un-pubish with just enabling and disabling tracks', async () => {
+    const mediaStream = new MediaStream();
+    const track = new MediaStreamTrack();
+    mediaStream.addTrack(track);
+
+    state.setParticipants([
+      // @ts-ignore
+      {
+        isLocalParticipant: true,
+        userId: 'test-user-id',
+        sessionId: sessionId,
+        publishedTracks: [],
+      },
+    ]);
+
+    vi.spyOn(track, 'getSettings').mockReturnValue({
+      width: 640,
+      height: 480,
+      deviceId: 'test-device-id',
+    });
+
+    const transceiver = new RTCRtpTransceiver();
+    vi.spyOn(transceiver.sender, 'track', 'get').mockReturnValue(track);
+    vi.spyOn(publisher['pc'], 'addTransceiver').mockReturnValue(transceiver);
+    vi.spyOn(publisher['pc'], 'getTransceivers').mockReturnValue([transceiver]);
+
+    sfuClient.updateMuteState = vi.fn();
+
+    // initial publish
+    await publisher.publishStream(mediaStream, track, TrackType.VIDEO);
+
+    expect(state.localParticipant?.videoDeviceId).toEqual('test-device-id');
+    expect(state.localParticipant?.publishedTracks).toContain(TrackType.VIDEO);
+    expect(state.localParticipant?.videoStream).toEqual(mediaStream);
+    expect(transceiver.setCodecPreferences).toHaveBeenCalled();
+    expect(sfuClient.updateMuteState).toHaveBeenCalledWith(
+      TrackType.VIDEO,
+      false,
+    );
+
+    expect(track.addEventListener).toHaveBeenCalledWith(
+      'ended',
+      expect.any(Function),
+    );
+
+    // stop publishing
+    await publisher.unpublishStream(TrackType.VIDEO, false);
+    expect(track.stop).not.toHaveBeenCalled();
+    expect(track.enabled).toBe(false);
+    expect(state.localParticipant?.publishedTracks).not.toContain(
+      TrackType.VIDEO,
+    );
+    expect(state.localParticipant?.videoStream).toBeUndefined();
+
+    const addEventListenerSpy = vi.spyOn(track, 'addEventListener');
+    const removeEventListenerSpy = vi.spyOn(track, 'removeEventListener');
+
+    // start publish again
+    await publisher.publishStream(mediaStream, track, TrackType.VIDEO);
+
+    expect(track.enabled).toBe(true);
+    // republishing the same stream should use the previously registered event handlers
+    expect(removeEventListenerSpy).not.toHaveBeenCalled();
+    expect(addEventListenerSpy).not.toHaveBeenCalled();
+  });
+
   describe('Publisher migration', () => {
     it('should update the sfuClient and peer connection configuration', async () => {
       const newSfuClient = new StreamSfuClient({