Docs Overview/
Flutter/

Flutter

Step 1. Download and integrate the Tencent Effect SDK

1. Download the corresponding SDK for the package you purchased.
2. Add the resource files to your own project:
Android
iOS
1. Open build.gradle in app and add the Maven address for your package. For example, if you purchased S1 - 04, add the following:
dependencies {
   implementation 'com.tencent.mediacloud:TencentEffect_S1-04:latest.release'
}
You can find the Maven addresses of different packages on this page.
2. Find the src/main/assets folder in app (if there isn't this folder, create one). Check if there is a MotionRes folder. Copy it to ../src/main/assets.
3. Open AndroidManifest.xml in app and add the following tag to application.
<uses-native-library
            android:name="libOpenCL.so"
            android:required="false" />
        //true indicates that libOpenCL is essential for the current app. Without this library, the system will not allow the app to be installed.
        //false indicates that libOpenCL is not essential for the current app. The app can be installed normally with or without this library. If the device has this library, the GAN-type special effects in the Tencent Effects SDK (e.g., fairy tale face, comics face) will work normally. If the device does not have this library, the GAN-type effects won't work, but it will not affect the use of other features within the SDK.
        //For information about uses-native-library, please refer to the Android official website: https://developer.android.com/guide/topics/manifest/uses-nati.
It will look like this:



4. Obfuscation configuration.
If you enable optimization (by setting minifyEnabled to true) when building your application, some code that is not called at the Java layer will be removed. However, such code may be called at the native layer, causing a no xxx method error.
To fix the issue, add the following keep rules to prevent the code from being removed:
-keep class com.tencent.xmagic.** { *;}
-keep class org.light.** { *;}
-keep class org.libpag.** { *;}
-keep class org.extra.** { *;}
-keep class com.gyailib.**{ *;}
-keep class com.tencent.cloud.iai.lib.** { *;}
-keep class com.tencent.beacon.** { *;}
-keep class com.tencent.qimei.** { *;}
-keep class androidx.exifinterface.** { *;}
Add effect resources to your project (your resources may differ from those in the screenshot):




Step 2. Reference the Flutter SDK

Reference from GitHub: Add the following reference in the pubspec.yaml file of your project:
  tencent_effect_flutter:
       git:
         url: https://github.com/Tencent-RTC/TencentEffect_Flutter
Reference locally: Download the latest edition of the Tencent Effect Flutter SDK. Copy the android ios, and lib folders and the pubspec.yaml and tencent_effect_flutter.iml files to your project directory, and add the following code in the pubspec.yaml file of your project.
tencent_effect_flutter:
    path: ../
tencent_effect_flutter only serves as a bridge. It is Xmagic that implements effects. The latest edition of Xmagic is used by default.
You can use the following methods to update your SDK:
Android
iOS
Execute flutter pub upgrade in your project directory or click Pub upgrade in the top right of the subspec.yaml page.
Execute flutter pub upgrade in your project directory and then run pod update in the ios directory.

Step 3. Bind TRTC and Tencent Effect

Android
iOS
Add the following code to oncreate of the application class (or onCreate of FlutterActivity):
TRTCCloudPlugin.register(new XmagicProcesserFactory());
Add the following code to didFinishLaunchingWithOptions of the AppDelegate class:
XmagicProcesserFactory *instance = [[XmagicProcesserFactory alloc] init];
[TencentTRTCCloud registerWithCustomBeautyProcesserFactory:instance];
It will look like this:




Step 4. Call the resource initialization API

v0.3.5.0
V0.3.1.1 and earlier
void _initSettings(InitXmagicCallBack callBack) async {
  _setResourcePath();
  /// Copying the resource only needs to be done once. Once it has been successfully copied in the current version, there is no need to copy it again in future versions.
  if (await isCopiedRes()) {
    callBack.call(true);
    return;
  } else {
    _copyRes(callBack);
  }
}

void _setResourcePath() async {
  String resourceDir = await ResPathManager.getResManager().getResPath();
  TXLog.printlog(
      '$TAG method is _initResource ,xmagic resource dir is $resourceDir');
  TencentEffectApi.getApi()?.setResourcePath(resourceDir);
}

void _copyRes(InitXmagicCallBack callBack) {
  _showDialog(context);
  TencentEffectApi.getApi()?.initXmagic((result) {
    if (result) {
      saveResCopied();
    }
    _dismissDialog(context);
    callBack.call(result);
    if (!result) {
      Fluttertoast.showToast(msg: "initialization failed");
    }
  });
}
String dir =  await BeautyDataManager.getInstance().getResDir();
 TXLog.printlog('The file path is designated as: $dir');
 TencentEffectApi.getApi()?.initXmagic(dir,(reslut) {
     _isInitResource = reslut;
     callBack.call(reslut);
     if (!reslut) {
         Fluttertoast.showToast(msg: "Failed to initialize resources");
     }
 });

Step 5. Set the license

TencentEffectApi.getApi()?.setLicense(licenseKey, licenseUrl,
           (errorCode, msg) {
         TXLog.printlog("Print the authentication result errorCode = $errorCode   msg = $msg");
         if (errorCode == 0) {
            // Authentication succeeded
         }
       });

Step 6. Enable effects

/// Enable effects
 var enableCustomVideo = await trtcCloud.enableCustomVideoProcess(open);

Step 7. Set effect properties

V0.3.5.0
V0.3.1.1 and earlier
TencentEffectApi.getApi()?.setEffect(sdkParam.effectName!,
    sdkParam.effectValue, sdkParam.resourcePath, sdkParam.extraInfo)
TencentEffectApi.getApi()?.updateProperty(_xmagicProperty!);
/// You can call `BeautyDataManager.getInstance().getAllPannelData()` to get all the properties and call `updateProperty` to set properties.

Step 8. Set other properties

Pause the audio of an effect
 TencentEffectApi.getApi()?.onPause();
Resume the audio of an effect
TencentEffectApi.getApi()?.onResume();
Listen for effect events
TencentEffectApi.getApi()
     ?.setOnCreateXmagicApiErrorListener((errorMsg, code) {
       TXLog.printlog("Error creating an effect object errorMsg = $errorMsg , code = $code");
 });   ///You need to set the listener before creating an effect object
Configure the callback of face, gesture, and body detection results
TencentEffectApi.getApi()?.setAIDataListener(XmagicAIDataListenerImp());
Configure the callback for animated effect hints
TencentEffectApi.getApi()?.setTipsListener(XmagicTipsListenerImp());
Configure the callback of facial keypoints and other data (only available in S1-05 and S1-06)
TencentEffectApi.getApi()?.setYTDataListener((data) {
   TXLog.printlog("setYTDataListener  $data");
 });
Remove all callbacks. You need to remove all callbacks when terminating the page:
 TencentEffectApi.getApi()?.setOnCreateXmagicApiErrorListener(null);
 TencentEffectApi.getApi()?.setAIDataListener(null);
 TencentEffectApi.getApi()?.setYTDataListener(null);
 TencentEffectApi.getApi()?.setTipsListener(null);
Note:
For more information on the APIs, see the API documentation. For others, refer to the demo project.

Step 9. Add data to and remove data from the effect panel

Add effect resources:

Add your resource file to the corresponding folder as described in step 1. For example, to add a 2D animated effect resource:
Android
iOS
You should put the resource in android/xmagic/src.mian/assets/MotionRes/2dMotionRes of your project:



Also add the resource to ios/Runner/xmagic/2dMotionRes.bundle of your project.




Beauty Panel Configuration:

V0.3.5.0 and later
V0.3.1.1 and earlier
The demo provides a simple beauty panel UI. The panel's properties are configured through JSON files, located as shown in the following diagram. The implementation of the panel can be referred from the demo project.



In the classes BeautyDataManager, BeautyPropertyProducer, BeautyPropertyProducerAndroid, and BeautyPropertyProducerIOS, you can independently configure the beauty panel data.

Delete Beauty Resources

For some licenses that do not authorize certain beauty and body shaping features, these features should not be displayed on the beauty panel. You need to remove these features from the beauty panel data configuration. For example, to delete the Lipstick Effect, remove the following code from the getBeautyData method in both the BeautyPropertyProducerAndroid and BeautyPropertyProducerIOS classes.