logoUIKit
On this page

Beauty effects

What are advanced beauty effects?

Advanced beauty effects include the following features: face beautification, face shape retouch, makeup, filters, stickers, and background segmentation.

Prerequisites

Before you begin, make sure you complete the following:

  • Reference QuickStart for initial integration completion.
  • Contact ZEGOCLOUD Technical Support to activate the advanced beauty effects.

Getting started

Integrate the SDK

Add the dependency

Untitled
flutter pub add zego_uikit_beauty_plugin
1
Copied!

Import the SDK

Now in your Dart code, ​​​​​​​​​​​import the plugin.

Untitled
​​​​​​​​​​import 'package:zego_uikit_beauty_plugin/zego_uikit_beauty_plugin.dart';
1
Copied!

Add the initialization code

On top of the initialization code added in Quick Start, you need to set ZegoUIKitBeautyPlugin to the plugins parameter. Then, add the beautyEffectButton to the bottom menu bar. Additionally, please refer to Online authentication to obtain the license and set it to the beauty parameter of ZegoUIKitPrebuiltCallConfig.

With call invitation
Basic call
ZegoUIKitPrebuiltCallInvitationService().init(
  appID: yourAppID /*input your AppID*/,
  appSign: yourAppSign /*input your AppSign*/,
  userID: 'user_id',
  userName: 'user_name',
  plugins: [ZegoUIKitSignalingPlugin(), ZegoUIKitBeautyPlugin()],
  requireConfig: (ZegoCallInvitationData data) {
    final config = (data.invitees.length > 1)
        ? ZegoCallType.videoCall == data.type
            ? ZegoUIKitPrebuiltCallConfig.groupVideoCall()
            : ZegoUIKitPrebuiltCallConfig.groupVoiceCall()
        : ZegoCallType.videoCall == data.type
            ? ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()
            : ZegoUIKitPrebuiltCallConfig.oneOnOneVoiceCall();

    /// Add beauty effect button.
    config.bottomMenuBarConfig.buttons = [
      ZegoMenuBarButtonName.beautyEffectButton,
      ...config.bottomMenuBarConfig.buttons,
    ];
    /// Set up the license obtained from ZEGOCLOUD.
    config.beauty = ZegoBeautyPluginConfig(
      license: () {
        return $your_license;
      },
    );

    return config;
  },
);
1
Copied!
final callController = ZegoUIKitPrebuiltCallController();

@override
Widget build(BuildContext context) {
  final config = ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall();
  /// Add beauty effect button.
  config.bottomMenuBarConfig.buttons = [
    ZegoMenuBarButtonName.beautyEffectButton,
    ...config.bottomMenuBarConfig.buttons,
  ];
  /// Set up the license obtained from ZEGOCLOUD.
  config.beauty = ZegoBeautyPluginConfig(
    license: () {
      return $your_license;
    },
  );

  return SafeArea(
    child: ZegoUIKitPrebuiltCall(
      appID: yourAppID /*input your AppID*/,
      appSign: yourAppSign /*input your AppSign*/,
      userID: 'user_id',
      userName: 'user_name',
      callID: 'call_id',
      controller: callController,
      config: config,
      plugins: [ZegoUIKitBeautyPlugin()],
    ),
  );
}
1
Copied!

Add beauty effects resources

Advanced beauty effects require corresponding beauty resources to be effective.

Download resources

Click to download the beauty resources, and extract the resources to your local folder.

  • Adding resources to iOS:
  1. Open Runner.xcworkspace with Xcode.
  2. Drag the downloaded BeautyResources folder to the Runner directory, and select Create folder references.
  • Adding resources to Android:
  1. Create an assets folder under the main directory of your Android project (no need to create one if the assets folder already exists), like this: xxx/android/app/src/main/assets
  2. Copy the downloaded BeautyResources folder to the assets directory.

Run & Test

So far, you can simply click the Run or Debug button to run and test your App on the device.

Set initial beauty effect

To set initial beauty effect, calling the setBeautyParams method of the ZegoUIKitBeautyPlugin.

Method API parameter description:

  • paramConfigList:The list of beauty parameter configuration options you need to set.
  • forceUpdateCache:If set to true, it will force the use of the current beauty configuration and clear previous cache records. if set to false, it will use the current configuration when there is no beauty cache record. If there is a beauty cache record, it will not use the current configuration.
Untitled
class CallPage extends StatelessWidget {
  final String callID;

  const CallPage({Key? key, required this.callID,})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltCall(
        appID: yourAppID,
        // Fill in the appID that you get from ZEGOCLOUD Admin Console.
        appSign: yourAppSign,
        // Fill in the appSign that you get from ZEGOCLOUD Admin Console.
        userID: 'user_id',
        userName: 'user_name',
        callID: callID,
        plugins: [getBeautyPlugin()],
        config: ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall()
          ..beautyConfig = ZegoBeautyPluginConfig(),
      ),
    );
  }

  ZegoUIKitBeautyPlugin getBeautyPlugin() {
    final plugin = ZegoUIKitBeautyPlugin();
    final config = ZegoBeautyParamConfig(
        ZegoBeautyPluginEffectsType.beautyBasicSmoothing, true,
        value: 80);
    final config1 = ZegoBeautyParamConfig(
        ZegoBeautyPluginEffectsType.backgroundMosaicing, true,
        value: 90);
    plugin.setBeautyParams([config, config1], forceUpdateCache: true);
    return plugin;
  }
}
1
Copied!

Customize the beauty effects as needed

FYI: Our beauty effects package includes two plans: Basic pan and Pro plan. The Basic plan only includes basic beauty effects, while the Pro plan includes additional features such as face beautification, face shape retouch, facial feature enhancement, makeup looks, stickers, and filters. For more details, refer to AI Effects.

To customize the beauty effects, config the beautyConfig in ZegoUIKitPrebuiltCallConfig.

Untitled
final config = ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall();
config.bottomMenuBarConfig.buttons = [
  ZegoMenuBarButtonName.beautyEffectButton,
  ...config.bottomMenuBarConfig.buttons,
];
config.beautyConfig = ZegoBeautyPluginConfig();
1
Copied!

Beauty effects

Beauty effects included the 4 features: basic beauty effects, advanced beauty effects (face shape retouch), facial feature enhancement, and makeup looks. You can enable all four features or choose only a few of them.

The Basic Plan only includes the basic beauty effects. If you require other features, choose the Pro Plan instead.

Example 1: Selecting basic beauty effects and advanced beauty effects

Untitled
final beautyConfig = ZegoBeautyPluginConfig(
    effectsTypes: ZegoBeautyPluginConfig.beautifyEffectsTypes(
  enableBasic: true,
  enableAdvanced: true,
  enableMakeup: false,
  enableStyle: false,
));
1
Copied!

Here's how it would look like:

Example 2: Selecting all four features

Untitled
final beautyConfig = ZegoBeautyPluginConfig(
    effectsTypes: ZegoBeautyPluginConfig.beautifyEffectsTypes(
  enableBasic: true,
  enableAdvanced: true,
  enableMakeup: true,
  enableStyle: true,
));
1
Copied!

Here's how it would look like:

Filters

The filters include a total of 10 different filter effects, divided into 3 categories. You can use the following code to set them:

Untitled
final beautyConfig = ZegoBeautyPluginConfig(
    effectsTypes: ZegoBeautyPluginConfig.beautifyEffectsTypes() +
        ZegoBeautyPluginConfig.filterEffectsTypes());
1
Copied!

Here's how it would look like:

Stickers

The sticker feature requires a relatively large amount of resources. You can choose whether to integrate the sticker feature based on your own needs. If you need to integrate it, you can refer to the following code:

Untitled
final beautyConfig = ZegoBeautyPluginConfig(
    effectsTypes: ZegoBeautyPluginConfig.beautifyEffectsTypes() +
        ZegoBeautyPluginConfig.filterEffectsTypes() +
        ZegoBeautyPluginConfig.stickersEffectsTypes());
1
Copied!

Here's how it would look like:

Background segmentation

If you also need the background segmentation feature, refer to the following code to set it up.

Untitled
final beautyConfig = ZegoBeautyPluginConfig(
    effectsTypes: ZegoBeautyPluginConfig.beautifyEffectsTypes() +
        ZegoBeautyPluginConfig.filterEffectsTypes() +
        ZegoBeautyPluginConfig.stickersEffectsTypes() +
        ZegoBeautyPluginConfig.backgroundEffectsTypes());
1
Copied!

For portrait segmentation in background segmentation, you need to provide a background image. You can put the image in the BackgroundImages folder and set it up through the config.

Untitled
BeautyResources/BackgroundImages/image1.jpg
1
Copied!

Configure it through the code like this:

Untitled
final beautyConfig = ZegoBeautyPluginConfig(
    effectsTypes: ZegoBeautyPluginConfig.beautifyEffectsTypes() +
        ZegoBeautyPluginConfig.filterEffectsTypes() +
        ZegoBeautyPluginConfig.stickersEffectsTypes() +
        ZegoBeautyPluginConfig.backgroundEffectsTypes(),
    segmentationBackgroundImageName: 'image1.jpg');
1
Copied!

Here's how it would look like:

Make further customization

In addition to the aforementioned function customization, you can also pass in a custom effectsTypes array to determine which beauty effect you want to use.

Untitled
final beautyConfig = ZegoBeautyPluginConfig(effectsTypes: [
          ZegoBeautyPluginEffectsType.filterDreamyCozily,
          ZegoBeautyPluginEffectsType.filterDreamyCozily,
          ZegoBeautyPluginEffectsType.beautyAdvancedEyesBrightening,
        ...
        ...
        ]);
1
Copied!

Customize text

To customize the text related to the advanced beauty effects feature, you can use ZegoBeautyPluginInnerText like the following:

Untitled
final beautyConfig = ZegoBeautyPluginConfig(
    innerText: ZegoBeautyPluginInnerText(
  titleFilter: 'Filters',
  beautyBasicSmoothing: 'Smoothing',
  beautyMakeupLipstick: 'Lipstick',
  ...
));
1
Copied!

Customize the background color

To customize the background color of the view, refer to the following:

Untitled
final beautyConfig = ZegoBeautyPluginConfig(
      uiConfig: ZegoBeautyPluginUIConfig(
    backgroundColor: Colors.red
    ...
));
1
Copied!

Customize the text color

To customize the text color, refer to the following:

Untitled
final beautyConfig = ZegoBeautyPluginConfig(
      uiConfig: ZegoBeautyPluginUIConfig(
    normalTextStyle: const TextStyle(color: Colors.blue)
    ...
));
1
Copied!

Customize the back button icon

To customize the back button icon, refer to the following:

Untitled
final beautyConfig = ZegoBeautyPluginConfig(
      uiConfig: ZegoBeautyPluginUIConfig()..backIcon = Image.asset('xxxx')
);
1
Copied!

Customize the slider color

To customize the slider to the color you prefer, refer to the following:

Untitled
final beautyConfig = ZegoBeautyPluginConfig(
      uiConfig: ZegoBeautyPluginUIConfig(
    sliderActiveTrackColor: Colors.red,
    sliderInactiveTrackColor: Colors.blue,
    sliderThumbColor: Colors.white
    ...
));
1
Copied!

Resource management

The downloaded resources mentioned above contain resources for all features. However, if you do not need all the features, you can delete some unnecessary resources to reduce the size of the app package.

Resource description

  • Essential resources (required by all features, cannot be deleted)
Untitled
BeautyResources/CommonResources.bundle
BeautyResources/FaceDetection.model
1
Copied!
  • Essential resources for stickers (do not delete if you need to use the sticker feature)
Untitled
BeautyResources/StickerBaseResources.bundle
1
Copied!
  • Essential resources for background segmentation (do not delete if you need to use the background segmentation feature)
Untitled
BeautyResources/BackgroundSegmentation.model
1
Copied!
  • Feature resource folder

    Each resource in the feature resource folder corresponds to a specific feature. If you need to use a certain feature, you should keep the corresponding resource folder. Otherwise, you may delete it.

Untitled
BeautyResources/AdvancedResources
1
Copied!

Detailed feature resource

FeatureSubfeatureEnumeration NameResource Name
BeautifyBasicbeautyBasicSmoothing
beautyBasicSkinTone
beautyBasicBlusher
beautyBasicSharpening
beautyBasicWrinkles
beautyBasicDarkCircles
AdvancedbeautyAdvancedFaceSlimming
beautyAdvancedEyesEnlarging
beautyAdvancedEyesBrightening
beautyAdvancedChinLengthening
beautyAdvancedMouthReshape
beautyAdvancedTeethWhitening
beautyAdvancedNoseSlimming
beautyAdvancedNoseLengthening
beautyAdvancedFaceShortening
beautyAdvancedMandibleSlimming
beautyAdvancedCheekboneSlimming
beautyAdvancedForeheadSlimming
MakeupbeautyMakeupLipstickCameoPinkBeautyResources/AdvancedResources/beautyMakeupLipstickCameoPink.bundle
beautyMakeupLipstickSweetOrangeBeautyResources/AdvancedResources/beautyMakeupLipstickSweetOrange.bundle
beautyMakeupLipstickRustRedBeautyResources/AdvancedResources/beautyMakeupLipstickRustRed.bundle
beautyMakeupLipstickCoralBeautyResources/AdvancedResources/beautyMakeupLipstickCoral.bundle
beautyMakeupLipstickRedVelvetBeautyResources/AdvancedResources/beautyMakeupLipstickRedVelvet.bundle
beautyMakeupBlusherSlightlyDrunkBeautyResources/AdvancedResources/beautyMakeupBlusherSlightlyDrunk.bundle
beautyMakeupBlusherPeachBeautyResources/AdvancedResources/beautyMakeupBlusherPeach.bundle
beautyMakeupBlusherMilkyOrangeBeautyResources/AdvancedResources/beautyMakeupBlusherMilkyOrange.bundle
beautyMakeupBlusherAprocitPinkBeautyResources/AdvancedResources/beautyMakeupBlusherAprocitPink.bundle
beautyMakeupBlusherSweetOrangeBeautyResources/AdvancedResources/beautyMakeupBlusherSweetOrange.bundle
beautyMakeupEyelashesNaturalBeautyResources/AdvancedResources/beautyMakeupEyelashesNatural.bundle
beautyMakeupEyelashesTenderBeautyResources/AdvancedResources/beautyMakeupEyelashesTender.bundle
beautyMakeupEyelashesCurlBeautyResources/AdvancedResources/beautyMakeupEyelashesCurl.bundle
beautyMakeupEyelashesEverlongBeautyResources/AdvancedResources/beautyMakeupEyelashesEverlong.bundle
beautyMakeupEyelashesThickBeautyResources/AdvancedResources/beautyMakeupEyelashesThick.bundle
beautyMakeupEyelinerNaturalBeautyResources/AdvancedResources/beautyMakeupEyelinerNatural.bundle
beautyMakeupEyelinerCatEyeBeautyResources/AdvancedResources/beautyMakeupEyelinerCatEye.bundle
beautyMakeupEyelinerNaughtyBeautyResources/AdvancedResources/beautyMakeupEyelinerNaughty.bundle
beautyMakeupEyelinerInnocentBeautyResources/AdvancedResources/beautyMakeupEyelinerInnocent.bundle
beautyMakeupEyelinerDignifiedBeautyResources/AdvancedResources/beautyMakeupEyelinerDignified.bundle
beautyMakeupEyeshadowPinkMistBeautyResources/AdvancedResources/beautyMakeupEyeshadowPinkMist.bundle
beautyMakeupEyeshadowShimmerPinkBeautyResources/AdvancedResources/beautyMakeupEyeshadowShimmerPink.bundle
beautyMakeupEyeshadowTeaBrownBeautyResources/AdvancedResources/beautyMakeupEyeshadowTeaBrown.bundle
beautyMakeupEyeshadowBrightOrangeBeautyResources/AdvancedResources/beautyMakeupEyeshadowBrightOrange.bundle
beautyMakeupEyeshadowMochaBrownBeautyResources/AdvancedResources/beautyMakeupEyeshadowMochaBrown.bundle
beautyMakeupColoredContactsDarknightBlackBeautyResources/AdvancedResources/beautyMakeupColoredContactsDarknightBlack.bundle
beautyMakeupColoredContactsStarryBlueBeautyResources/AdvancedResources/beautyMakeupColoredContactsStarryBlue.bundle
beautyMakeupColoredContactsBrownGreenBeautyResources/AdvancedResources/beautyMakeupColoredContactsBrownGreen.bundle
beautyMakeupColoredContactsLightsBrownBeautyResources/AdvancedResources/beautyMakeupColoredContactsLightsBrown.bundle
beautyMakeupColoredContactsChocolateBrownBeautyResources/AdvancedResources/beautyMakeupColoredContactsChocolateBrown.bundle
Style MakeupbeautyStyleMakeupInnocentEyesBeautyResources/AdvancedResources/beautyStyleMakeupInnocentEyes.bundle
beautyStyleMakeupMilkyEyesBeautyResources/AdvancedResources/beautyStyleMakeupMilkyEyes.bundle
beautyStyleMakeupCutieCoolBeautyResources/AdvancedResources/beautyStyleMakeupCutieCool.bundle
beautyStyleMakeupPureSexyBeautyResources/AdvancedResources/beautyStyleMakeupPureSexy.bundle
beautyStyleMakeupFlawlessBeautyResources/AdvancedResources/beautyStyleMakeupFlawless.bundle
FilterNaturalfilterNaturalCreamyBeautyResources/AdvancedResources/filterNaturalCreamy.bundle
filterNaturalBrightenBeautyResources/AdvancedResources/filterNaturalBrighten.bundle
filterNaturalFreshBeautyResources/AdvancedResources/filterNaturalFresh.bundle
filterNaturalAutumnBeautyResources/AdvancedResources/filterNaturalAutumn.bundle
GrayfilterGrayMonetBeautyResources/AdvancedResources/filterGrayMonet.bundle
filterGrayNightBeautyResources/AdvancedResources/filterGrayNight.bundle
filterGrayFilmlikeBeautyResources/AdvancedResources/filterGrayFilmlike.bundle
DreamyfilterDreamySunsetBeautyResources/AdvancedResources/filterDreamySunset.bundle
filterDreamyCozilyBeautyResources/AdvancedResources/filterDreamyCozily.bundle
filterDreamySweetBeautyResources/AdvancedResources/filterDreamySweet.bundle
StickerStickersstickerAnimal
stickerDiveBeautyResources/AdvancedResources/stickerDive.bundle
stickerCatBeautyResources/AdvancedResources/stickerCat.bundle
stickerWatermelonBeautyResources/AdvancedResources/stickerWatermelon.bundle
stickerDeerBeautyResources/AdvancedResources/stickerDeer.bundle
stickerCoolGirlBeautyResources/AdvancedResources/stickerCoolGirl.bundle
stickerClownBeautyResources/AdvancedResources/stickerClown.bundle
stickerClawMachineBeautyResources/AdvancedResources/stickerClawMachine.bundle
stickerSailorMoonBeautyResources/AdvancedResources/stickerSailorMoon.bundle
BackgroundbackgroundGreenScreenSegmentation
backgroundPortraitSegmentation
backgroundMosaicing
backgroundGaussianBlur

Previous

Screen sharing

Next

Use tokens for authentication