@stream-io/video-client 0.3.6 → 0.3.7

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

@@ -3,6 +3,7 @@ import { Call } from '../Call';
 import { CameraDirection, CameraManagerState } from './CameraManagerState';
 import { InputMediaDeviceManager } from './InputMediaDeviceManager';
 export declare class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
+    private targetResolution;
     constructor(call: Call);
     /**
      * Select the camera direaction
@@ -16,6 +17,13 @@ export declare class CameraManager extends InputMediaDeviceManager<CameraManager
      * @returns
      */
     flip(): Promise<void>;
+    /**
+     * @internal
+     */
+    selectTargetResolution(resolution: {
+        width: number;
+        height: number;
+    }): Promise<void>;
     protected getDevices(): Observable<MediaDeviceInfo[]>;
     protected getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
     protected publishStream(stream: MediaStream): Promise<void>;

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

@@ -4,6 +4,14 @@ import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
 export declare abstract class InputMediaDeviceManager<T extends InputMediaDeviceManagerState> {
     protected readonly call: Call;
     readonly state: T;
+    /**
+     * @internal
+     */
+    enablePromise?: Promise<void>;
+    /**
+     * @internal
+     */
+    disablePromise?: Promise<void>;
     constructor(call: Call, state: T);
     /**
      * Lists the available audio/video devices

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.6";
+export declare const version = "0.3.7";

package/package.json

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

package/src/Call.ts

@@ -1718,6 +1718,14 @@ export class Call {
   };
 
   private async initCamera() {
+    // Wait for any in progress camera operation
+    if (this.camera.enablePromise) {
+      await this.camera.enablePromise;
+    }
+    if (this.camera.disablePromise) {
+      await this.camera.disablePromise;
+    }
+
     if (
       this.state.localParticipant?.videoStream ||
       !this.permissionsContext.hasPermission('send-video')
@@ -1726,27 +1734,31 @@ export class Call {
     }
 
     // Set camera direction if it's not yet set
-    // This will also start publishing if camera is enabled
     if (!this.camera.state.direction && !this.camera.state.selectedDevice) {
       let defaultDirection: CameraDirection = 'front';
       const backendSetting = this.state.settings?.video.camera_facing;
       if (backendSetting) {
         defaultDirection = backendSetting === 'front' ? 'front' : 'back';
       }
-      this.camera.selectDirection(defaultDirection);
-    } else if (this.camera.state.status === 'enabled') {
-      // Publish already started media streams (this is the case if there is a lobby screen before join)
-      // Wait for media stream
-      this.camera.state.mediaStream$
-        .pipe(takeWhile((s) => s === undefined, true))
-        .subscribe((stream) => {
-          if (!this.state.localParticipant?.videoStream) {
-            this.publishVideoStream(stream!);
-          }
-        });
+      this.camera.state.setDirection(defaultDirection);
+    }
+
+    // Set target resolution
+    const targetResolution = this.state.settings?.video.target_resolution;
+    if (targetResolution) {
+      await this.camera.selectTargetResolution(targetResolution);
+    }
+
+    // Publish already that was set before we joined
+    if (
+      this.camera.state.status === 'enabled' &&
+      this.camera.state.mediaStream &&
+      !this.publisher?.isPublishing(TrackType.VIDEO)
+    ) {
+      await this.publishVideoStream(this.camera.state.mediaStream);
     }
 
-    // Apply backend config (this is the case if there is no lobby screen before join)
+    // Start camera if backend config speicifies, and there is no local setting
     if (
       this.camera.state.status === undefined &&
       this.state.settings?.video.camera_default_on
@@ -1756,6 +1768,14 @@ export class Call {
   }
 
   private async initMic() {
+    // Wait for any in progress mic operation
+    if (this.microphone.enablePromise) {
+      await this.microphone.enablePromise;
+    }
+    if (this.microphone.disablePromise) {
+      await this.microphone.disablePromise;
+    }
+
     if (
       this.state.localParticipant?.audioStream ||
       !this.permissionsContext.hasPermission('send-audio')
@@ -1763,19 +1783,16 @@ export class Call {
       return;
     }
 
-    // Publish already started media streams (this is the case if there is a lobby screen before join)
-    if (this.microphone.state.status === 'enabled') {
-      // Wait for media stream
-      this.microphone.state.mediaStream$
-        .pipe(takeWhile((s) => s === undefined, true))
-        .subscribe((stream) => {
-          if (!this.state.localParticipant?.audioStream) {
-            this.publishAudioStream(stream!);
-          }
-        });
+    // Publish media stream that was set before we joined
+    if (
+      this.microphone.state.status === 'enabled' &&
+      this.microphone.state.mediaStream &&
+      !this.publisher?.isPublishing(TrackType.AUDIO)
+    ) {
+      this.publishAudioStream(this.microphone.state.mediaStream);
     }
 
-    // Apply backend config (this is the case if there is no lobby screen before join)
+    // Start mic if backend config speicifies, and there is no local setting
     if (
       this.microphone.state.status === undefined &&
       this.state.settings?.audio.mic_default_on

package/src/devices/CameraManager.ts

@@ -6,6 +6,11 @@ import { getVideoDevices, getVideoStream } from './devices';
 import { TrackType } from '../gen/video/sfu/models/models';
 
 export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
+  private targetResolution = {
+    width: 1280,
+    height: 720,
+  };
+
   constructor(call: Call) {
     super(call, new CameraManagerState());
   }
@@ -32,12 +37,39 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
     this.selectDirection(newDirection);
   }
 
+  /**
+   * @internal
+   */
+  async selectTargetResolution(resolution: { width: number; height: number }) {
+    this.targetResolution.height = resolution.height;
+    this.targetResolution.width = resolution.width;
+    if (this.enablePromise) {
+      try {
+        await this.enablePromise;
+      } catch (error) {
+        // couldn't enable device, target resolution will be applied the next time user attempts to start the device
+      }
+    }
+    if (this.state.status === 'enabled') {
+      const { width, height } = this.state
+        .mediaStream!.getVideoTracks()[0]
+        ?.getSettings();
+      if (
+        width !== this.targetResolution.width ||
+        height !== this.targetResolution.height
+      )
+        await this.applySettingsToStream();
+    }
+  }
+
   protected getDevices(): Observable<MediaDeviceInfo[]> {
     return getVideoDevices();
   }
   protected getStream(
     constraints: MediaTrackConstraints,
   ): Promise<MediaStream> {
+    constraints.width = this.targetResolution.width;
+    constraints.height = this.targetResolution.height;
     // We can't set both device id and facing mode
     // Device id has higher priority
     if (!constraints.deviceId && this.state.direction) {

package/src/devices/InputMediaDeviceManager.ts

@@ -8,6 +8,14 @@ import { isReactNative } from '../helpers/platforms';
 export abstract class InputMediaDeviceManager<
   T extends InputMediaDeviceManagerState,
 > {
+  /**
+   * @internal
+   */
+  enablePromise?: Promise<void>;
+  /**
+   * @internal
+   */
+  disablePromise?: Promise<void>;
   constructor(protected readonly call: Call, public readonly state: T) {}
 
   /**
@@ -28,8 +36,14 @@ export abstract class InputMediaDeviceManager<
     if (this.state.status === 'enabled') {
       return;
     }
-    await this.unmuteStream();
-    this.state.setStatus('enabled');
+    this.enablePromise = this.unmuteStream();
+    try {
+      await this.enablePromise;
+      this.state.setStatus('enabled');
+    } catch (error) {
+      this.enablePromise = undefined;
+      throw error;
+    }
   }
 
   /**
@@ -42,8 +56,17 @@ export abstract class InputMediaDeviceManager<
     if (this.state.status === 'disabled') {
       return;
     }
-    await this.muteStream(this.state.disableMode === 'stop-tracks');
-    this.state.setStatus('disabled');
+    this.disablePromise = this.muteStream(
+      this.state.disableMode === 'stop-tracks',
+    );
+    try {
+      await this.disablePromise;
+      this.state.setStatus('disabled');
+      this.disablePromise = undefined;
+    } catch (error) {
+      this.disablePromise = undefined;
+      throw error;
+    }
   }
 
   /**

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

@@ -53,6 +53,8 @@ describe('CameraManager', () => {
 
     expect(getVideoStream).toHaveBeenCalledWith({
       deviceId: undefined,
+      width: 1280,
+      height: 720,
     });
   });
 
@@ -101,12 +103,18 @@ describe('CameraManager', () => {
 
     await manager.enable();
 
-    expect(getVideoStream).toHaveBeenCalledWith({ deviceId: undefined });
+    expect(getVideoStream).toHaveBeenCalledWith({
+      deviceId: undefined,
+      width: 1280,
+      height: 720,
+    });
 
     await manager.selectDirection('front');
 
     expect(getVideoStream).toHaveBeenCalledWith({
       deviceId: undefined,
+      width: 1280,
+      height: 720,
       facingMode: 'user',
     });
 
@@ -115,6 +123,8 @@ describe('CameraManager', () => {
     expect(getVideoStream).toHaveBeenCalledWith({
       deviceId: undefined,
       facingMode: 'environment',
+      width: 1280,
+      height: 720,
     });
   });
 
@@ -123,16 +133,57 @@ describe('CameraManager', () => {
 
     await manager.flip();
 
-    expect(getVideoStream).toHaveBeenCalledWith({ facingMode: 'environment' });
+    expect(getVideoStream).toHaveBeenCalledWith({
+      facingMode: 'environment',
+      width: 1280,
+      height: 720,
+    });
 
     const deviceId = mockVideoDevices[1].deviceId;
     await manager.select(deviceId);
 
     expect((getVideoStream as Mock).mock.lastCall[0]).toEqual({
       deviceId,
+      width: 1280,
+      height: 720,
+    });
+  });
+
+  it(`should set target resolution, but shouldn't change device status`, async () => {
+    manager['targetResolution'] = { width: 640, height: 480 };
+
+    expect(manager.state.status).toBe(undefined);
+
+    await manager.selectTargetResolution({ width: 1280, height: 720 });
+
+    const targetResolution = manager['targetResolution'];
+
+    expect(targetResolution.width).toBe(1280);
+    expect(targetResolution.height).toBe(720);
+    expect(manager.state.status).toBe(undefined);
+  });
+
+  it('should apply target resolution to existing media stream track', async () => {
+    await manager.enable();
+    await manager.selectTargetResolution({ width: 640, height: 480 });
+
+    expect((getVideoStream as Mock).mock.lastCall[0]).toEqual({
+      deviceId: mockVideoDevices[0].deviceId,
+      width: 640,
+      height: 480,
     });
   });
 
+  it(`should do nothing if existing track has the correct resolution`, async () => {
+    await manager.enable();
+
+    expect(getVideoStream).toHaveBeenCalledOnce();
+
+    await manager.selectTargetResolution({ width: 1280, height: 720 });
+
+    expect(getVideoStream).toHaveBeenCalledOnce();
+  });
+
   afterEach(() => {
     vi.clearAllMocks();
     vi.resetModules();

package/src/devices/__tests__/mocks.ts

@@ -89,6 +89,8 @@ export const mockVideoStream = () => {
   const track = {
     getSettings: () => ({
       deviceId: mockVideoDevices[0].deviceId,
+      width: 1280,
+      height: 720,
     }),
     enabled: true,
   };