Start Broadcasting and Watch

适用场景

我们的主播开播观众观看功能主要依赖于我们视频直播的核心控件(LiveCoreView),该核心控件提供了 开播前画面预览、开启视频直播、关闭视频直播,直播间内和观众连线,跨房和其他主播连线等丰富的 API。
当您通过 快速接入 接入视频直播 UIKit 后,如果 UI 风格和您的理想中 UI 风格有出入,您可以使用我们的核心控件半小时内快速搭建视频直播的主流程。然后在其之上添加您自己的业务 UI视图。

开发环境要求

Android 5.0(SDK API Level 21)及以上版本。
Gradle 7.0 及以上的版本。
Android 5.0 及以上的手机设备。
环境配置或编译运行期间,如有问题,请参见 常见问题

步骤一:开通服务

请参见 开通服务(TUILiveKit),领取体验版或者开通付费版。

步骤二:工程配置

1. 在 app 目录下找到build.gradle.kts(或build.gradle)文件,并在其中增加如下代码,加入对 LiveCoreView 组件的依赖:
build.gradle.kts
build.gradle
api("io.trtc.uikit:live-stream-core:latest.release")
api 'io.trtc.uikit:live-stream-core:latest.release'
2. 由于我们在 SDK 内部使用了Java 的反射特性,需要将 SDK 中的部分类加入不混淆名单,因此需要您在proguard-rules.pro文件中添加如下代码:
-keep class com.tencent.** { *; }
3. 在 app目录下找到AndroidManifest.xml 文件,在 application 节点中添加 tools:replace="android:allowBackup"和android:allowBackup="false",覆盖组件内的设置,使用自己的设置。
// app/src/main/AndroidManifest.xml
<application ...
// 添加如下配置覆盖 依赖的 sdk 中的配置
android:allowBackup="false" tools:replace="android:allowBackup">

步骤三:登录

在您的项目中添加如下代码,它的作用是通过调用 TUICore 中的相关接口完成 TUI 组件的登录。这一步骤至关重要,只有在成功登录之后,您才能正常使用 LiveCoreView 提供的各项功能。
Kotlin
Java
//登录 TUILogin.login(applicationContext, 1400000001, // 请替换为步骤一取到的 SDKAppID "denny", // 请替换为您的 UserID "xxxxxxxxxxx", // 您可以在控制台中计算一个 UserSig 并填在这个位置 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") } })
//登录
TUILogin.login(context,
1400000001, // 请替换为步骤一取到的 SDKAppID
"denny", // 请替换为您的 UserID
"xxxxxxxxxxx", // 您可以在控制台中计算一个 UserSig 并填在这个位置
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);
}
});
参数说明 这里详细介绍一下 login 函数中所需要用到的几个关键参数:
参数
类型
说明
SDKAppID
int
在步骤一中的最后一步中您已经获取到,这里不再赘述。
UserID
String
当前用户的 ID,字符串类型,只允许包含英文字母(a-z 和 A-Z)、数字(0-9)、连词符和下划线。
userSig
String
使用 步骤一 的第3步中获取的 SecretKey 对 SDKAppID、UserID 等信息进行加密,就可以得到 UserSig,它是一个鉴权用的票据,用于腾讯云识别当前用户是否能够使用 TRTC 的服务。您可以通过控制台中的 辅助工具 生成一个临时可用的 UserSig。更多信息请参见 如何计算及使用 UserSig
说明:
开发环境:如果您正在本地开发调试阶段,可以采用本地 GenerateTestUserSig.genTestSig函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解,一旦您的密钥泄露,攻击者就可以盗用您的腾讯云流量。
生产环境:如果您的项目要发布上线,请采用 服务端生成 UserSig 的方式。

步骤四:使用核心控件实现直播功能

创建核心控件开启预览

创建核心控件:您可以在您实现推流的 Activity 中通过 java 代码或者 xml 方式加载我们的核心控件,其中代码方式示例如下(XML 方式也类似):
kotlin
java
val livecoreView = LiveCoreView(this)
LiveCoreView liveCoreView = new LiveCoreView(this);
开启直播预览:本地摄像头预览,并未真正开启直播间。
kotlin
java
livecoreView.startCamera(true, null)
liveCoreView.startCamera(true, null);

主播开启直播间和观众加入直播间

主播开启直播间:开启一个直播间,并将本地摄像头采集的数据和麦克风采集的数据推流到直播间。
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);
观众加入直播间:观众进入直播间,并拉取直播间主播的视频流和音频流。
kotlin
java
livecoreView.joinLiveStream("roomId_123456", null)
livecoreView.joinLiveStream("roomId_123456", null);
主播开启直播间开始直播
观众加入直播间观看直播








观众连麦

您如果需要实现观众连麦功能,可参见 观众连麦 文档。

主播连线

您如果需要实现主播连线功能,可参见 主播连线 文档。

设置连线布局

您可以通过以下方式快速设置您与连线主播或您与连麦观众的布局。
kotlin
java
// 设置宫格布局
mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.GRID_LAYOUT, "")

// 设置浮窗布局
mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.FLOAT_LAYOUT, "")

// 设置自定义布局
var layoutJson = ""
mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.FREE_LAYOUT, layoutJson)
// 设置宫格布局
mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.GRID_LAYOUT, "");

// 设置浮窗布局
mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.FLOAT_LAYOUT, "");

// 设置自定义布局布局
String layoutJson = "";
mLiveStreamListView.setLayoutMode(LiveCoreViewDefine.LayoutMode.FREE_LAYOUT, layoutJson);
说明:自定义布局 layoutJson 是一个 json 格式的字符串,详细内容请查看 自定义布局 json
主播连线中-九宫格布局
主播连线中-浮窗布局
主播连线中-自定义布局












自定义布局 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
}
]
}
}