Integration
Feature Overview
TUILiveKit is a comprehensive live-streaming component. Once integrated, it allows you to quickly implement the following key functional modules for your Android application:
Host Prepare Page | Host Streaming Page | Live Stream List | Audience Viewing Page |
![]() | ![]() | ![]() | ![]() |
Preparations
Activate Service
Before using TUILiveKit, please refer to Activate Serviceto get the TUILiveKit trial version or activate the paid version.
Environment Requirements
Flutter
Flutter 3.27.4 or higher.
Dart 3.6.2 or higher.
Android
Android 5.0 (SDK API Level 21) or later.
Gradle 7.0 or higher.
Android 5.0 or higher mobile devices.
iOS
Xcode 15 or later.
iOS 13.0 or later.
CocoaPods environment is installed. If not installed, how install cocoapods.
Code Integration
Step 1. Download the TUILiveKit Component
In the root directory of your project, execute the following command in the command line to install the tencent_live_uikit plugin:
flutter pubaddtencent_live_uikit
Step 2. Project Configuration
1. If you need to compile and run on the Android platform, since we use Java reflection features internally in the SDK, you need to add some classes in the SDK to the non-obfuscation list.
you need to configure and enable the obfuscation rules in your project's
android/app/build.gradle file:android {......buildTypes {release {......// configuration and activation obfuscation ruleminifyEnabled trueproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'}}}
Create a proguard-rules.pro file in the android/app directory of your project, and add the following code to the
proguard-rules.pro file:-keep class com.tencent.** { *; }
2. Configure and enable Multidex support in your project's
android/app/build.gradle file.android {......defaultConfig {......// Enable Multidex supportmultiDexEnabled true}}
1. Open your project with Xcode, select Project > Build Settings > Deployment, and set Strip Style under it to
Non-Global Symbols to retain the required global symbol information.2. (Optional) If you need to debug on an iOS simulator, and your Mac computer uses an Intel chip, you need to add the following code to the
ios/Podfile file of your 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'endendend
3. Since TUILiveKit uses the audio and video capabilities of iOS, you need to grant permission to use the microphone and camera.
<key>NSCameraUsageDescription</key><string>CallingApp needs camera access. Video recording with picture only after enabling</string><key>NSMicrophoneUsageDescription</key><string>CallingApp needs mic access. Recorded video will have sound when enabled</string>
After completing the above addition, add the following preprocessor definition in your ios/Podfile to enable camera and mic permission.
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 3. Set Navigator Observers and Localizations Delegates
To ensure TUILiveKit can manage page navigation and display a multilingual interface, perform the following configuration in the Flutter application framework.
Add
TUILiveKitNavigatorObserver.instance to navigatorObservers to listen for route changes and manage component lifecycle.Add related localization agents to
localizationsDelegates to ensure interface copy can correctly display based on system language.Take the MaterialApp framework as an example, the sample code is as follows:
import 'package:tencent_live_uikit/tencent_live_uikit.dart';// Your own APP main classclass XXX extends StatelessWidget {const XXX({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(// Add TUILiveKit navigator observer to listen for page routing changes and lifecycle managementnavigatorObservers: [TUILiveKitNavigatorObserver.instance],// Add localized agent to support multilingual copywriting displaylocalizationsDelegates: [...LiveKitLocalizations.localizationsDelegates,...BarrageLocalizations.localizationsDelegates,...GiftLocalizations.localizationsDelegates],// Other configuration of your APP......);}}
Complete Login
After code integration, the next step is to complete the login. All TUILiveKit features require a successful login to function properly, so ensure your parameters are configured correctly.
Note:
In the example code, the login API is called directly. However, in a real-world application, it is highly recommended that you call the TUILiveKit login service only after your own user authentication and other internal login processes are complete. This prevents potential business logic confusion or data inconsistency caused by calling the login service too early, and it better aligns with your existing user management system.
import 'package:tencent_cloud_uikit_core/tencent_cloud_uikit_core.dart';......login() async {await TUILogin.instance.login(1400000001, // replace with the SDKAppID from the open service console"denny", // replace with your UserID"xxxxxxxxxxx", // you can calculate a UserSig in the console and fill it in this locationTUICallback(onError: (code, message) {print("TUILogin login fail, {code:$code, message:$message}");},onSuccess: () async {print("TUILogin login success");},),);}
Login API Parameter Description
Parameter | Type | Description |
SDKAppID | Int | |
UserID | String | The unique ID for the current user. Must contain only English letters, numbers, hyphens, and underscores. |
userSig | String | A ticket for Tencent Cloud authentication. Please note: Development Environment: You can use the local GenerateTestUserSig.genTestSig function to generate a UserSig or generate a temporary UserSig via the UserSig Generation Tool.Production Environment: To prevent key leakage, you must use a server-side method to generate UserSig. For details, see Generating UserSig on the Server. |
Next Steps
Congratulations! You have successfully integrated the TUILiveKit component and completed the login. You can now implement features such as host streaming, viewer watching, and the live stream list. Please refer to the table below for integration guides:
Feature | Description | Integration Guide |
Host Streaming | The complete workflow for a host to start a stream, including pre-stream setup and various in-stream interactions. | |
Audience Viewing | Audience can watch live streaming after entering the anchor's live streaming room, with features like audience mic connection, live room information, online audience, and bullet screen display. | |
Live Stream List | Display the live stream list interface and features, including the live stream list and room information display. |
FAQs
Do I Need to Call Login Every Time I Enter a Room
No. Normally you just need to call
TUILogin.login only once. We recommend that you associate TUILogin.login and TUILogin.logout with your own login business.Running or Unable to Enter Room after Packaging in IOS Release
Refer to Project Configuration for iOS. Step one: In Xcode, select Project > Build Settings > Deployment, and set Strip Style to
Non-Global Symbols to preserve necessary global symbol information.



