tencent cloud

Feedback

Last updated: 2024-11-26 15:16:02

    Applicable scenarios

    Our anchor start broadcast and audience viewing functions mainly rely on our live video core control (LiveCoreView), which provides rich APIs such as screen preview before broadcast, start live video, close live video, connect with audience in the live broadcast room, connect with other anchors across rooms, etc.
    After you access the live video UIKit through quick access, if the UI style is different from your ideal UI style, you can use our LiveCoreView to quickly build the main process of live video in half an hour. Then add your own business UI view on it.

    Development environment requirements

    Android 5.0 (SDK API Level 21) and above.
    Gradle 7.0 and above.
    Android 5.0 and above mobile devices.
    If you have any questions during environment configuration or compilation and running, please refer to the FAQ.

    Step 1: Activate the service

    Please refer to Activate Service (TUILiveKit) to get the trial version or activate the paid version.

    Step 2: Project Configuration

    1. Find the build.gradle.kts (or build.gradle) file in the app directory and add the following code to it to add the dependency on the LiveCoreView component:
    build.gradle.kts
    build.gradle
    api("io.trtc.uikit:live-stream-core:latest.release")
    api 'io.trtc.uikit:live-stream-core:latest.release'
    2. Since we use Java's reflection feature in the SDK, we need to add some classes in the SDK to the non-obfuscated list. Therefore, you need to add the following code to the proguard-rules.pro file:
    -keep class com.tencent.** { *; }
    -keep class com.trtc.uikit.livekit.livestreamcore.** { *; }
    3. Find the AndroidManifest.xml file in the app directory, add tools:replace="android:allowBackup" and android:allowBackup="false" in the application node to override the settings in the component and use your own settings.
    // app/src/main/AndroidManifest.xml
    <application
    ...
    // Add the following configuration to overwrite the configuration in the dependent SDK
    android:allowBackup="false"
    tools:replace="android:allowBackup">

    Step 3: Log in

    Add the following code to your project. It is used to complete the login of TUI components by calling the relevant interfaces in TUICore. This step is very important. Only after successful login can you use the functions provided by LiveCoreView normally.
    Kotlin
    Java
    // Log in
    TUILogin.login(applicationContext,
    1400000001, // Please replace it 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 this position
    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 it 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 this position
    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 is a detailed introduction to several key parameters needed in the login function:
    Parameter
    Type
    Description
    SDKAppID
    int
    In the final step of step one, you have already obtained it, so it will not be repeated here.
    UserID
    String
    The ID of the current user, string type, is only allowed to contain letters (a-z and A-Z), numbers (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 LiveCoreView to implement live streaming

    Create core controls and enable preview

    Create core controls: You can load our core controls in your streaming Activity using Java code or XML. The code example is as follows (the XML method is similar):
    kotlin
    java
    val livecoreView = LiveCoreView(this)
    LiveCoreView liveCoreView = new LiveCoreView(this);
    Start live preview: local camera preview, but the live broadcast room is not actually started.
    kotlin
    java
    livecoreView.startCamera(true, null)
    liveCoreView.startCamera(true, null);

    The host opens the live broadcast room and the audience joins the live broadcast room

    The host opens the live broadcast room: opens a live broadcast room and pushes the data collected by the local camera and the microphone to the live broadcast room.
    kotlin
    java
    val roomInfo = TUIRoomDefine.RoomInfo()
    roomInfo.roomId = "123456"
    livecoreView.startLiveStream(roomInfo, null)
    
    livecoreView.startMicrophone(null)
    TUIRoomDefine.RoomInfo roomInfo = new TUIRoomDefine.RoomInfo();
    roomInfo.roomId = "roomId_123456";
    livecoreView.startLiveStream(roomInfo, null);
    
    livecoreView.startMicrophone(null);
    Viewers join the live broadcast room: Viewers enter the live broadcast room and pull the video and audio streams of the host in the live broadcast room.
    kotlin
    java
    livecoreView.joinLiveStream("roomId_123456", null)
    livecoreView.joinLiveStream("roomId_123456", null);
    The anchor opens the live broadcast room and starts the live broadcast
    Viewers join the live broadcast room to watch the live broadcast
    
    
    

    
    
    

    Audience connection

    If you need to implement the audience connection function, please refer to the audience connection document.

    Anchor connection

    If you need to implement the anchor connection function, please refer to the anchor connection document.

    Set connection layout

    You can quickly set the layout between you and the connected anchor or you and the audience in the following way.
    kotlin
    java
    // Set the grid layout
    mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.GRID_LAYOUT, "")
    
    // Set the floating window layout
    mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.FLOAT_LAYOUT, "")
    
    // Set custom layout
    var layoutJson = ""
    mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.FREE_LAYOUT, layoutJson)
    // Set the grid layout
    mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.GRID_LAYOUT, "");
    
    // Set the floating window layout
    mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.FLOAT_LAYOUT, "");
    
    // Set custom layout
    String layoutJson = "";
    mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.FREE_LAYOUT, layoutJson);
    Note:
    The layoutJson is a Json format string, please see Custom Layout Json for details.
    Anchor is online - Nine-grid layout
    Anchor is online-Floating window layout
    Anchor is online-Custom layout

    
    
    

    
    
    
    
    
    

    Custom Layout Json

    {
    "1": {
    "backgroundColor": 4095,
    "viewInfoList": [
    {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": -1,
    "zOrder": 0,
    "backgroundColor": 0
    }
    ]
    },
    "2": {
    "backgroundColor": 0,
    "viewInfoList": [
    {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": -1,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 1.533333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    }
    ]
    },
    "3": {
    "backgroundColor": 4095,
    "viewInfoList": [
    {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": -1,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 1.533333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 1.165333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    }
    ]
    },
    "4": {
    "backgroundColor": 4095,
    "viewInfoList": [
    {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": -1,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 1.533333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 1.165333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 0.797333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    }
    ]
    },
    "5": {
    "backgroundColor": 4095,
    "viewInfoList": [
    {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": -1,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 1.533333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 1.165333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 0.797333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 0.429333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    }
    ]
    },
    "6": {
    "backgroundColor": 0,
    "viewInfoList": [
    {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": -1,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 1.533333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 1.165333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 0.797333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 0.429333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.024,
    "y": 0.429333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    }
    ]
    },
    "7": {
    "backgroundColor": 0,
    "viewInfoList": [
    {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": -1,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 1.533333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 1.165333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 0.797333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 0.429333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.024,
    "y": 0.429333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.28,
    "y": 0.797333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    }
    ]
    },
    "8": {
    "backgroundColor": 0,
    "viewInfoList": [
    {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": -1,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 1.533333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 1.165333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 0.797333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 0.429333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.024,
    "y": 0.429333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.28,
    "y": 0.797333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.28,
    "y": 1.165333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    }
    ]
    },
    "9": {
    "backgroundColor": 4095,
    "viewInfoList": [
    {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": -1,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 1.533333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 1.165333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.5,
    "y": 0.797333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.789333333,
    "y": 0.429333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.024,
    "y": 0.429333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.28,
    "y": 0.797333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.28,
    "y": 1.165333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    },
    {
    "x": 0.024,
    "y": 1.533333333,
    "width": 0.186666666,
    "height": 0.368,
    "zOrder": 0,
    "backgroundColor": 0
    }
    ]
    }
    }
    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