diff --git a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBHandler.tsx b/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBHandler.tsx index 77cd5ccb0c..182f922198 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBHandler.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBHandler.tsx @@ -2,7 +2,7 @@ // eslint-disable-next-line import { HMSVBPlugin, HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background/hmsvbplugin'; import { parsedUserAgent } from '@100mslive/react-sdk'; -import { isSafari } from '../../common/constants'; +import { isIOS, isSafari } from '../../common/constants'; export class VBPlugin { private hmsPlugin?: HMSVBPlugin; private effectsPlugin?: any; @@ -103,6 +103,18 @@ export class VBPlugin { this.hmsPlugin = undefined; }; + isBlurSupported = () => { + if ((isSafari || isIOS) && this.hmsPlugin) { + return false; + } + + if (this.effectsPlugin) { + return true; + } + + return false; + }; + isEffectsSupported = () => { if (!isSafari) { return true; diff --git a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBPicker.tsx b/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBPicker.tsx index da598f83d6..30a1dc70ad 100644 --- a/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBPicker.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/VirtualBackground/VBPicker.tsx @@ -57,6 +57,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac const background = useHMSStore(selectAppData(APP_DATA.background)); const mediaList = backgroundMedia.map((media: VirtualBackgroundMedia) => media.url || ''); const pluginLoadingRef = useRef(false); + const isBlurSupported = VBHandler?.isBlurSupported(); const inPreview = roomState === HMSRoomState.Preview; // Hidden in preview as the effect will be visible in the preview tile @@ -190,7 +191,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac await VBHandler?.setBlur(blurAmount); hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.BLUR); }, - supported: isEffectsSupported && isEffectsEnabled, + supported: isBlurSupported, }, ]} activeBackground={background} @@ -198,7 +199,7 @@ export const VBPicker = ({ backgroundMedia = [] }: { backgroundMedia: VirtualBac {/* Slider */} - {background === HMSVirtualBackgroundTypes.BLUR && isEffectsEnabled && effectsKey ? ( + {background === HMSVirtualBackgroundTypes.BLUR && isBlurSupported ? ( Blur intensity