@stream-io/video-react-sdk 1.28.0 → 1.28.2

package/dist/index.cjs.js

@@ -6,8 +6,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var react$1 = require('@floating-ui/react');
 var clsx = require('clsx');
-var reactDom = require('react-dom');
-var videoFiltersWeb = require('@stream-io/video-filters-web');
 
 const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
     const call = videoReactBindings.useCall();
@@ -957,34 +955,9 @@ const AvatarFallback = ({ className, names, style, }) => {
     return (jsxRuntime.jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: jsxRuntime.jsxs("div", { children: [names[0][0], names[1]?.[0]] }) }));
 };
 
-/**
- * Constants for FPS warning calculation.
- * Smooths out quick spikes using an EMA, ignores brief outliers,
- * and uses two thresholds to avoid flickering near the limit.
- */
-const ALPHA = 0.2;
-const FPS_WARNING_THRESHOLD_LOWER = 23;
-const FPS_WARNING_THRESHOLD_UPPER = 25;
-const DEFAULT_FPS = 30;
-const DEVIATION_LIMIT = 0.5;
-const OUTLIER_PERSISTENCE = 5;
-/**
- * Represents the available background filter processing engines.
- */
-var FilterEngine;
-(function (FilterEngine) {
-    FilterEngine[FilterEngine["TF"] = 0] = "TF";
-    FilterEngine[FilterEngine["MEDIA_PIPE"] = 1] = "MEDIA_PIPE";
-    FilterEngine[FilterEngine["NONE"] = 2] = "NONE";
-})(FilterEngine || (FilterEngine = {}));
-/**
- * Represents the possible reasons for background filter performance degradation.
- */
-exports.PerformanceDegradationReason = void 0;
-(function (PerformanceDegradationReason) {
-    PerformanceDegradationReason["FRAME_DROP"] = "frame-drop";
-    PerformanceDegradationReason["CPU_THROTTLING"] = "cpu-throttling";
-})(exports.PerformanceDegradationReason || (exports.PerformanceDegradationReason = {}));
+const BackgroundFiltersProviderImpl = react.lazy(() => Promise.resolve().then(function () { return require('./background-filters-89nRJ8Uk.cjs.js'); }).then((m) => ({
+    default: m.BackgroundFiltersProvider,
+})));
 /**
  * The context for the background filters.
  */
@@ -999,26 +972,6 @@ const useBackgroundFilters = () => {
     }
     return context;
 };
-/**
- * Determines which filter engine is available.
- * MEDIA_PIPE is the default unless legacy filters are requested or MediaPipe is unsupported.
- *
- * Returns NONE if neither is supported.
- */
-const determineEngine = async (useLegacyFilter, forceSafariSupport, forceMobileSupport) => {
-    const isTfPlatformSupported = await videoFiltersWeb.isPlatformSupported({
-        forceSafariSupport,
-        forceMobileSupport,
-    });
-    if (useLegacyFilter) {
-        return isTfPlatformSupported ? FilterEngine.TF : FilterEngine.NONE;
-    }
-    const isMediaPipeSupported = await videoFiltersWeb.isMediaPipePlatformSupported({
-        forceSafariSupport,
-        forceMobileSupport,
-    });
-    return isMediaPipeSupported ? FilterEngine.MEDIA_PIPE : FilterEngine.NONE;
-};
 /**
  * A provider component that enables the use of background filters in your app.
  *
@@ -1026,295 +979,8 @@ const determineEngine = async (useLegacyFilter, forceSafariSupport, forceMobileS
  * in your project before using this component.
  */
 const BackgroundFiltersProvider = (props) => {
-    const { children, backgroundImages = [], backgroundFilter: bgFilterFromProps = undefined, backgroundImage: bgImageFromProps = undefined, backgroundBlurLevel: bgBlurLevelFromProps = undefined, tfFilePath, modelFilePath, useLegacyFilter, basePath, onError, performanceThresholds, forceSafariSupport, forceMobileSupport, } = props;
-    const call = videoReactBindings.useCall();
-    const { useCallStatsReport } = videoReactBindings.useCallStateHooks();
-    const callStatsReport = useCallStatsReport();
-    const [backgroundFilter, setBackgroundFilter] = react.useState(bgFilterFromProps);
-    const [backgroundImage, setBackgroundImage] = react.useState(bgImageFromProps);
-    const [backgroundBlurLevel, setBackgroundBlurLevel] = react.useState(bgBlurLevelFromProps);
-    const [showLowFpsWarning, setShowLowFpsWarning] = react.useState(false);
-    const fpsWarningThresholdLower = performanceThresholds?.fpsWarningThresholdLower ??
-        FPS_WARNING_THRESHOLD_LOWER;
-    const fpsWarningThresholdUpper = performanceThresholds?.fpsWarningThresholdUpper ??
-        FPS_WARNING_THRESHOLD_UPPER;
-    const defaultFps = performanceThresholds?.defaultFps ?? DEFAULT_FPS;
-    const emaRef = react.useRef(defaultFps);
-    const outlierStreakRef = react.useRef(0);
-    const handleStats = react.useCallback((stats) => {
-        const fps = stats?.fps;
-        if (fps === undefined || fps === null) {
-            emaRef.current = defaultFps;
-            outlierStreakRef.current = 0;
-            setShowLowFpsWarning(false);
-            return;
-        }
-        const prevEma = emaRef.current;
-        const deviation = Math.abs(fps - prevEma) / prevEma;
-        const isOutlier = fps < prevEma && deviation > DEVIATION_LIMIT;
-        outlierStreakRef.current = isOutlier ? outlierStreakRef.current + 1 : 0;
-        if (isOutlier && outlierStreakRef.current < OUTLIER_PERSISTENCE)
-            return;
-        emaRef.current = ALPHA * fps + (1 - ALPHA) * prevEma;
-        setShowLowFpsWarning((prev) => {
-            if (prev && emaRef.current > fpsWarningThresholdUpper)
-                return false;
-            if (!prev && emaRef.current < fpsWarningThresholdLower)
-                return true;
-            return prev;
-        });
-    }, [fpsWarningThresholdLower, fpsWarningThresholdUpper, defaultFps]);
-    const performance = react.useMemo(() => {
-        if (!backgroundFilter) {
-            return { degraded: false };
-        }
-        const reasons = [];
-        if (showLowFpsWarning) {
-            reasons.push(exports.PerformanceDegradationReason.FRAME_DROP);
-        }
-        const qualityLimitationReasons = callStatsReport?.publisherStats?.qualityLimitationReasons;
-        if (showLowFpsWarning &&
-            qualityLimitationReasons &&
-            qualityLimitationReasons?.includes('cpu')) {
-            reasons.push(exports.PerformanceDegradationReason.CPU_THROTTLING);
-        }
-        return {
-            degraded: reasons.length > 0,
-            reason: reasons.length > 0 ? reasons : undefined,
-        };
-    }, [
-        showLowFpsWarning,
-        callStatsReport?.publisherStats?.qualityLimitationReasons,
-        backgroundFilter,
-    ]);
-    const prevDegradedRef = react.useRef(undefined);
-    react.useEffect(() => {
-        const currentDegraded = performance.degraded;
-        const prevDegraded = prevDegradedRef.current;
-        if (!!backgroundFilter &&
-            prevDegraded !== undefined &&
-            prevDegraded !== currentDegraded) {
-            call?.tracer.trace('backgroundFilters.performance', {
-                degraded: currentDegraded,
-                reason: performance?.reason,
-                fps: emaRef.current,
-            });
-        }
-        prevDegradedRef.current = currentDegraded;
-    }, [
-        performanceThresholds,
-        performance.degraded,
-        performance.reason,
-        backgroundFilter,
-        call?.tracer,
-    ]);
-    const applyBackgroundImageFilter = react.useCallback((imageUrl) => {
-        setBackgroundFilter('image');
-        setBackgroundImage(imageUrl);
-    }, []);
-    const applyBackgroundBlurFilter = react.useCallback((blurLevel = 'high') => {
-        setBackgroundFilter('blur');
-        setBackgroundBlurLevel(blurLevel);
-    }, []);
-    const disableBackgroundFilter = react.useCallback(() => {
-        setBackgroundFilter(undefined);
-        setBackgroundImage(undefined);
-        setBackgroundBlurLevel(undefined);
-        emaRef.current = defaultFps;
-        outlierStreakRef.current = 0;
-        setShowLowFpsWarning(false);
-    }, [defaultFps]);
-    const [engine, setEngine] = react.useState(FilterEngine.NONE);
-    const [isSupported, setIsSupported] = react.useState(false);
-    react.useEffect(() => {
-        determineEngine(useLegacyFilter, forceSafariSupport, forceMobileSupport).then((determinedEngine) => {
-            setEngine(determinedEngine);
-            setIsSupported(determinedEngine !== FilterEngine.NONE);
-        });
-    }, [forceMobileSupport, forceSafariSupport, useLegacyFilter]);
-    const [tfLite, setTfLite] = react.useState();
-    react.useEffect(() => {
-        if (engine !== FilterEngine.TF)
-            return;
-        videoFiltersWeb.loadTFLite({ basePath, modelFilePath, tfFilePath })
-            .then(setTfLite)
-            .catch((err) => console.error('Failed to load TFLite', err));
-    }, [basePath, engine, modelFilePath, tfFilePath]);
-    const [mediaPipe, setMediaPipe] = react.useState();
-    react.useEffect(() => {
-        if (engine !== FilterEngine.MEDIA_PIPE)
-            return;
-        videoFiltersWeb.loadMediaPipe({
-            basePath: basePath,
-            modelPath: modelFilePath,
-        })
-            .then(setMediaPipe)
-            .catch((err) => console.error('Failed to preload MediaPipe', err));
-    }, [engine, modelFilePath, basePath]);
-    const handleError = react.useCallback((error) => {
-        console.warn('[filters] Filter encountered an error and will be disabled');
-        disableBackgroundFilter();
-        onError?.(error);
-    }, [disableBackgroundFilter, onError]);
-    const isReady = useLegacyFilter ? !!tfLite : !!mediaPipe;
-    return (jsxRuntime.jsxs(BackgroundFiltersContext.Provider, { value: {
-            isSupported,
-            performance,
-            isReady,
-            backgroundImage,
-            backgroundBlurLevel,
-            backgroundFilter,
-            disableBackgroundFilter,
-            applyBackgroundBlurFilter,
-            applyBackgroundImageFilter,
-            backgroundImages,
-            tfFilePath,
-            modelFilePath,
-            basePath,
-            onError: handleError,
-        }, children: [children, isReady && (jsxRuntime.jsx(BackgroundFilters, { tfLite: tfLite, engine: engine, onStats: handleStats }))] }));
-};
-const BackgroundFilters = (props) => {
-    const call = videoReactBindings.useCall();
-    const { children, start } = useRenderer(props.tfLite, call, props.engine);
-    const { onError, backgroundFilter } = useBackgroundFilters();
-    const handleErrorRef = react.useRef(undefined);
-    handleErrorRef.current = onError;
-    const handleStatsRef = react.useRef(undefined);
-    handleStatsRef.current = props.onStats;
-    react.useEffect(() => {
-        if (!call || !backgroundFilter)
-            return;
-        const { unregister } = call.camera.registerFilter((ms) => {
-            return start(ms, (error) => handleErrorRef.current?.(error), (stats) => handleStatsRef.current?.(stats));
-        });
-        return () => {
-            unregister().catch((err) => console.warn(`Can't unregister filter`, err));
-        };
-    }, [call, start, backgroundFilter]);
-    return children;
-};
-const useRenderer = (tfLite, call, engine) => {
-    const { backgroundFilter, backgroundBlurLevel, backgroundImage, modelFilePath, basePath, } = useBackgroundFilters();
-    const videoRef = react.useRef(null);
-    const canvasRef = react.useRef(null);
-    const bgImageRef = react.useRef(null);
-    const [videoSize, setVideoSize] = react.useState({
-        width: 1920,
-        height: 1080,
-    });
-    const start = react.useCallback((ms, onError, onStats) => {
-        let outputStream;
-        let processor;
-        let renderer;
-        const output = new Promise((resolve, reject) => {
-            if (!backgroundFilter) {
-                reject(new Error('No filter specified'));
-                return;
-            }
-            const videoEl = videoRef.current;
-            const canvasEl = canvasRef.current;
-            const bgImageEl = bgImageRef.current;
-            const [track] = ms.getVideoTracks();
-            if (!track) {
-                reject(new Error('No video tracks in input media stream'));
-                return;
-            }
-            if (engine === FilterEngine.MEDIA_PIPE) {
-                call?.tracer.trace('backgroundFilters.enable', {
-                    backgroundFilter,
-                    backgroundBlurLevel,
-                    backgroundImage,
-                    engine,
-                });
-                if (!videoEl) {
-                    reject(new Error('Renderer started before elements are ready'));
-                    return;
-                }
-                const trackSettings = track.getSettings();
-                reactDom.flushSync(() => setVideoSize({
-                    width: trackSettings.width ?? 0,
-                    height: trackSettings.height ?? 0,
-                }));
-                processor = new videoFiltersWeb.VirtualBackground(track, {
-                    basePath: basePath,
-                    modelPath: modelFilePath,
-                    backgroundBlurLevel,
-                    backgroundImage,
-                    backgroundFilter,
-                }, { onError, onStats });
-                processor
-                    .start()
-                    .then((processedTrack) => {
-                    outputStream = new MediaStream([processedTrack]);
-                    resolve(outputStream);
-                })
-                    .catch((error) => {
-                    reject(error);
-                });
-                return;
-            }
-            if (engine === FilterEngine.TF) {
-                if (!videoEl || !canvasEl || (backgroundImage && !bgImageEl)) {
-                    reject(new Error('Renderer started before elements are ready'));
-                    return;
-                }
-                videoEl.srcObject = ms;
-                videoEl.play().then(() => {
-                    const trackSettings = track.getSettings();
-                    reactDom.flushSync(() => setVideoSize({
-                        width: trackSettings.width ?? 0,
-                        height: trackSettings.height ?? 0,
-                    }));
-                    call?.tracer.trace('backgroundFilters.enable', {
-                        backgroundFilter,
-                        backgroundBlurLevel,
-                        backgroundImage,
-                        engine,
-                    });
-                    if (!tfLite) {
-                        reject(new Error('TensorFlow Lite not loaded'));
-                        return;
-                    }
-                    renderer = videoFiltersWeb.createRenderer(tfLite, videoEl, canvasEl, {
-                        backgroundFilter,
-                        backgroundBlurLevel,
-                        backgroundImage: bgImageEl ?? undefined,
-                    }, onError);
-                    outputStream = canvasEl.captureStream();
-                    resolve(outputStream);
-                }, () => {
-                    reject(new Error('Could not play the source video stream'));
-                });
-                return;
-            }
-            reject(new Error('No supported engine available'));
-        });
-        return {
-            output,
-            stop: () => {
-                call?.tracer.trace('backgroundFilters.disable', null);
-                processor?.stop();
-                renderer?.dispose();
-                if (videoRef.current)
-                    videoRef.current.srcObject = null;
-                if (outputStream)
-                    videoClient.disposeOfMediaStream(outputStream);
-            },
-        };
-    }, [
-        backgroundBlurLevel,
-        backgroundFilter,
-        backgroundImage,
-        call?.tracer,
-        tfLite,
-        engine,
-        modelFilePath,
-        basePath,
-    ]);
-    const children = (jsxRuntime.jsxs("div", { className: "str-video__background-filters", children: [jsxRuntime.jsx("video", { className: clsx('str-video__background-filters__video', videoSize.height > videoSize.width &&
-                    'str-video__background-filters__video--tall'), ref: videoRef, playsInline: true, muted: true, controls: false, ...videoSize }), backgroundImage && (jsxRuntime.jsx("img", { className: "str-video__background-filters__background-image", alt: "Background", ref: bgImageRef, crossOrigin: "anonymous", src: backgroundImage, ...videoSize })), jsxRuntime.jsx("canvas", { className: "str-video__background-filters__target-canvas", ...videoSize, ref: canvasRef })] }));
-    return { start, children };
+    const { SuspenseFallback = null, ...filterProps } = props;
+    return (jsxRuntime.jsx(react.Suspense, { fallback: SuspenseFallback, children: jsxRuntime.jsx(BackgroundFiltersProviderImpl, { ...filterProps, ContextProvider: BackgroundFiltersContext }) }));
 };
 
 const IconButton = react.forwardRef(function IconButton(props, ref) {
@@ -1786,7 +1452,7 @@ const SpeakerTest = (props) => {
     const audioElementRef = react.useRef(null);
     const [isPlaying, setIsPlaying] = react.useState(false);
     const { t } = videoReactBindings.useI18n();
-    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.28.0"}/assets/piano.mp3`, } = props;
+    const { audioUrl = `https://unpkg.com/${"@stream-io/video-react-sdk"}@${"1.28.2"}/assets/piano.mp3`, } = props;
     // Update audio output device when selection changes
     react.useEffect(() => {
         const audio = audioElementRef.current;
@@ -3452,7 +3118,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.28.0").split('.');
+const [major, minor, patch] = ("1.28.2").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,