🥳

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

2025/05/12に公開

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

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

オーディオ・ビデオサービスを利用する前に、コンソールでサービスを有効化する必要があります。
詳しい手順については サービス有効化ガイド を参照してください。

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

プロジェクトのルートディレクトリで、live_uikit プラグインをコマンドラインからインストールします。

flutter pub add tencent_live_uikit

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

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

まず、プロジェクトの android/app/build.gradle ファイルで、ProGuardによる難読化ルールを設定し有効にします:
```
android {
 ......
 buildTypes {  
     release {  
         ......
         minifyEnabled true  
         proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'  
     } 
 }
```

}


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

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

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

  android {  
    ......
    defaultConfig {
      ......
      multiDexEnabled true
    } 
}

Step 4. navigatorObserver と localizationsDelegates を設定する

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

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 コンポーネントにログインします。ログインが成功して初めてコンポーネントの機能が正常に利用できるため、パラメータ設定を正確に行ってください。

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 で取得した値です。
UserID: 現在のユーザーIDを指定します。英数字（a–z、A–Z、0–9）、ハイフン(-)、アンダースコア(_)のみ使用可能です。
UserSig: 現在のユーザーが TRTC サービスを利用できるかを検証する認証情報です。UserSig Tools を利用して、SDKSecretKey で SDKAppID や UserID などの情報を暗号化して生成できます。

詳しくは UserSig をご確認ください。

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

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

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

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を備えた状態で簡単に動作を確認できます。お試しください。