以下の用途向け:FLUTTER
Flutter ビデオ会議 UI Kit
Flutter モバイルアプリに完成済み会議室を。Flutter ビデオ会議 UI Kit で iOS・Android ユーザーをつなげます。
開発者向けリソース
Flutter ビデオ会議 UI Kitのドキュメントとサンプル
FLUTTER ROOM の機能
アプリのためのルーム
ルームのライフサイクル
- ルームの作成と参加
- 退出と終了の処理
ライブでの会話
- 参加者ビデオを連携
- カメラとマイクを操作
参加者の体験
- ルームメンバーを表示
- ルーム状態の変化を反映
アプリの ID
- 独自のユーザー ID を連携
- サーバー発行の UserSig で認証
プラットフォーム連携
- Flutter モバイルアプリ
- ネイティブ・ブラウザーの権限に対応
製品のフロー
- ルームをナビゲーションに連携
- 業務データはアプリで管理
Flutter 会議コンポーネントを見る
ルーム体験とそのコードをご覧ください。
みんなの居場所
Flutter ビデオ会議 UI Kit で会議画面を配置。アプリが認証済みユーザーとルーム ID を提供します。
ドキュメントを読むimport 'package:flutter/material.dart';
import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';
// After login, inside your widget with a BuildContext.
final behavior = RoomBehavior.create(
CreateRoomOptions(roomName: 'Workshop room'),
);
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => RoomMainWidget(
roomID: roomID, behavior: behavior,
config: const ConnectConfig(
autoEnableCamera: false,
autoEnableMicrophone: false, autoEnableSpeaker: true,
),
),
));アプリの ID を連携
アプリ ID、ユーザー ID、サーバー発行の UserSig でログインし、成功後に入室します。
ドキュメントを読むimport 'package:atomic_x_core/atomicxcore.dart';
final result = await LoginStore.shared.login(
sdkAppID: sdkAppID, userID: userID, userSig: userSig,
);
if (result.isSuccess) {
// Open the room after successful authentication.
}参加者をつなげる
既存のルーム ID でユーザーを同じセッションに接続。
ドキュメントを読むimport 'package:flutter/material.dart';
import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';
// After login, inside your widget.
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => RoomMainWidget(
roomID: roomID, behavior: const RoomBehavior.enter(),
config: const ConnectConfig(
autoEnableCamera: false,
autoEnableMicrophone: false, autoEnableSpeaker: true,
),
),
));始める
最初のルームを動かす
- 01
- 02
- 03
flutter pub add tencent_conference_uikitimport 'package:flutter/material.dart';
import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';
// After login, inside your widget with a BuildContext.
final behavior = RoomBehavior.create(
CreateRoomOptions(roomName: 'Workshop room'),
);
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => RoomMainWidget(
roomID: roomID, behavior: behavior,
config: const ConnectConfig(
autoEnableCamera: false,
autoEnableMicrophone: false, autoEnableSpeaker: true,
),
),
));Flutter ビデオ会議 UI Kit のよくある質問
Flutter ビデオ会議 UI Kit には何が含まれますか?
Flutter ビデオ会議 UI Kit は入室、映像表示、参加者操作を備えた会議画面を提供。ID と業務フローはアプリで管理します。
Flutter ビデオ会議 UI Kit の導入方法は?
iOS・Android ホストプロジェクトと pubspec 依存を設定。UI Kit は ComponentTheme、ローカライズ delegates、RoomNavigatorObserver が必要です。本ページはモバイル向けです。
Flutter ビデオ会議 UI Kit のログイン方法は?
SDKAppID、ユーザー ID、サーバー生成の UserSig を使用。アプリの秘密鍵をブラウザー・モバイルコードに含めず、入室前に認証失敗を処理します。
会議体験をカスタマイズできますか?
文書化されたコンポーネントと設定を製品に調整。ネイティブ UI Kit ソースにはルーム画面とツールバーがあります。対応項目はガイドで確認してください。
Room の料金は?
料金は Room プラン機能と音声・ビデオ使用量で決まります。含まれる機能と制限は現在の Conference 料金ページをご確認ください。
UI Kit と SDK のどちらを選ぶべきですか?
独自画面と状態処理には SDK、導入・調整できる完成済み会議画面には UI Kit を選んでください。
Dart で Flutter ビデオ会議 UI Kit を導入する方法は?
文書記載の Flutter パッケージをインストールし、対象ごとにネイティブプロジェクトを設定します。iOS と Android の動作と合わせてウィジェットのライフサイクルをテストしてください。
アプリ公開前に Flutter ビデオ会議 UI Kit をどうテストしますか?
認証済み入室、参加者変更、対応するカメラ・マイク・退出操作をテスト。
Flutter ビデオ会議 UI Kit の画面をカスタマイズする方法は?
TUIKit_Flutter の room パッケージを fork し、RoomMainWidget とその子ウィジェットをソースレベルで変更します。例えば、RoomBottomBarWidget のボタン順を調整し、tencent_conference_uikit の依存先を自分の fork とブランチに向けます。.pub-cache 内の編集は依存関係の操作で上書きされる場合があるため、そこに変更を保持する運用は避けてください。各コントロールのルーム操作を維持し、ネイティブ権限とルームへのナビゲーションも設定したままにします。

