@stream-io/video-client 1.6.2 → 1.6.4

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

@@ -2,6 +2,7 @@ import { Observable } from 'rxjs';
 import { Call } from '../Call';
 import { CameraDirection, CameraManagerState } from './CameraManagerState';
 import { InputMediaDeviceManager } from './InputMediaDeviceManager';
+import { PublishOptions } from '../types';
 type PreferredCodec = 'vp8' | 'h264' | string;
 export declare class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
     private targetResolution;
@@ -11,7 +12,19 @@ export declare class CameraManager extends InputMediaDeviceManager<CameraManager
      * @internal internal use only, not part of the public API.
      */
     preferredCodec: PreferredCodec | undefined;
+    /**
+     * The preferred bitrate for encoding the video.
+     *
+     * @internal internal use only, not part of the public API.
+     */
+    preferredBitrate: number | undefined;
     constructor(call: Call);
+    /**
+     * The publish options for the camera.
+     *
+     * @internal internal use only, not part of the public API.
+     */
+    get publishOptions(): PublishOptions;
     /**
      * Select the camera direction.
      *
@@ -39,6 +52,13 @@ export declare class CameraManager extends InputMediaDeviceManager<CameraManager
      * @param codec the codec to use for encoding the video.
      */
     setPreferredCodec(codec: 'vp8' | 'h264' | string | undefined): void;
+    /**
+     * Sets the preferred bitrate for encoding the video.
+     *
+     * @internal internal use only, not part of the public API.
+     * @param bitrate the bitrate to use for encoding the video.
+     */
+    setPreferredBitrate(bitrate: number | undefined): void;
     protected getDevices(): Observable<MediaDeviceInfo[]>;
     protected getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
     protected publishStream(stream: MediaStream): Promise<void>;

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

@@ -14,3 +14,7 @@ export declare const getPreferredCodecs: (kind: "audio" | "video", preferredCode
  * @param direction the direction of the transceiver.
  */
 export declare const getGenericSdp: (direction: RTCRtpTransceiverDirection) => Promise<string>;
+/**
+ * Returns the optimal codec for RN.
+ */
+export declare const getRNOptimalCodec: () => "h264" | "vp8" | undefined;

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

@@ -10,8 +10,9 @@ export type OptimalVideoLayer = RTCRtpEncodingParameters & {
  *
  * @param videoTrack the video track to find optimal layers for.
  * @param targetResolution the expected target resolution.
+ * @param preferredBitrate the preferred bitrate for the video track.
  */
-export declare const findOptimalVideoLayers: (videoTrack: MediaStreamTrack, targetResolution?: TargetResolutionResponse) => OptimalVideoLayer[];
+export declare const findOptimalVideoLayers: (videoTrack: MediaStreamTrack, targetResolution: TargetResolutionResponse | undefined, preferredBitrate: number | undefined) => OptimalVideoLayer[];
 /**
  * Computes the maximum bitrate for a given resolution.
  * If the current resolution is lower than the target resolution,
@@ -22,6 +23,7 @@ export declare const findOptimalVideoLayers: (videoTrack: MediaStreamTrack, targ
  * @param targetResolution the target resolution.
  * @param currentWidth the current width of the track.
  * @param currentHeight the current height of the track.
+ * @param preferredBitrate the preferred bitrate for the track.
  */
-export declare const getComputedMaxBitrate: (targetResolution: TargetResolutionResponse, currentWidth: number, currentHeight: number) => number;
+export declare const getComputedMaxBitrate: (targetResolution: TargetResolutionResponse, currentWidth: number, currentHeight: number, preferredBitrate: number | undefined) => number;
 export declare const findOptimalScreenSharingLayers: (videoTrack: MediaStreamTrack, preferences?: ScreenShareSettings, defaultMaxBitrate?: number) => OptimalVideoLayer[];

package/dist/src/types.d.ts

@@ -111,6 +111,7 @@ export type SubscriptionChanges = {
 };
 export type PublishOptions = {
     preferredCodec?: string | null;
+    preferredBitrate?: number;
     screenShareSettings?: ScreenShareSettings;
 };
 export type ScreenShareSettings = {

package/package.json

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

package/src/Call.ts

@@ -1324,9 +1324,10 @@ export class Call {
         case TrackType.VIDEO:
           const videoStream = this.camera.state.mediaStream;
           if (videoStream) {
-            await this.publishVideoStream(videoStream, {
-              preferredCodec: this.camera.preferredCodec,
-            });
+            await this.publishVideoStream(
+              videoStream,
+              this.camera.publishOptions,
+            );
           }
           break;
         case TrackType.SCREEN_SHARE:
@@ -2209,9 +2210,10 @@ export class Call {
         this.camera.state.mediaStream &&
         !this.publisher?.isPublishing(TrackType.VIDEO)
       ) {
-        await this.publishVideoStream(this.camera.state.mediaStream, {
-          preferredCodec: this.camera.preferredCodec,
-        });
+        await this.publishVideoStream(
+          this.camera.state.mediaStream,
+          this.camera.publishOptions,
+        );
       }
 
       // Start camera if backend config specifies, and there is no local setting

package/src/StreamVideoClient.ts

@@ -320,6 +320,7 @@ export class StreamVideoClient {
       return;
     }
     const userId = this.streamClient.user?.id;
+    const apiKey = this.streamClient.key;
     const disconnectUser = () => this.streamClient.disconnectUser(timeout);
     this.disconnectionPromise = this.connectionPromise
       ? this.connectionPromise.then(() => disconnectUser())
@@ -329,7 +330,7 @@ export class StreamVideoClient {
     );
     await this.disconnectionPromise;
     if (userId) {
-      StreamVideoClient._instanceMap.delete(userId);
+      StreamVideoClient._instanceMap.delete(apiKey + userId);
     }
     this.eventHandlersToUnregister.forEach((unregister) => unregister());
     this.eventHandlersToUnregister = [];

package/src/devices/CameraManager.ts

@@ -4,6 +4,7 @@ import { CameraDirection, CameraManagerState } from './CameraManagerState';
 import { InputMediaDeviceManager } from './InputMediaDeviceManager';
 import { getVideoDevices, getVideoStream } from './devices';
 import { TrackType } from '../gen/video/sfu/models/models';
+import { PublishOptions } from '../types';
 
 type PreferredCodec = 'vp8' | 'h264' | string;
 
@@ -20,10 +21,29 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
    */
   preferredCodec: PreferredCodec | undefined;
 
+  /**
+   * The preferred bitrate for encoding the video.
+   *
+   * @internal internal use only, not part of the public API.
+   */
+  preferredBitrate: number | undefined;
+
   constructor(call: Call) {
     super(call, new CameraManagerState(), TrackType.VIDEO);
   }
 
+  /**
+   * The publish options for the camera.
+   *
+   * @internal internal use only, not part of the public API.
+   */
+  get publishOptions(): PublishOptions {
+    return {
+      preferredCodec: this.preferredCodec,
+      preferredBitrate: this.preferredBitrate,
+    };
+  }
+
   /**
    * Select the camera direction.
    *
@@ -88,6 +108,16 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
     this.preferredCodec = codec;
   }
 
+  /**
+   * Sets the preferred bitrate for encoding the video.
+   *
+   * @internal internal use only, not part of the public API.
+   * @param bitrate the bitrate to use for encoding the video.
+   */
+  setPreferredBitrate(bitrate: number | undefined) {
+    this.preferredBitrate = bitrate;
+  }
+
   protected getDevices(): Observable<MediaDeviceInfo[]> {
     return getVideoDevices();
   }
@@ -107,9 +137,7 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
   }
 
   protected publishStream(stream: MediaStream): Promise<void> {
-    return this.call.publishVideoStream(stream, {
-      preferredCodec: this.preferredCodec,
-    });
+    return this.call.publishVideoStream(stream, this.publishOptions);
   }
 
   protected stopPublishStream(stopTracks: boolean): Promise<void> {

package/src/rtc/Publisher.ts

@@ -13,7 +13,7 @@ import {
   findOptimalVideoLayers,
   OptimalVideoLayer,
 } from './videoLayers';
-import { getPreferredCodecs } from './codecs';
+import { getPreferredCodecs, getRNOptimalCodec } from './codecs';
 import { trackTypeToParticipantStreamKey } from './helpers/tracks';
 import { CallingState, CallState } from '../store';
 import { PublishOptions } from '../types';
@@ -22,7 +22,6 @@ import { enableHighQualityAudio, toggleDtx } from '../helpers/sdp-munging';
 import { Logger } from '../coordinator/connection/types';
 import { getLogger } from '../logger';
 import { Dispatcher } from './Dispatcher';
-import { getOSInfo } from '../client-details';
 import { VideoLayerSetting } from '../gen/video/sfu/event/events';
 import { TargetResolutionResponse } from '../gen/shims';
 
@@ -260,30 +259,18 @@ export class Publisher {
       const screenShareBitrate =
         settings?.screensharing.target_resolution?.bitrate;
 
+      const { preferredBitrate, preferredCodec, screenShareSettings } = opts;
       const videoEncodings =
         trackType === TrackType.VIDEO
-          ? findOptimalVideoLayers(track, targetResolution)
+          ? findOptimalVideoLayers(track, targetResolution, preferredBitrate)
           : trackType === TrackType.SCREEN_SHARE
             ? findOptimalScreenSharingLayers(
                 track,
-                opts.screenShareSettings,
+                screenShareSettings,
                 screenShareBitrate,
               )
             : undefined;
 
-      let preferredCodec = opts.preferredCodec;
-      if (!preferredCodec && trackType === TrackType.VIDEO && isReactNative()) {
-        const osName = getOSInfo()?.name.toLowerCase();
-        if (osName === 'ipados') {
-          // in ipads it was noticed that if vp8 codec is used
-          // then the bytes sent is 0 in the outbound-rtp
-          // so we are forcing h264 codec for ipads
-          preferredCodec = 'H264';
-        } else if (osName === 'android') {
-          preferredCodec = 'VP8';
-        }
-      }
-
       // listen for 'ended' event on the track as it might be ended abruptly
       // by an external factor as permission revokes, device disconnected, etc.
       // keep in mind that `track.stop()` doesn't trigger this event.
@@ -306,9 +293,14 @@ export class Publisher {
       this.transceiverRegistry[trackType] = transceiver;
       this.publishOptionsPerTrackType.set(trackType, opts);
 
+      const codec =
+        isReactNative() && trackType === TrackType.VIDEO && !preferredCodec
+          ? getRNOptimalCodec()
+          : preferredCodec;
+
       const codecPreferences =
         'setCodecPreferences' in transceiver
-          ? this.getCodecPreferences(trackType, preferredCodec)
+          ? this.getCodecPreferences(trackType, codec)
           : undefined;
       if (codecPreferences) {
         this.logger(
@@ -721,7 +713,11 @@ export class Publisher {
           const publishOpts = this.publishOptionsPerTrackType.get(trackType);
           optimalLayers =
             trackType === TrackType.VIDEO
-              ? findOptimalVideoLayers(track, targetResolution)
+              ? findOptimalVideoLayers(
+                  track,
+                  targetResolution,
+                  publishOpts?.preferredBitrate,
+                )
               : trackType === TrackType.SCREEN_SHARE
                 ? findOptimalScreenSharingLayers(
                     track,

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

@@ -138,7 +138,12 @@ describe('videoLayers', () => {
   describe('getComputedMaxBitrate', () => {
     it('should scale target bitrate down if resolution is smaller than target resolution', () => {
       const targetResolution = { width: 1920, height: 1080, bitrate: 3000000 };
-      const scaledBitrate = getComputedMaxBitrate(targetResolution, 1280, 720);
+      const scaledBitrate = getComputedMaxBitrate(
+        targetResolution,
+        1280,
+        720,
+        undefined,
+      );
       expect(scaledBitrate).toBe(1333333);
     });
 
@@ -148,7 +153,12 @@ describe('videoLayers', () => {
       const targetBitrates = ['f', 'h', 'q'].map((rid) => {
         const width = targetResolution.width / downscaleFactor;
         const height = targetResolution.height / downscaleFactor;
-        const bitrate = getComputedMaxBitrate(targetResolution, width, height);
+        const bitrate = getComputedMaxBitrate(
+          targetResolution,
+          width,
+          height,
+          undefined,
+        );
         downscaleFactor *= 2;
         return {
           rid,
@@ -166,25 +176,45 @@ describe('videoLayers', () => {
 
     it('should not scale target bitrate if resolution is larger than target resolution', () => {
       const targetResolution = { width: 1280, height: 720, bitrate: 1000000 };
-      const scaledBitrate = getComputedMaxBitrate(targetResolution, 2560, 1440);
+      const scaledBitrate = getComputedMaxBitrate(
+        targetResolution,
+        2560,
+        1440,
+        undefined,
+      );
       expect(scaledBitrate).toBe(1000000);
     });
 
     it('should not scale target bitrate if resolution is equal to target resolution', () => {
       const targetResolution = { width: 1280, height: 720, bitrate: 1000000 };
-      const scaledBitrate = getComputedMaxBitrate(targetResolution, 1280, 720);
+      const scaledBitrate = getComputedMaxBitrate(
+        targetResolution,
+        1280,
+        720,
+        undefined,
+      );
       expect(scaledBitrate).toBe(1000000);
     });
 
     it('should handle 0 width and height', () => {
       const targetResolution = { width: 1280, height: 720, bitrate: 1000000 };
-      const scaledBitrate = getComputedMaxBitrate(targetResolution, 0, 0);
+      const scaledBitrate = getComputedMaxBitrate(
+        targetResolution,
+        0,
+        0,
+        undefined,
+      );
       expect(scaledBitrate).toBe(0);
     });
 
     it('should handle 4k target resolution', () => {
       const targetResolution = { width: 3840, height: 2160, bitrate: 15000000 };
-      const scaledBitrate = getComputedMaxBitrate(targetResolution, 1280, 720);
+      const scaledBitrate = getComputedMaxBitrate(
+        targetResolution,
+        1280,
+        720,
+        undefined,
+      );
       expect(scaledBitrate).toBe(1666667);
     });
   });

package/src/rtc/codecs.ts

@@ -1,3 +1,5 @@
+import { getOSInfo } from '../client-details';
+
 /**
  * Returns back a list of sorted codecs, with the preferred codec first.
  *
@@ -88,3 +90,16 @@ export const getGenericSdp = async (direction: RTCRtpTransceiverDirection) => {
   tempPc.close();
   return sdp;
 };
+
+/**
+ * Returns the optimal codec for RN.
+ */
+export const getRNOptimalCodec = () => {
+  const osName = getOSInfo()?.name.toLowerCase();
+  // in ipads it was noticed that if vp8 codec is used
+  // then the bytes sent is 0 in the outbound-rtp
+  // so we are forcing h264 codec for ipads
+  if (osName === 'ipados') return 'h264';
+  if (osName === 'android') return 'vp8';
+  return undefined;
+};

package/src/rtc/videoLayers.ts

@@ -25,16 +25,23 @@ const defaultBitratePerRid: Record<string, number> = {
  *
  * @param videoTrack the video track to find optimal layers for.
  * @param targetResolution the expected target resolution.
+ * @param preferredBitrate the preferred bitrate for the video track.
  */
 export const findOptimalVideoLayers = (
   videoTrack: MediaStreamTrack,
   targetResolution: TargetResolutionResponse = defaultTargetResolution,
+  preferredBitrate: number | undefined,
 ) => {
   const optimalVideoLayers: OptimalVideoLayer[] = [];
   const settings = videoTrack.getSettings();
   const { width: w = 0, height: h = 0 } = settings;
 
-  const maxBitrate = getComputedMaxBitrate(targetResolution, w, h);
+  const maxBitrate = getComputedMaxBitrate(
+    targetResolution,
+    w,
+    h,
+    preferredBitrate,
+  );
   let downscaleFactor = 1;
   ['f', 'h', 'q'].forEach((rid) => {
     // Reversing the order [f, h, q] to [q, h, f] as Chrome uses encoding index
@@ -68,22 +75,29 @@ export const findOptimalVideoLayers = (
  * @param targetResolution the target resolution.
  * @param currentWidth the current width of the track.
  * @param currentHeight the current height of the track.
+ * @param preferredBitrate the preferred bitrate for the track.
  */
 export const getComputedMaxBitrate = (
   targetResolution: TargetResolutionResponse,
   currentWidth: number,
   currentHeight: number,
+  preferredBitrate: number | undefined,
 ): number => {
   // if the current resolution is lower than the target resolution,
   // we want to proportionally reduce the target bitrate
-  const { width: targetWidth, height: targetHeight } = targetResolution;
+  const {
+    width: targetWidth,
+    height: targetHeight,
+    bitrate: targetBitrate,
+  } = targetResolution;
+  const bitrate = preferredBitrate || targetBitrate;
   if (currentWidth < targetWidth || currentHeight < targetHeight) {
     const currentPixels = currentWidth * currentHeight;
     const targetPixels = targetWidth * targetHeight;
     const reductionFactor = currentPixels / targetPixels;
-    return Math.round(targetResolution.bitrate * reductionFactor);
+    return Math.round(bitrate * reductionFactor);
   }
-  return targetResolution.bitrate;
+  return bitrate;
 };
 
 /**

package/src/types.ts

@@ -148,6 +148,7 @@ export type SubscriptionChanges = {
 
 export type PublishOptions = {
   preferredCodec?: string | null;
+  preferredBitrate?: number;
   screenShareSettings?: ScreenShareSettings;
 };