💭

Flutterでフェイスフィルターアプリを構築するための最も簡単なステップ

2025/05/17に公開

こんにちは、皆さん。この記事を共有できることをとても嬉しく思います。

この記事を読み終わる頃には、FlutterとTRTC Beauty AR SDKを使ってゼロからフェイスフィルターアプリを開発できるようになります。ARスタンプ、フェイスフィルター、バーチャルメイク、顔・ジェスチャー認識などを実際に試してみて、お好みのスペシャルエフェクトを自由にカスタマイズしてみてください。

Step 1: Flutterプロジェクトの新規作成

TRTCコンソール > 関連サービス にログインし、Get Started をクリックします。

Mobile を選択し、必要に応じてApp Name、Package Name、Bundle IDを入力します。お試しになりたい機能として、All Beauty Features, Virtual Background, Face Recognition, Gesture Recognition を選択し、Confirm をクリックしてください。

アクティベーション完了後、現在のページで情報を確認し、以下の Integration Guide に従って統合を進めます。License Url と License Keyはインテグレーションガイドで使用します。

Beauty Flutter SDKはAndroid/iOS向けBeauty SDKに依存します。Flutterが提供するPluginsを通じてネイティブ機能をFlutterクライアントに公開する仕組みのため、ビューティフィルター機能を統合する際は、ネイティブSDKの手動統合が必要です。

Step 2: デモの実行

デモプロジェクトをダウンロードし、demo/lib の main.dartファイルを修正して、licenseUrl と licenseKey を追加してください。TRTCにおけるビューティ機能の使用例コードは、主に demo/lib/page/trtc_page.dart と demo/lib/main.dart に含まれています。

Androidの場合

demo/app フォルダ内の build.gradle ファイルを開き、applicationId の値をライセンス申請時に使用した Package Name に変更します。
demo/lib ディレクトリで flutter pub get を実行します。
Android Studio でデモプロジェクトを開き、実行してください。

Step 3: SDKの統合

appモジュールの build.gradle ファイルを開き、選択したパッケージの Maven レポジトリURLを追加します。例えば S1-07 パッケージを選択した場合、以下のように設定します:

dependencies {
   implementation 'com.tencent.mediacloud:TencentEffect_S1-07:latest.release'
}

各パッケージに対応するMaven URLはドキュメントをご参考ください。 SDKの最新バージョン番号はRelease Historyでご確認いただけます。

プロジェクト内の android/app モジュールにある src/main/assets フォルダを探し、デモプロジェクトの demo/android/app/src/main/assets/lut と MotionRes フォルダを、ご自身のプロジェクトの android/app/src/main/assets にコピーします。もしassetsフォルダが存在しない場合は手動で作成してください。
Android版のTencent Effect SDKが3.9未満を使用している場合、appモジュールにある AndroidManifest.xml ファイルを開き、applicationセクションに以下のTagを追加する必要があります:

<uses-native-library
        android:name="libOpenCL.so"
        android:required="false" />
//trueの場合、本アプリにとってlibOpenCLは必須となり、端末にこのライブラリがないとアプリのインストールが行えません
//falseの場合、本アプリにとってlibOpenCLは必須ではありません。端末にlibOpenCLがある場合はTencent Effect SDKのGAN系特殊効果（例：童話風やコミック風）が機能し、ない場合はGAN系効果のみ無効になります。他の機能には影響しません
//uses-native-library については公式サイトをご覧ください: <https://developer.android.com/guide/topics/manifest/uses-native-library-element>

難読化設定（Obfuscation Configuration）

リリースパッケージのビルド時にコンパイル最適化(minifyEnabled=true)を有効にすると、Java層で呼び出されていないコードはトリミングされます。ただし、このコードがネイティブ層で呼び出される可能性があるため、xxxメソッドが見つからないというエラーが発生する場合があります。

コンパイル最適化を有効にする場合は、以下のルールを追加して 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.** { *;}

Step 4: Flutter連携

方法1:

リモート依存関係の場合、プロジェクトの pubspec.yaml に以下のリファレンスを追加してください:

  tencent_effect_flutter:
   git:
     url: <https://github.com/Tencent-RTC/TencentEffect_Flutter>

方法2:

ローカル依存関係の場合、tencent_effect_flutter の最新バージョンをダウンロードし、android、ios、lib フォルダおよび pubspec.yaml、tencent_effect_flutter.iml ファイルをあなたのプロジェクトディレクトリに配置します。その後、プロジェクトの pubspec.yaml に以下のリファレンスを追加してください（デモを参照）:

tencent_effect_flutter:
    path: ../

以下のコマンドを実行してください:

flutter pub get

Step 5: SDKの使用方法

1. TRTCとの連携

Applicationクラス(もしくはFlutterActivity)の onCreate メソッドに以下のコードを追加します:

TRTCCloudPlugin.register(new XmagicProcesserFactory());

リソース初期化APIの呼び出し

void _initSettings(InitXmagicCallBack callBack) async {
  _setResourcePath();
  /// リソースのコピーは一度完了すればOK。現在のバージョンでコピーに成功した場合、再度コピーする必要はありません。
  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");
    }
  });
}

3. Beauty認証の実行

TencentEffectApi.getApi()?.setLicense(licenseKey, licenseUrl,
           (errorCode, msg) {
         TXLog.printlog("認証結果 errorCode = $errorCode   msg = $msg");
         if (errorCode == 0) {
            // 認証成功
         }
       });

4. ビューティフィルターの有効化

/// ビューティフィルターの有効化
 var enableCustomVideo = await trtcCloud.enableCustomVideoProcess(open);

5. ビューティ系のパラメータ設定

具体的なビューティパラメータは Beauty Attributes Table をご参照ください。

TencentEffectApi.getApi()?.setEffect(sdkParam.effectName!,
    sdkParam.effectValue, sdkParam.resourcePath, sdkParam.extraInfo)

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の詳細は API Documentation をご確認ください。その他については Demoプロジェクト を参照してください。

7. エフェクトパネルへのデータ追加と除去

エフェクトリソースの追加

Step 1で解説したように、対応するフォルダにリソースファイルを追加してください。2Dアニメーションエフェクトリソースを追加する場合は、下記のように配置します:

android/xmagic/src.mian/assets/MotionRes/2dMotionRes にリソースをコピーします。

ビューティパネルの設定

デモにはシンプルなビューティパネルUIが用意されています。パネルのプロパティは下図のようにJSONファイルで設定されており、その実装はデモプロジェクトを参考にできます。

豊富な既存素材や特殊効果、テンプレート、トレンドメイク、インタラクティブゲームなどを活用して、自由にカスタムできます。詳細な使用方法に関しては Beauty AR Studio Introduction をご確認ください。

これでFlutterとTencent RTC Beauty AR SDKを使った最初のフェイスフィルターアプリが完成しました。おめでとうございます！

私の名前はSusieです。ライターであり、Media Service Product Managerとして活動しています。世界中のスタートアップと協力し、SDKやAPIを活用したリアルタイムコミュニケーションソリューションを構築しています。

もしアプリにフェイスフィルターやその他の特殊効果を組み込みたい場合は、こちら からぜひご連絡ください。