Integration
This document describes how to quickly integrate the Conference (TUIRoomKit) component. The following steps generally take about one hour to complete, after which you can implement audio and video room features with ready-made UI.
Environment Preparation
Platform | Version |
Flutter | 3.7.0 and above versions. |
Android | Android 4.1 (SDK API level 16) or later (Android 5.0 (SDK API level 21) or later is recommended). Android Studio 3.5 or later (Gradle 3.5.4 or later). Mobile phone on Android 4.1 or later. |
iOS | iOS 12.0 and higher. |
Step 1: Activate the Service
Before initiating a meeting with TUIRoomKit, you need to activate the exclusive multi-person audio and video interaction service for TUIRoomKit on the console. For specific steps, please refer to Activate Service.
Step 2: Integrate the TUIRoomKit Component
dependencies:tencent_conference_uikit: The latest version
Execute the following command to install the plugin.
flutter pub get
Step 3: Complete Project Configuration
Since the tencent_conference_uikit has utilized the relevant features of the
GetX
state management library, you need to replace MaterialApp
with GetMaterialApp
in your application. Alternatively, you can set the navigatorKey
attribute in your MaterialApp
to Get.key
for the same effect.// This step requires importing the get package before proceeding.// Since the tencent_conference_uikit already has a dependency on get, you don't need to make any additional configurations in your pubspec.yaml.import 'package:get/get.dart';class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return GetMaterialApp( // UseGetMaterialApp
to replaceMaterialApp
// Your original MaterialApp content);}}
Open your project with Xcode, choose Targets > Building Settings > Deployment, and set Strip Style to
Non-Global Symbols
to maintain the necessary global symbol information.If you need to use audio and video features on
iOS
, authorize the microphone and camera usage rights (Android
has declared the relevant permissions in the SDK, and no manual configuration is necessary).Add the following two items to your application's
Info.plist
. They correspond to the messages in the popup licensing dialog box while microphone and camera permissions are requested.<key>NSCameraUsageDescription</key><string>TUIRoom requires access to your camera.</string><key>NSMicrophoneUsageDescription</key><string>TUIRoom requires access to your microphone.</string>
After the above are added, add the following preprocessor definitions in your ios/Podfile to enable camera and microphone permissions.
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
Step 4: Log in to TUIRoomKit Component
Add the following code to your project, which serves to log in to the component by calling the relevant APIs in TUIRoomKit. This step is extremely critical, as only after logging in can you use the various functions of TUIRoomKit, so please be patient and check if the relevant parameters are configured correctly:
import 'package:rtc_room_engine/rtc_room_engine.dart';var result = await TUIRoomEngine.login(SDKAPPID, // Please replace with your SDKAPPID'userId', // Please replace with your user ID'userSig', // Please replace with your userSig);if (result.code == TUIError.success) {// login success} else {// login error}
Parameter Description
Here is a detailed introduction to the key parameters used in the login function:
SDKAppID:Obtained in the last part of Step 1.
UserID:The ID of the current user, which is a string that can only contain English letters (a-z and A-Z), numbers (0-9), hyphens (-), and underscores (_).
UserSig:The authentication credential used by Tencent Cloud to verify whether the current user is allowed to use the TRTC service. You can get it by using the SDKSecretKey to encrypt information such as SDKAppID and UserID. You can generate a temporary UserSig on the UserSig Tools page in the TRTC console.
For more information, please refer to the UserSig.
Note:
Many developers have contacted us with questions regarding this step. Below are some of the frequently encountered problems:
The
SDKAppID
is incorrect.UserSig
is set to the value of Secretkey
mistakenly. The UserSig is generated by using the SecretKey
for the purpose of encrypting information such as SDKAppID
, UserID
, and the expiration time. But the value of the UserSig
cannot be directly substituted with the value of the SecretKey
.The
UserID
is set to a simple string such as 1, 123, or 111, and your colleague may be using the same UserID while working on a project simultaneously. In this case, login will fail as TRTC doesn't support login on multiple terminals with the same UserID
. Therefore, we recommend you use some distinguishable UserID values during debugging.The sample code on GitHub uses the
genTestUserSig
function to calculate UserSig locally, so as to help you complete the current integration process more quickly. However, this scheme exposes your SecretKey in the application code, which makes it difficult for you to upgrade and protect your SecretKey
subsequently. Therefore, we strongly recommend you run the UserSig calculation logic on the server and make the application request the UserSig calculated in real time every time the application uses the TUIRoomKit component from the server.Log in to Floating Chat (optional)
Flutter TUIRoomKit (tencent_conference_uikit) introduced the floating chat feature starting from version 2.4.1. If you need to use the floating chat feature, you need to complete the following initialization and login (If you also need to use the In-Conference Chat page, you can Ignore this step and complete the initialization and login for In-Conference Chat):
import 'package:tencent_cloud_chat_sdk/enum/V2TimSDKListener.dart';import 'package:tencent_cloud_chat_sdk/enum/log_level_enum.dart';import 'package:tencent_cloud_chat_sdk/models/v2_tim_callback.dart';import 'package:tencent_cloud_chat_sdk/tencent_im_sdk_plugin.dart';// Initializevar initResult = await TencentImSDKPlugin.v2TIMManager.initSDK(sdkAppID: SDKAPPID, // Replace with your SDKAPPIDloglevel: LogLevelEnum.V2TIM_LOG_INFO, // Log registration levellistener: V2TimSDKListener(), // Event listener. When using the floating chat, pass an empty object here.);if (initResult.code == 0) { // Initialized successfully// LoginV2TimCallback imLoginResult = await TencentImSDKPlugin.v2TIMManager.login(userID: 'userId', // Replace with your userIDuserSig: 'userSig', // Replace with your userSig);}
Note:
The floating chat feature is enabled by default in TUIRoomKit. If you do not need the floating chat feature, you do not need to perform the above initialization and login steps. You can disable the floating chat feature through the Bottom toolbar > Setting > Open Floating Chat option.
Step 5: Use TUIRoomKit
Set User Information (optional)
You can set the username and profile photo by calling TUIRoomEngine's
setSelfInfo
.import 'package:rtc_room_engine/rtc_room_engine.dart';TUIRoomEngine.setSelfInfo(userName, avatarURL);
Parameter | Type | Description |
userName | String | User name |
avatarURL | String | User profile photo URL |
Start a quick conference
By calling the
quickStart
method of ConferenceSession
, you can start a quick conference.import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';ConferenceSession.newInstance('your roomId')..onActionSuccess = _quickStartSuccess..onActionError = _quickStartError..quickStart();void _quickStartSuccess() {// You can navigate to the conference page on your own in this success callback of starting a quick conference.Navigator.push(context,MaterialPageRoute(builder: (context) => ConferenceMainPage(),),);}void _quickStartError(ConferenceError error, String message) {debugPrint("code: $error message: $message");}
Join a conference
By calling the
join
method of ConferenceSession
, you can join the specified conference.import 'package:tencent_conference_uikit/tencent_conference_uikit.dart';ConferenceSession.newInstance('your roomId')..onActionSuccess = _joinSuccess..onActionError = _joinError..join();void _joinSuccess() {//You can navigate to the conference page on your own in this success callback of joining a conference.Navigator.push(context,MaterialPageRoute(builder: (context) => ConferenceMainPage(),),);}void _joinError(ConferenceError error, String message) {debugPrint("code: $error message: $message");}
Note:
In the above sample code, only the simplest way to create/join a conference is shown. If you need to complete more settings before entering the conference, please refer to Pre-conference Control.
More Features
TUIRoomEngine SDK provides more rich features for audio and video rooms. For more information, see, Specific Content Please Refer API Overview.
Suggestions and Feedback
If you have any suggestions or feedback, please contact info_rtc@tencent.com.