@stream-io/video-react-sdk 0.6.14 → 0.6.16

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.6.16](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.6.15...@stream-io/video-react-sdk-0.6.16) (2024-05-02)
+
+
+### Bug Fixes
+
+* synchronize background filter canvas capturing ([#1334](https://github.com/GetStream/stream-video-js/issues/1334)) ([eaead81](https://github.com/GetStream/stream-video-js/commit/eaead818f9f404cf647efdbc11707fc3b58b2459))
+
+### [0.6.15](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.6.14...@stream-io/video-react-sdk-0.6.15) (2024-04-30)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.7.10`
+* `@stream-io/video-react-bindings` updated to version `0.4.21`
 ### [0.6.14](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-0.6.13...@stream-io/video-react-sdk-0.6.14) (2024-04-26)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -138,45 +138,56 @@ const BackgroundFilters = (props) => {
             return;
         const register = (unregister.current || Promise.resolve()).then(() => call.camera.registerFilter(async (ms) => {
             return new Promise((resolve) => {
-                setMediaStream(ms);
                 signalFilterReadyRef.current = resolve;
+                setMediaStream(ms);
             });
         }));
         return () => {
             unregister.current = register
                 .then((unregisterFilter) => unregisterFilter())
+                .then(() => (signalFilterReadyRef.current = undefined))
                 .then(() => setMediaStream(undefined))
                 .catch((err) => console.error('Failed to unregister filter', err));
         };
     }, [backgroundFilter, call]);
+    const [isPlaying, setIsPlaying] = react.useState(false);
     react.useEffect(() => {
-        if (!mediaStream || !videoRef || !canvasRef)
+        if (!mediaStream || !videoRef)
             return;
         const handleOnPlay = () => {
             const [track] = mediaStream.getVideoTracks();
-            if (track) {
-                const { width: w = 0, height: h = 0 } = track.getSettings();
-                setWidth(w);
-                setHeight(h);
-            }
-            const resolveFilter = signalFilterReadyRef.current;
-            if (!resolveFilter)
+            if (!track)
                 return;
-            const filter = canvasRef.captureStream();
-            resolveFilter(filter);
+            const { width: w = 0, height: h = 0 } = track.getSettings();
+            setWidth(w);
+            setHeight(h);
+            setIsPlaying(true);
         };
         videoRef.addEventListener('play', handleOnPlay);
         videoRef.srcObject = mediaStream;
-        videoRef.play().catch((err) => console.error('Failed to play video', err));
+        videoRef.play().catch((err) => {
+            console.error('Failed to play video', err);
+        });
         return () => {
             videoRef.removeEventListener('play', handleOnPlay);
             videoRef.srcObject = null;
+            setIsPlaying(false);
+        };
+    }, [mediaStream, videoRef]);
+    react.useEffect(() => {
+        const resolveFilter = signalFilterReadyRef.current;
+        if (!canvasRef || !resolveFilter)
+            return;
+        const filter = canvasRef.captureStream();
+        resolveFilter(filter);
+        return () => {
+            videoClient.disposeOfMediaStream(filter);
         };
-    }, [canvasRef, mediaStream, videoRef]);
+    }, [canvasRef]);
     return (jsxRuntime.jsxs("div", { className: "str-video__background-filters", style: {
             width: `${width}px`,
             height: `${height}px`,
-        }, children: [mediaStream && (jsxRuntime.jsx(RenderPipeline, { tfLite: tfLite, videoRef: videoRef, canvasRef: canvasRef, backgroundImageRef: bgImageRef })), jsxRuntime.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 && (jsxRuntime.jsx("img", { className: "str-video__background-filters__background-image", alt: "Background", ref: setBgImageRef, src: backgroundImage, width: width, height: height }, backgroundImage)), jsxRuntime.jsx("canvas", { className: "str-video__background-filters__target-canvas", width: width, height: height, ref: setCanvasRef }, `key-${width}${height}`)] }));
+        }, children: [mediaStream && isPlaying && (jsxRuntime.jsx(RenderPipeline, { tfLite: tfLite, videoRef: videoRef, canvasRef: canvasRef, backgroundImageRef: bgImageRef })), jsxRuntime.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 && (jsxRuntime.jsx("img", { className: "str-video__background-filters__background-image", alt: "Background", ref: setBgImageRef, src: backgroundImage, width: width, height: height }, backgroundImage)), isPlaying && (jsxRuntime.jsx("canvas", { className: "str-video__background-filters__target-canvas", width: width, height: height, ref: setCanvasRef }))] }));
 };
 const RenderPipeline = (props) => {
     const { tfLite, videoRef, canvasRef, backgroundImageRef } = props;
@@ -2497,7 +2508,7 @@ const VerticalScrollButtons = ({ scrollWrapper, }) => {
 };
 const hasScreenShare = (p) => !!p?.publishedTracks.includes(videoClient.SfuModels.TrackType.SCREEN_SHARE);
 
-const [major, minor, patch] = ("0.6.14" ).split('.');
+const [major, minor, patch] = ("0.6.16" ).split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,