10分でFlutterライブ配信アプリを構築する方法


次回のモバイルアプリにライブ配信機能を追加してみませんか？  
このチュートリアルでは、Tencent RTC SDKを統合し、UIを備えた完全なライブ配信機能をわずか10分で稼働させる方法をご紹介します。  
既存のアプリへ機能を追加する場合でも、全く新しいプラットフォームを試作する場合でも、このガイドが開発の効率アップに役立つかもしれません。

## **Step 1. サービスを有効化する**

オーディオ・ビデオサービスを利用する前に、コンソールでサービスを有効化する必要があります。  
詳しい手順については [**サービス有効化ガイド**](https://trtc.io/document/60033#) を参照してください。  

## **Step 2. TUILiveKitコンポーネントを導入する**

プロジェクトのルートディレクトリで、[**live_uikit**](https://pub.dev/packages/tencent_live_uikit) プラグインをコマンドラインからインストールします。

```jsx
flutter pub add tencent_live_uikit
```

## **Step 3. プロジェクトの設定を完了する**

1. Android環境でコンパイル・実行する場合、SDK内部でJavaのリフレクション機能を使用しているため、SDK内の特定クラスを難読化対象から除外する設定が必要です。

   まず、プロジェクトの `android/app/build.gradle` ファイルで、ProGuardによる難読化ルールを設定し有効にします:

   ```jsx
   android {
    ......
    buildTypes {  
        release {  
            ......
            minifyEnabled true  
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'  
        } 
    }
}
   ```

   次に、`android/app` ディレクトリ配下に `proguard-rules.pro` を作り、以下のコードを追加します:

   ```jsx
keep class com.tencent.** { *; }
```

2. プロジェクトの `android/app/build.gradle` ファイルでMultidexサポートを有効化してください。

```jsx
  android {  
    ......
    defaultConfig {
      ......
      multiDexEnabled true
    } 
}
```

## **Step 4. navigatorObserver と localizationsDelegates を設定する**

Flutterアプリケーションのフレームワーク上で、`navigatorObservers` に `TUILiveKitNavigatorObserver.instance` を追加し、`localizationsDelegates` に `LiveKitLocalizations.localizationsDelegates` を追加します。以下は MaterialApp を使用する例です:

```jsx
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

......

class XXX extends StatelessWidget {
  const XXX({super.key});

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [TUILiveKitNavigatorObserver.instance],
      localizationsDelegates: [...LiveKitLocalizations.localizationsDelegates],
      ......
    );
  }
}
```

## **Step 5. TUILiveKitコンポーネントにログインする**

TUICore のAPI呼び出しを行い、TUICallKit コンポーネントにログインします。ログインが成功して初めてコンポーネントの機能が正常に利用できるため、パラメータ設定を正確に行ってください。

```jsx
import 'package:tencent_cloud_uikit_core/tencent_cloud_uikit_core.dart';
......

login() async {
  await TUILogin.instance.login(
    1400000001,     // Step1で取得したSDKAppIDに置き換えてください
    "denny",        // ユーザーIDに置き換えてください
    "xxxxxxxxxxx",  // コンソールで取得したUserSigを入力してください
    TUICallback(
      onError: (code, message) {
        print("TUILogin login fail, {code:$code, message:$message}");
      },
      onSuccess: () async {
        print("TUILogin login success");
      },
    ),
  );
}
```

**パラメータについて:**

- **SDKAppID**: [**Step 1**](https://trtc.io/document/63255#step1) で取得した値です。  
- **UserID**: 現在のユーザーIDを指定します。英数字（a–z、A–Z、0–9）、ハイフン(-)、アンダースコア(_)のみ使用可能です。  
- **UserSig**: 現在のユーザーが TRTC サービスを利用できるかを検証する認証情報です。[**UserSig Tools**](https://console.trtc.io/usersig) を利用して、`SDKSecretKey` で `SDKAppID` や `UserID` などの情報を暗号化して生成できます。  

詳しくは [**UserSig**](https://trtc.io/document/35166) をご確認ください。

## **Step 6. ライブ配信プレビュー画面への遷移**

**注意:** [**Step 5**](https://trtc.io/document/63255#step5) のログイン処理が正しく完了していることを必ず確認してください。`TUILogin.login` によるログインが完了してからでないと、ライブ配信プレビュー画面には正常に遷移できません。

ライブ配信を開始するコード部分（クリックイベントなど）で、以下の操作を行いホスト用ライブ配信ページを起動します:

```jsx
import 'package:tencent_live_uikit/tencent_live_uikit.dart';
......

Navigator.push(context, MaterialPageRoute(
  builder: (context) {
    return TUILiveRoomAnchorWidget(
        roomId: LiveIdentityGenerator.instance.generateId(AppStore.userId, RoomType.live));
  },
));
```

以上で、Flutterアプリにライブ配信機能を統合し、UIを備えた状態で簡単に動作を確認できます。お試しください。