专为以下场景打造:FLUTTER
Flutter 视频会议 UI Kit
在 Flutter 移动应用中接入现成会议室,使用 Flutter 视频会议 UI Kit 连接 iOS 和 Android 用户。
开发者资源
Flutter 视频会议 UI Kit 文档与示例
FLUTTER ROOM 功能
为应用构建的房间
房间生命周期
- 创建与加入房间
- 处理退出与结束操作
实时对话
- 接入参与者视频
- 控制摄像头与麦克风
参与者体验
- 显示房间成员
- 响应房间状态变化
应用身份
- 关联自己的用户 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 和服务端签发的 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 提供现成会议界面,含房间入口、视频视图和参与者控制。身份与业务流程由应用提供。
如何接入 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 中的修改,依赖管理操作可能会将其覆盖。保留各控件对应的房间操作,并维持原生权限与房间导航配置。

