@stream-io/video-react-sdk 1.19.0 → 1.19.2

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.19.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.19.1...@stream-io/video-react-sdk-1.19.2) (2025-08-01)
+
+### Bug Fixes
+
+- prevent cross-origin bg filter images from tainting canvas ([#1875](https://github.com/GetStream/stream-video-js/issues/1875)) ([c09dcee](https://github.com/GetStream/stream-video-js/commit/c09dcee19ab29a71ae8e602ed7a24d0e3bc85236))
+
+## [1.19.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.19.0...@stream-io/video-react-sdk-1.19.1) (2025-07-25)
+
+### Dependency Updates
+
+- `@stream-io/audio-filters-web` updated to version `0.4.3`
+- `@stream-io/video-client` updated to version `1.27.1`
+- `@stream-io/video-react-bindings` updated to version `1.7.10`
+
+### Bug Fixes
+
+- improved audio and video filter tracing ([#1862](https://github.com/GetStream/stream-video-js/issues/1862)) ([701ea4b](https://github.com/GetStream/stream-video-js/commit/701ea4b3266f68072c1325b70221fdefd77137ec))
+
 ## [1.19.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.18.13...@stream-io/video-react-sdk-1.19.0) (2025-07-18)
 
 ### Dependency Updates

package/dist/index.cjs.js

@@ -902,7 +902,7 @@ const BackgroundFiltersProvider = (props) => {
 };
 const BackgroundFilters = (props) => {
     const call = videoReactBindings.useCall();
-    const { children, start } = useRenderer(props.tfLite);
+    const { children, start } = useRenderer(props.tfLite, call);
     const { backgroundFilter, onError } = useBackgroundFilters();
     const handleErrorRef = react.useRef(undefined);
     handleErrorRef.current = onError;
@@ -916,7 +916,7 @@ const BackgroundFilters = (props) => {
     }, [backgroundFilter, call, start]);
     return children;
 };
-const useRenderer = (tfLite) => {
+const useRenderer = (tfLite, call) => {
     const { backgroundFilter, backgroundBlurLevel, backgroundImage } = useBackgroundFilters();
     const videoRef = react.useRef(null);
     const canvasRef = react.useRef(null);
@@ -953,6 +953,11 @@ const useRenderer = (tfLite) => {
                     width: trackSettings.width ?? 0,
                     height: trackSettings.height ?? 0,
                 }));
+                call?.tracer.trace('backgroundFilters.enable', {
+                    backgroundFilter,
+                    backgroundBlurLevel,
+                    backgroundImage,
+                });
                 renderer = videoFiltersWeb.createRenderer(tfLite, videoEl, canvasEl, {
                     backgroundFilter,
                     backgroundBlurLevel,
@@ -967,6 +972,7 @@ const useRenderer = (tfLite) => {
         return {
             output,
             stop: () => {
+                call?.tracer.trace('backgroundFilters.disable', null);
                 renderer?.dispose();
                 if (videoRef.current)
                     videoRef.current.srcObject = null;
@@ -974,9 +980,15 @@ const useRenderer = (tfLite) => {
                     videoClient.disposeOfMediaStream(outputStream);
             },
         };
-    }, [backgroundBlurLevel, backgroundFilter, backgroundImage, tfLite]);
+    }, [
+        backgroundBlurLevel,
+        backgroundFilter,
+        backgroundImage,
+        call?.tracer,
+        tfLite,
+    ]);
     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, src: backgroundImage, ...videoSize })), jsxRuntime.jsx("canvas", { className: "str-video__background-filters__target-canvas", ...videoSize, ref: canvasRef })] }));
+                    '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, src: backgroundImage, crossOrigin: "anonymous", ...videoSize })), jsxRuntime.jsx("canvas", { className: "str-video__background-filters__target-canvas", ...videoSize, ref: canvasRef })] }));
     return {
         start,
         children,
@@ -2944,7 +2956,7 @@ const checkCanJoinEarly = (startsAt, joinAheadTimeSeconds) => {
     return Date.now() >= +startsAt - (joinAheadTimeSeconds ?? 0) * 1000;
 };
 
-const [major, minor, patch] = ("1.19.0").split('.');
+const [major, minor, patch] = ("1.19.2").split('.');
 videoClient.setSdkInfo({
     type: videoClient.SfuModels.SdkType.REACT,
     major,