ライブ配信 SDK (MLVB) との連携

BeautyAR Flutter SDK requires dependence on the BeautyAR SDK of the Android/iOS end. Through the Plugins provided by Flutter, the native end features can be exposed to the Flutter client. Therefore, when integrating the beauty filter features, you need to manually integrate the SDK of the native end.
Running Demo
﻿Download the demo project, modify the demo/lib under the main.dart file, add your licenseUrl and licenseKey in this file. The sample code for using beauty features in MLVB is primarily located in demo/lib/page/live_page.dart and demo/lib/main.dart.
Android
iOS
1. In demo/app, find the build.gradle file, open the file, and change the value of applicationId to the package name you used when applying for the license.
2. In demo/lib, execute flutter pub get.
3. Use Android Studio to open the demo project and run it.
1. In the demo directory, execute flutter pub get.
2. In the demo/ios directory, execute pod install.
3. Use Xcode to open Runner.xcworkspace.
4. Change the project's bundle ID (it needs to be the same as the bundle ID you provided when applying for the license).
SDK Integration
Flutter Integration:
Method 1:
Remote Dependency: Add the following reference in the pubspec.yaml file of your project:
  tencent_effect_flutter:
   git:
     url: https://github.com/Tencent-RTC/TencentEffect_Flutter
Method 2:
Local dependencies: Download the latest version of tencent_effect_flutter from tencent_effect_flutter, then add the folders android, ios, lib, and the files pubspec.yaml and tencent_effect_flutter.iml to your project directory. Next, include the following reference in your project's pubspec.yaml file: (Refer to the demo for guidance.)
tencent_effect_flutter:
    path: ../
Execute the following command:
flutter pub get
Method 3:
Execute the following command:
flutter pub add tencent_effect_flutter
Native Platform Integration
Android
iOS
1. Changing the Package (The default package integrated in `tencent_effect_flutter` is S1-07. If your package differs, you can change it using the method below.)
Version 4.2.0 and later
To modify the package in your Flutter project, add the following code to your pubspec.yaml file. By default, the package is set to S1-07. For reference, you can check the specific location in the demo.
TencentEffect:
  te_sub_spec: 'S1-07'   // If you're using the S1-04 plan, then just write S1-04 here.
Versions before 4.2.0
In your project, locate the build.gradle file within the app module and add the Maven repository URL corresponding to your selected package. For instance, if you have chosen the S1-04 package, include the following:
dependencies {
   implementation 'com.tencent.mediacloud:TencentEffect_S1-04:latest.release'
}
For the Maven addresses corresponding to each package, please refer to the documentation. The latest version number of the SDK can be found in the Version History.
2. Add Test Material
Navigate to the src/main/assets folder within the android/app module of your project. Copy the lut and MotionRes directories from the demo project's demo/android/app/src/main/assets into the corresponding android/app/src/main/assets directory of your own project. If the assets folder does not exist in your project, you may create it manually.
3. Navigate to the AndroidManifest.xml file within the app module, and add the following tag inside the application section:
   <uses-native-library
            android:name="libOpenCL.so"
            android:required="false" />
        
    //true means libOpenCL is required for the current app. Without this library, the system won't allow the app to be installed.
    //false means libOpenCL is not required for the current app. The app can be installed normally whether this library exists or not. If the device has this library, GAN-type effects in the beauty effects SDK will work properly (like Fairy Face, Comic Face). If the device doesn't have this library, GAN effects won't work, but it won't affect other features in the SDK.
    //For more info about uses-native-library, check out the official Android documentation: https://developer.android.com/guide/topics/manifest/uses-native-library-element
After addition, the result is as shown in the following image:
﻿
﻿
﻿
4. Obfuscation Configuration
When building a release package, if compilation optimization is enabled (by setting minifyEnabled to true), certain code that is not invoked at the Java layer may be removed. However, this code could potentially be called by the native layer, leading to exceptions such as no xxx method.
If you enable such compilation optimizations, you must add these keep rules to prevent the xmagic code from being stripped.
-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. Changing Plans (The default plan integrated in tencent_effect_flutter is S1-07. If this does not match your plan, you can change it using the method below.)
Version 4.2.0 and later
To switch packages in your Flutter project, add the following code to your pubspec.yaml file. By default, the package is set to S1-07. For specific placement, you can refer to the demo.
TencentEffect:
  te_sub_spec: 'S1-07'   // If you are using the S1-04 plan, then write S1-04 here
Versions before 4.2.0
1. The dependency method for the Beauty Flutter SDK needs to be changed to local dependency.
2. Locate the ios/tencent_effect_flutter.podspec file within the Beauty Flutter SDK, open it, and modify TencentEffect_All to the desired package. The version number can also be adjusted as needed.
3. Execute the pod update command in the ios directory of your project.
2. Add Test Material
Copy the xmagic folder from the ios/Runner directory in the demo project to the ios/Runner directory in your own project. After adding it, the structure should appear as shown in the following image:
﻿
﻿
﻿
Note：
The materials copied from the demo project are test materials. For official materials, please contact our staff after purchasing a package to obtain them and re-add them accordingly.
SDK usage
1. Associated with MLVB
Android
iOS
Add the following code in the onCreate method of the application class (or the onCreate method of FlutterActivity):
TXLivePluginManager.register(new XmagicProcesserFactory());
Add the following code in the didFinishLaunchingWithOptions method of the AppDelegate class of your application:
XmagicProcesserFactory *instance = [[XmagicProcesserFactory alloc] init];
[TXLivePluginManager registerWithCustomBeautyProcesserFactory:instance];
After adding, it looks as follows:
﻿
﻿
﻿
2. Call the resource initialization API
v0.3.5.0 and later
Before 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);
  /// Resource copying only needs to be done once. In the current version, if copied successfully once, there is no need to copy the resources again.
  /// 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('The file path: $dir');
 TencentEffectApi.getApi()?.initXmagic(dir,(reslut) {
     _isInitResource = reslut;
     callBack.call(reslut);
     if (!reslut) {
         Fluttertoast.showToast(msg: "Failed to initialize the resources");
     }
 });
3. Perform beauty authorization
TencentEffectApi.getApi()?.setLicense(licenseKey, licenseUrl,
           (errorCode, msg) {
         TXLog.printlog("Print the authentication result errorCode = $errorCode   msg = $msg");
         if (errorCode == 0) {
            // Authentication succeeded
         }
       });
4. Enable/Disable Beauty Filter
/// Enable beauty filter operation
/// Setting it to true enables the beauty filter, while setting it to false disables the beauty filter.
 var enableCustomVideo = await _livePusher.enableCustomVideoProcess(open);
Note:
When enabling the beauty filter on the page, you must disable the beauty filter first before closing the camera. The enable and disable operations should be paired to ensure proper functionality.
5. Set Beauty Attributes
v0.3.5.0 and later
Before v0.3.1.1
For specific beauty attributes, refer to Effect Parameters.
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.
6. Set other properties
Pause Beauty Sound Effects
 TencentEffectApi.getApi()?.onPause();  
Resume Beauty Sound Effects
TencentEffectApi.getApi()?.onResume();
Monitor Beauty Events
TencentEffectApi.getApi()
     ?.setOnCreateXmagicApiErrorListener((errorMsg, code) {
       TXLog.printlog("Error creating an effect object errorMsg = $errorMsg , code = $code");
 });   /// Needs to be set before creating the beauty filter
Set Callback for Face, Gesture, and Body Detection Status
TencentEffectApi.getApi()?.setAIDataListener(XmagicAIDataListenerImp());
Set Callback Function for Dynamic Prompt Messages
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 API Documentation (Flutter). For others, refer to the Demo Project.
7. Adding Beauty Filters Panel
The Beauty SDK provides a default UI panel out of the box, which you can directly integrate into your code. For detailed implementation, please refer to the demo. Below are simplified steps for your reference.
7.1 The JSON configuration panel employs
void initPanelViewConfig() {
    String panelDir = "assets/beauty_panel/";
    String jsonFileSuffix =".json";
    TEResConfig.getConfig().defaultPanelDataList.clear();
﻿
    
    // Here’s an example of multilingual adaptation. It checks the current language environment and loads the corresponding language JSON file. By default, the panel’s JSON only supports Simplified Chinese and English. If we want to support Traditional Chinese, here’s how we can do it:
    // Create a folder named zt_hant under beauty_panel, then copy the existing JSON files into this folder, and change the disPlayName values to Traditional Chinese. When needed, just load this JSON file.
    // Note: This only adapts the panel JSON files for multiple languages. For text used in the library, you can check demo/lib/languages/TEPanelLocalizationsZhTW.dart.
    // For multilingual implementation, see: tencent-effect-flutter/docs/MULTI_LANGUAGE_GUIDE_.md
﻿
    // Check if the current device language environment is Traditional Chinese
    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 Add Panel Code TEBeautyPanelView
Expanded(
              child: TEBeautyPanelView(
                beautyPanelViewCallBack,
                null,
                beautyPanelViewCallBack.panelController,
              ),
            )
8. Configuring the Beauty Panel
The panel attributes are configured through a JSON file, with the file location illustrated in the diagram below. Please refer to JSON File Description.
﻿