@stream-io/video-react-sdk 1.26.1 → 1.27.0

package/dist/src/components/BackgroundFilters/BackgroundFilters.d.ts

@@ -1,5 +1,35 @@
 import { PropsWithChildren } from 'react';
 import { BackgroundBlurLevel, BackgroundFilter, PlatformSupportFlags } from '@stream-io/video-filters-web';
+/**
+ * Configuration for performance metric thresholds.
+ */
+export type BackgroundFiltersPerformanceThresholds = {
+    /**
+     * The lower FPS threshold for triggering a performance warning.
+     * When the EMA FPS falls below this value, a warning is shown.
+     * @default 23
+     */
+    fpsWarningThresholdLower?: number;
+    /**
+     * The upper FPS threshold for clearing a performance warning.
+     * When the EMA FPS rises above this value, the warning is cleared.
+     * @default 25
+     */
+    fpsWarningThresholdUpper?: number;
+    /**
+     * The default FPS value used as the initial value for the EMA (Exponential Moving Average)
+     * calculation and when stats are unavailable or when resetting the filter.
+     * @default 30
+     */
+    defaultFps?: number;
+};
+/**
+ * Represents the possible reasons for background filter performance degradation.
+ */
+export declare enum PerformanceDegradationReason {
+    FRAME_DROP = "frame-drop",
+    CPU_THROTTLING = "cpu-throttling"
+}
 export type BackgroundFiltersProps = PlatformSupportFlags & {
     /**
      * A list of URLs to use as background images.
@@ -21,7 +51,7 @@ export type BackgroundFiltersProps = PlatformSupportFlags & {
     backgroundBlurLevel?: BackgroundBlurLevel;
     /**
      * The base path for the TensorFlow Lite files.
-     * @default 'https://unpkg.com/@stream-io/video-filters-web/tf'.
+     * @default 'https://unpkg.com/@stream-io/video-filters-web/mediapipe'.
      */
     basePath?: string;
     /**
@@ -32,18 +62,46 @@ export type BackgroundFiltersProps = PlatformSupportFlags & {
      */
     tfFilePath?: string;
     /**
-     * The path to the TensorFlow Lite model file.
-     * Override this prop to use a custom path to the TensorFlow Lite model file
+     * The path to the MediaPipe model file.
+     * Override this prop to use a custom path to the MediaPipe model file
      * (e.g., if you choose to host it yourself).
      */
     modelFilePath?: string;
+    /**
+     * When true, the filter uses the legacy TensorFlow-based segmentation model.
+     * When false, it uses the default MediaPipe Tasks Vision model.
+     *
+     * Only enable this if you need to mimic the behavior of older SDK versions.
+     */
+    useLegacyFilter?: boolean;
     /**
      * When a started filter encounters an error, this callback will be executed.
      * The default behavior (not overridable) is unregistering a failed filter.
-     * Use this callback to display UI error message, disable the corresponsing stream,
+     * Use this callback to display UI error message, disable the corresponding stream,
      * or to try registering the filter again.
      */
     onError?: (error: any) => void;
+    /**
+     * Configuration for performance metric thresholds.
+     * Use this to customize when performance warnings are triggered.
+     */
+    performanceThresholds?: BackgroundFiltersPerformanceThresholds;
+};
+/**
+ * Performance degradation information for background filters.
+ *
+ * Performance is calculated using an Exponential Moving Average (EMA) of FPS values
+ * to smooth out quick spikes and provide stable performance warnings.
+ */
+export type BackgroundFiltersPerformance = {
+    /**
+     * Whether performance is currently degraded.
+     */
+    degraded: boolean;
+    /**
+     * Reasons for performance degradation.
+     */
+    reason?: Array<PerformanceDegradationReason>;
 };
 export type BackgroundFiltersAPI = {
     /**
@@ -54,6 +112,10 @@ export type BackgroundFiltersAPI = {
      * Indicates whether the background filters engine is loaded and ready.
      */
     isReady: boolean;
+    /**
+     * Performance information for background filters.
+     */
+    performance: BackgroundFiltersPerformance;
     /**
      * Disables all background filters applied to the video.
      */

package/dist/src/components/DeviceSettings/DeviceSelectorAudio.d.ts

@@ -7,5 +7,7 @@ export declare const DeviceSelectorAudioInput: ({ title, visualType, volumeIndic
 export type DeviceSelectorAudioOutputProps = {
     title?: string;
     visualType?: 'list' | 'dropdown';
+    speakerTestVisible?: boolean;
+    speakerTestAudioUrl?: string;
 };
-export declare const DeviceSelectorAudioOutput: ({ title, visualType, }: DeviceSelectorAudioOutputProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DeviceSelectorAudioOutput: ({ title, visualType, speakerTestVisible, speakerTestAudioUrl, }: DeviceSelectorAudioOutputProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/DeviceSettings/SpeakerTest.d.ts

@@ -0,0 +1,7 @@
+/**
+ * SpeakerTest component that plays a test audio through the selected speaker.
+ * This allows users to verify their audio output device is working correctly.
+ */
+export declare const SpeakerTest: (props: {
+    audioUrl?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/DeviceSettings/index.d.ts

@@ -3,3 +3,4 @@ export * from './DeviceSettings';
 export * from './DeviceSelector';
 export * from './DeviceSelectorAudio';
 export * from './DeviceSelectorVideo';
+export * from './SpeakerTest';

package/dist/src/components/Notification/Notification.d.ts

@@ -6,6 +6,7 @@ export type NotificationProps = {
     visibilityTimeout?: number;
     resetIsVisible?: () => void;
     placement?: Placement;
+    className?: string;
     iconClassName?: string | null;
     close?: () => void;
 };

package/dist/src/translations/index.d.ts

@@ -12,6 +12,7 @@ export declare const translations: {
         Speakers: string;
         Video: string;
         "You are muted. Unmute to speak.": string;
+        "Background filters performance is degraded. Consider disabling filters for better performance.": string;
         Live: string;
         "Livestream starts soon": string;
         "Livestream starts at {{ startsAt }}": string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.26.1",
+  "version": "1.27.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -19,6 +19,7 @@
   "files": [
     "dist",
     "src",
+    "assets",
     "index.ts",
     "package.json",
     "README.md",
@@ -30,9 +31,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.37.0",
-    "@stream-io/video-filters-web": "0.4.0",
-    "@stream-io/video-react-bindings": "1.11.1",
+    "@stream-io/video-client": "1.37.1",
+    "@stream-io/video-filters-web": "0.5.0",
+    "@stream-io/video-react-bindings": "1.11.2",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -46,7 +47,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
     "@stream-io/audio-filters-web": "^0.6.0",
-    "@stream-io/video-styling": "^1.7.0",
+    "@stream-io/video-styling": "^1.8.0",
     "@types/react": "~19.1.17",
     "@types/react-dom": "~19.1.11",
     "react": "19.1.0",