@stream-io/video-client 1.23.3 → 1.23.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.23.3",
+  "version": "1.23.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "browser": "dist/index.browser.es.js",

package/src/StreamSfuClient.ts

@@ -237,6 +237,8 @@ export class StreamSfuClient {
     const eventsToTrace: Partial<Record<SfuEventKinds, boolean>> = {
       callEnded: true,
       changePublishQuality: true,
+      changePublishOptions: true,
+      connectionQualityChanged: true,
       error: true,
       goAway: true,
     };

package/src/coordinator/connection/token_manager.ts

@@ -113,7 +113,9 @@ export class TokenManager {
           this.token = token;
         } catch (e) {
           return reject(
-            new Error(`Call to tokenProvider failed with message: ${e}`),
+            new Error(`Call to tokenProvider failed with message: ${e}`, {
+              cause: e,
+            }),
           );
         }
         resolve(this.token);

package/src/devices/CameraManager.ts

@@ -123,7 +123,13 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
     await this.statusChangeSettled();
 
     const { target_resolution, camera_facing, camera_default_on } = settings;
-    await this.selectTargetResolution(target_resolution);
+    // normalize target resolution to landscape format.
+    // on mobile devices, the device itself adjusts the resolution to portrait or landscape
+    // depending on the orientation of the device. using portrait resolution
+    // will result in falling back to the default resolution (640x480).
+    let { width, height } = target_resolution;
+    if (width < height) [width, height] = [height, width];
+    await this.selectTargetResolution({ width, height });
 
     // Set camera direction if it's not yet set
     if (!this.state.direction && !this.state.selectedDevice) {

package/src/devices/devices.ts

@@ -175,6 +175,20 @@ const getStream = async (
       // every successful getUserMedia call.
       navigator.mediaDevices.dispatchEvent(new Event('devicechange'));
     }
+    if (constraints.video) {
+      const [videoTrack] = stream.getVideoTracks();
+      if (videoTrack) {
+        const { width, height } = videoTrack.getSettings();
+        const target = constraints.video as MediaTrackConstraints;
+        if (width !== target.width || height !== target.height) {
+          tracer?.trace(
+            `${tag}Warn`,
+            `Requested resolution ${target.width}x${target.height} but got ${width}x${height}`,
+          );
+        }
+      }
+    }
+
     return stream;
   } catch (error) {
     tracer?.trace(`${tag}OnFailure`, (error as Error).name);

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

@@ -112,7 +112,10 @@ describe('videoLayers', () => {
       videoDimension: { width, height },
     });
     expect(layers.length).toBe(1);
-    expect(layers[0].rid).toBe('q');
+    const [q] = layers;
+    expect(q.rid).toBe('q');
+    expect(q.width).toBe(320);
+    expect(q.height).toBe(240);
   });
 
   it('should announce two simulcast layers for resolutions less than 640px wide', () => {
@@ -128,8 +131,13 @@ describe('videoLayers', () => {
       videoDimension: { width, height },
     });
     expect(layers.length).toBe(2);
-    expect(layers[0].rid).toBe('q');
-    expect(layers[1].rid).toBe('h');
+    const [q, h] = layers;
+    expect(q.rid).toBe('q');
+    expect(q.width).toBe(320);
+    expect(q.height).toBe(240);
+    expect(h.rid).toBe('h');
+    expect(h.width).toBe(640);
+    expect(h.height).toBe(480);
   });
 
   it('should announce three simulcast layers for resolutions greater than 640px wide', () => {
@@ -145,9 +153,16 @@ describe('videoLayers', () => {
       videoDimension: { width, height },
     });
     expect(layers.length).toBe(3);
-    expect(layers[0].rid).toBe('q');
-    expect(layers[1].rid).toBe('h');
-    expect(layers[2].rid).toBe('f');
+    const [q, h, f] = layers;
+    expect(q.rid).toBe('q');
+    expect(q.width).toBe(320);
+    expect(q.height).toBe(180);
+    expect(h.rid).toBe('h');
+    expect(h.width).toBe(640);
+    expect(h.height).toBe(360);
+    expect(f.rid).toBe('f');
+    expect(f.width).toBe(1280);
+    expect(f.height).toBe(720);
   });
 
   it('should announce only one layer for SVC codecs', () => {

package/src/rtc/videoLayers.ts

@@ -187,16 +187,18 @@ const withSimulcastConstraints = (
 
   const size = Math.max(settings.width || 0, settings.height || 0);
   if (size <= 320) {
-    // provide only one layer 320x240 (q), the one with the highest quality
+    // provide only one layer 320x240 (f), the one with the highest quality
     layers = optimalVideoLayers.filter((layer) => layer.rid === 'f');
   } else if (size <= 640) {
-    // provide two layers, 160x120 (q) and 640x480 (h)
-    layers = optimalVideoLayers.filter((layer) => layer.rid !== 'h');
+    // provide two layers, 320x240 (h) and 640x480 (f)
+    layers = optimalVideoLayers.filter((layer) => layer.rid !== 'q');
   } else {
     // provide three layers for sizes > 640x480
     layers = optimalVideoLayers;
   }
 
+  // we might have removed some layers, so we need to reassign the rid
+  // to match the expected order of [q, h, f] for simulcast
   const ridMapping = ['q', 'h', 'f'];
   return layers.map<OptimalVideoLayer>((layer, index, arr) => ({
     ...layer,