diff --git a/src/livekit/useLiveKit.ts b/src/livekit/useLiveKit.ts index 208ed35d1..f99fbabd7 100644 --- a/src/livekit/useLiveKit.ts +++ b/src/livekit/useLiveKit.ts @@ -83,8 +83,16 @@ export function useLiveKit( const initialMuteStates = useRef(muteStates); const devices = useMediaDevices(); const initialDevices = useRef(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 => { let publishCallback: undefined | ((track: LocalTrackPublication) => void); diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx index db630d09a..6b5db1962 100644 --- a/src/room/LobbyView.tsx +++ b/src/room/LobbyView.tsx @@ -112,7 +112,16 @@ export const LobbyView: FC = ({ ); // 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 = ({ 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 => { if (showBlur && !videoTrack?.getProcessor()) { // eslint-disable-next-line new-cap diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 7a669280c..1b9c47005 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -14,6 +14,8 @@ import { Text, Tooltip, } 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"; @@ -79,7 +81,18 @@ export const SettingsModal: FC = ({ // Generate a `Checkbox` input to turn blur on or off. 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 ? ( <>

{t("settings.background_blur_header")}

@@ -100,7 +113,7 @@ export const SettingsModal: FC = ({ - ); + ) : null; }; const optInDescription = (