tencent cloud

All product documents
Tencent Real-Time Communication
DocumentationTencent Real-Time CommunicationVoice Chat Room (with UI)Integration (TUILiveKit)Flutter
Flutter
Download PDF
Last updated: 2025-04-09 18:04:15
Flutter
Last updated: 2025-04-09 18:04:15
Download PDF
This document will introduce how to complete the access of the TUILiveKit component in a short time. Follow this document, and you can complete the access work within 10 minutes and finally obtain a voice room feature with a complete UI interface.

Environment Preparation

Platform
Version
Flutter
Flutter 3.27.4 and higher versions.
Dart 3.6.2 or higher versions.
Android
Android Studio 3.5 and above versions.
Android devices running Android 5.0 and above versions.
iOS
Xcode 15.0 and above versions.
Ensure that your project has a deemed valid developer signature.

Step 1: Activating Service

See Activate Service (TUILiveKit) to claim the experience version or enable the paid edition.

Step Two: Import the TUILiveKit Component

In the root directory of the project, run the following command to install the tencent_live_uikit plug-in via command line.
flutter pub add tencent_live_uikit

Step Three: Complete Project Configuration

Android
iOS
1. If you need to compile and run on the Android platform, since we use Java's reflection features internally in the SDK, some classes in the SDK need to be added to the non-obfuscation list.
First, need to configure and activate the obfuscation rule in the android/app/build.gradle file of the project:
  android {
    ......
    buildTypes {  
        release {  
            ......
            minifyEnabled true  
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'  
        } 
    }
}
Create a proguard-rules.pro file under the android/app directory of the project, and add the following code in the proguard-rules.pro file:
-keep class com.tencent.** { *; }
2. Configure to enable Multidex support in the android/app/build.gradle file of the project.
  android {  
    ......
    defaultConfig {
      ......
      multiDexEnabled true
    } 
}
1. Use Xcode to open your project, select Project > Building Settings > Deployment, set the Strip Style below to Non-Global Symbols to preserve the necessary global symbol information.
2. Selectable If you need to debug on the iOS Simulator, and the Mac computer you are using uses an Intel chip, you need to add the following code in the ios/Podfile file of the project:
target 'xxxx' do
  ......
end
......

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['VALID_ARCHS'] = 'arm64 arm64e x86_64'
      config.build_settings['VALID_ARCHS[sdk=iphonesimulator*]'] = 'x86_64'
    end
  end
end
3. Since TUILiveKit will use iOS's audio and video features, authorization needed for permission to use microphone and camera.
Authorization operation method: Add the following two items at level 1 <dict> under the directory of Info.plist in your iOS project, which correspond to the prompt messages when the system pops up the authorization dialog for the microphone and camera respectively.
<key>NSCameraUsageDescription</key>
<string>The CallingApp requires camera permission. Video recording with picture only after enabling.</string>
<key>NSMicrophoneUsageDescription</key>
<string>The CallingApp needs to access your microphone permission. The recorded video will have sound after being enabled.</string>
After completing the above additions, add the following preprocessor definitions in your ios/Podfile to enable camera and mic 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: Configure Routing and Internationalization

You need to configure routing and proxy in the app. Take configuration in MateriaApp as an example. Code as follows:
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

return MaterialApp(
   navigatorObservers: [TUILiveKitNavigatorObserver.instance],
   localizationsDelegates: [
      ...LiveKitLocalizations.localizationsDelegates,
      ...BarrageLocalizations.localizationsDelegates,
      ...GiftLocalizations.localizationsDelegates,
   ],
   supportedLocales: [
      ...LiveKitLocalizations.supportedLocales,
      ...BarrageLocalizations.supportedLocales,
      ...GiftLocalizations.supportedLocales
   ],
   //... 
);

Step 5: Log In

Before using the Voice Room feature, make sure you have executed the following login code to complete the initialization work.
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

void login() async {
  await TUILogin.instance.login(
    1400000001,     // Replace with the SDKAppID obtained in step 1
    "denny",        // Replace with your UserID
    "xxxxxxxxxxx",  // You can calculate a UserSig in the console and fill it in this position.
    TUICallback(
      onError: (code, message) {
        print("TUILogin login fail, {code:$code, message:$message}");
      },
      onSuccess: () async {
        print("TUILogin login success");
      },
    ),
  );
}
Parameter Description
Here, we will introduce several key parameters needed in the login function:
SDKAppID: You have already obtained it in the last step of step 1. No redundancy here.
User ID: The current user's ID, string type, only allow to include English letters (a-z and a-z), numbers (0-9), hyphen (-) and underscore (_).
UserSig: Encrypt information such as SDKAppID and UserID using the SecretKey obtained in step 3 of step 1 to obtain UserSig. It is a ticket for authentication, used by Tencent Cloud to determine whether the current user can use TRTC services.
You can generate a temporary available UserSig through the Auxiliary Tool in the console.

For more information, see UserSig.
Notes:
This step is also the one for which we have received the most developer feedback currently. The common issues are as follows:
SDKAppID configuration error. The SDKAppID on the domestic site generally starts with 140 and is a 10-bit integer.
UserSig is misconfigured as an encryption key (SecretKey). UserSig is generated by encrypting information such as SDKAppID, UserID, and expiration time with SecretKey, rather than directly configuring SecretKey as UserSig.
The UserID is set to simple strings such as "1", "123", "111". Since TRTC does not support multi-end login with the same UserID, when multiple people collaborate in development, UserIDs like "1", "123", "111" can be easily occupied by your colleagues, causing login failure. Therefore, we recommend that you set some highly recognizable UserIDs when debugging.
The example code in Github uses the genTestUserSig function to calculate UserSig locally to help you complete the current access process more quickly. However, this solution will expose your SecretKey in the App's code, which is not conducive to your subsequent upgrade and protection of your SecretKey. Therefore, we strongly recommend that you perform the calculation logic of UserSig on the server side, and the app requests the real-time calculated UserSig from your server every time it uses the TUILiveKit component.

Step 6: Integration of the Anchor Broadcast Page

Where you need to enable voice room (specifically determined by your business, executed in its click event), perform the following operations, route to the anchor broadcast page:
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
   builder: (context) {
      final String userId = 'replace with your userId';
      final String roomId = LiveIdentityGenerator.instance.generateId(userId, RoomType.live)
      return TUILiveRoomAnchorWidget(roomId: roomId);
   }));
Voice chat room preview screen
In-room screen of the voice chat room







Step 7: Integrating the Live List Page

On the live list page, the live voice chat rooms will be shown. You can click any live room and join the live room as an audience to listen and link mic.
You can perform the following operations to route to the live list page:
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

Navigator.push(context, MaterialPageRoute(
      builder: (context) {
         return Scaffold(
            body: SafeArea(child: LiveListWidget()));
      }));
You can also directly add the live room list page as a subspace of one of your pages:
import 'package:tencent_live_uikit/tencent_live_uikit.dart';

// Single child widget, taking Container as an example
Container(
   child: LiveListWidget()
)

// Multiple child widget, taking Column as an example
Column(
   children:[LiveListWidget()]
)
Live list frame
Audience in-room screen of the voice chat room







Communication and Feedback

If you have any requirements or feedback, you can contact: info_rtc@tencent.com.

Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 available.

Submit a Ticket
7x24 Phone Support
Hong Kong, China
+852 800 906 020 (Toll Free)
United States
+1 844 606 0804 (Toll Free)
United Kingdom
+44 808 196 4551 (Toll Free)
Canada
+1 888 605 7930 (Toll Free)
Australia
+61 1300 986 386 (Toll Free)
EdgeOne hotline
+852 300 80699
More local hotlines coming soon