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

package/dist/index.cjs.js

@@ -827,6 +827,34 @@ 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 = {}));
 /**
  * The context for the background filters.
  */
@@ -841,6 +869,26 @@ 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.
  *
@@ -848,10 +896,88 @@ const useBackgroundFilters = () => {
  * in your project before using this component.
  */
 const BackgroundFiltersProvider = (props) => {
-    const { children, backgroundImages = [], backgroundFilter: bgFilterFromProps = undefined, backgroundImage: bgImageFromProps = undefined, backgroundBlurLevel: bgBlurLevelFromProps = undefined, tfFilePath, modelFilePath, basePath, onError, forceSafariSupport, forceMobileSupport, } = 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);
@@ -864,31 +990,47 @@ const BackgroundFiltersProvider = (props) => {
         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(() => {
-        videoFiltersWeb.isPlatformSupported({
-            forceSafariSupport,
-            forceMobileSupport,
-        }).then(setIsSupported);
-    }, [forceMobileSupport, forceSafariSupport]);
+        determineEngine(useLegacyFilter, forceSafariSupport, forceMobileSupport).then((determinedEngine) => {
+            setEngine(determinedEngine);
+            setIsSupported(determinedEngine !== FilterEngine.NONE);
+        });
+    }, [forceMobileSupport, forceSafariSupport, useLegacyFilter]);
     const [tfLite, setTfLite] = react.useState();
     react.useEffect(() => {
-        // don't try to load TFLite if the platform is not supported
-        if (!isSupported)
+        if (engine !== FilterEngine.TF)
             return;
         videoFiltersWeb.loadTFLite({ basePath, modelFilePath, tfFilePath })
             .then(setTfLite)
             .catch((err) => console.error('Failed to load TFLite', err));
-    }, [basePath, isSupported, modelFilePath, tfFilePath]);
+    }, [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,
-            isReady: !!tfLite,
+            performance,
+            isReady,
             backgroundImage,
             backgroundBlurLevel,
             backgroundFilter,
@@ -900,26 +1042,30 @@ const BackgroundFiltersProvider = (props) => {
             modelFilePath,
             basePath,
             onError: handleError,
-        }, children: [children, tfLite && jsxRuntime.jsx(BackgroundFilters, { tfLite: tfLite })] }));
+        }, 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);
-    const { backgroundFilter, onError } = useBackgroundFilters();
+    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) => start(ms, (error) => handleErrorRef.current?.(error)));
+        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));
         };
-    }, [backgroundFilter, call, start]);
+    }, [call, start, backgroundFilter]);
     return children;
 };
-const useRenderer = (tfLite, call) => {
-    const { backgroundFilter, backgroundBlurLevel, backgroundImage } = useBackgroundFilters();
+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);
@@ -927,8 +1073,9 @@ const useRenderer = (tfLite, call) => {
         width: 1920,
         height: 1080,
     });
-    const start = react.useCallback((ms, onError) => {
+    const start = react.useCallback((ms, onError, onStats) => {
         let outputStream;
+        let processor;
         let renderer;
         const output = new Promise((resolve, reject) => {
             if (!backgroundFilter) {
@@ -938,16 +1085,20 @@ const useRenderer = (tfLite, call) => {
             const videoEl = videoRef.current;
             const canvasEl = canvasRef.current;
             const bgImageEl = bgImageRef.current;
-            if (!videoEl || !canvasEl || (backgroundImage && !bgImageEl)) {
-                // You should start renderer in effect or event handlers
-                reject(new Error('Renderer started before elements are ready'));
+            const [track] = ms.getVideoTracks();
+            if (!track) {
+                reject(new Error('No video tracks in input media stream'));
                 return;
             }
-            videoEl.srcObject = ms;
-            videoEl.play().then(() => {
-                const [track] = ms.getVideoTracks();
-                if (!track) {
-                    reject(new Error('No video tracks in input media stream'));
+            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();
@@ -955,26 +1106,65 @@ const useRenderer = (tfLite, call) => {
                     width: trackSettings.width ?? 0,
                     height: trackSettings.height ?? 0,
                 }));
-                call?.tracer.trace('backgroundFilters.enable', {
-                    backgroundFilter,
+                processor = new videoFiltersWeb.VirtualBackground(track, {
+                    basePath: basePath,
+                    modelPath: modelFilePath,
                     backgroundBlurLevel,
                     backgroundImage,
-                });
-                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'));
-            });
+                }, { 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;
@@ -988,13 +1178,13 @@ const useRenderer = (tfLite, call) => {
         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,
-    };
+    return { start, children };
 };
 
 const IconButton = react.forwardRef(function IconButton(props, ref) {
@@ -1047,7 +1237,7 @@ const AcceptCallButton = ({ disabled, onAccept, onClick, }) => {
 };
 
 const Notification = (props) => {
-    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', iconClassName = 'str-video__notification__icon', close, } = props;
+    const { isVisible, message, children, visibilityTimeout, resetIsVisible, placement = 'top', className, iconClassName = 'str-video__notification__icon', close, } = props;
     const { refs, x, y, strategy } = useFloatingUIPreset({
         placement,
         strategy: 'absolute',
@@ -1060,7 +1250,7 @@ const Notification = (props) => {
         }, visibilityTimeout);
         return () => clearTimeout(timeout);
     }, [isVisible, resetIsVisible, visibilityTimeout]);
-    return (jsxRuntime.jsxs("div", { ref: refs.setReference, children: [isVisible && (jsxRuntime.jsxs("div", { className: "str-video__notification", ref: refs.setFloating, style: {
+    return (jsxRuntime.jsxs("div", { ref: refs.setReference, children: [isVisible && (jsxRuntime.jsxs("div", { className: clsx('str-video__notification', className), ref: refs.setFloating, style: {
                     position: strategy,
                     top: y ?? 0,
                     left: x ?? 0,
@@ -1331,6 +1521,21 @@ const ScreenShareButton = (props) => {
                         : 'screen-share-start-button', disabled: disableScreenShareButton, onClick: handleClick, children: jsxRuntime.jsx(Icon, { icon: isSomeoneScreenSharing ? 'screen-share-on' : 'screen-share-off' }) }) }) }) }));
 };
 
+const AudioVolumeIndicator = () => {
+    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
+    const { isEnabled, mediaStream } = useMicrophoneState();
+    const [audioLevel, setAudioLevel] = react.useState(0);
+    react.useEffect(() => {
+        if (!isEnabled || !mediaStream)
+            return;
+        const disposeSoundDetector = videoClient.createSoundDetector(mediaStream, ({ audioLevel: al }) => setAudioLevel(al), { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
+        return () => {
+            disposeSoundDetector().catch(console.error);
+        };
+    }, [isEnabled, mediaStream]);
+    return (jsxRuntime.jsxs("div", { className: "str-video__audio-volume-indicator", children: [jsxRuntime.jsx(Icon, { icon: isEnabled ? 'mic' : 'mic-off' }), jsxRuntime.jsx("div", { className: "str-video__audio-volume-indicator__bar", children: jsxRuntime.jsx("div", { className: "str-video__audio-volume-indicator__bar-value", style: { transform: `scaleX(${audioLevel / 100})` } }) })] }));
+};
+
 const SelectContext = react.createContext({});
 const Select = (props) => {
     const { children, icon, defaultSelectedLabel, defaultSelectedIndex, handleSelect: handleSelectProp, } = props;
@@ -1441,19 +1646,52 @@ const DeviceSelector = (props) => {
     return jsxRuntime.jsx(DeviceSelectorDropdown, { ...rest, icon: icon });
 };
 
-const AudioVolumeIndicator = () => {
-    const { useMicrophoneState } = videoReactBindings.useCallStateHooks();
-    const { isEnabled, mediaStream } = useMicrophoneState();
-    const [audioLevel, setAudioLevel] = react.useState(0);
+/**
+ * SpeakerTest component that plays a test audio through the selected speaker.
+ * This allows users to verify their audio output device is working correctly.
+ */
+const SpeakerTest = (props) => {
+    const { useSpeakerState } = videoReactBindings.useCallStateHooks();
+    const { selectedDevice } = useSpeakerState();
+    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.27.0"}/assets/piano.mp3`, } = props;
+    // Update audio output device when selection changes
     react.useEffect(() => {
-        if (!isEnabled || !mediaStream)
+        const audio = audioElementRef.current;
+        if (!audio || !selectedDevice)
             return;
-        const disposeSoundDetector = videoClient.createSoundDetector(mediaStream, ({ audioLevel: al }) => setAudioLevel(al), { detectionFrequencyInMs: 80, destroyStreamOnStop: false });
-        return () => {
-            disposeSoundDetector().catch(console.error);
-        };
-    }, [isEnabled, mediaStream]);
-    return (jsxRuntime.jsxs("div", { className: "str-video__audio-volume-indicator", children: [jsxRuntime.jsx(Icon, { icon: isEnabled ? 'mic' : 'mic-off' }), jsxRuntime.jsx("div", { className: "str-video__audio-volume-indicator__bar", children: jsxRuntime.jsx("div", { className: "str-video__audio-volume-indicator__bar-value", style: { transform: `scaleX(${audioLevel / 100})` } }) })] }));
+        // Set the sinkId to route audio to the selected speaker
+        if ('setSinkId' in audio) {
+            audio.setSinkId(selectedDevice).catch((err) => {
+                console.error('Failed to set audio output device:', err);
+            });
+        }
+    }, [selectedDevice]);
+    const handleStartTest = react.useCallback(async () => {
+        const audio = audioElementRef.current;
+        if (!audio)
+            return;
+        audio.src = audioUrl;
+        try {
+            if (isPlaying) {
+                audio.pause();
+                audio.currentTime = 0;
+                setIsPlaying(false);
+            }
+            else {
+                await audio.play();
+                setIsPlaying(true);
+            }
+        }
+        catch (err) {
+            console.error('Failed to play test audio:', err);
+            setIsPlaying(false);
+        }
+    }, [isPlaying, audioUrl]);
+    const handleAudioEnded = react.useCallback(() => setIsPlaying(false), []);
+    return (jsxRuntime.jsxs("div", { className: "str-video__speaker-test", children: [jsxRuntime.jsx("audio", { ref: audioElementRef, onEnded: handleAudioEnded, onPause: handleAudioEnded }), jsxRuntime.jsx(CompositeButton, { className: "str-video__speaker-test__button", onClick: handleStartTest, type: "button", children: jsxRuntime.jsxs("div", { className: "str-video__speaker-test__button-content", children: [jsxRuntime.jsx(Icon, { icon: "speaker" }), isPlaying ? t('Stop test') : t('Test speaker')] }) })] }));
 };
 
 const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible = true, }) => {
@@ -1463,14 +1701,14 @@ const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible =
             await microphone.select(deviceId);
         }, title: title, visualType: visualType, icon: "mic", children: volumeIndicatorVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(AudioVolumeIndicator, {})] })) }));
 };
-const DeviceSelectorAudioOutput = ({ title, visualType, }) => {
+const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = true, speakerTestAudioUrl, }) => {
     const { useSpeakerState } = videoReactBindings.useCallStateHooks();
     const { speaker, selectedDevice, devices, isDeviceSelectionSupported } = useSpeakerState();
     if (!isDeviceSelectionSupported)
         return null;
     return (jsxRuntime.jsx(DeviceSelector, { devices: devices, type: "audiooutput", selectedDeviceId: selectedDevice, onChange: (deviceId) => {
             speaker.select(deviceId);
-        }, title: title, visualType: visualType, icon: "speaker" }));
+        }, title: title, visualType: visualType, icon: "speaker", children: speakerTestVisible && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", { className: "str-video__device-settings__separator" }), jsxRuntime.jsx(SpeakerTest, { audioUrl: speakerTestAudioUrl })] })) }));
 };
 
 const DeviceSelectorVideo = ({ title, visualType, }) => {
@@ -2385,6 +2623,7 @@ var en = {
 	Speakers: Speakers,
 	Video: Video,
 	"You are muted. Unmute to speak.": "You are muted. Unmute to speak.",
+	"Background filters performance is degraded. Consider disabling filters for better performance.": "Background filters performance is degraded. Consider disabling filters for better performance.",
 	Live: Live,
 	"Livestream starts soon": "Livestream starts soon",
 	"Livestream starts at {{ startsAt }}": "Livestream starts at {{ startsAt, datetime }}",
@@ -2657,13 +2896,14 @@ const LivestreamLayout = (props) => {
         ? participants.find(videoClient.hasScreenShare)
         : undefined;
     usePaginatedLayoutSortPreset(call);
-    const overlay = (jsxRuntime.jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showSpeakerName: props.showSpeakerName }));
-    const { floatingParticipantProps, muted } = props;
-    const floatingParticipantOverlay = hasOngoingScreenShare && (jsxRuntime.jsx(ParticipantOverlay
-    // these elements aren't needed for the video feed
-    , { 
+    const { floatingParticipantProps, muted, ParticipantViewUI } = props;
+    const overlay = ParticipantViewUI ?? (jsxRuntime.jsx(ParticipantOverlay, { showParticipantCount: props.showParticipantCount, showDuration: props.showDuration, showLiveBadge: props.showLiveBadge, showSpeakerName: props.showSpeakerName, enableFullScreen: props.enableFullScreen }));
+    const floatingParticipantOverlay = hasOngoingScreenShare &&
+        (ParticipantViewUI ?? (jsxRuntime.jsx(ParticipantOverlay
         // these elements aren't needed for the video feed
-        showParticipantCount: floatingParticipantProps?.showParticipantCount ?? false, showDuration: floatingParticipantProps?.showDuration ?? false, showLiveBadge: floatingParticipantProps?.showLiveBadge ?? false, showSpeakerName: floatingParticipantProps?.showSpeakerName ?? true }));
+        , { 
+            // these elements aren't needed for the video feed
+            showParticipantCount: floatingParticipantProps?.showParticipantCount ?? false, showDuration: floatingParticipantProps?.showDuration ?? false, showLiveBadge: floatingParticipantProps?.showLiveBadge ?? false, showSpeakerName: floatingParticipantProps?.showSpeakerName ?? true, enableFullScreen: floatingParticipantProps?.enableFullScreen ?? true })));
     return (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__wrapper", children: [!muted && jsxRuntime.jsx(ParticipantsAudio, { participants: remoteParticipants }), hasOngoingScreenShare && presenter && (jsxRuntime.jsx(ParticipantView, { className: "str-video__livestream-layout__screen-share", participant: presenter, ParticipantViewUI: overlay, trackType: "screenShareTrack", muteAudio // audio is rendered by ParticipantsAudio
                 : true })), currentSpeaker && (jsxRuntime.jsx(ParticipantView, { className: clsx(hasOngoingScreenShare &&
                     clsx('str-video__livestream-layout__floating-participant', `str-video__livestream-layout__floating-participant--${floatingParticipantProps?.position ?? 'top-right'}`)), participant: currentSpeaker, ParticipantViewUI: floatingParticipantOverlay || overlay, mirror: props.mirrorLocalParticipantVideo !== false ? undefined : false, muteAudio // audio is rendered by ParticipantsAudio
@@ -2685,13 +2925,18 @@ const BackstageLayout = (props) => {
 BackstageLayout.displayName = 'BackstageLayout';
 const ParticipantOverlay = (props) => {
     const { enableFullScreen = true, showParticipantCount = true, showDuration = true, showLiveBadge = true, showSpeakerName = false, } = props;
+    const overlayBarVisible = enableFullScreen ||
+        showParticipantCount ||
+        showDuration ||
+        showLiveBadge ||
+        showSpeakerName;
     const { participant } = useParticipantViewContext();
     const { useParticipantCount } = videoReactBindings.useCallStateHooks();
     const participantCount = useParticipantCount();
     const duration = useUpdateCallDuration();
     const toggleFullScreen = useToggleFullScreen();
     const { t } = videoReactBindings.useI18n();
-    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [showLiveBadge && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__viewers-count", children: participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), enableFullScreen && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] }) }));
+    return (jsxRuntime.jsx("div", { className: "str-video__livestream-layout__overlay", children: overlayBarVisible && (jsxRuntime.jsxs("div", { className: "str-video__livestream-layout__overlay__bar", children: [showLiveBadge && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__live-badge", children: t('Live') })), showParticipantCount && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__viewers-count", children: participantCount })), showSpeakerName && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__speaker-name", title: participant.name || participant.userId || '', children: participant.name || participant.userId || '' })), showDuration && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__duration", children: formatDuration(duration) })), enableFullScreen && (jsxRuntime.jsx("span", { className: "str-video__livestream-layout__go-fullscreen", onClick: toggleFullScreen }))] })) }));
 };
 const useUpdateCallDuration = () => {
     const { useIsCallLive, useCallSession } = videoReactBindings.useCallStateHooks();
@@ -3020,7 +3265,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.26.0").split('.');
+const [major, minor, patch] = ("1.27.0").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,
@@ -3030,6 +3275,7 @@ videoClient.setSdkInfo({
 
 exports.AcceptCallButton = AcceptCallButton;
 exports.Audio = Audio;
+exports.AudioVolumeIndicator = AudioVolumeIndicator;
 exports.Avatar = Avatar;
 exports.AvatarFallback = AvatarFallback;
 exports.BackgroundFiltersProvider = BackgroundFiltersProvider;
@@ -3092,6 +3338,7 @@ exports.ScreenShareButton = ScreenShareButton;
 exports.SearchInput = SearchInput;
 exports.SearchResults = SearchResults;
 exports.SpeakerLayout = SpeakerLayout;
+exports.SpeakerTest = SpeakerTest;
 exports.SpeakingWhileMutedNotification = SpeakingWhileMutedNotification;
 exports.SpeechIndicator = SpeechIndicator;
 exports.StatCard = StatCard;