以下の用途向け:FLUTTER

Flutter ビデオ会議 UI Kit

Flutter モバイルアプリに完成済み会議室を。Flutter ビデオ会議 UI Kit で iOS・Android ユーザーをつなげます。

開発者向けリソース

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

デバイスを越えて一つの会話を

iOS・Android デバイスで素材をレビューする製品チームをつなげます。

FLUTTER ROOM の機能

アプリのためのルーム

ルームのライフサイクル

  • ルームの作成と参加
  • 退出と終了の処理

ライブでの会話

  • 参加者ビデオを連携
  • カメラとマイクを操作

参加者の体験

  • ルームメンバーを表示
  • ルーム状態の変化を反映

アプリの ID

  • 独自のユーザー ID を連携
  • サーバー発行の UserSig で認証

プラットフォーム連携

  • Flutter モバイルアプリ
  • ネイティブ・ブラウザーの権限に対応

製品のフロー

  • ルームをナビゲーションに連携
  • 業務データはアプリで管理

Flutter 会議コンポーネントを見る

ルーム体験とそのコードをご覧ください。

会議画面

みんなの居場所

Flutter ビデオ会議 UI Kit で会議画面を配置。アプリが認証済みユーザーとルーム ID を提供します。

ドキュメントを読む
room_screen.dart
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,
    ),
  ),
));

カスタマイズ

ルームを製品らしく

Flutter の体験をつなげる

RoomMainWidget をルート、ComponentTheme、ローカライズ delegates、RoomNavigatorObserver に連携。

ドキュメントを読む

始める

最初のルームを動かす

  1. 01

    アプリを作成

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

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

    Flutter ビデオ会議 UI Kit を追加する

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

    統合ガイドに従う
  3. 03

    最初のルームに接続

    認証済みテストユーザーを同じルームに接続。カメラとマイクを有効にする前にデバイス権限を確認します。

    認証を設定
Flutter Room UI Kit
ターミナル
flutter pub add tencent_conference_uikit
room_screen.dart
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,
    ),
  ),
));

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 内の編集は依存関係の操作で上書きされる場合があるため、そこに変更を保持する運用は避けてください。各コントロールのルーム操作を維持し、ネイティブ権限とルームへのナビゲーションも設定したままにします。

Flutter Room の導入サポート

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

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

営業担当者への連絡

次のアイデアのためのルームを

アプリの中で人々をつなげる。