ドキュメンテーション概要/
Live/
UIKit/
Flutter/
Get Started/
Video Live Integration/

Video Live Integration

環境準備

プラットフォーム
Version
Flutter
Flutter 3.22.0 以上のバージョン。
Dart 3.4.0 以上のバージョン。
Android
Android Studio 3.5以上のバージョン。
Android 5.0 以上のバージョンの Android デバイス。
iOS
Xcode 13.0 以上のバージョン。
プロジェクトに有効な開発者サインが設定されていることを確認してください。

ステップ 1：サービスをアクテイブ化する

Tencent Cloud が提供する音声・ビデオサービスを使用する前に、コンソールでアプリケーションの音声・ビデオサービスをアクテイブ化する必要があります。具体的な手順については、サービスをアクテイブ化する（TUILiveKit） を参照してください。

ステップ 2：TUILiveKit コンポーネントの導入

プロジェクトのルートディレクトリで、コマンドラインを使用して以下のコマンドを実行し、コンポーネントtencent_live_uikit プラグインをインストールします。
flutter pub add tencent_live_uikit

ステップ 3：プロジェクト設定の完了

Android
iOS
1. Android プラットフォームでのコンパイルと実行が必要な場合、SDK 内部で Java のリフレクション機能を使用しているため、SDK のクラスの一部を難読化しないリストに追加する必要があります。
まず、プロジェクトの android/app/build.gradle ファイルで難読化ルールを設定し、有効にする必要があります：
  android {
    ......
    buildTypes {  
        release {  
            ......
            minifyEnabled true  
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'  
        } 
    }
}
プロジェクトの android/app ディレクトリに proguard-rules.pro ファイルを作成し、 proguard-rules.pro ファイルに以下のコードを追加します：
-keep class com.tencent.** { *; }
2. プロジェクトの android/app/build.gradle ファイルで Multidex のサポートを有効にします。
  android {  
    ......
    defaultConfig {
      ......
      multiDexEnabled true
    } 
}
1. Xcode を使用してプロジェクトを開き、 プロジェクト > Building Settings > Deployment を選択し、その下にある Strip Style を Non-Global Symbols に設定することで、必要なグローバルシンボル情報を保持します。
2. オプション iOS シミュレーターでデバッグし、使用している Mac コンピュータが Intel チップを使用している場合、プロジェクトの ios/Podfile ファイルに以下のコードを追加する必要があります：
target 'xxxx' do
  ......
end
......

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['VALID_ARCHS'] = 'arm64 arm64e x86_64'
      config.build_settings['VALID_ARCHS[sdk=iphonesimulator*]'] = 'x86_64'
    end
  end
end
3. TUILiveKit は iOS の音声・動画機能を使用するため、マイクとカメラへのアクセス権を許可する必要があります。
許可する操作方法：iOS プロジェクトの Info.plist の第 1 レベルの <dict> ディレクトリに以下の 2 項目を追加し、認証ダイアログボックスがポップアップ表示される際のマイクとカメラのプロンプト情報にそれぞれ対応します。
<key>NSCameraUsageDescription</key>
<string>CallingApp はカメラへのアクセス権が必要です。権限を許可すると、記録された動画に映像が表示されます</string>
<key>NSMicrophoneUsageDescription</key>
<string>CallingApp はマイクへのアクセス権が必要です。権限を許可すると、記録された動画に音声が出ます</string>
上記の追加が完了したら、ios/Podfile に以下のプリプロセッサ定義を追加して、カメラとマイクへのアクセス権を有効にするために使用されます。
post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
      target.build_configurations.each do |config|
        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
      '$(inherited)',
      'PERMISSION_MICROPHONE=1',
      'PERMISSION_CAMERA=1',
      ]
    end
  end
end

ステップ 4：navigatorObserversとlocalizationsDelegates を設定する

Flutter アプリケーションフレームワークの navigatorObservers に TUICallKit.navigatorObserver を追加し、localizationsDelegates に LiveKitLocalizations.localizationsDelegates を追加します。MateriaApp フレームワークを例にとると、コードは次の通りです。
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],
      ......
    );
  }
}

ステップ 5：TUILiveKit コンポーネントへのログイン

TUILiveKit コンポーネントの各機能を使用する前に、まず TUI コンポーネントにログインする必要があります。プロジェクトでは、ビジネスログインシーンや App の最初の起動 Activity において、以下のログインコードを追加することを推奨します。これは、TUICore 内の関連インターフェースを呼び出して TUI コンポーネントのログインを完了するためのものです。このステップは非常に重要です。ログインに成功した場合のみ、TUILiveKit の各機能を正常に使用できますので、関連パラメータが正しく設定されているかどうかをよく確認してください：
import 'package:tencent_cloud_uikit_core/tencent_cloud_uikit_core.dart';
......

login() async {
  await TUILogin.instance.login(
    1400000001,     // ステップ 1 で取得した SDKAppID に置き換えてください
    "denny",        // お客様の UserID に置き換えてください
    "xxxxxxxxxxx",  // コンソールで UserSig を計算し、ここに入力してください
    TUICallback(
      onError: (code, message) {
        print("TUILogin login fail, {code:$code, message:$message}");
      },
      onSuccess: () async {
        print("TUILogin login success");
      },
    ),
  );
}
パラメータ説明 ここでは、login 関数に必要ないくつかの重要なパラメータについて詳しく紹介します。
SDKAppID： サービスをアクテイブ化する 時に取得しましたので、ここでは繰り返し説明しません。
UserID：現在のユーザーの ID 。文字列タイプで、英字（a-z と A-Z）、数字（0-9）、ハイフン（-）、アンダースコア（_）のみを含めることができます。
UserSig： サービスをアクテイブ化する によって取得した SDKSecretKey を使用して SDKAppID、UserID などの情報を暗号化することで UserSig を取得できます。これは認証用のトークンであり、現在のユーザーが TRTC のサービスを利用できるかどうかを Tencent Cloud が識別するために使用されます。コンソール左側のアイテムバーにある UserSig ツール で、一時的に利用可能な UserSig を作成できます。



詳細については UserSig の計算と使用方法 を参照してください。
注意：
このステップは現在、開発者からのフィードバックが最も多いステップで、以下のような一般的な問題があります。
SDKAppID の設定が間違っています。
userSig がシークレットキー（Secretkey）として誤設定されています。userSig は SDKAppID、userID や有効期限などの情報を SecretKey で暗号化したものであり、直接 SecretKey を userSig として設定するものではありません。
userSig が「1」、「123」、「111」などの簡単な文字列に設定されています。TRTC は同じ UserID の複数端末ログインをサポートしていないため、複数人で協力して開発する場合、「1」、「123」、「111」といった userID は他の同僚によって使用されやすく、ログインに失敗する可能性があります。そのため、デバッグ時には識別しやすい UserID を設定することをお勧めします。
Github のサンプルコードでは、genTestUserSig 関数を使用してローカルで userSig を計算することにより、現在の接続プロセスをクイックスタートできるようになっています。しかし、この方法では SecretKey がアプリのコード内に公開されてしまい、後のアップグレードや SecretKey の保護には不向きです。そのため、userSig の計算ロジックはサーバー側に配置し、TUILiveKit コンポーネントを使用するたびに、 App からサーバーに対してリアルタイムで計算された userSig をリクエストすることを強くお勧めします。

ステップ 6：ライブプレビュー画面に入る

注意：
必ず ステップ 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));
  },
));


ビデオライブ配信のプレビュー画面


ビデオライブ配信中の画面

ステップ 7：ルームリストを取得する

注意：
必ず ステップ 5 に従ってログイン操作を完了してください。TUILogin.login が成功した場合のみ、ライブプレビュー画面に正常に入ることができます。
widget の中で、TUILiveKit の LiveListWidget コンポーネントをロードして、ルームリストを表示できます。
Java
import 'package:tencent_live_uikit/tencent_live_uikit.dart';
......


eturn Scaffold(
  body: SizedBox(
    width: _screenWidth,
    height: double.infinity,
    child: LiveListWidget(),    // 自分の widget ツリーに TUILiveKit の ルームリストコンポーネント LiveListWidget を追加
  ),
);



ステップ 8：視聴者がライブルームに入る

ステップ 7のルームリスト画面で、任意のルームをクリックすると自動的にライブルームに入ることができます。

ビデオライブルーム


ビデオライブルーム

交流とフィードバック
WebRTC Trtc Logo
Copyright © 2013-2025 Tencent RTC. All Rights Reserved.
  1. 個人情報保護方針
  3. 法的
  5. クッキーポリシー
  7. Tencent Cloud