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

package/dist/index.es.js

@@ -7,7 +7,7 @@ import { useState, useEffect, Fragment as Fragment$1, createContext, useContext,
 import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, arrow, FloatingArrow, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList, useHover } from '@floating-ui/react';
 import clsx from 'clsx';
 import { flushSync } from 'react-dom';
-import { isPlatformSupported, loadTFLite, createRenderer } from '@stream-io/video-filters-web';
+import { loadTFLite, loadMediaPipe, isPlatformSupported, isMediaPipePlatformSupported, VirtualBackground, createRenderer } from '@stream-io/video-filters-web';
 
 const Audio = ({ participant, trackType = 'audioTrack', ...rest }) => {
     const call = useCall();
@@ -827,6 +827,34 @@ const AvatarFallback = ({ className, names, style, }) => {
     return (jsx("div", { className: clsx('str-video__avatar--initials-fallback', className), style: style, children: 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.
+ */
+var PerformanceDegradationReason;
+(function (PerformanceDegradationReason) {
+    PerformanceDegradationReason["FRAME_DROP"] = "frame-drop";
+    PerformanceDegradationReason["CPU_THROTTLING"] = "cpu-throttling";
+})(PerformanceDegradationReason || (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 isPlatformSupported({
+        forceSafariSupport,
+        forceMobileSupport,
+    });
+    if (useLegacyFilter) {
+        return isTfPlatformSupported ? FilterEngine.TF : FilterEngine.NONE;
+    }
+    const isMediaPipeSupported = await 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 = useCall();
+    const { useCallStatsReport } = useCallStateHooks();
+    const callStatsReport = useCallStatsReport();
     const [backgroundFilter, setBackgroundFilter] = useState(bgFilterFromProps);
     const [backgroundImage, setBackgroundImage] = useState(bgImageFromProps);
     const [backgroundBlurLevel, setBackgroundBlurLevel] = useState(bgBlurLevelFromProps);
+    const [showLowFpsWarning, setShowLowFpsWarning] = 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 = useRef(defaultFps);
+    const outlierStreakRef = useRef(0);
+    const handleStats = 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 = useMemo(() => {
+        if (!backgroundFilter) {
+            return { degraded: false };
+        }
+        const reasons = [];
+        if (showLowFpsWarning) {
+            reasons.push(PerformanceDegradationReason.FRAME_DROP);
+        }
+        const qualityLimitationReasons = callStatsReport?.publisherStats?.qualityLimitationReasons;
+        if (showLowFpsWarning &&
+            qualityLimitationReasons &&
+            qualityLimitationReasons?.includes('cpu')) {
+            reasons.push(PerformanceDegradationReason.CPU_THROTTLING);
+        }
+        return {
+            degraded: reasons.length > 0,
+            reason: reasons.length > 0 ? reasons : undefined,
+        };
+    }, [
+        showLowFpsWarning,
+        callStatsReport?.publisherStats?.qualityLimitationReasons,
+        backgroundFilter,
+    ]);
+    const prevDegradedRef = useRef(undefined);
+    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 = 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] = useState(FilterEngine.NONE);
     const [isSupported, setIsSupported] = useState(false);
     useEffect(() => {
-        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] = useState();
     useEffect(() => {
-        // don't try to load TFLite if the platform is not supported
-        if (!isSupported)
+        if (engine !== FilterEngine.TF)
             return;
         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] = useState();
+    useEffect(() => {
+        if (engine !== FilterEngine.MEDIA_PIPE)
+            return;
+        loadMediaPipe({
+            basePath: basePath,
+            modelPath: modelFilePath,
+        })
+            .then(setMediaPipe)
+            .catch((err) => console.error('Failed to preload MediaPipe', err));
+    }, [engine, modelFilePath, basePath]);
     const handleError = useCallback((error) => {
         console.warn('[filters] Filter encountered an error and will be disabled');
         disableBackgroundFilter();
         onError?.(error);
     }, [disableBackgroundFilter, onError]);
+    const isReady = useLegacyFilter ? !!tfLite : !!mediaPipe;
     return (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 && jsx(BackgroundFilters, { tfLite: tfLite })] }));
+        }, children: [children, isReady && (jsx(BackgroundFilters, { tfLite: tfLite, engine: engine, onStats: handleStats }))] }));
 };
 const BackgroundFilters = (props) => {
     const call = 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 = useRef(undefined);
     handleErrorRef.current = onError;
+    const handleStatsRef = useRef(undefined);
+    handleStatsRef.current = props.onStats;
     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 = useRef(null);
     const canvasRef = useRef(null);
     const bgImageRef = useRef(null);
@@ -927,8 +1073,9 @@ const useRenderer = (tfLite, call) => {
         width: 1920,
         height: 1080,
     });
-    const start = useCallback((ms, onError) => {
+    const start = 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 VirtualBackground(track, {
+                    basePath: basePath,
+                    modelPath: modelFilePath,
                     backgroundBlurLevel,
                     backgroundImage,
-                });
-                renderer = 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();
+                    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 = 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 = (jsxs("div", { className: "str-video__background-filters", children: [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 && (jsx("img", { className: "str-video__background-filters__background-image", alt: "Background", ref: bgImageRef, crossOrigin: "anonymous", src: backgroundImage, ...videoSize })), jsx("canvas", { className: "str-video__background-filters__target-canvas", ...videoSize, ref: canvasRef })] }));
-    return {
-        start,
-        children,
-    };
+    return { start, children };
 };
 
 const IconButton = 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 (jsxs("div", { ref: refs.setReference, children: [isVisible && (jsxs("div", { className: "str-video__notification", ref: refs.setFloating, style: {
+    return (jsxs("div", { ref: refs.setReference, children: [isVisible && (jsxs("div", { className: clsx('str-video__notification', className), ref: refs.setFloating, style: {
                     position: strategy,
                     top: y ?? 0,
                     left: x ?? 0,
@@ -1456,6 +1646,54 @@ const DeviceSelector = (props) => {
     return jsx(DeviceSelectorDropdown, { ...rest, icon: icon });
 };
 
+/**
+ * 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 } = useCallStateHooks();
+    const { selectedDevice } = useSpeakerState();
+    const audioElementRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const { t } = 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
+    useEffect(() => {
+        const audio = audioElementRef.current;
+        if (!audio || !selectedDevice)
+            return;
+        // 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 = 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 = useCallback(() => setIsPlaying(false), []);
+    return (jsxs("div", { className: "str-video__speaker-test", children: [jsx("audio", { ref: audioElementRef, onEnded: handleAudioEnded, onPause: handleAudioEnded }), jsx(CompositeButton, { className: "str-video__speaker-test__button", onClick: handleStartTest, type: "button", children: jsxs("div", { className: "str-video__speaker-test__button-content", children: [jsx(Icon, { icon: "speaker" }), isPlaying ? t('Stop test') : t('Test speaker')] }) })] }));
+};
+
 const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible = true, }) => {
     const { useMicrophoneState } = useCallStateHooks();
     const { microphone, selectedDevice, devices } = useMicrophoneState();
@@ -1463,14 +1701,14 @@ const DeviceSelectorAudioInput = ({ title, visualType, volumeIndicatorVisible =
             await microphone.select(deviceId);
         }, title: title, visualType: visualType, icon: "mic", children: volumeIndicatorVisible && (jsxs(Fragment, { children: [jsx("hr", { className: "str-video__device-settings__separator" }), jsx(AudioVolumeIndicator, {})] })) }));
 };
-const DeviceSelectorAudioOutput = ({ title, visualType, }) => {
+const DeviceSelectorAudioOutput = ({ title, visualType, speakerTestVisible = true, speakerTestAudioUrl, }) => {
     const { useSpeakerState } = useCallStateHooks();
     const { speaker, selectedDevice, devices, isDeviceSelectionSupported } = useSpeakerState();
     if (!isDeviceSelectionSupported)
         return null;
     return (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 && (jsxs(Fragment, { children: [jsx("hr", { className: "str-video__device-settings__separator" }), 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 }}",
@@ -3026,7 +3265,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.26.1").split('.');
+const [major, minor, patch] = ("1.27.0").split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,
@@ -3034,5 +3273,5 @@ setSdkInfo({
     patch,
 });
 
-export { AcceptCallButton, Audio, AudioVolumeIndicator, Avatar, AvatarFallback, BackgroundFiltersProvider, BackstageLayout, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CancelCallButton, CancelCallConfirmButton, CompositeButton, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LivestreamPlayer, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, NoiseCancellationProvider, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, PipLayout, Reaction, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakingWhileMutedNotification, SpeechIndicator, StatCard, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, applyFilter, defaultEmojiReactionMap, defaultReactions, translations, useBackgroundFilters, useDeviceList, useFilteredParticipants, useHorizontalScrollPosition, useMenuContext, useNoiseCancellation, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
+export { AcceptCallButton, Audio, AudioVolumeIndicator, Avatar, AvatarFallback, BackgroundFiltersProvider, BackstageLayout, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CancelCallButton, CancelCallConfirmButton, CompositeButton, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LivestreamPlayer, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, NoiseCancellationProvider, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PerformanceDegradationReason, PermissionNotification, PermissionRequestList, PermissionRequests, PipLayout, Reaction, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakerTest, SpeakingWhileMutedNotification, SpeechIndicator, StatCard, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, applyFilter, defaultEmojiReactionMap, defaultReactions, translations, useBackgroundFilters, useDeviceList, useFilteredParticipants, useHorizontalScrollPosition, useMenuContext, useNoiseCancellation, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
 //# sourceMappingURL=index.es.js.map