以下の用途向け:FLUTTER

Flutter ビデオ通話 UI Kit

Tencent RTC の Flutter Video Calling UI Kit を使用して通話画面を追加します。TUICallKit をウィジェットツリーとナビゲーションに組み込み、着信コントロールとネイティブプラットフォームを設定します。

開発者向けリソース

Flutter ビデオ通話 UI Kitのドキュメントとサンプル

Flutter での 1 対 1 ビデオ通話

個人的な交流や相談のための対面コミュニケーションをFlutterアプリに導入し、ビデオと通話コントロールを1つの体験にまとめられます。

Flutter でのグループビデオ通話

Flutter 通話画面で複数の参加者を接続します。プラットフォームガイドに従って、通話フローと対応するグループレイアウトを設定してください。

FLUTTER CALL の機能

Flutter ビデオ通話の機能

人と人をつなぐ

  • 音声・ビデオ通話
  • 着信処理

通話体験を自在にコントロール

  • カメラとマイクのコントロール
  • 通話ライフサイクルイベント

自分らしく仕上げる

  • アプリケーションのフロー
  • プラットフォーム固有の統合

Flutter ビデオ通話コンポーネントを見る

TUICallKit をウィジェットツリーに接続し、アプリ内の操作から通話を開始します。

通話インターフェース

Flutter通話インターフェースを組み込む

ウィジェットツリーにTUICallKitを配置し、認証済みユーザーで初期化します。このコンポーネントが通話インターフェースと操作機能を提供します。

ドキュメントを読む
call_page.dart
MaterialApp(
  navigatorObservers: [TUICallKit.navigatorObserver],
  localizationsDelegates: const [AtomicLocalizations.delegate],
);

カスタマイズ

Flutter通話UI Kitをカスタマイズ

Flutter の通話画面、コントロール、着信フローを製品に合わせて調整できます。

レイアウトとコントロール

プラットフォームガイドに記載されたカスタマイズオプションを使用して、通話エクスペリエンスを調整します。

ドキュメントを読む

始める

Flutterアプリにビデオ通話を追加

  1. 01

    アプリを作成

    アプリケーションとテストユーザー向けに Call を有効にします。

    Call コンソールを開く
  2. 02

    Flutter ビデオ通話 UI Kit を追加する

    プラットフォームガイドに沿ってプロジェクトを接続します。

    統合ガイドに従う
  3. 03

    最初の通話を開始

    2人のテストユーザーとしてサインインし、発信と応答を行います。

    認証を設定
Flutter Call UI Kit
ターミナル
flutter pub add tencent_calls_uikit
call_page.dart
import 'package:tencent_calls_uikit/tencent_calls_uikit.dart';

await TUICallKit.instance.login(SDKAppID, userID, userSig);

Flutter ビデオ通話 UI Kit のよくある質問

Flutter Video Calling UI Kit には何が含まれていますか?

Flutter Video Calling UI Kit は、TUICallKit の画面と通話コントロールを提供します。ユーザー ID と widget ツリーに接続すると、Call サービスが参加者をつなぎます。

Flutter通話SDKとUI Kitのどちらを使用すべきですか?

UI Kit は基盤サービス上にインターフェースコンポーネントを提供します。独自のアプリケーション UI をより細かく制御する必要がある場合は、SDK を選択してください。

Flutterの着信はバックグラウンドでどのように動作しますか?

Flutter ガイドに従って、ネイティブプッシュ通知とアプリケーションライフサイクルの要件を設定してください。実機でフォアグラウンド、バックグラウンド、オフライン時の着信をテストしてください。通話画面を表示するだけでは、この設定は完了しません。

Flutter Video Calling UI Kit のユーザーを認証するにはどうすればよいですか?

サーバー上で UserSig を作成し、独自のサインインフローが完了した後にクライアントへ渡します。アプリケーションシークレットは常にサーバー上に保持してください。

Flutter ビデオ通話 UI Kit は無料で使用できますか?

インターフェースとホスト型 Call サービスは、それぞれ異なる役割を担います。アプリケーションでサービスを有効化し、現在のプラン、機能の提供状況、利用料金を確認してください。

Dart で Flutter ビデオ通話 UI Kit を導入するには?

文書記載の Flutter パッケージをインストールし、対象ごとにネイティブプロジェクトを設定します。iOS と Android の動作と合わせてウィジェットのライフサイクルをテストしてください。

アプリのリリース前に Flutter ビデオ通話 UI Kit をテストするには?

別々のユーザー間で招待、応答、拒否、通話終了の状態をテストし、権限が拒否された場合も確認します。

Flutter ビデオ通話 UI Kit のインターフェースをカスタマイズするには?

UI Kit の assets/images リソースを使って Flutter の通話コントロールをカスタマイズできます。例えば、アセットへの参照を維持しながら camera_off.png を独自のカメラオフ画像に置き換えます。pub キャッシュを直接編集せず、保守するソースのコピーに変更を保存してください。MaterialApp には TUICallKit.navigatorObserver とローカライズ用の delegate を引き続き設定する必要があります。見た目の変更だけでは、ルーティング、ライフサイクル、ネイティブ権限の設定を代替できません。

Flutter Call の導入サポート

アプリケーションについて相談

製品、想定利用量、統合要件についてご相談ください。

営業担当者への連絡

Flutter アプリにビデオ通話を導入

Flutter Video Calling UI Kit から始め、2 人のテストユーザーを接続して最初の通話を構築します。