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 pub add tencent_live_uikit

Step 2. Project Configuration

Android
iOS
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 rule
minifyEnabled true
proguardFiles 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 support
multiDexEnabled 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'
end
end
end
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',
]
end
end
end

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 class
class XXX extends StatelessWidget {
const XXX({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
// Add TUILiveKit navigator observer to listen for page routing changes and lifecycle management
navigatorObservers: [TUILiveKitNavigatorObserver.instance],
// Add localized agent to support multilingual copywriting display
localizationsDelegates: [
...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 location
TUICallback(
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.
For more information, see How to Calculate and Use UserSig.

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.