fix: lift the debug helpers from the SDK to Pronto (#1182)

This PR cleans up the SDK from the various debug helpers that were added during its early development stages. As we don't want to lose the helpers, they now live within our dogfooding app and can be used like always. As part of this PR, a few more cleanups and dependency upgrades were done too.
GetStream · Nov 7, 2023 · 8f31efc · 8f31efc
1 parent 4fca13b
commit 8f31efc
Show file tree

Hide file tree

Showing 48 changed files with 476 additions and 324 deletions.
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -32,7 +32,7 @@
     "@protobuf-ts/runtime-rpc": "^2.9.1",
     "@protobuf-ts/twirp-transport": "^2.9.1",
     "@types/ws": "^8.5.7",
-    "axios": "^1.5.1",
+    "axios": "^1.6.0",
     "base64-js": "^1.5.1",
     "isomorphic-ws": "^5.0.0",
     "jsonwebtoken": "^9.0.2",

diff --git a/packages/client/src/Call.ts b/packages/client/src/Call.ts
@@ -701,14 +701,6 @@ export class Call {
       throw error;
     }
 
-    // FIXME OL: remove once cascading is implemented
-    if (typeof window !== 'undefined' && window.location?.search) {
-      const params = new URLSearchParams(window.location.search);
-      sfuServer.url = params.get('sfuUrl') || sfuServer.url;
-      sfuServer.ws_endpoint = params.get('sfuWsUrl') || sfuServer.ws_endpoint;
-      sfuServer.edge_name = params.get('sfuUrl') || sfuServer.edge_name;
-    }
-
     const previousSfuClient = this.sfuClient;
     const sfuClient = (this.sfuClient = new StreamSfuClient({
       dispatcher: this.dispatcher,
@@ -798,7 +790,11 @@ export class Call {
 
         // restore previous publishing state
         if (audioStream) await this.publishAudioStream(audioStream);
-        if (videoStream) await this.publishVideoStream(videoStream);
+        if (videoStream) {
+          await this.publishVideoStream(videoStream, {
+            preferredCodec: this.camera.preferredCodec,
+          });
+        }
         if (screenShare) await this.publishScreenShareStream(screenShare);
       }
       this.logger(
@@ -1830,10 +1826,12 @@ export class Call {
         this.camera.state.mediaStream &&
         !this.publisher?.isPublishing(TrackType.VIDEO)
       ) {
-        await this.publishVideoStream(this.camera.state.mediaStream);
+        await this.publishVideoStream(this.camera.state.mediaStream, {
+          preferredCodec: this.camera.preferredCodec,
+        });
       }
 
-      // Start camera if backend config speicifies, and there is no local setting
+      // Start camera if backend config specifies, and there is no local setting
       if (
         this.camera.state.status === undefined &&
         this.state.settings?.video.camera_default_on

diff --git a/packages/client/src/devices/CameraManager.ts b/packages/client/src/devices/CameraManager.ts
@@ -5,19 +5,29 @@ import { InputMediaDeviceManager } from './InputMediaDeviceManager';
 import { getVideoDevices, getVideoStream } from './devices';
 import { TrackType } from '../gen/video/sfu/models/models';
 
+type PreferredCodec = 'vp8' | 'h264' | string;
+
 export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
   private targetResolution = {
     width: 1280,
     height: 720,
   };
 
+  /**
+   * The preferred codec for encoding the video.
+   *
+   * @internal internal use only, not part of the public API.
+   */
+  preferredCodec: PreferredCodec | undefined;
+
   constructor(call: Call) {
     super(call, new CameraManagerState(), TrackType.VIDEO);
   }
 
   /**
-   * Select the camera direaction
-   * @param direction
+   * Select the camera direction.
+   *
+   * @param direction the direction of the camera to select.
    */
   async selectDirection(direction: Exclude<CameraDirection, undefined>) {
     this.state.setDirection(direction);
@@ -48,6 +58,7 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
         await this.enablePromise;
       } catch (error) {
         // couldn't enable device, target resolution will be applied the next time user attempts to start the device
+        this.logger('warn', 'could not apply target resolution', error);
       }
     }
     if (this.state.status === 'enabled') {
@@ -57,15 +68,26 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
       if (
         width !== this.targetResolution.width ||
         height !== this.targetResolution.height
-      )
+      ) {
         await this.applySettingsToStream();
-      this.logger(
-        'debug',
-        `${width}x${height} target resolution applied to media stream`,
-      );
+        this.logger(
+          'debug',
+          `${width}x${height} target resolution applied to media stream`,
+        );
+      }
     }
   }
 
+  /**
+   * Sets the preferred codec for encoding the video.
+   *
+   * @internal internal use only, not part of the public API.
+   * @param codec the codec to use for encoding the video.
+   */
+  setPreferredCodec(codec: 'vp8' | 'h264' | string | undefined) {
+    this.preferredCodec = codec;
+  }
+
   protected getDevices(): Observable<MediaDeviceInfo[]> {
     return getVideoDevices();
   }
@@ -85,7 +107,9 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
   }
 
   protected publishStream(stream: MediaStream): Promise<void> {
-    return this.call.publishVideoStream(stream);
+    return this.call.publishVideoStream(stream, {
+      preferredCodec: this.preferredCodec,
+    });
   }
 
   protected stopPublishStream(stopTracks: boolean): Promise<void> {

diff --git a/packages/client/src/devices/__tests__/CameraManager.test.ts b/packages/client/src/devices/__tests__/CameraManager.test.ts
@@ -73,6 +73,23 @@ describe('CameraManager', () => {
 
     expect(manager['call'].publishVideoStream).toHaveBeenCalledWith(
       manager.state.mediaStream,
+      {
+        preferredCodec: undefined,
+      },
+    );
+  });
+
+  it('publish stream with preferred codec', async () => {
+    manager['call'].state.setCallingState(CallingState.JOINED);
+    manager.setPreferredCodec('h264');
+
+    await manager.enable();
+
+    expect(manager['call'].publishVideoStream).toHaveBeenCalledWith(
+      manager.state.mediaStream,
+      {
+        preferredCodec: 'h264',
+      },
     );
   });
 

diff --git a/packages/client/src/rtc/flows/join.ts b/packages/client/src/rtc/flows/join.ts
@@ -44,25 +44,6 @@ const doJoin = async (
     ...data,
     location,
   };
-
-  // FIXME OL: remove this once cascading is enabled by default
-  const cascadingModeParams = getCascadingModeParams();
-  if (cascadingModeParams) {
-    // FIXME OL: remove after SFU migration is done
-    if (data?.migrating_from && cascadingModeParams['next_sfu_id']) {
-      cascadingModeParams['sfu_id'] = cascadingModeParams['next_sfu_id'];
-    }
-    return httpClient.doAxiosRequest<JoinCallResponse, JoinCallRequest>(
-      'post',
-      `/call/${type}/${id}/join`,
-      request,
-      {
-        params: {
-          ...cascadingModeParams,
-        },
-      },
-    );
-  }
   return httpClient.post<JoinCallResponse, JoinCallRequest>(
     `/call/${type}/${id}/join`,
     request,
@@ -81,20 +62,6 @@ const toRtcConfiguration = (config?: ICEServer[]) => {
   return rtcConfig;
 };
 
-const getCascadingModeParams = () => {
-  if (typeof window === 'undefined') return null;
-  const params = new URLSearchParams(window.location?.search);
-  const cascadingEnabled = params.get('cascading') !== null;
-  if (cascadingEnabled) {
-    const rawParams: Record<string, string> = {};
-    params.forEach((value, key) => {
-      rawParams[key] = value;
-    });
-    return rawParams;
-  }
-  return null;
-};
-
 /**
  * Reconciles the local state of the source participant into the target participant.
  *

diff --git a/packages/react-sdk/index.ts b/packages/react-sdk/index.ts
@@ -6,7 +6,6 @@ export * from '@stream-io/video-react-bindings';
 export * from './src/core';
 
 export * from './src/components';
-export * from './src/types';
 export * from './src/translations';
 export {
   useHorizontalScrollPosition,

diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
@@ -28,7 +28,7 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@floating-ui/react": "^0.22.0",
+    "@floating-ui/react": "^0.26.1",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
     "@stream-io/video-client": "workspace:^",

diff --git a/packages/react-sdk/src/components/Debug/DebugParticipantPublishQuality.tsx b/packages/react-sdk/src/components/Debug/DebugParticipantPublishQuality.tsx
diff --git a/packages/react-sdk/src/components/Permissions/PermissionRequests.tsx b/packages/react-sdk/src/components/Permissions/PermissionRequests.tsx
@@ -49,15 +49,15 @@ export const PermissionRequests = () => {
     OwnCapability.UPDATE_CALL_PERMISSIONS,
   );
 
+  const localUserId = localParticipant?.userId;
   useEffect(() => {
     if (!call || !canUpdateCallPermissions) return;
 
     const unsubscribe = call.on(
       'call.permission_request',
       (event: StreamVideoEvent) => {
         if (event.type !== 'call.permission_request') return;
-
-        if (event.user.id !== localParticipant?.userId) {
+        if (event.user.id !== localUserId) {
           setPermissionRequests((requests) =>
             [...requests, event as PermissionRequestEvent].sort((a, b) =>
               byNameOrId(a.user, b.user),
@@ -69,7 +69,7 @@ export const PermissionRequests = () => {
     return () => {
       unsubscribe();
     };
-  }, [call, canUpdateCallPermissions, localParticipant]);
+  }, [call, canUpdateCallPermissions, localUserId]);
 
   const handleUpdatePermission: HandleUpdatePermission = (request, type) => {
     return async () => {

diff --git a/packages/react-sdk/src/components/index.ts b/packages/react-sdk/src/components/index.ts
@@ -4,6 +4,7 @@ export * from './CallControls';
 export * from './CallParticipantsList';
 export * from './CallPreview';
 export * from './CallRecordingList';
+export * from './CallStats';
 export * from './DeviceSettings';
 export * from './Icon';
 export * from './LoadingIndicator';