working version

src/livekit/TrackProcessorContext.tsx

@@ -6,8 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
+  BackgroundBlur as backgroundBlur,
+  type ProcessorWrapper,
   type BackgroundOptions,
-  ProcessorWrapper,
 } from "@livekit/track-processors";
 import {
   createContext,
@@ -25,7 +26,6 @@ import {
   backgroundBlur as backgroundBlurSettings,
   useSetting,
 } from "../settings/settings";
-import { BlurBackgroundTransformer } from "./BlurBackgroundTransformer";
 
 type ProcessorState = {
   supported: boolean | undefined;
@@ -89,10 +89,15 @@ export const ProcessorProvider: FC<Props> = ({ children }) => {
     if (!shouldCheckSupport) return;
     try {
       if (!blur.current) {
-        blur.current = new ProcessorWrapper(
-          new BlurBackgroundTransformer({ blurRadius: 15 }),
-          "background-blur",
-        );
+        // TODO: move to our own local version of the transformer.
+        // Currently this is broken: error when trying to pipe IndexSizeError: Failed to construct 'ImageData': The source width is zero or not a number.
+        // blur.current = new ProcessorWrapper(
+        //   new BlurBackgroundTransformer({}),
+        //   "background-blur",
+        // );
+
+        // eslint-disable-next-line new-cap
+        blur.current = backgroundBlur();
       }
       setProcessorState({
         checkSupported,

src/livekit/useLiveKit.ts

@@ -134,8 +134,14 @@ export function useLiveKit(
       Array.from(room.localParticipant.videoTrackPublications.values()).find(
         (v) => v.source === Track.Source.Camera,
       )?.track as LocalVideoTrack | null,
-    [room.localParticipant.videoTrackPublications],
+    [
+      room.localParticipant.videoTrackPublications,
+      // We need to update on map changes
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      room.localParticipant.videoTrackPublications.keys(),
+    ],
   );
+
   useTrackProcessorSync(videoTrack);
 
   const connectionState = useECConnectionState(