このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。
ドキュメンテーション概要/
Live/
UIKit/
Andorid/
Voice Room Features/
Start Broadcasting and Listen/

Start Broadcasting and Listen

Applicable Scenario

Our broadcasters' streaming and viewers watching feature mainly depend on our core widget of the voice chat room (SeatGridView), which provides a rich array of APIs for managing voice chat rooms, such as opening and closing them, managing seats within the live room, like applying for a seat, inviting to a seat, moving seats, kicking users off the seat, and more.
After you've integrated the voice chat room UIKit through Quick Access, if there's a discrepancy between the UI style and your ideal UI style, you can use our core widgets to quickly build the main process of the voice chat room within half an hour. Then, add your own business UI views on top of it.

Environment Requirements

Android 5.0 (SDK API Level 21) or later.
Gradle v7.0 or later.
Mobile device on Android 5.0 or later.
For issues during environment configuration or compilation, please refer to FAQ.

Step 1. Activate the service

Please refer to Activating Services (TUILiveKit) to receive the trial version or activate the paid version.

Step 2. Configure the project

1. Find the build.gradle.kts (or build.gradle) file under the app directory and add the following code to include the dependency for SeatGridView component:
build.gradle.kts
build.gradle
api("io.trtc.uikit:voice-room-core:latest.release")
api 'io.trtc.uikit:voice-room-core:latest.release'
2. As the SDK uses Java's reflection feature internally, you need to add certain classes in the SDK to the obfuscation allowlist by adding the following code to the proguard-rules.pro file:
-keep class com.tencent.** { *; }
-keep class com.trtc.uikit.livekit.voiceroomcore.** { *; }
3. Find the AndroidManifest.xml file under the app directory and add tools:replace="android:allowBackup" and android:allowBackup="false" in the application node to override the settings within the component with your own settings.
  // app/src/main/AndroidManifest.xml
  
  <application
    ...
  
    // Add the following configuration to override the configuration in the dependency SDK
    android:allowBackup="false"
    tools:replace="android:allowBackup">

Step 3. Log in

Add the following code to your project, which completes the login of TUI Components by calling the relevant interfaces in TUICore. This step is critical; you can only use the features provided by SeatGridView after successful login.
Kotlin
Java
// Log in
TUILogin.login(applicationContext,
    1400000001,  // Please replace with the SDKAppID obtained in Step 1
    "denny",  // Please replace with your UserID
    "xxxxxxxxxxx",  // You can calculate a UserSig in the Console and fill it in here
    object : TUICallback() {
        override fun onSuccess() {
            Log.i(TAG, "login success")
        }

        override fun onError(errorCode: Int, errorMessage: String) {
            Log.e(TAG, "login failed, errorCode: $errorCode msg:$errorMessage")
        }
    })
// Log in
TUILogin.login(context, 
    1400000001,     // Please replace with the SDKAppID obtained in Step 1
    "denny",        // Please replace with your UserID
    "xxxxxxxxxxx",  // You can calculate a UserSig in the Console and fill it in here
    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
Here we detail the key parameters required in the login function:
Parameter
Type
Description
SDKAppID
int
You have already obtained it in the last step of Step 1, so it will not be elaborated here.
UserID
String
The ID of the current user, in string format, only allows letters (a-z and A-Z), digits (0-9), hyphens, and underscores.
userSig
String
Use the SecretKey obtained in Step One, Step 3 to encrypt information such as SDKAppID and UserID to obtain UserSig, which is a token for authentication used by Tencent Cloud to identify whether the current user can use TRTC services. You can generate a temporarily usable UserSig through the Auxiliary Tools in the console. For more information, see UserSig.
Note:
Development Environment: If you are in the local development and debugging stage, you can use the local GenerateTestUserSig.genTestSig function to generate UserSig. In this method, the SDKSecretKey is vulnerable to decompilation and reverse engineering. If your key is leaked, attackers can steal your Tencent Cloud traffic.
Production environment: If your project is to be released online, please use the server-generated UserSig method.

Step 4: Use core controls to implement the live streaming feature

Create core controls

Create core controls: You can load our core controls in your Activity through Java code or XML. The code example is as follows (XML method is similar):
kotlin
java
val seatGridView = SeatGridView(this)
SeatGridView seatGridView = new SeatGridView(this);

The anchor starts the live streaming room and the audience joins the live streaming room

Anchor starts the live streaming room: Start a live streaming room and enable local microphone capturing.
kotlin
java
val roomInfo = TUIRoomDefine.RoomInfo()
roomInfo.roomId = "roomId_123456"
seatGridView.startVoiceRoom(roomInfo, null)

seatGridView.startMicrophone(null)
TUIRoomDefine.RoomInfo roomInfo = new TUIRoomDefine.RoomInfo();
roomInfo.roomId = "roomId_123456";
seatGridView.startVoiceRoom(roomInfo, null);

seatGridView.startMicrophone(null);
Audience joins the live streaming room.
kotlin
java
seatGridView.joinVoiceRoom("roomId_123456", null)
seatGridView.joinVoiceRoom("roomId_123456", null);
Anchor starts the live streaming room and begins the live stream
Audience joins the live streaming room to watch the live stream








Microphone Position Management

If you need to implement the Seat Management feature, refer to the Seat Management documentation.

Set seat list layout arrangement

You can quickly set up your seat list layout in the following ways.
kotlin
java
// Set grid layout
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.GRID, null)

// Set element layout
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.FOCUS, null)

// Set vertical layout
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.VERTICAL, null)

// Set custom layout
val layoutConfig = VoiceRoomDefine.SeatViewLayoutConfig().apply {
     rowConfigs = ArrayList()
     rowSpacing = dp2px(10); //Spacing between each row
 }
 // First row configuration
 val rowConfig1 = VoiceRoomDefine.SeatViewLayoutRowConfig().apply {
     count = 3 //Number of seats displayed in the first row
     seatSize = VoiceRoomDefine.Size(dp2px(50), dp2px(50)) //Size of each seat view in the first row
     seatSpacing = dp2px(10) //Horizontal spacing of each seat in the first row
     alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.CENTER //Alignment of seats in the first row
 }
 layoutConfig.rowConfigs.add(rowConfig1)
// Second row configuration
 val rowConfig2 = VoiceRoomDefine.SeatViewLayoutRowConfig().apply {
     count = 3 //Number of seats displayed in the second row
     seatSize = VoiceRoomDefine.Size(dp2px(50), dp2px(50)) //Size of each seat view in the second row
     seatSpacing = dp2px(10) //Horizontal spacing of each seat in the second row
     alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.SPACE_AROUND //Alignment of seats in the second row
 }    
 layoutConfig.rowConfigs.add(rowConfig2)
 seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.FREE, layoutConfig)
// Set grid layout
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.GRID, null)

// Set element layout
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.FOCUS, null)

// Set vertical layout
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.VERTICAL, null)

// Set free layout
VoiceRoomDefine.SeatViewLayoutConfig layoutConfig = new VoiceRoomDefine.SeatViewLayoutConfig();
layoutConfig.rowConfigs = new ArrayList<>();
layoutConfig.rowSpacing = dp2px(10); //Spacing between each row
// First row configuration
VoiceRoomDefine.SeatViewLayoutRowConfig rowConfig1 = new VoiceRoomDefine.SeatViewLayoutRowConfig();
rowConfig1.count = 3; //Number of seats displayed in the first row
rowConfig1.seatSize = new VoiceRoomDefine.Size(dp2px(50),dp2px(50)); //Size of each seat view in the first row
rowConfig1.seatSpacing = dp2px(10); //Horizontal spacing of each seat in the first row
rowConfig1.alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.CENTER; //Alignment of seats in the first row
layoutConfig.rowConfigs.add(rowConfig1);
// Second row configuration
VoiceRoomDefine.SeatViewLayoutRowConfig rowConfig2 = new VoiceRoomDefine.SeatViewLayoutRowConfig();
rowConfig2.count = 3; //Number of seats displayed in the second row
rowConfig2.seatSize = new VoiceRoomDefine.Size(dp2px(50),dp2px(50)); //Size of each seat view in the second row
rowConfig1.seatSpacing = dp2px(10); //Horizontal spacing of each seat in the second row
rowConfig2.alignment = VoiceRoomDefine.SeatViewLayoutRowAlignment.SPACE_AROUND; //Alignment of seats in the second row
layoutConfig.rowConfigs.add(rowConfig2);
seatGirdView.setLayoutMode(VoiceRoomDefine.LayoutMode.FREE, layoutConfig);
Note:
The parameter settings of the custom layout can be viewed in the parameter description of SeatViewLayoutRowConfig. The alignment method can be referred to the SeatViewLayoutRowAlignment description. The alignment effect can be referred to the Custom Layout Alignment Illustration.
Grid Layout
Element Layout
Vertical Layout
Custom Layout

















Custom Layout Alignment Illustration:





Custom Seat View

If you think our default UI does not meet your needs and you want to customize your seat view, you can quickly set up your seat layout in the following ways to fully customize your seat view UI.
kotlin
java
val adapter = object : VoiceRoomDefine.SeatViewAdapter {
    override fun createSeatView(seatGridView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo): View {
        return TestSeatInfoView(context, seatGridView, seatInfo)
    }

    override fun updateSeatView(seatGridView: SeatGridView,seatInfo: TUIRoomDefine.SeatInfo, seatView: View) {
        (seatView as TestSeatInfoView).updateSeatView(seatGridView, seatInfo)
    }

    override fun updateUserVolume(seatGridView: SeatGridView, volume: Int, customSeatView: View) {
        (customSeatView as TestSeatInfoView).updateUserVolume(seatGridView, volume)
    }
}

seatGirdView.setSeatViewAdapter(adapter)

class TestSeatInfoView constructor(context: Context, seatGirdView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo) : FrameLayout(context) {
    init {
        initView() //Initialize view
    }

    fun updateSeatView(seatGirdView: SeatGridView, seatInfo: TUIRoomDefine.SeatInfo) {
        updateView(seatInfo) //Update custom seat view UI
    }

    fun updateUserVolume(seatGirdView: SeatGridView, volume: Int) {
        updateUserVolume(volume) //Update volume change UI
    }
}
VoiceRoomDefine.SeatViewAdapter adapter = new VoiceRoomDefine.SeatViewAdapter() {
    @Override
    public View createSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo) {
        return new TestSeatInfoView(getApplicationContext(), seatGridView, seatInfo);
    }

    @Override
    public void updateSeatView(SeatGridView seatGridView, TUIRoomDefine.SeatInfo seatInfo,
                                     View customSeatView) {
        ((TestSeatInfoView) customSeatView).updateSeatView(seatGridView, seatInfo);
    }

    @Override
    public void updateUserVolume(SeatGridView seatGridView, int volume, View customSeatView) {
        ((TestSeatInfoView) customSeatView).updateUserVolume(seatGridView, volume);
    }
};
seatGirdView.setSeatViewAdapter(adapter);

public class TestSeatInfoView extends FrameLayout {

    public TestSeatInfoView(@NonNull Context context, SeatGridView seatGirdView, TUIRoomDefine.SeatInfo seatInfo) {
        super(context);
        initView();
    }

    public void updateSeatView(SeatGridView seatGirdView, TUIRoomDefine.SeatInfo seatInfo) {
        updateView(seatInfo);
    }

    public void updateUserVolume(SeatGridView seatGirdView, int volume) {
        updateUserVolume(volume);
    }
 }
Default Mic View
Custom Mic View Example