Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
Conference
Overview
  • Web
    • Integration
    • UI Customization
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomEvents
        • TUIRoomEngine Defines
    • FAQs
  • iOS
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Android
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Electron
    • Integration
    • UI Customization
    • In-Conference Chat
    • Cloud Recording
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine Defines
    • FAQs
  • Flutter
    • Integration
    • UI Customization
    • Conference Control
    • Cloud Recording
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Overview
    • Overview
  • Activate the Service
  • Pricing
    • TRTC Conference Monthly Packages
    • Pay-As-You-Go
    • Free Minutes
  • Error Code
Conference

Integration

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 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

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 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.
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 SDK 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 temporarily available UserSig through the UserSig Tools through the project sidebar in the console.


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 (SDKSecretKey). UserSig is obtained by encrypting the SDKAppID, UserID, and expiration time with the SDKSecretKey, not by directly configuring the SDKSecretKey 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 SDKSecretKey in the App code, which is not conducive to your subsequent upgrades and protection of your SDKSecretKey. 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 (optional)

You can set the username and avatar by calling TUIRoomEngine's setSelfInfo.
import 'package:rtc_room_engine/rtc_room_engine.dart';

TUIRoomEngine.setSelfInfo(userName, avatarURL);
Parameter
Type
Meaning
userName
String
User Name
avatarURL
String
User Avatar URL

Start a quick conference

By calling the quickStart method of ConferenceSession, you can start a quick conference.
import 'package:rtc_conference_tui_kit/rtc_conference_tui_kit.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:rtc_conference_tui_kit/rtc_conference_tui_kit.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");
}

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 info_rtc@tencent.com.