From ba54f82205e4578229975f368d5786ac3e3b4012 Mon Sep 17 00:00:00 2001
From: Timo <toger5@hotmail.de>
Date: Wed, 20 Nov 2024 17:31:40 +0100
Subject: [PATCH] make compatible with unsopported browsers

---
 src/livekit/useLiveKit.ts      | 18 ++++++++++++++----
 src/room/LobbyView.tsx         | 13 ++++++++++++-
 src/settings/SettingsModal.tsx | 17 +++++++++++++++--
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/livekit/useLiveKit.ts b/src/livekit/useLiveKit.ts
index 208ed35d..f99fbabd 100644
--- a/src/livekit/useLiveKit.ts
+++ b/src/livekit/useLiveKit.ts
@@ -83,8 +83,16 @@ export function useLiveKit(
   const initialMuteStates = useRef<MuteStates>(muteStates);
   const devices = useMediaDevices();
   const initialDevices = useRef<MediaDevices>(devices);
-  // eslint-disable-next-line new-cap
-  const blur = useMemo(() => BackgroundBlur(15), []);
+  const blur = useMemo(() => {
+    let b = undefined;
+    try {
+      // eslint-disable-next-line new-cap
+      b = BackgroundBlur(15);
+    } catch (e) {
+      logger.error("disable background blur", e);
+    }
+    return b;
+  }, []);
   const roomOptions = useMemo(
     (): RoomOptions => ({
       ...defaultLiveKitOptions,
@@ -92,7 +100,7 @@ export function useLiveKit(
         ...defaultLiveKitOptions.videoCaptureDefaults,
         deviceId: initialDevices.current.videoInput.selectedId,
         // eslint-disable-next-line new-cap
-        processor: BackgroundBlur(15),
+        processor: blur,
       },
       audioCaptureDefaults: {
         ...defaultLiveKitOptions.audioCaptureDefaults,
@@ -103,7 +111,7 @@ export function useLiveKit(
       },
       e2ee: e2eeOptions,
     }),
-    [e2eeOptions],
+    [blur, e2eeOptions],
   );
 
   // Store if audio/video are currently updating. If to prohibit unnecessary calls
@@ -143,6 +151,8 @@ export function useLiveKit(
   >(undefined);
 
   useEffect(() => {
+    // Fon't even try if we cannot blur on this platform
+    if (!blur) return;
     if (!room || videoTrackPromise.current) return;
     const update = async (): Promise<void> => {
       let publishCallback: undefined | ((track: LocalTrackPublication) => void);
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index db630d09..6b5db196 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -112,7 +112,16 @@ export const LobbyView: FC<Props> = ({
   );
 
   // eslint-disable-next-line new-cap
-  const blur = useMemo(() => BackgroundBlur(15), []);
+  const blur = useMemo(() => {
+    let b = undefined;
+    try {
+      // eslint-disable-next-line new-cap
+      b = BackgroundBlur(15);
+    } catch (e) {
+      logger.error("disable background blur", e);
+    }
+    return b;
+  }, []);
 
   const localTrackOptions = useMemo(
     () => ({
@@ -158,6 +167,8 @@ export const LobbyView: FC<Props> = ({
   const [showBackgroundBlur] = useSetting(backgroundBlurSettings);
 
   useEffect(() => {
+    // Fon't even try if we cannot blur on this platform
+    if (!blur) return;
     const updateBlur = async (showBlur: boolean): Promise<void> => {
       if (showBlur && !videoTrack?.getProcessor()) {
         // eslint-disable-next-line new-cap
diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx
index 13d35e10..5f373fe0 100644
--- a/src/settings/SettingsModal.tsx
+++ b/src/settings/SettingsModal.tsx
@@ -9,6 +9,8 @@ import { ChangeEvent, FC, ReactNode, useCallback } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Dropdown, Separator, Text } from "@vector-im/compound-web";
+import { BackgroundBlur } from "@livekit/track-processors";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
@@ -107,7 +109,18 @@ export const SettingsModal: FC<Props> = ({
   // Generate a `SelectInput` with a list of devices for a given device kind.
   const BlurCheckbox: React.FC = (): ReactNode => {
     const [blur, setBlur] = useSetting(backgroundBlurSetting);
-    return (
+    let canBlur = true;
+    try {
+      // eslint-disable-next-line new-cap
+      BackgroundBlur(15);
+    } catch (e) {
+      logger.debug(
+        "Cannot blur, so we do not show the option in settings. error: ",
+        e,
+      );
+      canBlur = false;
+    }
+    return canBlur ? (
       <>
         <h4>{t("settings.background_blur_header")}</h4>
         <FieldRow>
@@ -121,7 +134,7 @@ export const SettingsModal: FC<Props> = ({
           />
         </FieldRow>
       </>
-    );
+    ) : null;
   };
 
   const optInDescription = (