@stream-io/video-client 1.10.2 → 1.10.4

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

@@ -11,6 +11,7 @@ export declare class CameraManager extends InputMediaDeviceManager<CameraManager
      * @param call the call instance.
      */
     constructor(call: Call);
+    private isDirectionSupportedByDevice;
     /**
      * Select the camera direction.
      *

package/dist/src/types.d.ts

@@ -143,6 +143,10 @@ export type PublishOptions = {
      * in simulcast mode (non-SVC).
      */
     bitrateDownscaleFactor?: number;
+    /**
+     * The maximum number of simulcast layers to use when publishing the video stream.
+     */
+    maxSimulcastLayers?: number;
     /**
      * Screen share settings.
      */

package/package.json

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

package/src/devices/CameraManager.ts

@@ -6,6 +6,7 @@ import { getVideoDevices, getVideoStream } from './devices';
 import { TrackType } from '../gen/video/sfu/models/models';
 import { PreferredCodec } from '../types';
 import { isMobile } from '../compatibility';
+import { isReactNative } from '../helpers/platforms';
 
 export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
   private targetResolution = {
@@ -22,13 +23,17 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
     super(call, new CameraManagerState(), TrackType.VIDEO);
   }
 
+  private isDirectionSupportedByDevice() {
+    return isReactNative() || isMobile();
+  }
+
   /**
    * Select the camera direction.
    *
    * @param direction the direction of the camera to select.
    */
   async selectDirection(direction: Exclude<CameraDirection, undefined>) {
-    if (isMobile()) {
+    if (this.isDirectionSupportedByDevice()) {
       this.state.setDirection(direction);
       // Providing both device id and direction doesn't work, so we deselect the device
       this.state.setDevice(undefined);
@@ -102,7 +107,12 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
     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 && isMobile()) {
+
+    if (
+      !constraints.deviceId &&
+      this.state.direction &&
+      this.isDirectionSupportedByDevice()
+    ) {
       constraints.facingMode =
         this.state.direction === 'front' ? 'user' : 'environment';
     }

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

@@ -43,6 +43,13 @@ vi.mock('../../compatibility.ts', () => {
   };
 });
 
+vi.mock('../../helpers/platforms', () => {
+  console.log('MOCKING mobile device');
+  return {
+    isReactNative: () => false,
+  };
+});
+
 describe('CameraManager', () => {
   let manager: CameraManager;
 

package/src/rtc/Publisher.ts

@@ -394,7 +394,8 @@ export class Publisher {
         ? // for SVC, we only have one layer (q) and often rid is omitted
           enabledLayers[0]
         : // for non-SVC, we need to find the layer by rid (simulcast)
-          enabledLayers.find((l) => l.name === encoder.rid);
+          enabledLayers.find((l) => l.name === encoder.rid) ??
+          (params.encodings.length === 1 ? enabledLayers[0] : undefined);
 
       // flip 'active' flag only when necessary
       const shouldActivate = !!layer?.active;

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

@@ -360,6 +360,45 @@ describe('Publisher', () => {
       ]);
     });
 
+    it('can dynamically activate/deactivate simulcast layers when rid is missing', async () => {
+      const transceiver = new RTCRtpTransceiver();
+      const setParametersSpy = vi
+        .spyOn(transceiver.sender, 'setParameters')
+        .mockResolvedValue();
+      const getParametersSpy = vi
+        .spyOn(transceiver.sender, 'getParameters')
+        .mockReturnValue({
+          // @ts-expect-error incomplete data
+          codecs: [{ mimeType: 'video/VP8' }],
+          encodings: [{ active: false }],
+        });
+
+      // inject the transceiver
+      publisher['transceiverCache'].set(TrackType.VIDEO, transceiver);
+
+      await publisher['changePublishQuality']([
+        {
+          name: 'q',
+          active: true,
+          maxBitrate: 100,
+          scaleResolutionDownBy: 4,
+          maxFramerate: 30,
+          scalabilityMode: '',
+        },
+      ]);
+
+      expect(getParametersSpy).toHaveBeenCalled();
+      expect(setParametersSpy).toHaveBeenCalled();
+      expect(setParametersSpy.mock.calls[0][0].encodings).toEqual([
+        {
+          active: true,
+          maxBitrate: 100,
+          scaleResolutionDownBy: 4,
+          maxFramerate: 30,
+        },
+      ]);
+    });
+
     it('can dynamically update scalability mode in SVC', async () => {
       const transceiver = new RTCRtpTransceiver();
       const setParametersSpy = vi

package/src/rtc/bitrateLookup.ts

@@ -6,8 +6,8 @@ const bitrateLookupTable: Record<
 > = {
   h264: {
     2160: 5_000_000,
-    1440: 3_500_000,
-    1080: 2_750_000,
+    1440: 3_000_000,
+    1080: 2_000_000,
     720: 1_250_000,
     540: 750_000,
     360: 400_000,

package/src/rtc/videoLayers.ts

@@ -65,7 +65,11 @@ export const findOptimalVideoLayers = (
   const optimalVideoLayers: OptimalVideoLayer[] = [];
   const settings = videoTrack.getSettings();
   const { width = 0, height = 0 } = settings;
-  const { scalabilityMode, bitrateDownscaleFactor = 2 } = publishOptions || {};
+  const {
+    scalabilityMode,
+    bitrateDownscaleFactor = 2,
+    maxSimulcastLayers = 3,
+  } = publishOptions || {};
   const maxBitrate = getComputedMaxBitrate(
     targetResolution,
     width,
@@ -76,7 +80,7 @@ export const findOptimalVideoLayers = (
   let downscaleFactor = 1;
   let bitrateFactor = 1;
   const svcCodec = isSvcCodec(codecInUse);
-  for (const rid of ['f', 'h', 'q']) {
+  for (const rid of ['f', 'h', 'q'].slice(0, Math.min(3, maxSimulcastLayers))) {
     const layer: OptimalVideoLayer = {
       active: true,
       rid,

package/src/types.ts

@@ -181,6 +181,10 @@ export type PublishOptions = {
    * in simulcast mode (non-SVC).
    */
   bitrateDownscaleFactor?: number;
+  /**
+   * The maximum number of simulcast layers to use when publishing the video stream.
+   */
+  maxSimulcastLayers?: number;
   /**
    * Screen share settings.
    */