이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
Voice Room Intergration

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.
﻿
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.
Voice chat room preview screen	In-room screen of the voice chat room
Live list frame	Audience in-room screen of the voice chat room