make compatible with unsopported browsers

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);

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

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 = (