Room Preparation Page | Standard Room Home | Large Webinar Room Home | Member Management |
![]() | ![]() | ![]() | ![]() |
Platform | Version |
Flutter | 3.29.3 or later |
Android | Android 5.0 (SDK API Level 21) or later |
iOS | iOS 14.0 or later |
dependencies:tencent_conference_uikit: Latest version
flutter pub get
Non-Global Symbols to preserve required global symbol information.Android, required permissions are already declared in the SDK; no manual configuration needed.)Info.plist (ios/Runner/Info.plist) for system permission prompts:<key>NSCameraUsageDescription</key><string>TUIRoomKit needs access to your camera</string><key>NSMicrophoneUsageDescription</key><string>TUIRoomKit needs access to your microphone</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
RoomNavigatorObserver.instance to navigatorObservers to monitor route changes and manage component lifecycle.localizationsDelegates to display UI text according to the system language.MaterialApp with ComponentTheme so all RoomKit components inherit the theme configuration.import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';// Main app classclass XXX extends StatelessWidget {const XXX({super.key});@overrideWidget build(BuildContext context) {return ComponentTheme( // Wrap MaterialApp with ComponentTheme for theme accesschild: MaterialApp(// Add RoomKit navigation observer for route and lifecycle managementnavigatorObservers: [RoomNavigatorObserver.instance],// Add localization delegates for multilingual UIlocalizationsDelegates: [...RoomLocalizations.localizationsDelegates,...BarrageLocalizations.localizationsDelegates,],supportedLocales: const [Locale('en'), Locale('zh')],// Other app configurations......),);}}
import 'package:atomic_x_core/atomicxcore.dart'; // TUIRoomKit uses atomic_x_core internally; import it here.var loginResult = await LoginStore.shared.login(sdkAppID: 1400000001, // Replace with your SDKAppIDuserID: 'userID', // Replace with your UserIDuserSig: 'userSig', // Replace with your UserSig);if (loginResult.isSuccess) {// login success} else {// login error}
Parameter | Type | Description |
sdkAppID | int | |
userID | String | Unique ID for the current user. Only letters, numbers, hyphens, and underscores are allowed. Do not use simple IDs like 1, 123, etc., to avoid multi-device login conflicts. |
userSig | String | 【Notes】 Development: Use the local GenerateTestUserSig.genTestSig function or the UserSig Assistant Tool to generate a temporary userSig. Production: To prevent SecretKey leaks, generate userSig on your server. See Server-side UserSig Generation. |
setSelfInfo method in LoginStore: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}");}
Parameter/Return Value | Type | Description |
userProfile | UserProfile | Core user info model, includes: userID: User Unique ID. nickname: Nickname. avatarURL: Avatar URL. |
Return Value | Future | Callback for the result of setting personal info. Returns error code and message if failed. |
TUIRoomKit component, RoomMainWidget is the primary interface for multi-party audio and video conferencing. The example below shows how to embed RoomMainWidget in your app as a host.RoomMainWidget onto the navigation stack.import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';// YourMainPage is the page where you load the main room pageclass YourMainPage extends StatelessWidget {const YourMainPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: ElevatedButton(onPressed: () => _createRoom(context),child: const Text('Create Room'),),),);}void _createRoom(BuildContext context) {// 1. Build enter room configurationconst config = ConnectConfig(autoEnableCamera: true, // Enable camera automaticallyautoEnableMicrophone: true, // Enable microphone automaticallyautoEnableSpeaker: true, // Enable speaker automatically);// 2. Configure room creation optionsfinal options = CreateRoomOptions(roomName: 'roomName', // Room Name);// 3. Initialize main room pagefinal behavior = RoomBehavior.create(options);// 4. Navigate to room pageNavigator.of(context).push(MaterialPageRoute(builder: (context) => RoomMainWidget(roomID: 'roomID',behavior: behavior,config: config,),),);}}
Parameter | Type | Description |
roomID | String | Unique Room Identifier. Length: 0-48 bytes. Use only numbers, English letters (case-sensitive), underscores (_), and hyphens (-). Avoid spaces and Chinese characters. |
behavior | RoomBehavior | Main Room Page initialization source. Parameter options: create: Host creates the room (requires Room Creation Options). For detailed usage of CreateRoomOptions, please refer to: CreateRoomOptions Structure Specifications. enter: Participant joins the room. |
config | ConnectConfig | Controls audio/video device behavior after entering the room. |
Parameter | Type | Description |
autoEnableMicrophone | bool | Automatically enable microphone after entering the room. true: Enable automatically (default). false: Do not enable automatically. |
autoEnableCamera | bool | Automatically enable camera after entering the room. true: Enable automatically (default). false: Do not enable automatically. |
autoEnableSpeaker | bool | Automatically enable speaker after entering the room. true: Enable automatically (default). false: Do not enable automatically. |
Parameter | Type | Required | Default Value | Description |
roomName | String | No | "" | The name of the room. If not specified, a default name may be assigned by the system. |
password | String | No | "" | The password for the room. Once set, other users must enter this password to join. |
isAllMicrophoneDisabled | bool | No | false | Determines whether to disable microphones for all participants. When enabled, all participants except the host/administrators are restricted from unmuting by default. |
isAllCameraDisabled | bool | No | false | Determines whether to disable cameras for all participants. When enabled, all participants except the host/administrators are restricted from turning on their cameras by default. |
isAllScreenShareDisabled | bool | No | false | Determines whether to prohibit screen sharing for all participants. When enabled, only the host/administrators are allowed to share their screens. |
isAllMessageDisabled | bool | No | false | Determines whether to prohibit sending chat messages. When enabled, regular participants will be unable to send text messages in the room. |
RoomMainWidget in your app as a participant.RoomMainWidget onto the navigation stack.import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';// YourMainPage is the page where you load the main room pageclass YourMainPage extends StatelessWidget {const YourMainPage({super.key});@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: ElevatedButton(onPressed: () => _enterRoom(context),child: const Text('Join Room'),),),);}void _enterRoom(BuildContext context) {// 1. Build enter room configurationconst config = ConnectConfig(autoEnableCamera: true, // Enable camera automaticallyautoEnableMicrophone: true, // Enable microphone automaticallyautoEnableSpeaker: true, // Enable speaker automatically);// 2. Initialize main room pageconst behavior = RoomBehavior.enter();// 3. Navigate to room pageNavigator.of(context).push(MaterialPageRoute(builder: (context) => RoomMainWidget(roomID: 'roomID',behavior: behavior,config: config,),),);}}
webinar_.RoomMainWidget is integrated, you get a full-featured multi-party audio and video conferencing interface, including member management, device control, room information display, and more. This is the core of the TUIRoomKit component.Standard Room | Large Webinar Room |
![]() | ![]() |
dependencies:tencent_conference_uikit:git:url: https://github.com/your-username/TUIKit_Flutter.gitref: your-branchpath: room
RoomMainWidget main room page is highly customizable and feature-rich. Developers can adapt the UI to fit their business requirements. Below are the main view components in RoomMainWidget for quick modification.Standard Room | Large Webinar Room |
![]() | ![]() |
Component | Description | Customization Suggestions |
Main Room View Container. Coordinates layout and data flow among subcomponents. | Adjust background, safe area adaptation, component visibility logic. | |
Top Navigation Bar. Includes room info, camera/audio controls, exit room button. | Replace icons, adjust background transparency, add custom buttons (e.g., recording, window mode). | |
Video Stream Display Area. Uses waterfall layout for multiple user video feeds. | Modify layout algorithm (row/column count, spacing), page indicator style, empty state view. | |
Single Video Stream Cell. Displays user video and basic info. | Customize video rendering layer, user info panel (avatar, badge), interaction controls (voice waveform). | |
Bottom Toolbar. Integrates microphone, camera, and member management buttons. | Rearrange button order, modify button style (color, size), add business-related features (screen sharing, in-meeting call, beauty filters). |
assets/images/ directory. Replace image files in this directory to customize icons.
Icon | File Name | Description |
![]() | room_camera_off.png | Camera off icon |
![]() | room_camera_on.png | Camera on icon |
![]() | room_mic_off.png | Microphone off icon |
![]() | room_mic_on_empty.png | Microphone on icon |
![]() | room_administrator_icon.png | Administrator badge icon |
![]() | room_owner_icon.png | Room owner badge icon |
lib/base/language/i10n/ directory to customize UI text:
LoginStore.shared.login once. We recommend linking LoginStore.shared.login and LoginStore.shared.logout to your own login logic.Non-Global Symbols to preserve required global symbol information.Esta página foi útil?
Você também pode entrar em contato com a Equipe de vendas ou Enviar um tíquete em caso de ajuda.
comentários