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:
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'}
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-libraryandroid: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.** { *;}
1. Add effect resources to your project (your resources may differ from those in the screenshot):
2. Copy the four classes in
demo/lib/producer
– BeautyDataManager
, BeautyPropertyProducer
, BeautyPropertyProducerAndroid
, and BeautyPropertyProducerIOS
– to your Flutter project. They are used to configure effect resources and display effect options in the effect panel.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:
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
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:
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"); } }); }
V0.3.1.1 and earlier:
String dir = await BeautyDataManager.getInstance().getResDir();TXLog.printlog('File path: $dir');TencentEffectApi.getApi()?.initXmagic(dir,(reslut) {_isInitResource = reslut;callBack.call(reslut);if (!reslut) {Fluttertoast.showToast(msg: "Failed to initialize the 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 effectsvar enableCustomVideo = await trtcCloud.enableCustomVideoProcess(open);
Step 7. Set effect properties
V0.3.5.0:
TencentEffectApi.getApi()?.setEffect(sdkParam.effectName!, sdkParam.effectValue, sdkParam.resourcePath, sdkParam.extraInfo)
V0.3.1.1 and earlier:
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, do the following:
1. Put the resources in the
android/xmagic/src.mian/assets/MotionRes/2dMotionRes
directory of the project:
2. Also add the resource to
ios/Runner/xmagic/2dMotionRes.bundle
.
beauty panel config:
V0.3.5.0
The properties on the beauty panel are configured through JSON files. The location of the JSON files is as shown below.
V0.3.1.1 and earlier
You can customize effect panel data in the
BeautyDataManager
, BeautyPropertyProducer
, BeautyPropertyProducerAndroid
, and BeautyPropertyProducerIOS
classes.Delete effect resources:
Your license may not support some beautification or body retouch effects, which you can delete from the panel.
For example, to delete lipstick effects, delete the code below from
getBeautyData
of BeautyPropertyProducerAndroid
and BeautyPropertyProducerIOS
.
- Step 1. Download and integrate the Tencent Effect SDK
- Step 2. Reference the Flutter SDK
- Step 3. Bind TRTC and Tencent Effect
- Step 4. Call the resource initialization API
- Step 5. Set the license
- Step 6. Enable effects
- Step 7. Set effect properties
- Step 8. Set other properties
- Step 9. Add data to and remove data from the effect panel