please select
Beauty AR
  • Overview
  • Web
    • Quick Start
    • Integration
      • Overview
      • Built-in Camera
      • Custom Stream
      • Loading Optimization
      • Configuring Effects
      • Configuring Segmentation
      • Configuring Animojis and Virtual Avatars
    • API Document
    • Release Notes
    • Best Practices
      • Publishing over WebRTC
      • Publishing over WebRTC (Preinitialization)
      • Publishing Using TRTC
    • FAQs
  • Android
    • Integration
      • Integrating SDK
      • Integrating TEBeautyKit
    • API Document
    • Release Notes
    • Best Practices
      • Reducing SDK Size
      • Effect Parameters
    • Advanced Capabilities
      • Gesture Recognition
      • Face Recognition
      • Virtual Background
    • Material Production
      • Beauty AR Studio Introduction
    • FAQs
  • IOS
    • Integration
      • Integrating SDK
      • Integrating TEBeautyKit
    • API Document
    • Release Notes
    • Best Practices
      • Reducing SDK Size
      • Effect Parameters
    • Advanced Capabilities
      • Gesture Recognition
      • Face Recognition
      • Virtual Background
    • Material Production
      • Beauty AR Studio Introduction
    • FAQs
  • Flutter
    • Integration
    • API Document
    • Material Production
      • Beauty AR Studio Introduction
  • Overview
    • Overview
  • Activate the Service
  • Pricing
  • Free Trial
    • Web
    • Mobile
Beauty AR

Integrating TEBeautyKit

Features

TEBeautyKit is the UI panel library for the Beauty AR module, used for quick and convenient usage and management of the effect features. You can download the TEBeautyDemo from Github. The effect is as shown in the figure below:




Integration Guide

Note
Before integrating this library, follow the instructions in Integrating SDK to integrate the Beauty AR SDK.

Step 1: Add dependency library

Method 1: Remote Maven Dependency

Add the TEBeautyKit library's dependency in the dependencies:
dependencies{
...
implementation 'com.tencent.mediacloud:TEBeautyKit:Version number'
}

Method 2: Local AAR dependency

Download the aar file (It's a zip file post-download, which can be unzipped to obtain the aar file)
Add the downloaded tebeautykit-xxxx.aar file to the libs directory in the app project
Open build.gradle in the app module and add a dependency reference:
dependencies{
...
implementation fileTree(dir: 'libs', include: ['*.jar','*.aar']) //add *.aar
}
Note
Both methods one and two require the addition of the following dependency:
dependencies{
implementation 'com.google.code.gson:gson:2.8.2'
implementation 'com.squareup.okhttp3:okhttp:3.9.0'
implementation 'com.github.bumptech.glide:glide:4.12.0'
implementation 'androidx.appcompat:appcompat:1.0.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
implementation 'androidx.recyclerview:recyclerview:1.2.1'
}

Step 2: Add the Panel JSON File

Download and unzip the Panel Configuration File. The file contains configuration for the beauty, body beautifying, filter, dynamic stickers, and partitioning properties. Customers can choose the JSON file based on their package and place it in the assets/beauty_panel directory (panel_icon should also be placed in this directory).



The zipped download package contains the files as depicted above. Please refer to the following table for a description of each file:
File
Note
beauty_body.json
UI panel configuration file with body beautifying features.
beauty_S1.json
UI panel configuration file with beautifying features.
lut.json
UI panel configuration file with filter features.
Note: As the filter materials used by different customers vary, customers can customize the configuration following the json structure after the download (refer to json file structure explanation), eliminating the default configuration.
makeup.json
UI panel configuration file with makeup features.
Note: Due to the different stylistic makeup materials used by different customers, after downloading, customers can self-configure according to the json structure(please refer to json file structure explanation), and remove the default configuration.
motions.json
UI panel configuration file with dynamic stickers.
Node: Due to the varying dynamic sticker materials used by different clients, after downloading, clients can follow the json structure for their own configuration (as referred to in json file structure instructions), and delete default configurations.
panel_icon
This folder is used for storing images configured in the json file, it is essential to add.
segmentation.json
UI panel configuration file with segmentation feature.
Node: Given that different clients use different splitting materials, they can configure it themselves as per the JSON structure, post download(please refer to JSON file structure explanation) and eliminate the default configuration.

Use Guide

Step 1: Define the Path

TEBeautyKit.setResPath((new File(getFilesDir(), "xmagic_dir").getAbsolutePath()));

Step 2: Setting Panel's JSON File

Configuring Step One paths to the JSON file added to your project within the Setting steps, it could be set to null if it is absent.
TEUIConfig.getInstance().setTEPanelViewRes("beauty_panel/beauty_S1.json", null, "beauty_panel/lut.json", "beauty_panel/motions.json", "beauty_panel/makeup.json", "beauty_panel/segmentation.json");

Step 3: Copying Beauty Resources

Replicate beauty resources into the path set in How to Use Step One, Just a single successful replication is required per version.
new Thread(() -> { boolean result = TEBeautyKit.copyRes(MainActivity.this.getApplicationContext()); runOnUiThread(() -> { if (result) { saveCopyData(); } teProgressDialog.dismiss(); checkLicense(); }); }).start();

Step 4: Authenticate

TEBeautyKit.setTELicense(this.getApplicationContext(),LicenseConstant.mXMagicLicenceUrl,LicenseConstant.mXMagicKey, (i, s) -> { if (i == LicenseConstant.AUTH_STATE_SUCCEED) { Intent intent = new Intent(MainActivity.this, ThirdBeautyActivity.class); startActivity(intent); } else { Log.e(TAG, "te license check is failed,please checked "); } });

Step 5: Add Panel

private void initializeBeautyPanelView() { RelativeLayout panelLayout = findViewById(R.id.live_pusher_bp_beauty_panel); this.elegantPanelView = new TEPanelView(this); if (previousParamList != null) { //To restore the previous beauty effect this.elegantPanelView.setPreviousParamList(previousParamList); } this.elegantPanelView.displayView(this); panelLayout.addView(this.elegantPanelView); }

Step 6: Create Beauty Feature

/** * Initialize the beauty filter SDK */ private void initBeautyApi() { TEBeautyKit.create(ThirdBeautyActivity.this.getApplicationContext(), false, new TEBeautyKit.OnInitListener() {
@Override
public void onInitResult(TEBeautyKit api) {
beautyKit = api;
beautyKit.setTipsListener(new XmagicApi.XmagicTipsListener() {
@Override
public void tipsNeedShow(String tips, String tipsIcon, int type, int duration) {
showTips(tips, tipsIcon, type, duration);
}

@Override
public void tipsNeedHide(String tips, String tipsIcon, int type) {
}
});
tePanelView.setupWithTEBeautyKit(beautyKit);
}
}); }

Step 7: Embrace Beautification

Here, an instance of applying beautification in TRTC is displayed. TRTC will direct camera data back to the onProcessVideoFrame method, where beautification is processed.
private void setProcessListener() { //1. Setting TRTCCloudDef.TRTCVideoFrameListener callback, for more details see API documentation at {https://liteav.sdk.qcloud.com/doc/api/zh-cn/group__TRTCCloud__android.html#a0b565dc8c77df7fb826f0c45d8ad2d85} mTRTCCloud.setLocalVideoProcessListener(TRTCCloudDef.TRTC_VIDEO_PIXEL_FORMAT_Texture_2D, TRTCCloudDef.TRTC_VIDEO_BUFFER_TYPE_TEXTURE, new TRTCCloudDef.TRTCVideoFrameListener() { @Override public void onGLContextCreated() { //2. Creation of GLContext Log.e(TAG, "onGLContextCreated"); initializeBeautyApi(); } @Override public int onProcessVideoFrame(TRTCCloudDef.TRTCVideoFrame srcFrame, TRTCCloudDef.TRTCVideoFrame dstFrame) { if (beautyKit != null) { dstFrame.texture.textureId = beautyKit.process(srcFrame.texture.textureId, srcFrame.width, srcFrame.height); } else { dstFrame.texture.textureId = srcFrame.texture.textureId; } return 0; } @Override public void onGLContextDestroy() { //4. Destruction of GLContext Log.e(TAG, "onGLContextDestroyed"); if (beautyKit != null) { beautyKit.onDestroy();
beautyKit = null; } } }); }

Step 8: Destroying Beauty Effect Note: Requires destruction in the GL thread

public void onGLContextDestory() { //4. GLContext destruction Log.e(TAG, "onGLContextDestroy"); if (beautyKit != null) { beautyKit.onDestroy();
beautyKit = null; } }

Step 9: Restoring Audio

/** * Employed to restore the sound in stickers * Reactivate the gyroscope sensor, generally called in Activity's onResume method */ public void onResume()

Step 10: Pausing the sound

/** * Used to pause the sound in stickers * Put the gyroscope sensor on hold, generally called in Activity's onPause method */ public void onPause()

Appendix

Panel JSON File Elucidation

Beautify, body shaping.



Field
Description
displayName
Chinese Name
displayNameEn
English Name
icon
Image URL, supports both local and online images in Setting. Local images can come from assets and SD resources. As depicted above, assets images and SD card images are set as the full image path, while online images are set to their corresponding http link in Setting
sdkParam
The Beautification SDK entails four attributes, refer to the beautification parameter table for more insights
effectName
Key attributes for beautification, reference the attribute parameter table
effectValue
Setting the attribute intensity, refer to the attribute parameter table
resourcePath
Setting the resource path, refer to the attribute parameter table
extraInfo
Setting other information, refer to the attribute parameter table
Filter, sticker, segmentation.



The configuration of <1> filters and dynamic effect stickers is primarily identical, hence, the filter’s JSON is used for illustration here. Two new fields, downloadPath and resourceUri, have been added.
Field
Description
downloadPath
If your filter material is downloaded from the internet, the configuration here represents the local storage location post-download. This pathway is a relative path ; the full path is the combination of Step One + the path set here
resourceUri
If your material needs to be downloaded via network, configure the network address here, as in the third red box in the image above. However, if your filter material is local, configure the corresponding local address according to the image above.
Makeup



An additional field makeupLutStrength under extraInfo has been included in the Full Style Makeup. This field is used to moderate the intensity of filters in the Full Style Makeup material<5> (configure this if the Full Style Makeup material supports filter intensity modulation). Refer to the beauty parameter table for this field.

TEBeautyKit Method Descriptions

//Asynchronously creating the TEBeautyKit object
public static void create(@NonNull Context context, @NonNull OnInitListener initListener)

//isEnableHighPerformance: Does High Performance Pattern is active?
//After the High Performance Pattern is enabled, the system CPU/GPU resources occupied by Beauty enhancement are less, which reduces phone heating and stutters. It’s more suitable for long-term use on lower-end devices.
//However, please note: after enabling the high performance pattern, the following beauty options will be disabled:
//1.Eye section: Eye width, Eye height, Elimination of eye bags
//2.Eyebrows: angle, distance, height, length, thickness, eyebrow peak
//3. Mouth: Smile Lip
//4. Facial: Slimming (natural, goddess, handsome), tightening lower jaw, wrinkle removal, removing nasolabial folds. It is recommended to use "face shape" to achieve a comprehensive, large-eyed, slimming effect
public static void create(@NonNull Context context, boolean isEnableHighPerformance, @NonNull OnInitListener initListener)

//The constructor of TEBeautyKit used for synchronously creating the TEBeautyKit object
public TEBeautyKit(Context context)

/** * @param context ApplicationContext * @param isEnableHighPerformance Does it enable high-performance pattern? */ public TEBeautyKit(Context context, boolean isEnableHighPerformance)

/** * Set the mute state * * @param isMute true indicates mute */ public void setMute(boolean isMute)

/** * If you are carrying out beauty processing on pictures, you need to invoke this method to set the type of the data source, which could either be a camera data source or a picture data source. * Camera data source: XmagicApi.PROCESS_TYPE_CAMERA_STREAM Picture data source: XmagicApi.PROCESS_TYPE_PICTURE_DATA. * @param type The default type is a video stream. */ public void setBeautyStreamType(int type)

/** * Enable or disable a specific feature * * @param featureName This takes a value from XmagicConstant.FeatureName * @param enable true signifies enabling, false signifies disabling */ public void setFeatureEnableDisable(String featureName, boolean enable)

/** * Perform beautification on the image * * @param bitmap * @param needReset * @return */ public Bitmap process(Bitmap bitmap, boolean needReset)

/** * Process each frame of video/camera data * * @param textureId The id of the texture. This texture requires a texture type of GL_TEXTURE_2D and a pixel texture format of RGBA * @param width Texture width * @param height Texture height * @return Processed texture ID */ public int process(int textureId, int width, int height)

/** * Update beauty properties * * @param paramList */ public void setEffectList(List<TEUIProperty.TESDKParam> paramList)

/** * Updating the beauty attribute * * @param teParam */ public void setEffect(TEUIProperty.TESDKParam teParam)

/** * Enable or disable enhanced pattern * * @param enableEnhancedMode true indicates the activation of the enhanced pattern, false deactivates the enhanced pattern * @return A return value of true indicates a state change has occurred, false indicates no change in state */ public boolean enableEnhancedMode(boolean enableEnhancedMode)

/** * Retrieve the currently active beauty attributes as a string. * Clients can save the exported string locally and call the `setLastParamList` method after creating a TEPanelView object. * @return */ public String exportInUseSDKParam()

/** * Used to restore the sound in stickers * Restore the Gyroscope sensor */ public void onResume()

/** * Used for pausing the audio in stickers * Pause the gyroscope sensor */ public void onPause()

/** * Destroy the beautifying effects * Note: It is essential to invoke this method in the GL thread */ public void onDestroy()

/** * Set event listener, used for listening to Smartphone direction events, for adapter * @param listener Event listener callback */ public void setEventListener(EventListener listener)

/** * SettingsetAIDataListener callback * * @param aiDataListener */ public void setAIDataListener(XmagicApi.XmagicAIDataListener aiDataListener)

/** * Callback function for Setting motion effect tips, used to display the tips on the front-end page. * * @param tipsListener */ public void setTipsListener(XmagicApi.XmagicTipsListener tipsListener)

/** * Intercept the screen on the current texture * * @param callback */ public void exportCurrentTexture(XmagicApi.ExportTextureCallback callback)

/** * Set the anti-clockwise degree of texture rotation. * Primary Function: Used for the SDK's internal rotation of texture, post rotation to a certain degree, faces are upright, enabling in-house SDK to identify faces. * By default, the SDK internally utilizes the sensor to ascertain the required degree of rotation. * * @param orientation Values can only be 0,90,180,270 */ public void setImageOrientation(TEImageOrientation orientation)

/** * Determine if the current device supports this material * * @param motionResPath The path to the material file * @return */ public boolean isDeviceSupport(String motionResPath)

/** * Access the on and off state of the beauty effect * * @return EffectState */ public EffectState getEffectState()

/** * Indicates whether the beautification feature is enabled * * @param effectState ENABLED signifies it's turned on, DISABLED signifies it's turned off */ public void setEffectState(EffectState effectState)

/** * Strategy implementation class for enhancing pattern settings. If not configured, the default implementation will be utilized. * * @param teParamEnhancingStrategy Class for enhancing pattern processing. */ public void setParamEnhancingStrategy(TEParamEnhancingStrategy teParamEnhancingStrategy)



//The following are the static methods

/** * Specifying the directory for beautification resources * * @param resPath */ public static void assignResPath(String resPath)

/** * Unpack resource files from apk's assets to a specified path. First, you need to set the path: {@link #setResPath(String)}. <br> * This should be called once after first install of the App, or after an App update. * Copy xmagic resource from assets to local path. */ public static boolean copyRes(Context context)

/** * Carry out beauty enhancement authorization check * Attention: while using this method, if the callback interface isn't configured, authentication will not be performed (only network download of authentication information will be made), * Therefore, you can refer to the demo not to configure the callback while calling in application, but call this method again before using the TEBeautyKit object (configuring callback interface) for authentication. * @param context Application context * @param licenseKey The licenseKey applied for on the platform * @param licenseUrl The licenseUrl applied for on the platform * @param teLicenseCheckListener Authentication callback interface */ public static void setTELicense(Context context, String licenseUrl, String licenseKey, TELicenseCheck.TELicenseCheckListener teLicenseCheckListener)

TEUIConfig explanation

Alter the panel color
Global modification: After accessing the object through TEUIConfig.getInstance(), you can adjust the panel color by modifying the following fields.
Partial Modification: Using the new TEUIConfig object, adjust the panel color by modifying the following fields, and update the panel style using the TEPanelView.updateUIConfig method.
@ColorInt public int panelBackgroundColor = 0x66000000; //Default background color @ColorInt public int panelDividerColor = 0x19FFFFFF; //Separator color @ColorInt public int panelItemCheckedColor = 0xFF006EFF; //Selected item color @ColorInt public int textColor = 0x99FFFFFF; //Text color @ColorInt public int textCheckedColor = 0xFFFFFFFF; //Selected text color @ColorInt public int seekBarProgressColor = 0xFF006EFF; //Progress bar color
JSON file of the configuration panel
/** * Set the JSON file path for the beauty panel * @param beauty JSON file path for beauty attributes, if not, set to null * @param beautyBody JSON file path for body beauty attributes, if not, set to null * @param lut JSON file path for filter attributes, if not, set to null * @param motion JSON file path for dynamic sticker attributes, if not, set to null * @param makeup JSON file path for complete makeup style attributes, if not, set to null * @param segmentation JSON file path for segmentation attributes, if not, set to null */ public void setTEPanelViewRes(String beauty, String beautyBody, String lut, String motion, String makeup, String segmentation)
Updating Panel Language
//When the client program detects a modification to the system's font, it may invoke this function. At present, the panel only supports Chinese and English.
public void setSystemLocal(Locale locale)

Description of TEPanelView

/** * This is utilized for setting the previously used beauty effect data, with the intent to revert the beauty panel back to its prior state. * Note: This method needs to be used prior to the {@link #showView(TEPanelViewCallback tePanelViewCallback)}} method. * * @param lastParamList The beauty data, which is accessible through the {@link TEBeautyKit#exportInUseSDKParam()} ()}} method, and then stored, to be passed as a string when starting the beauty feature the next time. */ void setLastParamList(String lastParamList); /** * Present the beauty panel * @param tePanelViewCallback The interface callback for panel events */ void showView(TEPanelViewCallback tePanelViewCallback); /** * Synchronizes with TEBeautyKit object, which the beauty panel calls directly to set attributes when a user selects an item. * @param beautyKit The TEBeautyKit object */ void setupWithTEBeautyKit(TEBeautyKit beautyKit);

/** * Select Self-Definition split or green screen item from the Settings, because the green screen or Self-Definition split button jumps to the gallery after clicking, * Only after the user has selected a picture or video, the corresponding item can be selected. If the user cancels the operation during this process, the corresponding item cannot be selected * * @param uiProperty */ void validatePanelViewItem(TEUIProperty uiProperty);

/** * Configuring the UI of the current panel * @param uiConfig */ void updateUIConfig(TEUIConfig uiConfig);