Flutter
Download
Mode fokus
Ukuran font
This guide walks you through getting started with the
TUILiveKit Flutter Demo in just 10 minutes. Experience a fully featured UI for video live streaming and voice chat room scenarios.Prerequisites
Activate the Service
Refer to Activate the Service to obtain a TUILiveKit trial version. Then, go to the Console for application management, and get the following:
SDKAppID: Application identifier (required). Tencent Cloud uses SDKAppId for billing and details.SDKSecretKey: Application secret key, used to initialize the configuration file with secret information.Environment Preparation
Ensure your development environment meets the following requirements before running the demo:
Platform | Description |
Flutter | Flutter: Version 3.29.3 or later Dart: Version 3.7.2 or later |
Android | Android Studio: Version 3.5 or later Android OS: Devices running Android 5.0 or later Java Version: JDK 17 required |
iOS | Xcode: Version 15 or later iOS: Devices running iOS 13.0 or later CocoaPods: CocoaPods environment installed. If not installed, see the CocoaPods Official Installation Guide. |
Instructions
Get the Demo
1. Download the Source Code: Download the TUIKit_Flutter source code from GitHub, or run the following command in your terminal:
git clone https://github.com/Tencent-RTC/TUIKit_Flutter.git
2. Open TUIKit_Flutter/application in Android Studio or VSCode. The following instructions use Android Studio as an example:
Note：
If Flutter and Dart plugins are not installed in Android Studio, see: Install Flutter and Dart Plugins.
Setup
1. Configure
sdkAppId and secretKey: In the application project, enter your sdkAppId and secretKey in the /lib/debug/generate_test_user_sig.dart file:
Note：
In this demo, authentication is handled by configuring the
secretKey in the client code. The secretKey can be decompiled and compromised. If leaked, attackers can steal your Tencent Cloud traffic. This approach is only suitable for local demo runs and feature debugging.For production, generate the
UserSig on your server. When a UserSig is required, your app should request a dynamic UserSig from your backend for authentication. See Generating UserSig on the Server for details.2. Configure Apple Developer Signing(iOS Only):
Open the Runner.xcworkspace project under
TUIKit_Flutter/application/ios in Xcode.In the project's TARGETS under the Signing & Capabilities tab, select Automatically manage signing and configure your Apple Developer account and Bundle Identifier:
Build and Run the Demo
Live streaming requires camera and microphone access. We recommend running and debugging the demo on a physical device.
Installing Dependencies
From the project root directory, install dependencies with:
flutter pub get
Run
For Android devices:
Connect your Android device to your computer, enable developer mode, turn on USB debugging, and select USB for file transfer if prompted.
In Android Studio, select your device from the Running devices menu at the top.
Click the run button to compile. Once finished, the Demo App installs automatically on your device.
Note:
For a complete live streaming experience, run the demo on two devices and log in with two different users (for example, one as the host and one as the audience).
Experience the Basic Features
Login & Registration
Enter your
ID in the UserID field. If the UserID has not been used before, you’ll be redirected to the registration page to set your avatar and nickname.Anchor（mike） | | Audience（vince） | |
 |  |  |  |
Note：
Do not use simple UserIDs such as "1", "123", or "111".
TRTC does not support multi-end login for the same UserID, and these simple UserIDs are likely to be used by others during collaborative development, which can cause login failures. Use distinctive UserIDs during debugging.
Video Live Streaming
Click
Live > Video Live to start a video live streaming session.Live Streaming List | Host Preview Before Going Live | Host Starts Video Live Streaming | Audience Watches Live Stream |
 |  |  |  |
Voice Chat Room
Click
Live > Voice Room to start a voice chat session.Live Streaming List | Host Preview Before Going Live | Host Starts Voice Chat Live | Audience Joins Voice Chat Room |
 |  |  |  |
Next Steps
After running the Demo, refer to the following integration guides to add these features to your own project:
Feature | Description | Integration Guide |
Video Live Streaming | Supports ultra-low latency HD streaming, multi-user co-hosting/PK, real-time beauty filters, bullet comments, and gift interactions—enabling you to build interactive video live streaming scenarios. | |
Voice Chat Room | Delivers ultra-clear audio quality, supports multi-user co-hosting, seat management, and real-time text chat—ideal for KTV, social, or gaming-themed rooms. |
FAQs
CocoaPods Installation Method?
Install CocoaPods using gem: Run sudo gem install cocoapods in your terminal.
Tip：
During sudo gem install cocoapods, you may be prompted for your computer password. Enter your administrator password as instructed.
How do I install Flutter and Dart plugins in Android Studio?
Navigate to Android Studio’s top left menu: Settings > Plugins, then search for and install the plugins.
Real Device Debugging?
Enable developer mode to run on a real device.
iOS: Connect your device to your computer, then go to
Settings > Privacy & Security > Developer Mode and enable developer mode.Android: Enable developer mode by tapping the build number multiple times in settings. If you cannot find it, refer to your device's official website or search online for instructions.
Get a signature error or login failure when running the demo?
Verify that the
sdkAppId and secretKey entered in application/lib/debug/generate_test_user_sig.dart are correct and match the values from the Tencent RTC Console > Application Management page.Runtime error: Error resolving plugin [id: 'dev.flutter.flutter-plugin-loader', version: '1.0.0']
If you encounter the following error message during runtime:
* What went wrong:Error resolving plugin [id: 'dev.flutter.flutter-plugin-loader', version: '1.0.0']> Build was configured to prefer settings repositories over project repositories but repository 'xxx' was added by settings file 'settings.gradle'
Encounter error code "9519" or "9523" with the message "The request packets timed out while waiting to be sent..." during login?
Please first try changing your current network environment and attempt to log in again.
If the issue persists even after changing your network environment, contact us for support.
Encounter error code "-3301" with the message "Services are not available in your region" after entering the room？
Contact Us
If you have questions or need support during integration or usage, join the Telegram Technical Group, or contact us.
Bantuan dan Dukungan
Apakah halaman ini membantu?
Anda juga dapat Menghubungi Penjualan atau Mengirimkan Tiket untuk meminta bantuan.
masukan