房间准备页 | 标准房间主页 | 大型研讨会房间主页 | 成员管理 |
![]() | ![]() | ![]() | ![]() |
平台 | 版本 |
Flutter | 3.29.3 及以上版本。 |
Android | 最低兼容 Android 5.0 (SDK API Level 21)及以上版本。 |
iOS | iOS 14.0 及更高。 |
dependencies:tencent_conference_uikit: 最新版本
flutter pub get
Non-Global Symbols,以保留所需要的全局符号信息。Android 端已在 SDK 中声明相关权限,您无需手动进行相关配置)。Info.plist(路径:ios/Runner/Info.plist)中添加以下两项,分别对应麦克风和摄像头在系统弹出授权对话框时的提示信息。<key>NSCameraUsageDescription</key><string>TUIRoomKit 需要访问您的相机权限</string><key>NSMicrophoneUsageDescription</key><string>TUIRoomKit 需要访问您的麦克风权限</string>
post_install do |installer|installer.pods_project.targets.each do |target|flutter_additional_ios_build_settings(target)target.build_configurations.each do |config|config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)','PERMISSION_MICROPHONE=1','PERMISSION_CAMERA=1',]endendend
navigatorObservers 中添加 RoomNavigatorObserver.instance,用于监听页面路由变化和管理组件生命周期。localizationsDelegates 中添加相关本地化代理,确保界面文案能够根据系统语言正确显示。ComponentTheme 包裹在 MaterialApp 外层,确保所有 RoomKit 组件都能访问主题配置。import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';// 您自己的APP主类class XXX extends StatelessWidget {const XXX({super.key});@overrideWidget build(BuildContext context) {return ComponentTheme( // 使用 ComponentTheme 包裹在 MaterialApp 外层,确保所有 RoomKit 组件都能访问主题配置。child: MaterialApp(// 添加 RoomKit 导航观察者,用于监听页面路由变化和生命周期管理navigatorObservers: [RoomNavigatorObserver.instance],// 添加本地化代理,支持多语言文案显示localizationsDelegates: [...RoomLocalizations.localizationsDelegates,...BarrageLocalizations.localizationsDelegates,],supportedLocales: const [Locale('en'), Locale('zh')],// 您APP的其他配置......),);}}
import 'package:atomic_x_core/atomicxcore.dart'; // TUIRoomKit内部有对atomic_x_core的依赖,这里直接import即可。var loginResult = await LoginStore.shared.login(sdkAppID: 1400000001, // 替换为您的 SDKAPPIDuserID: 'userID', // 替换为您的 UserIDuserSig: 'userSig', // 替换为您的 UserSig);if (loginResult.isSuccess) {// login success} else {// login error}
参数 | 类型 | 说明 |
sdkAppID | int | |
userID | String | 当前用户的唯一 ID,仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突,请勿使用 1、123 等简单 ID。 |
userSig | String | 【注意事项】 开发环境:可以采用本地 GenerateTestUserSig.genTestSig 函数生成 userSig 或者控制台左侧项目栏中的 UserSig 工具,创建一个临时可用的 UserSig。生产环境:为了防止密钥泄露,请务必采用服务端生成 userSig 的方式。详细信息请参考 服务端生成 UserSig。 |
LoginStore 的 setSelfInfo 接口设置个人信息:import 'package:atomic_x_core/atomicxcore.dart';final result = await LoginStore.shared.setSelfInfo(userInfo: UserProfile(userID: 'userID', nickname: 'userName', avatarURL: 'avatarURL'),);if (result.isSuccess) {debugPrint("setSelfInfo success");} else {debugPrint("setSelfInfo failed code:${result.errorCode}, message:${result.errorMessage}");}
参数/返回值 | 类型 | 说明 |
userProfile | UserProfile | 个人用户信息核心模型,包含: userID:要设置用户信息的用户 ID。 nickname:昵称信息。 avatarURL:头像链接。 |
返回值 | Future<CompletionHandler> | 设置个人信息接口的结果回调。若失败会返回错误码和错误信息。 |
TUIRoomKit 组件中,RoomMainWidget 是集成了完整的多人音视频房间功能的核心界面,以下将向开发者演示如何以房主身份将 RoomMainWidget 嵌入到应用中。RoomMainWidget 推入导航栈。import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';// YourMainPage 代表您加载房间主页面的页面class YourMainPage extends StatelessWidget {const YourMainPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: ElevatedButton(onPressed: () => _createRoom(context),child: const Text('创建房间'),),),);}void _createRoom(BuildContext context) {// 1. 构造进房的配置项const config = ConnectConfig(autoEnableCamera: true, // 进房后是否自动开启摄像头autoEnableMicrophone: true, // 进房后是否自动开启麦克风autoEnableSpeaker: true, // 进房后是否自动开启扬声器);// 2. 配置房间创建选项final options = CreateRoomOptions(roomName: 'roomName', // 房间名称);// 3. 初始化房间主页面final behavior = RoomBehavior.create(options);// 4. 导航到房间页面Navigator.of(context).push(MaterialPageRoute(builder: (context) => RoomMainWidget(roomID: 'roomID',behavior: behavior,config: config,),),);}}
参数 | 类型 | 说明 |
roomID | String | 字符串类型的房间唯一标识符。 限制长度为 0-48 字节。 建议仅包含数字、英文字母(区分大小写)、下划线(_)和连字符(-)。避免使用空格和中文字符。 |
behavior | RoomBehavior | 房间主页面初始化来源。 参数含义: create: 房主身份创建房间,此方式需要构造创建房间配置项,关于 CreateRoomOptions 的详细用法请参考:CreateRoomOptions 结构体详细说明。 enter:参与者身份加入房间。 |
config | ConnectConfig | 进房后音视频设备控制的配置项。 |
参数 | 类型 | 说明 |
autoEnableMicrophone | bool | 进房后是否自动开启麦克风。 参数含义: true: 自动开启 (默认值)。 false: 不自动开启。 |
autoEnableCamera | bool | 进房后是否自动开启摄像头。 参数含义: true: 自动开启 (默认值)。 false: 不自动开启。 |
autoEnableSpeaker | bool | 进房后是否自动开启扬声器。 参数含义: true: 自动开启 (默认值)。 false: 不自动开启。 |
参数名 | 类型 | 必填 | 默认值 | 说明 |
roomName | String | 否 | "" | 房间名称。若不设置,系统可能会使用默认名称。 |
password | String | 否 | "" | 房间密码。设置后,其他用户加入房间时需输入密码。 |
isAllMicrophoneDisabled | bool | 否 | false | 是否全员禁止开启麦克风。开启后,除房主/管理员外,普通参与者默认禁止打开麦克风。 |
isAllCameraDisabled | bool | 否 | false | 是否全员禁止开启摄像头。开启后,除房主/管理员外,普通参与者默认禁止打开摄像头。 |
isAllScreenShareDisabled | bool | 否 | false | 是否全员禁止发起屏幕共享。开启后,仅房主/管理员可进行屏幕共享。 |
isAllMessageDisabled | bool | 否 | false | 是否全员禁止发送聊天消息(禁言)。开启后,普通参与者无法在房间内发送文字消息。 |
RoomMainWidget 嵌入到应用中。RoomMainWidget 推入导航栈。import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';// YourMainPage 代表您加载房间主页面的页面class YourMainPage extends StatelessWidget {const YourMainPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: ElevatedButton(onPressed: () => _enterRoom(context),child: const Text('加入房间'),),),);}void _enterRoom(BuildContext context) {// 1. 构造进房的配置项const config = ConnectConfig(autoEnableCamera: true, // 进房后是否自动开启摄像头autoEnableMicrophone: true, // 进房后是否自动开启麦克风autoEnableSpeaker: true, // 进房后是否自动开启扬声器);// 2. 初始化房间主页面const behavior = RoomBehavior.enter();// 3. 导航到房间页面Navigator.of(context).push(MaterialPageRoute(builder: (context) => RoomMainWidget(roomID: 'roomID',behavior: behavior,config: config,),),);}}
webinar_ 开头。RoomMainWidget 代码后,开发者将得到一个完整的多人音视频页面,内部包含成员管理,音视频设备控制,房间信息展示等功能,这是 TUIRoomKit 组件的核心。标准房间 | 大型研讨会房间 |
![]() | ![]() |
dependencies:tencent_conference_uikit:git:url: https://github.com/your-username/TUIKit_Flutter.gitref: your-branchpath: room
RoomMainWidget 房间主页面内功能丰富,可定制化度高,开发者可以根据实际产品需求,对 UI 进行定制化修改,以适配业务交互场景。以下将详细为开发者展示 RoomMainWidget 页面中视图组件,便于开发者快速修改。标准房间 | 大型研讨会房间 |
![]() | ![]() |
RoomMainWidget 中组件详细说明组件 | 功能描述 | 定制化建议 |
房间主视图容器,负责协调各子组件的布局与数据流转。 | 可调整整体背景、安全区域适配、组件显隐逻辑。 | |
顶部导航栏,包含房间信息、摄像头和声音控制、退出房间功能入口。 | 可替换图标、调整背景透明度、添加自定义按钮(如录制、 窗口化)。 | |
视频流展示区域,采用瀑布流布局管理多个用户视频画面。 | 可修改布局算法(行列数、间距)、分页指示器样式、空状态视图。 | |
单个视频流单元格,承载用户视频画面与基本信息。 | 可自定义视频渲染层、用户信息面板(头像、徽章)、互动控件(语音波形)。 | |
底部工具栏,集成麦克风、摄像头、成员管理操作按钮。 | 可重新排列按钮顺序、修改按钮样式(颜色、尺寸)、添加业务相关功能(如屏幕分享、会中呼叫、美颜)。 |
assets/images/ 目录管理 UI 所需的图片资源,您可以直接替换该目录下的图片文件来自定义界面所需的图标。
图标 | 文件名 | 说明 |
![]() | room_camera_off.png | 摄像头关闭图标 |
![]() | room_camera_on.png | 摄像头开启图标 |
![]() | room_mic_off.png | 麦克风关闭图标 |
![]() | room_mic_on_empty.png | 麦克风开启图标 |
![]() | room_administrator_icon.png | 管理员身份标识图标 |
![]() | room_owner_icon.png | 房主身份标识图标 |
lib/base/language/i10n/ 目录下的语言文件来调整需要的文案:
LoginStore.shared.login 调用即可,我们建议您将 LoginStore.shared.login 和 LoginStore.shared.logout 与自己的登录业务关联。Non-Global Symbols,以保留所需要的全局符号信息。文档反馈