tencent cloud

Tencent Real-Time Communication

소식 및 공지 사항
제품 업데이트
Tencent Cloud 오디오/비디오 단말 SDK 재생 업그레이드 및 권한 부여 인증 추가
TRTC 월간 구독 패키지 출시 관련 안내
제품 소개
제품 개요
기본 개념
제품 기능
제품 장점
응용 시나리오
성능 데이터
구매 가이드
Billing Overview
무료 시간 안내
Monthly subscription
Pay-as-you-go
TRTC Overdue and Suspension Policy
과금 FAQ
Refund Instructions
신규 사용자 가이드
Demo 체험
Call
개요(TUICallKit)
Activate the Service
Run Demo
빠른 통합(TUICallKit)
오프라인 푸시
Conversational Chat
온클라우드 녹화(TUICallKit)
AI Noise Reduction
UI 사용자 정의
Calls integration to Chat
Additional Features
No UI Integration
Server APIs
Client APIs
Solution
ErrorCode
릴리스 노트
FAQs
라이브 스트리밍
Billing of Video Live Component
Overview
Activating the Service (TUILiveKit)
Demo 실행
No UI Integration
UI Customization
Live Broadcast Monitoring
Video Live Streaming
Voice Chat Room
Advanced Features
Client APIs
Server APIs
Error Codes
Release Notes
FAQs
RTC Engine
Activate Service
SDK 다운로드
API 코드 예시
Usage Guidelines
API 클라이언트 API
고급 기능
RTC RESTFUL API
History
Introduction
API Category
Room Management APIs
Stream mixing and relay APIs
On-cloud recording APIs
Data Monitoring APIs
Pull stream Relay Related interface
Web Record APIs
AI Service APIs
Cloud Slicing APIs
Cloud Moderation APIs
Making API Requests
Call Quality Monitoring APIs
Usage Statistics APIs
Data Types
Appendix
Error Codes
콘솔 가이드
애플리케이션 관리
사용량 통계
모니터링 대시보드
개발 보조
Solution
Real-Time Chorus
FAQs
과금 개요
기능 관련
UserSig 관련
방화벽 제한 처리
설치 패키지 용량 축소 관련 질문
Andriod 및 iOS 관련
Web 관련
Flutter 관련
Electron 관련
TRTCCalling Web 관련
멀티미디어 품질 관련
기타 질문
Protocols and Policies
컴플라이언스 인증
보안 백서
정보 보안에 관한 참고 사항
Service Level Agreement
Apple Privacy Policy: PrivacyInfo.xcprivacy
TRTC 정책
개인 정보 보호 정책
데이터 처리 및 보안 계약
용어집

Integration (Flutter)

PDF
포커스 모드
폰트 크기
마지막 업데이트 시간: 2026-01-15 22:07:51

Feature Overview

TUILiveKit is a comprehensive voice chat room component. After integration, you can quickly implement the following key modules:
Host Preparation Page
Host Live Page
Live Stream List
Audience Viewing Page





Prerequisites

Activate the Service

Before using TUILiveKit, please refer to Activate Service to get the TUILiveKit trial version or activate the Pro Edition package.

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 installed. If not installed, refer to how to install cocoapods.

Code Integration

Step 1: Install TUILiveKit

In the root directory of your project, run the following command to install the tencent_live_uikit:
flutter pub add tencent_live_uikit
After installation completes, you should see output similar to:
Resolving dependencies...
Downloading packages...
......
+ tencent_live_uikit x.x.x
......
Changed xx dependencies!
xx packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

Step 2: Configure the Project

Android
iOS
1. If you're building for Android, add certain SDK classes to the obfuscation exclusion list because the SDK uses Java reflection internally.
Configure and enable obfuscation rules in your project's android/app/build.gradle file:
android {
......
buildTypes {
release {
......
// Configure and activate obfuscation rules
minifyEnabled true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
Add the following code in the android/app/proguard-rules.pro file. If the file does not exist, create a new one:
-keep class com.tencent.** { *; }
This completes the Proguard configuration.
2. Enable Multidex support in your android/app/build.gradle:
android {
......
defaultConfig {
......
// Enable Multidex support
multiDexEnabled true
}
}
1. When building for iOS release, configure symbol retention rules. In Xcode, select your target (usually Runner) in TARGETS, go to Project > Build Settings > Deployment, and set Strip Style to Non-Global Symbols to retain required global symbol information. This is mandatory—otherwise, runtime exceptions may prevent you from entering the room.
2. (Optional) If you need to debug on the iOS simulator and your Mac uses an Intel chip, add the following to your ios/Podfile:
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. TUILiveKit requires microphone access. You need to request microphone permission in your iOS app. Add the following entry to the top-level <dict> in your iOS project's Info.plist. This message is displayed to users when requesting permission:
<key>NSMicrophoneUsageDescription</key>
<string>CallingApp needs to access your microphone permission. Recorded video will have sound when enabled</string>
Add the following preprocessor definition in your ios/Podfile to enable 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',
]
end
end
end
After completing these steps, your app should compile successfully.

Step 3. Configure Navigation and Localization

To enable TUILiveKit’s page navigation and multi-language support, update your Flutter app configuration:
Add TUILiveKitNavigatorObserver.instance to navigatorObservers to track route changes and manage component lifecycle.
Add the required localization delegates to localizationsDelegates to display UI text in the correct system language.
Below is an example using MaterialApp:
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 app configurations
......
);
}
}
After configuring these settings, TUILiveKit navigation and internationalization will be enabled.

Complete Login

After integrating the code, call TUILogin.login to authenticate. This step is required before you can use any TUILiveKit features. Make sure all parameters are set correctly.
Note:
In production, it is highly recommended that you call login after your own user authentication and login operations. This prevents business logic confusion or data inconsistency, and better aligns with your existing user management and permission controls.
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 Parameters
Parameter
Type
Description
SDKAppID
int
Get your SDKAppID from the TRTC console > Application management.
UserID
String
Unique identifier for the current user.
Only letters, numbers, hyphens, and underscores are allowed.
To avoid multi-device login conflicts, do not use simple IDs like 1, 123, etc.
userSig
String
Authentication credential for TRTC. Please note:
In Development Environment: You can adopt the genTestSig function of the local GenerateTestUserSig class (example/lib/debug/generate_test_user_sig.dart) to generate userSig or, generate a temporary UserSig via the UserSig Generation Tool.
In Production Environment: To prevent key leakage, always generate UserSig on your server. For details, see Generating UserSig on the Server.
For more information, see How to Calculate and Use UserSig.

(Optional) Set up Floating Window

By default, your app's MaterialApp home page is attached to the rootNavigator.
To enable floating window (allowing the live stream window to be minimized and float above other pages), you need a navigator that persists across page navigation. Refer to the following steps:
1. Add a secondaryNavigator above the rootNavigator
2. Move your home page from rootNavigator to secondaryNavigator
3. Display the live stream page's Overlay on secondaryNavigator
The secondaryNavigator remains resident in the app throughout its lifecycle, enabling the floating window to persist even when navigating between different pages.
import 'package:tencent_live_uikit/tencent_live_uikit.dart';
import 'package:tencent_live_uikit/common/widget/global.dart';

// Your own App main class
class XXX extends StatelessWidget {
const XXX({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
// Homepage configuration
home: Navigator(
// Global.secondaryNavigatorKey is the global navigation key provided by TUILiveKit used to manage floating windows.
key: Global.secondaryNavigatorKey,
onGenerateRoute: (settings) => MaterialPageRoute(
settings: const RouteSettings(name: 'home_widget'),
builder: (BuildContext context) {
// HomeWidget is your own application homepage widget, replace with your actual homepag
return const HomeWidget();
},
),
),
// Other configuration of your App
......
);
}
}
This setup is required to support floating window pages. For full details, see Add Floating Window (Host Page) and Add Floating Window (Audience Page). If you don’t need floating window support, you can skip this step.

Next Steps

You’ve successfully integrated the voice chat component and completed login. Next, implement features such as Host Live Stream, Audience Viewing, and Live Stream List. See the table below for details:
Feature
Description
Integration Guide
Host Live Streaming
The complete process for hosts to create a voice chat room, including preparation and all live interactions.
Audience viewing
Audience members can listen, request to join the mic, view bullet comments, and more after entering a voice chat room.
Live Stream List
Displays the list of available voice chat rooms and their details.

FAQs

Repeated Login

You do not need to log in each time you enter a room. Typically, a single call to TUILogin.login is sufficient. We recommend aligning TUILogin.login and TUILogin.logout with your own authentication logic.

Unable to Enter Room on iOS Release Builds

Refer to Project Configuration for iOS:
In Xcode, select your application target (usually Runner) from the TARGETS list, choose Item > Build Settings > Deployment, and set Strip Style to Non-Global Symbols to preserve the necessary global symbol information. Otherwise, runtime exceptions may prevent you from entering the room.

Contact Us

If you have questions or need help during integration, join our Telegram technical group or contact us for support.



도움말 및 지원

문제 해결에 도움이 되었나요?

피드백