このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

ボイスルーム統合

This article will guide you through the process of integrating the TUILiveKit component in a short time. Following this document, you will complete several key steps within an hour and ultimately obtain a voice room feature with a complete UI interface.







Environment Preparations

Android 5.0 (SDK API level 21) or above.
Android Studio 4.2.1 or above.
Devices with Android 5.0 or above.

Step 1. Activate the service

Before using the Audio and Video Services provided by Tencent Cloud, you need to go to the Console and activate the service for your application. For detailed steps, refer to Activate the service

Step 2: Download TUILiveKit component

Clone/download the code in Github , and then copy the tuilivekit subdirectory in the Android directory to the same level directory as the app in your current project, as shown below:




Step 3: Project configuration

Java
1. Add jitpack repository dependencies to your project (Download the three-party library SVGAPlayer that plays gift svg animation):
Gradle 7.0 or earlier
gradle 7.0 or later
Add the address of the jitpack repository to the build.gradle file in the root directory of the project:
allprojects { repositories { google() mavenCentral()
// add jitpack repository maven { url 'https://jitpack.io' } } }
Add the address of the jitpack repository to the settings.gradle file in the root directory of the project:
dependencyResolutionManagement { repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS) repositories { google() mavenCentral()
// add jitpack repository maven { url 'https://jitpack.io' } } }
2. Find the settings.gradle file in the project root directory and add the following code to it. Its function is to import the tuilivekit component downloaded in Step 2 into your current project:
include ':tuilivekit'
3. Find the build.gradle file in the app directory and add the following code to it. Its function is to declare the dependence of the current app on the newly added tuilivekit component:
api project(':tuilivekit')
Note:
The TUILiveKit project has internal dependencies by default: TRTC SDKIM SDKtuiroomengineand the public library tuicore, and does not require separate configuration by developers. If you need to upgrade the version, just modify the tuilivekit/build.gradle file.
4. Since we use the reflection feature of Java inside the SDK, we need to add some classes in the SDK to the unobfuscated list, so you need to add the following code to the proguard-rules.pro file:
-keep class com.tencent.** { *; }
5. In AndroidManifest.xml, set a Theme.AppCompat Theme to the android:theme attribute of application:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<application android:theme="@style/Theme.AppCompat.DayNight.NoActionBar">
...
</application>
</manifest>
Note:
TUILiveKit will internally help you dynamically apply for camera, microphone, read storage permissions, etc. If you need to delete it due to your business problems, you can modify tuilivekit/src/main/AndroidManifest.xml
If you encounter an allowBackup related exception prompted by AndroidManifest.xml, please refer to allowBackup Exceptions.
If you encounter problems with Theme.AppCompat, please refer to Activity theme issue.

Step 4. Log in

Before invoking the functions of the TUILiveKit component, you need to perform the login of the TUI component. In your project, it is recommended to add the following login code in your business login scenario or in the first startup activity of the app, which is used to complete the login of the TUI component by calling the relevant APIs in TUICore. This step is very important, because you can use all functions of TUILiveKit only after the login is successful. Therefore, please patiently check whether the relevant parameters are correctly configured.
Java
import TUICore

TUILogin.login(context,
1400000001, // Replace it with the SDKAppID obtained in Step 1
"denny", // Please replace it with your UserID
"xxxxxxxxxxx", // You can calculate a UserSig in the console and fill it in
new TUICallback() {
@Override
public void onSuccess() {
Log.i(TAG, "login success");
}

@Override
public void onError(int errorCode, String errorMessage) {
Log.e(TAG, "login failed, errorCode: " + errorCode + " msg:" + errorMessage);
}
});
Parameter description: The key parameters used by the login function are as detailed below:
SDKAppID: Obtained in the last step in Step 1 and not detailed here.
UserID: The ID of the current user, which is a string that can contain only letters (a–z and A–Z), digits (0–9), hyphens (-), or underscores (_).
UserSig: The authentication credential used by Tencent Cloud to verify whether the current user is allowed to use the TRTC service. You can get it by using the SDKSecretKey to encrypt the information such as SDKAppID and UserID. You can generate a temporary UserSig by clicking the UserSig Generate button in the console.



For more information, see UserSig.
Note:
Many developers have contacted us with many questions regarding this step. Below are some of the frequently encountered problems:
SDKAppID is invalid.
userSig is set to the value of Secretkey mistakenly. The userSig is generated by using the SecretKey for the purpose of encrypting information such as sdkAppId, userId, and the expiration time. But the value of the userSig that is required cannot be directly substituted with the value of the SecretKey.
userId is set to a simple string such as 1, 123, or 111, and your colleague may be using the same userId while working on a project simultaneously. In this case, login will fail as TRTC doesn't support login on multiple terminals with the same UserID. Therefore, we recommend you use some distinguishable userId values during debugging.
The sample code on GitHub uses the genTestUserSig function to calculate UserSig locally, so as to help you complete the current integration process more quickly. However, this scheme exposes your SecretKey in the application code, which makes it difficult for you to upgrade and protect your SecretKey subsequently. Therefore, we strongly recommend you run the UserSig calculation logic on the server and make the application request the UserSig calculated in real time every time the application uses the TUILiveKit component from the server.

Step 5. Enter the live preview screen

Note:
It's important to make sure you've followed Step 4 to complete the login. Only after you log in to TUILogin.login can you enter the live preview screen normally.
1. Create a new file named app_activity_anchor.xml (Default path: app/src/main/res/layout/app_activity_anchor.xml).
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/fl_container" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
2. Create a new file named AnchorActivity.java and register in the AndroidManifest.xml. By loading TUILiveKit TUIVoiceRoomFragment page, you can pull up preview screen.
java
public class AnchorActivity extends AppCompatActivity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.app_activity_anchor); //RoomId can be customized
String roomId = "123666";

TUIVoiceRoomFragment.RoomParams params = new TUIVoiceRoomFragment.RoomParams();
//The default value is the maximum number of seat supported by the package params.maxSeatCount = 0; params.seatMode = TUIRoomDefine.SeatMode.APPLY_TO_TAKE;

FragmentManager fragmentManager = getSupportFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); TUIVoiceRoomFragment fragment = new TUIVoiceRoomFragment(roomId,
TUIVoiceRoomFragment.RoomBehavior.PREPARE_CREATE, params); fragmentTransaction.add(R.id.fl_container, fragment); fragmentTransaction.commit(); } }
Register AnchorActivity in AndroidManifest.xml of the app Project (please use the actual package name of your AnchorActivity):
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<application>
...
<!-- Example: To register AnchorActivity, please use your actual package name -->
<activity android:name="com.trtc.uikit.livekit.example.main.AnchorActivity"
android:theme="@style/Theme.AppCompat.DayNight.NoActionBar"/>
...
</application>
</manifest>
Note:
Since AnchorActivity inherited from AppCompatActivity, AnchorActivity was given a Theme.AppCompattheme. You can modify it to your own Theme.AppCompat theme.
If you encounter problems with Theme.AppCompat, please refer to Activity theme issue.
3. Where you need to start live streaming (depending on your business, it can be executed in a click event in MainActivity by default), perform the following operations to pull up the host start page:
Java
Intent intent = new Intent(context, AnchorActivity.class); startActivity(intent);
Voice chat room preview screen
Voice chat room in-room screen







Step 6: Pull Room List

Note:
Please ensure that step four has been completed as per Step 4 . You can enter the live preview screen normally only after TUILogin.login has successfully logged in.
1. Create a new file app_activity_main.xml (default path: app/src/main/res/layout/app_activity_main.xml).
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/fl_live_list" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
2. Create MainActivity.java, register it inAndroidManifest.xml, and by loading the TUILiveKit page of TUILiveListFragment , you can display the room list.
Java
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.app_activity_main);

FragmentManager fragmentManager = getSupportFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); TUILiveListFragment listFragment = new TUILiveListFragment(); fragmentTransaction.add(R.id.fl_live_list, listFragment); fragmentTransaction.commit(); } }
Register MainActivity in the app's AndroidManifest.xml (use your actual package name for MainActivity):
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<application>
...
<!-- Example: Register MainActivity, please use your actual package name -->
<activity
android:name="com.trtc.uikit.livekit.example.view.main.MainActivity"
android:theme="@style/Theme.AppCompat.DayNight.NoActionBar"/>
...
</application>
</manifest>
Note:
SinceMainActivity inherits fromAppCompatActivity, you need to set aTheme.AppCompat theme forMainActivity. You can modify it to your ownTheme.AppCompat theme.
If you encounter Theme.AppCompat issues, please refer to Activity Theme Question.




Step 7. The audience enters the studio

Note:
It's important to make sure you've followed Step 4 to complete the login. Only after you log in to TUILogin.login can you enter the live preview screen normally. Also, the audience UserID should not be the same as the anchor UserID.
1. Create a new file named app_activity_audience.xml (Default path: app/src/main/res/layout/app_activity_audience.xml).
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/fl_container" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
2. Create a new file named AudienceActivity.java and register in the AndroidManifest.xml. By loading TUILiveKit TUILiveRoomAudienceFragment page, you can enter room.
java
public class AudienceActivity extends AppCompatActivity { @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.app_activity_audience); //RoomId can be customized
String roomId = "123666";

FragmentManager fragmentManager = getSupportFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); TUIVoiceRoomFragment fragment = new TUIVoiceRoomFragment(roomId,
TUIVoiceRoomFragment.RoomBehavior.JOIN, null); fragmentTransaction.add(R.id.fl_container, fragment); fragmentTransaction.commit(); } }
Register AudienceActivity in AndroidManifest.xml of the app Project (please use the actual package name of your AudienceActivity):
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<application>
...
<!-- Example: To register AudienceActivity, please use your actual package name -->
<activity android:name="com.trtc.uikit.livekit.example.main.AudienceActivity"
android:theme="@style/Theme.AppCompat.DayNight.NoActionBar"/>
...
</application>
</manifest>
Note:
Since AnchorActivity inherited from AudiencetActivity, AudiencetActivity was given a Theme.AppCompattheme. You can modify it to your own Theme.AppCompat theme.
If you encounter problems with Theme.AppCompat, please refer to Activity theme issue.
3. Where you need the audience to enter the room (depending on your business, it can be executed in a click event in MainActivity by default), do the following to pull up the audience entry page:
Java
Intent intent = new Intent(context, AudienceActivity.class); startActivity(intent);
Voice Chat Room
Voice Chat Room







More features

Barrage
Gift

Q&A

If you encounter problems with access and use, see Q&A