tencent cloud

Feedback

Last updated: 2024-12-03 17:52:23

    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 mic view, you can quickly set up your mic layout in the following ways to fully customize your mic 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
    
    
    

    
    
    

    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support