Start Broadcasting and Watch

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
            }
        ]
    }
}
Applicable scenarios
Development environment requirements
Step 1: Activate the service
Step 2: Project Configuration
Step 3: Log in
Step 4: Use LiveCoreView to implement live streaming
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.
The anchor opens the live broadcast room and starts the live broadcast	Viewers join the live broadcast room to watch the live broadcast
Anchor is online - Nine-grid layout	Anchor is online-Floating window layout	Anchor is online-Custom layout
Start Broadcasting and Watch

Applicable scenarios

Development environment requirements

Step 1: Activate the service

Step 2: Project Configuration

Step 3: Log in

Step 4: Use LiveCoreView to implement live streaming

Create core controls and enable preview

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

﻿﻿﻿

Audience connection

Anchor connection

Set connection layout

﻿﻿﻿

Custom Layout Json
