Menu

Flutter

This article will introduce how to complete the integration of the TUIRoomKit component in the shortest time. By following this document, you will complete the following key steps within an hour and ultimately obtain an audio/video conference function with a complete UI interface.

Environment Preparation

Platform
Version
Flutter
3.0.0 and above versions.
Android
Minimum compatibility with Android 4.1 (SDK API Level 16), recommended to use Android 5.0 (SDK API Level 21) and above.
Android Studio 3.5 and above (Gradle 3.5.4 and above).
Mobile devices with Android 4.1 and above.
iOS
iOS 12.0 and higher.

Step 1: Activate the Service

Before using TUIRoomKit, you need to enable the exclusive multi-person Audio/Video interactive features for TUIRoomKit. The detailed steps are as follows:
1. Log in to the Tencent Real-Time Communication Console Overview page, and click on Create Application.
2. In the popup page, select RTC Engine, enter the Application name, such as FlutterExample, and then click Create.



3. After your application created, you can get your SDKAppID and SecretKey on Basic informaction. SDKAppID and SecrentKey will be used in the Step 4: Login to TUIRoomKit Component. The Real-time Conference SDK service activation is completed.




Step 2: Integrate the TUIRoomKit Component

Add the rtc_conference_tuikit plugin dependency in pubspec.yaml file in your project
dependencies:
rtc_conference_tui_kit: The latest version
Execute the following command to install the plugin
flutter pub get

Step 3: Complete Project Configuration

Since the rtc_conference_tui_kit component has used the GetX state management for navigation, 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.
Open your project with Xcode, choose Project > 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',
]
end
end
end

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 interfaces 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:You have already obtained it in Step 1, so it will not be repeated here.
UserID:The ID of the current user, string type, only allows to contain English letters (a-z and A-Z), numbers (0-9), hyphens (-), and underscores (_).
UserSig:Encrypt the SDKAppID, UserID, etc. with the Secret Key obtained in Step 1 to get the UserSig, which is a ticket for authorization and is used for Tencent Cloud to recognize whether the current user can use the TRTC service. You can create a temporary usable UserSig through the UserSig generation function at the top of the Console overview page.


For more information, please refer to the UserSig related.
Note:
This step is also the step with the most feedback from developers we have received so far. Common problems are as follows:
SDKAppID is set incorrectly. Please use the SDKAppID of the international site correctly, otherwise, you will not be able to access it.
UserSig is misconfigured as an encryption key (SecretKey). UserSig is obtained by encrypting the SDKAppID, UserID, and expiration time with the SecretKey, not by directly configuring the SecretKey as UserSig.
UserID is set to simple strings like "1", "123", "111", etc. Since TRTC does not support multi-terminal login with the same UserID, simple UserIDs like "1", "123", "111" are easily occupied by your colleagues, causing login failure. Therefore, we recommend that you set some UserIDs with high identifiability when debugging.
The sample code in Github uses the genTestUserSig function to calculate UserSig locally to quickly get you through the current access process. However, this solution exposes your SecretKey in the App code, which is not conducive to your subsequent upgrades and protection of your SecretKey. Therefore, we strongly recommend that you put the calculation logic of UserSig on the server side and have the app request the real-time calculated UserSig from your server every time it uses the TUIRoomKit Component.

Step 5: Use TUIRoomKit

Set User Information

You can set the user's username and avatar by calling TUIRoomKit's setSelfInfo.
import 'package:rtc_conference_tui_kit/rtc_conference_tuikit.dart';

var roomKit = TUIRoomKit.createInstance();
roomKit.setSelfInfo(userName, avatarURL);
Parameter
Type
Meaning
userName
String
User Name
avatarURL
String
User Avatar URL

Create Room

By calling the createRoom method of TUIRoomEngine, you can create a room.
import 'package:rtc_conference_tui_kit/rtc_conference_tuikit.dart';

var roomKit = TUIRoomKit.createInstance();
TUIRoomInfo roomInfo = TUIRoomInfo(roomId: 'your room id');
var result = await roomKit.createRoom(roomInfo);
if (result.code == TUIError.success) {
// create room success
} else {
// create room error
}
Parameter
Type
Meaning
roomInfo
Basic information of the room
Note:
After calling the createRoom method to create a room, you will not automatically enter the room. You need to manually call the enterRoom interface to enter the room.

Entered Room

By calling the enterRoom method of TUIRoomEngine and specifying the room type and room number, you can enter the specified room.
import 'package:rtc_conference_tui_kit/rtc_conference_tuikit.dart';

var roomKit = TUIRoomKit.createInstance();
var result = await roomKit.enterRoom('roomId', // your room id
isOpenMicrophone, // whether to turn on the microphone when entering the room
isOpenCamera, // whether to turn on the camera when entering the room
userSpeaker); // whether to use speakers to play sound when entering the room
if (result.code == TUIError.success) {
// enter room success
} else {
// enter room success
}
Parameter
Type
Meaning
roomid
String
Room id to be added
isOpenMicrophone
bool
whether to turn on the microphone when entering the room
isOpenCamera
bool
whether to turn on the camera when entering the room
userSpeaker
bool
whether to use speakers to play sound when entering the room

More Features

TUIRoomEngine SDK Provided Rich Audio Video Room Features, Specific Content Please Refer API Overview.

Suggestions and Feedback

If you have any suggestions or feedback, please contact colleenyu@tencent.com.