Virtual Background Plugin (Beta)

Step 1: Set the isVirtualBackgroundEnabled property in HMSVideoTrackSetting as true

var videoTrackSetting = HMSVideoTrackSetting(
            trackInitialState: joinWithMutedVideo
                ? HMSTrackInitState.MUTED
                : HMSTrackInitState.UNMUTED,
            isVirtualBackgroundEnabled: true);

Step 2: Pass the Track Settings to the HMSSDK constructor

/// Create Instance of `HMSTrackSetting`
var trackSettings = HMSTrackSetting(
        audioTrackSetting: HMSAudioTrackSetting(),
        videoTrackSetting: videoTrackSetting);

/// Set the track settings to HMSSDK
var hmsSDK = HMSSDK(
        hmsTrackSetting: trackSettings);

Step 3: Check for Virtual Background availability

class Meeting implements HMSUpdateListener, HMSActionResultListener{

    ...

    bool isVirtualBackgroundSupported = false;

    /// This method checks the virtual background availability
    void checkIsVirtualBackgroundSupported() async {
        isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
    }

    ...
}

Step 4: If Virtual Background is available, enable it

To enable virtual background, call the enable method.

class Meeting implements HMSUpdateListener, HMSActionResultListener{

    ...

    bool isVirtualBackgroundSupported = false;

    /// This method checks the virtual background availability
    void checkIsVirtualBackgroundSupported() async {
        isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
    }

    void enableVirtualBackground(Uint8List? image) async{
        ///[image] is the image to be set as background
        if(isVirtualBackgroundSupported){
            HMSException? isEnabled = await HMSVideoPlugin.enable(image: image);
            if(isEnabled == null){
                ///Virtual background started successfully
            }else{
                ///Error enabling virtual background
            }
        }
    }

    ...
}

To enabled background blur, call the enableBlur method.

class Meeting implements HMSUpdateListener, HMSActionResultListener{

    ...

    bool isVirtualBackgroundSupported = false;

    /// This method checks the virtual background availability
    void checkIsVirtualBackgroundSupported() async {
        isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
    }

    void enableBackgroundBlur(int blurRadius) async{
        ///[blurRadius] is the radius of the blur effect
        if(isVirtualBackgroundSupported){
            HMSException? isEnabled = await HMSVideoPlugin.enableBlur(blurRadius: blurRadius);
            if(isEnabled == null){
                ///Background blur started successfully
            }else{
                ///Error enabling blur
            }
        }
    }

    ...
}

Step 5: To change virtual background image use changeVirtualBackground method

class Meeting implements HMSUpdateListener, HMSActionResultListener{

    ...

    bool isVirtualBackgroundSupported = false;

    /// This method checks the virtual background availability
    void checkIsVirtualBackgroundSupported() async {
        isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
    }

    ///If virtual background is enabled, then we can change the virtual background image
    void changeVirtualBackground(Uint8List? image) {

        ///[image] is the image new image to be set as background
        ///[isVirtualBackgroundSupported] is the flag to check if virtual background is supported
        ///[isVirtualBackgroundEnabled] is the flag to check if virtual background is enabled
        if(isVirtualBackgroundSupported && isVirtualBackgroundEnabled){
            HMSVideoPlugin.changeVirtualBackground(image: image);
        }
    }

    ...
}

Step 6: To disable Virtual Background use disable methods

To disable virtual background, call the disable method.

class Meeting implements HMSUpdateListener, HMSActionResultListener{

    ...

    bool isVirtualBackgroundSupported = false;

    /// This method checks the virtual background availability
    void checkIsVirtualBackgroundSupported() async {
        isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
    }

    void disableVirtualBackground() async{
        if(isVirtualBackgroundSupported){
            HMSException? isDisabled = await HMSVideoPlugin.disable();
            if(isDisabled == null){
                ///Virtual Background disabled successfully
            }else{
                ///Error disabling virtual background
            }
        }
    }
    ...
}

To disable background blur use disableBlur method

class Meeting implements HMSUpdateListener, HMSActionResultListener{

    ...

    bool isVirtualBackgroundSupported = false;

    /// This method checks the virtual background availability
    void checkIsVirtualBackgroundSupported() async {
        isVirtualBackgroundSupported = await HMSVideoPlugin.isSupported();
    }

    void disableBackgroundBlur() async{
        if(isVirtualBackgroundSupported){
            HMSException? isDisabled = await HMSVideoPlugin.disableBlur();
            if(isDisabled == null){
                ///Background blur disabled successfully
            }else{
                ///Error disabling blur
            }
        }
    }
    ...
}