review

src/livekit/useLiveKit.ts

@@ -19,7 +19,7 @@ import { useEffect, useMemo, useRef } from "react";
 import E2EEWorker from "livekit-client/e2ee-worker?worker";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
-import { BackgroundBlur } from "@livekit/track-processors";
+import { BackgroundBlur as backgroundBlur } from "@livekit/track-processors";
 
 import { defaultLiveKitOptions } from "./options";
 import { SFUConfig } from "./openIDSFU";
@@ -86,8 +86,7 @@ export function useLiveKit(
   const blur = useMemo(() => {
     let b = undefined;
     try {
-      // eslint-disable-next-line new-cap
+      b = backgroundBlur(15, { delegate: "GPU" });
-      b = BackgroundBlur(15, { delegate: "GPU" });
     } catch (e) {
       logger.error("disable background blur", e);
     }
@@ -99,7 +98,6 @@ export function useLiveKit(
       videoCaptureDefaults: {
         ...defaultLiveKitOptions.videoCaptureDefaults,
         deviceId: initialDevices.current.videoInput.selectedId,
-        // eslint-disable-next-line new-cap
         processor: blur,
       },
       audioCaptureDefaults: {

src/room/LobbyView.tsx

@@ -16,7 +16,7 @@ import { usePreviewTracks } from "@livekit/components-react";
 import { LocalVideoTrack, Track } from "livekit-client";
 import { useObservable } from "observable-hooks";
 import { map } from "rxjs";
-import { BackgroundBlur } from "@livekit/track-processors";
+import { BackgroundBlur as backgroundBlur } from "@livekit/track-processors";
 
 import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
@@ -115,8 +115,7 @@ export const LobbyView: FC<Props> = ({
   const blur = useMemo(() => {
     let b = undefined;
     try {
-      // eslint-disable-next-line new-cap
+      b = backgroundBlur(15, { delegate: "GPU" });
-      b = BackgroundBlur(15, { delegate: "GPU" });
     } catch (e) {
       logger.error(
         "disable background blur because its not supported by the platform.",
@@ -138,14 +137,14 @@ export const LobbyView: FC<Props> = ({
       video: muteStates.video.enabled && {
         deviceId: devices.videoInput.selectedId,
         // It should be possible to set a processor here:
-        // processor: blur,
+        processor: blur,
-        // This causes a crash currently hence we do the effect below...
       },
     }),
     [
       initialAudioOptions,
       muteStates.video.enabled,
       devices.videoInput.selectedId,
+      blur,
     ],
   );
 
@@ -174,7 +173,6 @@ export const LobbyView: FC<Props> = ({
     if (!blur) return;
     const updateBlur = async (showBlur: boolean): Promise<void> => {
       if (showBlur && !videoTrack?.getProcessor()) {
-        // eslint-disable-next-line new-cap
         await videoTrack?.setProcessor(blur);
       } else {
         await videoTrack?.stopProcessor();