🎯 目的と背景
現在Flutterで開発しているiOSアプリに、リアルタイムビデオ通話中の美顔（ビューティー）機能を追加する必要が出てきました。ユーザー体験向上のために、以下のような処理を希望しています：
- カメラ映像に対してリアルタイムで美顔処理（スキンスムージング、ホワイトニング、目の拡大など）
- Flutter UIで設定可能なスライダーインターフェース
- またはネイティブが提供するビルトインの美顔UIパネルをそのまま使いたい
そこでTencent CloudのTRTC SDKの付属機能「TRTC Beauty（美颜）」をFlutterから利用する方法を調査しました。
🔍 調査結果と選定理由
利用SDK：
- TRTC SDK本体（Flutterプラグイン trtc_cloud）
- 内部的にiOSではTUICore + TXBeautyManager を使用
- ビルトインUIを表示する場合は Platform Channel を使用してネイティブ呼び出しが必要
TRTCにはFlutter SDKを通じてTXBeautyManagerというインターフェースにアクセスでき、手動でパラメータ設定も可能ですが、さらにネイティブ側には「TRTCBeautyViewController」などの標準UIコンポーネントが用意されており、ユーザーが簡単に操作できるようになっています。
🚀 実装ステップ（Flutter + iOS）
1. 手動スライダーによる美顔設定（Flutter UI）
Slider(
value: _beautyLevel,
min: 0,
max: 9,
divisions: 9,
label: _beautyLevel.toString(),
onChanged: (val) {
setState(() => _beautyLevel = val);
trtcCloud.getBeautyManager()?.setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_SMOOTH);
trtcCloud.getBeautyManager()?.setBeautyLevel(val);
},
),
2. TXBeautyManagerを使ったパラメータ設定（Flutter）
void _applyBeautySettings() {
final beautyManager = trtcCloud.getBeautyManager();
beautyManager?.setBeautyStyle(TRTCCloudDef.TRTC_BEAUTY_STYLE_SMOOTH);
beautyManager?.setBeautyLevel(5);
beautyManager?.setWhitenessLevel(3);
beautyManager?.setRuddyLevel(2);
}
🧩 オプション：iOSネイティブ美顔UIをFlutterから呼び出す方法
TRTC iOS SDKは、標準のTRTCBeautyViewControllerを提供しています。これをFlutterから利用するにはPlatform Channelを使って呼び出します。
Flutter側の呼び出しコード
static const platform = MethodChannel('com.example.trtc/beauty');
Future<void> showBeautyPanel() async {
try {
await platform.invokeMethod('showBeautyPanel');
} catch (e) {
print("エラー: $e");
}
}
iOS側（Swift）のネイティブコード例
import Flutter
import UIKit
import TXLiteAVSDK_TRTC
public class AppDelegate: FlutterAppDelegate {
override public func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
let beautyChannel = FlutterMethodChannel(name: "com.example.trtc/beauty",
binaryMessenger: controller.binaryMessenger)
beautyChannel.setMethodCallHandler({
(call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
if call.method == "showBeautyPanel" {
let vc = TRTCBeautyViewController()
controller.present(vc, animated: true, completion: nil)
result("OK")
}
})
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
このUIでは、プリセットのスキン補正・フィルター・顔補正項目がすべて搭載されており、ローカライズもされています。
✅ テスト結果
| テスト環境 | 結果 |
|---|---|
| iPhone 12（iOS 17） | 標準UIは直感的で、処理の負荷も抑えられていた |
| iPhone SE 第2世代 | 手動スライダーよりも標準UIの方がクラッシュに強かった |
💡 まとめ
FlutterアプリにTencent TRTCの美顔機能を導入する際、手動でスライダーを使う方法と、iOSネイティブのビルトイン美顔UIを表示する方法の2通りがあります。
後者はPlatform Channelを使う必要がありますが、実装すれば高度なUXを簡単に提供可能になります。
次回の予定：
- Android側でもビルトインUIを呼び出す構成の調査
- 美顔設定のプリセット保存／自動復元処理
- Flutterパッケージとして再利用可能な形に整理
参考リンク：
🔗 公式リンク
- Tencent RTC 公式サイト: https://trtc.io
- TRTC Flutter プラグイン: pub.dev - trtc_cloud