@stream-io/video-react-sdk 0.5.8 → 0.5.10

package/dist/index.es.js

@@ -3,8 +3,9 @@ export * from '@stream-io/video-client';
 import { useCall, useCallStateHooks, useI18n, Restricted, useConnectedUser, StreamCallProvider, StreamVideoProvider } from '@stream-io/video-react-bindings';
 export * from '@stream-io/video-react-bindings';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useMemo, useRef, forwardRef, isValidElement, useLayoutEffect } from 'react';
+import { useState, useEffect, Fragment as Fragment$1, createContext, useContext, useCallback, useRef, useMemo, forwardRef, isValidElement, useLayoutEffect } from 'react';
 import clsx from 'clsx';
+import { isPlatformSupported, loadTFLite, createRenderer } from '@stream-io/video-filters-web';
 import { useFloating, offset, shift, flip, size, autoUpdate, FloatingOverlay, FloatingPortal, useListItem, useListNavigation, useTypeahead, useClick, useDismiss, useRole, useInteractions, FloatingFocusManager, FloatingList, useHover } from '@floating-ui/react';
 import { Chart, CategoryScale, LinearScale, LineElement, PointElement } from 'chart.js';
 import { Line } from 'react-chartjs-2';
@@ -50,6 +51,157 @@ 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]] }) }));
 };
 
+/**
+ * The context for the background filters.
+ */
+const BackgroundFiltersContext = createContext(undefined);
+/**
+ * A hook to access the background filters context API.
+ */
+const useBackgroundFilters = () => {
+    const context = useContext(BackgroundFiltersContext);
+    if (!context) {
+        throw new Error('useBackgroundFilters must be used within a BackgroundFiltersProvider');
+    }
+    return context;
+};
+/**
+ * A provider component that enables the use of background filters in your app.
+ *
+ * Please make sure you have the `@stream-io/video-filters-web` package installed
+ * in your project before using this component.
+ */
+const BackgroundFiltersProvider = (props) => {
+    const { children, isBlurringEnabled = true, backgroundImages = [], backgroundFilter: bgFilterFromProps = undefined, backgroundImage: bgImageFromProps = undefined, backgroundBlurLevel: bgBlurLevelFromProps = 'high', tfFilePath, modelFilePath, basePath, } = props;
+    const [backgroundFilter, setBackgroundFilter] = useState(bgFilterFromProps);
+    const [backgroundImage, setBackgroundImage] = useState(bgImageFromProps);
+    const [backgroundBlurLevel, setBackgroundBlurLevel] = useState(bgBlurLevelFromProps);
+    const applyBackgroundImageFilter = useCallback((imageUrl) => {
+        setBackgroundFilter('image');
+        setBackgroundImage(imageUrl);
+    }, []);
+    const applyBackgroundBlurFilter = useCallback((blurLevel = 'high') => {
+        setBackgroundFilter('blur');
+        setBackgroundBlurLevel(blurLevel);
+    }, []);
+    const disableBackgroundFilter = useCallback(() => {
+        setBackgroundFilter(undefined);
+        setBackgroundImage(undefined);
+        setBackgroundBlurLevel('high');
+    }, []);
+    const [isSupported, setIsSupported] = useState(false);
+    useEffect(() => {
+        isPlatformSupported().then(setIsSupported);
+    }, []);
+    const [tfLite, setTfLite] = useState();
+    useEffect(() => {
+        // don't try to load TFLite if the platform is not supported
+        if (!isSupported)
+            return;
+        loadTFLite({ basePath, modelFilePath, tfFilePath })
+            .then(setTfLite)
+            .catch((err) => console.error('Failed to load TFLite', err));
+    }, [basePath, isSupported, modelFilePath, tfFilePath]);
+    return (jsxs(BackgroundFiltersContext.Provider, { value: {
+            isSupported,
+            isReady: !!tfLite,
+            backgroundImage,
+            backgroundBlurLevel,
+            backgroundFilter,
+            disableBackgroundFilter,
+            applyBackgroundBlurFilter,
+            applyBackgroundImageFilter,
+            backgroundImages,
+            isBlurringEnabled,
+            tfFilePath,
+            modelFilePath,
+            basePath,
+        }, children: [children, tfLite && backgroundFilter && jsx(BackgroundFilters, { tfLite: tfLite })] }));
+};
+const BackgroundFilters = (props) => {
+    const { tfLite } = props;
+    const call = useCall();
+    const { backgroundImage, backgroundFilter } = useBackgroundFilters();
+    const [videoRef, setVideoRef] = useState(null);
+    const [bgImageRef, setBgImageRef] = useState(null);
+    const [canvasRef, setCanvasRef] = useState(null);
+    const [width, setWidth] = useState(1920);
+    const [height, setHeight] = useState(1080);
+    const resolveFilterRef = useRef();
+    const [mediaStream, setMediaStream] = useState();
+    const registerFilterRef = useRef(Promise.resolve(async () => { }));
+    useEffect(() => {
+        if (!call || !backgroundFilter)
+            return;
+        registerFilterRef.current = registerFilterRef.current.then(() => call.camera.registerFilter(async (ms) => {
+            return new Promise((resolve) => {
+                setMediaStream(ms);
+                resolveFilterRef.current = resolve;
+            });
+        }));
+        return () => {
+            registerFilterRef.current
+                .then((unregister) => unregister())
+                .then(() => setMediaStream(undefined))
+                .catch((err) => console.error('Failed to unregister filter', err));
+        };
+    }, [backgroundFilter, call]);
+    useEffect(() => {
+        if (!mediaStream || !videoRef || !canvasRef)
+            return;
+        const handleOnPlay = () => {
+            const [track] = mediaStream.getVideoTracks();
+            if (track) {
+                const { width: w = 0, height: h = 0 } = track.getSettings();
+                setWidth(w);
+                setHeight(h);
+            }
+            const resolveFilter = resolveFilterRef.current;
+            if (!resolveFilter)
+                return;
+            const filter = canvasRef.captureStream();
+            resolveFilter(filter);
+        };
+        videoRef.addEventListener('play', handleOnPlay);
+        videoRef.srcObject = mediaStream;
+        videoRef.play().catch((err) => console.error('Failed to play video', err));
+        return () => {
+            videoRef.removeEventListener('play', handleOnPlay);
+            videoRef.srcObject = null;
+        };
+    }, [canvasRef, mediaStream, videoRef]);
+    return (jsxs("div", { className: "str-video__background-filters", style: {
+            width: `${width}px`,
+            height: `${height}px`,
+        }, children: [mediaStream && (jsx(RenderPipeline, { tfLite: tfLite, videoRef: videoRef, canvasRef: canvasRef, backgroundImageRef: bgImageRef })), jsx("video", { className: clsx('str-video__background-filters__video', height > width && 'str-video__background-filters__video--tall'), ref: setVideoRef, autoPlay: true, playsInline: true, controls: false, width: width, height: height, muted: true, loop: true }), backgroundImage && (jsx("img", { className: "str-video__background-filters__background-image", alt: "Background", ref: setBgImageRef, src: backgroundImage, width: width, height: height }, backgroundImage)), jsx("canvas", { className: "str-video__background-filters__target-canvas", width: width, height: height, ref: setCanvasRef }, `key-${width}${height}`)] }));
+};
+const RenderPipeline = (props) => {
+    const { tfLite, videoRef, canvasRef, backgroundImageRef } = props;
+    const { backgroundFilter, backgroundBlurLevel } = useBackgroundFilters();
+    useEffect(() => {
+        if (!videoRef || !canvasRef || !backgroundFilter)
+            return;
+        if (backgroundFilter === 'image' && !backgroundImageRef)
+            return;
+        const renderer = createRenderer(tfLite, videoRef, canvasRef, {
+            backgroundFilter,
+            backgroundImage: backgroundImageRef ?? undefined,
+            backgroundBlurLevel,
+        });
+        return () => {
+            renderer.dispose();
+        };
+    }, [
+        backgroundBlurLevel,
+        backgroundFilter,
+        backgroundImageRef,
+        canvasRef,
+        tfLite,
+        videoRef,
+    ]);
+    return null;
+};
+
 const useFloatingUIPreset = ({ placement, strategy, offset: offsetInPx = 10, }) => {
     const { refs, x, y, update, elements: { domReference, floating }, } = useFloating({
         placement,
@@ -2281,7 +2433,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
 };
 const hasScreenShare = (p) => !!p?.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
 
-const [major, minor, patch] = ("0.5.8" ).split('.');
+const [major, minor, patch] = ("0.5.10" ).split('.');
 setSdkInfo({
     type: SfuModels.SdkType.REACT,
     major,
@@ -2289,5 +2441,5 @@ setSdkInfo({
     patch,
 });
 
-export { AcceptCallButton, Audio, Avatar, AvatarFallback, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CallStatsLatencyChart, CancelCallButton, CancelCallConfirmButton, CompositeButton, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakingWhileMutedNotification, SpeechIndicator, StatCard, StatCardExplanation, StatsTag, Statuses, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, defaultReactions, translations, useHorizontalScrollPosition, useMenuContext, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
+export { AcceptCallButton, Audio, Avatar, AvatarFallback, BackgroundFiltersProvider, BaseVideo, CallControls, CallParticipantListing, CallParticipantListingItem, CallParticipantsList, CallPreview, CallRecordingList, CallRecordingListHeader, CallRecordingListItem, CallStats, CallStatsButton, CallStatsLatencyChart, CancelCallButton, CancelCallConfirmButton, CompositeButton, DefaultParticipantViewUI, DefaultReactionsMenu, DefaultScreenShareOverlay, DefaultVideoPlaceholder, DeviceSelector, DeviceSelectorAudioInput, DeviceSelectorAudioOutput, DeviceSelectorVideo, DeviceSettings, DropDownSelect, DropDownSelectOption, EmptyCallRecordingListing, GenericMenu, GenericMenuButtonItem, Icon, IconButton, LivestreamLayout, LoadingCallRecordingListing, LoadingIndicator, MenuToggle, MenuVisualType, Notification, PaginatedGridLayout, ParticipantActionsContextMenu, ParticipantDetails, ParticipantView, ParticipantViewContext, ParticipantsAudio, PermissionNotification, PermissionRequestList, PermissionRequests, ReactionsButton, RecordCallButton, RecordCallConfirmationButton, RecordingInProgressNotification, RingingCall, RingingCallControls, ScreenShareButton, SearchInput, SearchResults, SpeakerLayout, SpeakingWhileMutedNotification, SpeechIndicator, StatCard, StatCardExplanation, StatsTag, Statuses, StreamCall, StreamTheme, StreamVideo, TextButton, ToggleAudioOutputButton, ToggleAudioPreviewButton, ToggleAudioPublishingButton, ToggleVideoPreviewButton, ToggleVideoPublishingButton, Tooltip, Video$1 as Video, VideoPreview, WithTooltip, defaultReactions, translations, useBackgroundFilters, useHorizontalScrollPosition, useMenuContext, useParticipantViewContext, usePersistedDevicePreferences, useRequestPermission, useTrackElementVisibility, useVerticalScrollPosition };
 //# sourceMappingURL=index.es.js.map