一、跑通 Demo
下载 Demo 工程，修改 demo/lib 下的 main.dart 文件，在此文件中添加你的 licenseUrl 和 licenseKey。TRTC 中使用美颜的示例代码主要在 demo/lib/page/trtc_page.dart 和 demo/lib/main.dart 中。
AndroidiOS1. 在 demo/app 下找到 build.gradle 文件，打开文件，将 applicationId 的值修改为你申请 license 信息时填写的包名。2. 在 demo/lib 下执行 flutter pub get 。3. 使用 Android Studio 打开 demo 工程并运行。1. 在 demo 下执行 flutter pub get。2. 在 demo/ios 目录下执行 pod install。3. 使用 Xcode 工具打开 Runner.xcworkspace。4. 修改工程的 bundle ID（需要和申请 license 时填写的 bundle ID 一致）。
二、方式1：
远程依赖，在你工程的 pubspec.yaml 文件中添加如下引用：
tencent_effect_flutter: git: url: https://github.com/Tencent-RTC/TencentEffect_Flutter
三、方式2：
本地依赖，从 tencent_effect_flutter 下载最新版本的 tencent_effect_flutter，然后把文件夹 android、ios、lib 和文件 pubspec.yaml、tencent_effect_flutter.iml 添加到工程目录下，然后在工程的 pubspec.yaml 文件中添加如下引用：（可参考 demo）
tencent_effect_flutter: path: ../
执行如下命令
flutter pub get
四、方式3：
执行如下命令
flutter pub add tencent_effect_flutter
五、原生端集成
AndroidiOS
1. 更换套餐（tencent_effect_flutter 中默认集成的是S1-07的套餐，如果和你的套餐不一样，可以通过下边方式更换套餐）
4.2.0及之后版本在你 Flutter 工程的 pubspec.yaml 文件中添加如下代码进行套餐更改，默认是S1-07，具体位置可以参考 demo。TencentEffect: te_sub_spec: 'S1-07' // 如果你使用的是S1-04套餐，那这里就写S1-044.2.0之前版本在 你的工程中找到 app 模块下的 build.gradle 文件，添加你对应套餐的 maven 引用地址，例如你选择的是 S1-04套餐，则添加如下：dependencies { implementation 'com.tencent.mediacloud:TencentEffect_S1-04:latest.release'}各套餐对应的 maven 地址，请参见 文档，SDK 的最新版本号可以在 版本历史 中查看。
2. 添加测试素材
在你工程下的 android/app 模块下找到 src/main/assets 文件夹，将 demo 工程中 demo/android/app/src/main/assets 中的 lut 和 MotionRes 复制到你工程的 android/app/ src/main/assets 中，如果你的工程没有 assets 文件夹可以手动创建一个。
3. 在 app 模块下找到 AndroidManifest.xml 文件，在 application 表内添加如下标签：
<uses-native-library android:name="libOpenCL.so" android:required="false" /> //true 表示libOpenCL是当前app必需的。如果没有此库，系统将不允许app安装 //false 表示libOpenCL不是当前app必需的。无论有没有此库，都可以正常安装app。如果设备有此库，美颜特效SDK里的GAN类型特效能正常生效（例如童话脸、国漫脸）。如果设备没有此库，GAN类型不会生效，但也不影响SDK内其他功能的使用。 //关于uses-native-library的说明，请参考Android 页面介绍：https://developer.android.com/guide/topics/manifest/uses-native-library-element
添加后如下：
4. 混淆配置
·如果你在打 release 包时，启用了编译优化（把 minifyEnabled 设置为 true），会裁掉一些未在 java 层调用的代码，而这些代码有可能会被 native 层调用，从而引起 no xxx method 的异常。
·如果你启用了这样的编译优化，那就要添加这些 keep 规则，防止 xmagic 的代码被裁掉：
-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.** { *;}-keep class com.tencent.effect.** { *;}
1. 更换套餐（tencent_effect_flutter 中默认集成的是S1-07的套餐，如果和你的套餐不一样，可以通过下边方式更换套餐）4.2.0及之后版本在你 Flutter 工程的 pubspec.yaml 文件中添加如下代码进行切换套餐，默认是S1-07，具体位置可以参考 demo。TencentEffect: te_sub_spec: 'S1-07' // 如果你使用的是S1-04套餐，那这里就写S1-044.2.0之前版本1. 美颜 Flutter SDK 的依赖方式需要修改为本地依赖2. 在美颜 Flutter SDK 下找到 ios/tencent_effect_flutter.podspec 文件，打开找到 TencentEffect_All 修改为你需要的套餐，后边的版本号也可以修改为你需要的版本号。3. 在你工程的 ios 目录下执行 pod update 命令即可。2. 添加测试素材将 demo 工程中 ios/Runner 目录下的 xmagic 文件夹复制到你工程中 ios/Runner 目录下，添加后如下：
六、1. 与 RTC 关联
与tencent_rtc_sdk关联与tencent_trtc_cloud关联AndroidiOSFlutterActivity 的 onCreate 方法中添加如下代码：JavaKotlinTRTCPlugin.setBeautyProcesserFactory(new XmagicProcesserFactory());TRTCPlugin.setBeautyProcesserFactory(XmagicProcesserFactory())如下：JavaKotlinimport android.os.Bundle;import androidx.annotation.Nullable;import com.tencent.trtcplugin.TRTCPlugin;import com.tencent.effect.tencent_effect_flutter.XmagicProcesserFactory;import io.flutter.embedding.android.FlutterActivity;public class MainActivity extends FlutterActivity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); TRTCPlugin.setBeautyProcesserFactory(new XmagicProcesserFactory()); }}import android.os.Bundleimport android.os.PersistableBundleimport com.tencent.trtcplugin.TRTCPluginimport io.flutter.embedding.android.FlutterActivityimport com.tencent.effect.tencent_effect_flutter.XmagicProcesserFactoryclass MainActivity: FlutterActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) TRTCPlugin.setBeautyProcesserFactory(XmagicProcesserFactory()) }}在 ios/Runner 目录下 AppDelegate 文件中的 didFinishLaunchingWithOptions 方法中添加如下代码：SwiftObject-Clet instance = XmagicProcesserFactory()TencentRTCCloud.setBeautyProcesserFactory(factory: instance)XmagicProcesserFactory *instance = [[XmagicProcesserFactory alloc] init];[TencentRTCCloud setBeautyProcesserFactoryWithFactory:instance];如下：SwiftObject-Cimport UIKitimport Flutterimport tencent_rtc_sdkimport tencent_effect_flutter@UIApplicationMain@objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -> Bool { GeneratedPluginRegistrant.register(with: self) let instance = XmagicProcesserFactory() TencentRTCCloud.setBeautyProcesserFactory(factory: instance) return super.application(application, didFinishLaunchingWithOptions: launchOptions) }}#import "AppDelegate.h"#import "GeneratedPluginRegistrant.h"@import tencent_effect_flutter;@import tencent_rtc_sdk;@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [GeneratedPluginRegistrant registerWithRegistry:self]; XmagicProcesserFactory *instance = [[XmagicProcesserFactory alloc] init]; [TencentRTCCloud setBeautyProcesserFactoryWithFactory:instance]; return [super application:application didFinishLaunchingWithOptions:launchOptions];}@endAndroidiOS在应用的 application 类的 oncreate 方法（或 FlutterActivity 的 onCreate 方法）中添加如下代码：import android.os.Bundle;import androidx.annotation.Nullable;import com.tencent.effect.tencent_effect_flutter.XmagicProcesserFactory;import io.flutter.embedding.android.FlutterActivity;import com.tencent.trtcplugin.TRTCCloudPlugin;public class MainActivity extends FlutterActivity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); TRTCCloudPlugin.register(new XmagicProcesserFactory()); }}在应用的 AppDelegate 类中的 didFinishLaunchingWithOptions 方法中添加如下代码：#import "AppDelegate.h"#import "GeneratedPluginRegistrant.h"@import tencent_effect_flutter;@import tencent_trtc_cloud;@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [GeneratedPluginRegistrant registerWithRegistry:self]; XmagicProcesserFactory *instance = [[XmagicProcesserFactory alloc] init]; [TencentTRTCCloud registerWithCustomBeautyProcesserFactory:instance]; return [super application:application didFinishLaunchingWithOptions:launchOptions];}@end
七、2. 调用资源初始化接口
v0.3.5.0及之后v0.3.1.1版本及之前void _initSettings(InitXmagicCallBack callBack) async { String resourceDir = await ResPathManager.getResManager().getResPath(); TXLog.printlog('$TAG method is _initResource ,xmagic resource dir is $resourceDir'); TencentEffectApi.getApi()?.setResourcePath(resourceDir); /// 复制资源只需要复制一次，在当前版本中如果成功复制了一次，以后就不需要再复制资源。 /// 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 _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('文件路径为：$dir'); TencentEffectApi.getApi()?.initXmagic(dir,(reslut) { _isInitResource = reslut; callBack.call(reslut); if (!reslut) { Fluttertoast.showToast(msg: "初始化资源失败"); } });
八、3. 进行美颜授权
TencentEffectApi.getApi()?.setLicense(licenseKey, licenseUrl, (errorCode, msg) { TXLog.printlog("打印鉴权结果 errorCode = $errorCode msg = $msg"); if (errorCode == 0) { //鉴权成功 } });
九、4. 开启/关闭美颜
tencent_rtc_sdktencent_trtc_cloud///开启美颜操作/// 设置true 表示开启美颜，设置false 表示关闭美颜_enableCustomBeautyByNative(bool open) { TencentEffectApi.getApi()?.enableBeauty(open);}///开启美颜操作/// 设置true 表示开启美颜，设置false 表示关闭美颜 var enableCustomVideo = await trtcCloud.enableCustomVideoProcess(open);
注意：美颜开启需要在相机开启之后调用，美颜关闭需要在关闭相机之前调用，开启和关闭是成对使用。
十、5. 设置美颜属性
v0.3.5.0及之后v0.3.1.1版本及之前具体美颜属性请参考美颜属性表TencentEffectApi.getApi()?.setEffect(sdkParam.effectName!,sdkParam.effectValue, sdkParam.resourcePath, sdkParam.extraInfo)TencentEffectApi.getApi()?.updateProperty(_xmagicProperty!);///_xmagicProperty 可通过 BeautyDataManager.getInstance().getAllPannelData();获取所有的属性，需要使用美颜属性的时候可通过updateProperty方法设置属性。
十一、6. 设置其他属性
·暂停美颜音效
TencentEffectApi.getApi()?.onPause();
·恢复美颜音效
TencentEffectApi.getApi()?.onResume();
·监听美颜事件
TencentEffectApi.getApi() ?.setOnCreateXmagicApiErrorListener((errorMsg, code) { TXLog.printlog("创建美颜对象出现错误 errorMsg = $errorMsg , code = $code"); }); ///需要在创建美颜之前进行设置
·设置人脸、手势、身体检测状态回调
TencentEffectApi.getApi()?.setAIDataListener(XmagicAIDataListenerImp());
·设置动效提示语回调函数
TencentEffectApi.getApi()?.setTipsListener(XmagicTipsListenerImp());
·设置人脸点位信息等数据回调（S1-05 和 S1-06 套餐才会有回调）
TencentEffectApi.getApi()?.setYTDataListener((data) { TXLog.printlog("setYTDataListener $data"); });
·移除所有回调。在页面销毁的时候需要移除掉所有的回调：
TencentEffectApi.getApi()?.setOnCreateXmagicApiErrorListener(null); TencentEffectApi.getApi()?.setAIDataListener(null); TencentEffectApi.getApi()?.setYTDataListener(null); TencentEffectApi.getApi()?.setTipsListener(null);
注意：说明：
注意：接口详细可参考 API 文档，其他可参考 Demo 工程。
十二、7. 添加美颜面板
美颜 SDK 默认提供了一版 UI 面板，如果你使用可以直接在代码中使用。具体使用可以参考 demo，下边为简易步骤。
十三、7.1 设置面板使用的 JSON
void initPanelViewConfig() { String panelDir = "assets/beauty_panel/"; String jsonFileSuffix =".json"; TEResConfig.getConfig().defaultPanelDataList.clear(); //这里是多语言适配的示例代码，判断出当前语言环境，加载对应语言的json文件，面板中默认的json中只支持简体中文和英文，如果现在需要支持繁体中文，咱们就可以这样操作 //在beauty_panel下创建一个zt_hant 的文件夹，然后复制现有的json文件到此目录，然后将disPlayName的值修改为繁体中文，在需要使用的时候加载这个json文件即可。 // 注意：这里只是对面板json文件的多语言适配，还有库中使用的文字适配可以参考 demo/lib/languages/TEPanelLocalizationsZhTW.dart 文件 // 多语言实现可参考：tencent-effect-flutter/docs/MULTI_LANGUAGE_GUIDE_.md // 判断当前设备语言环境是否为繁体中文 Locale currentLocale = PlatformDispatcher.instance.locale; bool isTraditionalChinese = currentLocale.languageCode == 'zh' && (currentLocale.countryCode == 'TW' || currentLocale.countryCode == 'HK' || currentLocale.countryCode == 'MO' || currentLocale.scriptCode == 'Hant'); if (isTraditionalChinese) { panelDir = "assets/beauty_panel/zh_hant/"; jsonFileSuffix = "_zh_hant.json"; } TEResConfig.getConfig() ..setBeautyTemplateRes("${panelDir}beauty_template${jsonFileSuffix}") ..setBeautyRes("${panelDir}beauty${jsonFileSuffix}") ..setBeautyRes("${panelDir}beauty_image${jsonFileSuffix}") ..setBeautyRes("${panelDir}beauty_makeup${jsonFileSuffix}") ..setBeautyRes("${panelDir}beauty_shape${jsonFileSuffix}") ..setBeautyBodyRes("${panelDir}beauty_body${jsonFileSuffix}") ..setLutRes("${panelDir}lut${jsonFileSuffix}") ..setLightMakeupRes("${panelDir}light_makeup${jsonFileSuffix}") ..setMakeUpRes("${panelDir}makeup${jsonFileSuffix}") ..setMotionRes("${panelDir}motion_2d${jsonFileSuffix}") ..setMotionRes("${panelDir}motion_3d${jsonFileSuffix}") ..setMotionRes("${panelDir}motion_gesture${jsonFileSuffix}") ..setSegmentationRes("${panelDir}segmentation${jsonFileSuffix}"); }
十四、7.2 添加面板代码 TEBeautyPanelView
Expanded( child: TEBeautyPanelView( beautyPanelViewCallBack, null, beautyPanelViewCallBack.panelController, ), )
十五、8. 配置美颜面板
面板上的属性通过 JSON 文件进行配置，JSON 文件位置如下。可参见 JSON 文件说明。