😽

ボイスチャットルームを短時間で構築する方法

に公開
Flutter
tech

ここでは、Flutter でボイスチャットルームを短時間で完成させる方法を紹介します。下記のガイドに従えば、約10分ほどで UI を含む音声チャットルーム機能を実装することができます。

Step 1: サービスの有効化

Activate Service (TUILiveKit) を参照して、体験版の申請または有料版の有効化を行ってください。

Step 2: TUILiveKit コンポーネントのインポート

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

flutter pub add tencent_live_uikit

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

  1. 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 ファイルを作成し、以下のコードを追加します。

    -keep class com.tencent.** { *; }

  2. android/app/build.gradle ファイルで、Multidex を有効化する設定を行います。

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

Step 4: ルーティングと多言語化の設定

アプリ内でルーティングやプロキシの設定を行います。以下は MaterialApp での設定例です。

import 'package:tencent_live_uikit/tencent_live_uikit.dart';

return MaterialApp(
   navigatorObservers: [TUILiveKitNavigatorObserver.instance],
   localizationsDelegates: [
      ...LiveKitLocalizations.localizationsDelegates,
      ...BarrageLocalizations.localizationsDelegates,
      ...GiftLocalizations.localizationsDelegates,
   ],
   supportedLocales: [
      ...LiveKitLocalizations.supportedLocales,
      ...BarrageLocalizations.supportedLocales,
      ...GiftLocalizations.supportedLocales
   ],
   //...
);

Step 5: ログイン

ボイスルーム機能を利用する前に、以下のログインコードを実行して、初期化が完了していることを確認してください。

import 'package:tencent_live_uikit/tencent_live_uikit.dart';

void login() async {
  await TUILogin.instance.login(
    1400000001,     // Step 1 で取得した SDKAppID に置き換えてください
    "denny",        // ご自身の UserID を指定してください
    "xxxxxxxxxxx",  // コンソールで計算した UserSig を指定してください
    TUICallback(
      onError: (code, message) {
        print("TUILogin login fail, {code:$code, message:$message}");
      },
      onSuccess: () async {
        print("TUILogin login success");
      },
    ),
  );
}

Step 6: アンカー配信ページの組み込み

音声ルームを開始したい場所（ビジネスロジックで特定し、ボタンタップ等のイベントで実行）で、以下のように操作してアンカー配信ページへ遷移します。

import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
   builder: (context) {
      final String userId = 'replace with your userId';
      final String roomId = LiveIdentityGenerator.instance.generateId(userId, RoomType.live);
      return TUILiveRoomAnchorWidget(roomId: roomId);
   }));

Step 7: ライブリストページの組み込み

ライブリストページには、ボイスチャットのライブルームが表示されます。任意のルームをクリックして、視聴者として参加したり、マイク連動できるようになります。

以下の操作を行い、ライブリストページに遷移してみましょう。

import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
      builder: (context) {
         return Scaffold(
            body: SafeArea(child: LiveListWidget()));
      }));

または、特定のページの一部としてライブリストを埋め込むことも可能です。

import 'package:tencent_live_uikit/tencent_live_uikit.dart';

// 単一のウィジェットの場合（例：Container など）
Container(
   child: LiveListWidget()
)

// 複数ウィジェットの場合（例：Column など）
Column(
   children:[LiveListWidget()]
)

Discussion