FlutterでiOSアプリにTencent美顔機能を導入する方法（TRTC Beauty）

## 🎯 目的と背景

現在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）

```dart
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）

```dart
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側の呼び出しコード

```dart
static const platform = MethodChannel('com.example.trtc/beauty');

Future<void> showBeautyPanel() async {
  try {
    await platform.invokeMethod('showBeautyPanel');
  } catch (e) {
    print("エラー: $e");
  }
}
```

### iOS側（Swift）のネイティブコード例

```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パッケージとして再利用可能な形に整理

---

参考リンク：

- [TRTC Flutter Plugin (pub.dev)](https://pub.dev/packages/trtc_cloud)
- [TRTC API Documentation (TRTC.io)](https://trtc.io)
- [TXBeautyManager (iOS SDK)](https://trtc.io/product/rtc/document/ios/overview)


---

## 🔗 公式リンク

- Tencent RTC 公式サイト: [https://trtc.io](https://trtc.io)
- TRTC Flutter プラグイン: [pub.dev - trtc_cloud](https://pub.dev/packages/trtc_cloud)