fix: lift the debug helpers from the SDK to Pronto

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",

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

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> {

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.
  *

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,

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:^",

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 () => {

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';

packages/react-sdk/src/core/components/ParticipantView/DefaultParticipantViewUI.tsx

@@ -13,10 +13,6 @@ import {
   ToggleMenuButtonProps,
 } from '../../../components';
 import { Reaction } from '../../../components/Reaction';
-
-import { DebugParticipantPublishQuality } from '../../../components/Debug/DebugParticipantPublishQuality';
-import { DebugStatsView } from '../../../components/Debug/DebugStatsView';
-import { useIsDebugMode } from '../../../components/Debug/useIsDebugMode';
 import { useParticipantViewContext } from './ParticipantViewContext';
 
 export type DefaultParticipantViewUIProps = {
@@ -124,10 +120,10 @@ export const ParticipantDetails = ({
     sessionId,
     name,
     userId,
-    videoStream,
   } = participant;
-  const call = useCall()!;
+  const call = useCall();
 
+  const { t } = useI18n();
   const connectionQualityAsString =
     !!connectionQuality &&
     SfuModels.ConnectionQuality[connectionQuality].toLowerCase();
@@ -136,16 +132,14 @@ export const ParticipantDetails = ({
   const hasVideo = publishedTracks.includes(SfuModels.TrackType.VIDEO);
   const canUnpin = !!pin && pin.isLocalPin;
 
-  const isDebugMode = useIsDebugMode();
-
   return (
     <div className="str-video__participant-details">
       <span className="str-video__participant-details__name">
         {name || userId}
         {indicatorsVisible && isDominantSpeaker && (
           <span
             className="str-video__participant-details__name--dominant_speaker"
-            title="Dominant speaker"
+            title={t('Dominant speaker')}
           />
         )}
         {indicatorsVisible && (
@@ -154,7 +148,7 @@ export const ParticipantDetails = ({
               isLocalParticipant &&
               connectionQuality === SfuModels.ConnectionQuality.POOR
             }
-            message="Poor connection quality. Please check your internet connection."
+            message={t('Poor connection quality')}
           >
             {connectionQualityAsString && (
               <span
@@ -176,27 +170,13 @@ export const ParticipantDetails = ({
         {indicatorsVisible && canUnpin && (
           // TODO: remove this monstrosity once we have a proper design
           <span
-            title="Unpin"
+            title={t('Unpin')}
             onClick={() => call?.unpin(sessionId)}
             style={{ cursor: 'pointer' }}
             className="str-video__participant-details__name--pinned"
           />
         )}
       </span>
-      {isDebugMode && (
-        <>
-          <DebugParticipantPublishQuality
-            participant={participant}
-            call={call}
-          />
-          <DebugStatsView
-            call={call}
-            sessionId={sessionId}
-            userId={userId}
-            mediaStream={videoStream}
-          />
-        </>
-      )}
     </div>
   );
 };