专为以下场景打造:FLUTTER

Flutter 视频会议 UI Kit

在 Flutter 移动应用中接入现成会议室,使用 Flutter 视频会议 UI Kit 连接 iOS 和 Android 用户。

开发者资源

Flutter 视频会议 UI Kit 文档与示例

跨设备,同一场对话

连接从 iOS 和 Android 设备评审材料的产品团队。

让工艺课程成为对话

讲师演示技巧,学员通过手机分享进度。

FLUTTER ROOM 功能

为应用构建的房间

房间生命周期

  • 创建与加入房间
  • 处理退出与结束操作

实时对话

  • 接入参与者视频
  • 控制摄像头与麦克风

参与者体验

  • 显示房间成员
  • 响应房间状态变化

应用身份

  • 关联自己的用户 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 提供现成会议界面,含房间入口、视频视图和参与者控制。身份与业务流程由应用提供。

如何接入 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 行为测试 widget 生命周期。

应用发布前如何测试 Flutter 视频会议 UI Kit?

测试已认证入房、参与者变化,以及支持的摄像头、麦克风与退出控制。

如何自定义 Flutter 视频会议 UI Kit 界面?

Fork TUIKit_Flutter 的 room 包,对 RoomMainWidget 及其子组件进行源码级修改。例如,调整 RoomBottomBarWidget 的按钮顺序,并将 tencent_conference_uikit 依赖指向你的 fork 和分支。不要依赖 .pub-cache 中的修改,依赖管理操作可能会将其覆盖。保留各控件对应的房间操作,并维持原生权限与房间导航配置。

Flutter Room 集成支持

为下一个想法留出空间

在应用内让人们相聚。