Advanced beauty effects
What are advanced beauty effects?
In addition to the basic beauty effects provided by the Live Streaming Kit, you can also choose to use advanced beauty effects to enhance your live streaming app. 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:
- Follow the integration steps by referring to the Quick start or Quick start with co-hosting.
- Contact ZEGOCLOUD Technical Support to activate the advanced beauty effects.
- Download the demo here.
Getting started
Integrate the SDK
Add the dependency
implementation 'com.github.ZEGOCLOUD:zego_uikit_beauty_plugin_android:+'Add the initialization code
As the initialization code has been added during Quick Start, you only need to add the beauty button in the ZegoUIKitPrebuiltLiveStreamingConfig.bottomMenuBarConfig.
//...
ZegoUIKitPrebuiltLiveStreamingConfig config;
if (isHost) {
config = ZegoUIKitPrebuiltLiveStreamingConfig.host(true);
} else {
config = ZegoUIKitPrebuiltLiveStreamingConfig.audience(true);
}
// add `ZegoMenuBarButtonName.BEAUTY_BUTTON` to host
config.bottomMenuBarConfig = new ZegoBottomMenuBarConfig(
Arrays.asList(ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON, ZegoMenuBarButtonName.TOGGLE_MICROPHONE_BUTTON,ZegoMenuBarButtonName.SWITCH_CAMERA_FACING_BUTTON, ZegoMenuBarButtonName.BEAUTY_BUTTON),
Arrays.asList(ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON, ZegoMenuBarButtonName.TOGGLE_MICROPHONE_BUTTON,ZegoMenuBarButtonName.COHOST_CONTROL_BUTTON),
Collections.singletonList(ZegoMenuBarButtonName.COHOST_CONTROL_BUTTON));
ZegoUIKitPrebuiltLiveStreamingFragment fragment = ZegoUIKitPrebuiltLiveStreamingFragment.newInstance(appID,appSign, userID, userName, liveID, config);
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, fragment).commitNow();
//...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 Android:
-
Create an assets folder under the
maindirectory of your Android project (no need to create one if the assets folder already exists), like this: xxx/android/app/src/main/assets -
Copy the downloaded
BeautyResourcesfolder 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.
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 ZegoUIKitPrebuiltLiveStreamingConfig.
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
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.addAll(ZegoBeautyPluginConfig.basicTypes());
customTypes.addAll(ZegoBeautyPluginConfig.advancedTypes());
config.beautyConfig.effectsTypes = customTypes;
//...Here's how it would look like:
Example 2: Selecting all four features
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.addAll(ZegoBeautyPluginConfig.basicTypes());
customTypes.addAll(ZegoBeautyPluginConfig.advancedTypes());
customTypes.addAll(ZegoBeautyPluginConfig.makeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.styleMakeupTypes());
config.beautyConfig.effectsTypes = customTypes;
//...Here's how it would look like:
Filters
The filters include a total of 10 different filter effects, You can use the following code to set them:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.addAll(ZegoBeautyPluginConfig.basicTypes());
customTypes.addAll(ZegoBeautyPluginConfig.advancedTypes());
customTypes.addAll(ZegoBeautyPluginConfig.makeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.styleMakeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.filterTypes());
config.beautyConfig.effectsTypes = customTypes;
//...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:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.addAll(ZegoBeautyPluginConfig.basicTypes());
customTypes.addAll(ZegoBeautyPluginConfig.advancedTypes());
customTypes.addAll(ZegoBeautyPluginConfig.makeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.styleMakeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.filterTypes());
customTypes.addAll(ZegoBeautyPluginConfig.stickerTypes());
config.beautyConfig.effectsTypes = customTypes;
//...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.
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.addAll(ZegoBeautyPluginConfig.basicTypes());
customTypes.addAll(ZegoBeautyPluginConfig.advancedTypes());
customTypes.addAll(ZegoBeautyPluginConfig.makeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.styleMakeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.filterTypes());
customTypes.addAll(ZegoBeautyPluginConfig.stickerTypes());
customTypes.addAll(ZegoBeautyPluginConfig.backgroundTypes());
config.beautyConfig.effectsTypes = customTypes;
//...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.
BeautyResources/BackgroundImages/image1.jpgConfigure it through the code like this:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.addAll(ZegoBeautyPluginConfig.basicTypes());
customTypes.addAll(ZegoBeautyPluginConfig.advancedTypes());
customTypes.addAll(ZegoBeautyPluginConfig.makeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.styleMakeupTypes());
customTypes.addAll(ZegoBeautyPluginConfig.filterTypes());
customTypes.addAll(ZegoBeautyPluginConfig.stickerTypes());
customTypes.addAll(ZegoBeautyPluginConfig.backgroundTypes());
config.beautyConfig.effectsTypes = customTypes;
config.beautyConfig.segmentationBackgroundImageName = "image1.jpg";
//...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 list to determine which beauty effect you want to use.
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
List<ZegoBeautyPluginEffectsType> customTypes = new ArrayList<>();
customTypes.add(ZegoBeautyPluginEffectsType.FILTER_GRAY_FILMLIKE);
customTypes.add(ZegoBeautyPluginEffectsType.FILTER_DREAMY_COZILY);
config.beautyConfig.effectsTypes = customTypes;
//...Customize UI
The effectsBottomBar that pops up at the bottom supports custom UI. The captions indicate the customization options for each section, and each option will be explained in detail later on.
Customize text
To customize the text related to the advanced beauty effects feature, you can use ZegoBeautyPluginInnerText like the following:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
config.beautyConfig.innerText.titleFilter = "Filters";
config.beautyConfig.innerText.beautyBasicSmoothing = "Smoothing";
config.beautyConfig.innerText.beautyMakeupLipstick = "Lipstick";
//... Customize the background color
To customize the background color of the view, refer to the following:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
config.beautyConfig.uiConfig.backgroundColor = Color.RED;
//... Customize the text color
To customize the text color, refer to the following:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
config.beautyConfig.uiConfig.selectedHeaderTitleTextColor = Color.GREEN;
config.beautyConfig.uiConfig.selectedTextColor = Color.CYAN;
//... Customize the back button icon
To customize the back button icon, refer to the following:
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
config.beautyConfig.uiConfig.backIcon = getDrawable(R.drawable.custom_back_icon);
//... 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)
BeautyResources/CommonResources.bundle BeautyResources/FaceDetection.model -
Essential resources for stickers (do not delete if you need to use the sticker feature)
BeautyResources/StickerBaseResources.bundle -
Essential resources for background segmentation (do not delete if you need to use the background segmentation feature)
BeautyResources/BackgroundSegmentation.model -
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.
BeautyResources/AdvancedResources
Detailed feature resource
| Feature | Subfeature | Enumeration Name | Resource Name |
|---|---|---|---|
| Beautify | Basic | BASIC_SMOOTHING | - |
| BASIC_SKIN_TONE | |||
| BASIC_BLUSHER | |||
| BASIC_SHARPENING | |||
| BASIC_WRINKLES | |||
| BASIC_DARK_CIRCLES | |||
| Advanced | ADVANCED_FACE_SLIMMING | ||
| ADVANCED_EYES_ENLARGING | |||
| ADVANCED_EYES_BRIGHTENING | |||
| ADVANCED_CHIN_LENGTHENING | |||
| ADVANCED_MOUTH_RESHAPE | |||
| ADVANCED_TEETH_WHITENING | |||
| ADVANCED_NOSE_SLIMMING | |||
| ADVANCED_NOSE_LENGTHENING | |||
| ADVANCED_FACE_SHORTENING | |||
| ADVANCED_MANDIBLE_SLIMMING | |||
| ADVANCED_CHEEKBONE_SLIMMING | |||
| ADVANCED_FOREHEAD_SLIMMING | |||
| Makeup | MAKEUP_LIPSTICK_CAMEO_PINK | BeautyResources/AdvancedResources/beautyMakeupLipstickCameoPink.bundle | |
| MAKEUP_LIPSTICK_SWEET_ORANGE | BeautyResources/AdvancedResources/beautyMakeupLipstickSweetOrange.bundle | ||
| MAKEUP_LIPSTICK_RUST_RED | BeautyResources/AdvancedResources/beautyMakeupLipstickRustRed.bundle | ||
| MAKEUP_LIPSTICK_CORAL | BeautyResources/AdvancedResources/beautyMakeupLipstickCoral.bundle | ||
| MAKEUP_LIPSTICK_RED_VELVET | BeautyResources/AdvancedResources/beautyMakeupLipstickRedVelvet.bundle | ||
| MAKEUP_BLUSHER_SLIGHTLY_DRUNK | BeautyResources/AdvancedResources/beautyMakeupBlusherSlightlyDrunk.bundle | ||
| MAKEUP_BLUSHER_PEACH | BeautyResources/AdvancedResources/beautyMakeupBlusherPeach.bundle | ||
| MAKEUP_BLUSHER_MILKY_ORANGE | BeautyResources/AdvancedResources/beautyMakeupBlusherMilkyOrange.bundle | ||
| MAKEUP_BLUSHER_APRICOT_PINK | BeautyResources/AdvancedResources/beautyMakeupBlusherApricotPink.bundle | ||
| MAKEUP_BLUSHER_SWEET_ORANGE | BeautyResources/AdvancedResources/beautyMakeupBlusherSweetOrange.bundle | ||
| MAKEUP_EYELASHES_NATURAL | BeautyResources/AdvancedResources/beautyMakeupEyelashesNatural.bundle | ||
| MAKEUP_EYELASHES_TENDER | BeautyResources/AdvancedResources/beautyMakeupEyelashesTender.bundle | ||
| MAKEUP_EYELASHES_CURL | BeautyResources/AdvancedResources/beautyMakeupEyelashesCurl.bundle | ||
| MAKEUP_EYELASHES_EVERLONG | BeautyResources/AdvancedResources/beautyMakeupEyelashesEverlong.bundle | ||
| MAKEUP_EYELASHES_THICK | BeautyResources/AdvancedResources/beautyMakeupEyelashesThick.bundle | ||
| MAKEUP_EYELINER_NATURAL | BeautyResources/AdvancedResources/beautyMakeupEyelinerNatural.bundle | ||
| MAKEUP_EYELINER_CAT_EYE | BeautyResources/AdvancedResources/beautyMakeupEyelinerCatEye.bundle | ||
| MAKEUP_EYELINER_NAUGHTY | BeautyResources/AdvancedResources/beautyMakeupEyelinerNaughty.bundle | ||
| MAKEUP_EYELINER_INNOCENT | BeautyResources/AdvancedResources/beautyMakeupEyelinerInnocent.bundle | ||
| MAKEUP_EYELINER_DIGNIFIED | BeautyResources/AdvancedResources/beautyMakeupEyelinerDignified.bundle | ||
| MAKEUP_EYESHADOW_PINK_MIST | BeautyResources/AdvancedResources/beautyMakeupEyeshadowPinkMist.bundle | ||
| MAKEUP_EYESHADOW_SHIMMER_PINK | BeautyResources/AdvancedResources/beautyMakeupEyeshadowShimmerPink.bundle | ||
| MAKEUP_EYESHADOW_TEA_BROWN | BeautyResources/AdvancedResources/beautyMakeupEyeshadowTeaBrown.bundle | ||
| MAKEUP_EYESHADOW_BRIGHT_ORANGE | BeautyResources/AdvancedResources/beautyMakeupEyeshadowBrightOrange.bundle | ||
| MAKEUP_EYESHADOW_MOCHA_BROWN | BeautyResources/AdvancedResources/beautyMakeupEyeshadowMochaBrown.bundle | ||
| MAKEUP_COLORED_CONTACTS_DARKNIGHT_BLACK | BeautyResources/AdvancedResources/beautyMakeupColoredContactsDarknightBlack.bundle | ||
| MAKEUP_COLORED_CONTACTS_STARRY_BLUE | BeautyResources/AdvancedResources/beautyMakeupColoredContactsStarryBlue.bundle | ||
| MAKEUP_COLORED_CONTACTS_BROWN_GREEN | BeautyResources/AdvancedResources/beautyMakeupColoredContactsBrownGreen.bundle | ||
| MAKEUP_COLORED_CONTACTS_LIGHTS_BROWN | BeautyResources/AdvancedResources/beautyMakeupColoredContactsLightsBrown.bundle | ||
| MAKEUP_COLORED_CONTACTS_CHOCOLATE_BROWN | BeautyResources/AdvancedResources/beautyMakeupColoredContactsChocolateBrown.bundle | ||
| Style Makeup | STYLE_MAKEUP_INNOCENT_EYES | BeautyResources/AdvancedResources/beautyStyleMakeupInnocentEyes.bundle | |
| STYLE_MAKEUP_MILKY_EYES | BeautyResources/AdvancedResources/beautyStyleMakeupMilkyEyes.bundle | ||
| STYLE_MAKEUP_CUTIE_COOL | BeautyResources/AdvancedResources/beautyStyleMakeupCutieCool.bundle | ||
| STYLE_MAKEUP_PURE_SEXY | BeautyResources/AdvancedResources/beautyStyleMakeupPureSexy.bundle | ||
| STYLE_MAKEUP_FLAWLESS | BeautyResources/AdvancedResources/beautyStyleMakeupFlawless.bundle | ||
| Filter | Natural | FILTER_NATURAL_CREAMY | BeautyResources/AdvancedResources/filterNaturalCreamy.bundle |
| FILTER_NATURAL_BRIGHTEN | BeautyResources/AdvancedResources/filterNaturalBrighten.bundle | ||
| FILTER_NATURAL_FRESH | BeautyResources/AdvancedResources/filterNaturalFresh.bundle | ||
| FILTER_NATURAL_AUTUMN | BeautyResources/AdvancedResources/filterNaturalAutumn.bundle | ||
| Gray | FILTER_GRAY_MONET | BeautyResources/AdvancedResources/filterGrayMonet.bundle | |
| FILTER_GRAY_NIGHT | BeautyResources/AdvancedResources/filterGrayNight.bundle | ||
| FILTER_GRAY_FILMLIKE | BeautyResources/AdvancedResources/filterGrayFilmlike.bundle | ||
| Dreamy | FILTER_DREAMY_SUNSET | BeautyResources/AdvancedResources/filterDreamySunset.bundle | |
| FILTER_DREAMY_COZILY | BeautyResources/AdvancedResources/filterDreamyCozily.bundle | ||
| FILTER_DREAMY_SWEET | BeautyResources/AdvancedResources/filterDreamySweet.bundle | ||
| Sticker | Stickers | STICKER_ANIMAL | |
| STICKER_DIVE | BeautyResources/AdvancedResources/stickerDive.bundle | ||
| STICKER_CAT | BeautyResources/AdvancedResources/stickerCat.bundle | ||
| STICKER_WATERMELON | BeautyResources/AdvancedResources/stickerWatermelon.bundle | ||
| STICKER_DEER | BeautyResources/AdvancedResources/stickerDeer.bundle | ||
| STICKER_COOL_GIRL | BeautyResources/AdvancedResources/stickerCoolGirl.bundle | ||
| STICKER_CLOWN | BeautyResources/AdvancedResources/stickerClown.bundle | ||
| STICKER_CLAW_MACHINE | BeautyResources/AdvancedResources/stickerClawMachine.bundle | ||
| STICKER_SAILOR_MOON | BeautyResources/AdvancedResources/stickerSailorMoon.bundle | ||
| Background | BACKGROUND_PORTRAIT_SEGMENTATION | ||
| BACKGROUND_MOSAICING | |||
| BACKGROUND_GAUSSIAN_BLUR |
Listen to BeautyPlugin Events
You can listen to BeautyPlugin events by config.beautyConfig.beautyEventHandler,if you have enabled faceDetection in config.beautyConfig,you can receive face detection data in onFaceDetectionResult.
Please pay special attention to the onInitResult callback. If the initialization fails, the beauty function cannot be used. This is usually because the applicationID and appID of the current application are inconsistent with the registered applicationID and appID, or the license has expired.
ZegoUIKitPrebuiltLiveStreamingConfig config;
// ...
config.beautyConfig.beautyEventHandler = new IBeautyEventHandler() {
@Override
public void onInitResult(int errorCode, String message) {
super.onInitResult(errorCode, message);
Log.d(TAG, "onInitResult() called with: errorCode = [" + errorCode + "], message = [" + message + "]");
}
@Override
public void onError(int errorCode, String message) {
super.onError(errorCode, message);
Log.d(TAG, "onError() called with: errorCode = [" + errorCode + "], message = [" + message + "]");
}
@Override
public void onFaceDetectionResult(ZegoBeautyPluginFaceDetectionResult[] results) {
super.onFaceDetectionResult(results);
Log.d(TAG, "onFaceDetectionResult() called with: results = [" + results + "]");
}
};
//...