TUILiveKit 主播开播页为直播场景提供开箱即用的全功能界面,支持快速搭建主播开播所需的核心能力,让您无需关注复杂 UI 与逻辑实现,即可高效集成直播开播流程。
功能概览
开播前预览:支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置;
连麦互动:支持直播过程中与观众 或 与其他直播间主播实时互动;
观众互动:支持弹幕、礼物等丰富直播互动形式;
直播间管理:支持在线用户列表展示、以及直播间内的禁言、踢人等多种管理操作。
开播前预览 | 连麦互动 | 观众互动 | 直播间管理 |
![]() | ![]() | ![]() | ![]() |
快速接入
步骤 1. 开通服务
步骤 2. 代码集成
步骤 3. 添加开播前的准备页面
AnchorPrepareView 组件已内置了摄像头预览、音效设置、布局设置、以及其他功能设置,您需创建并加载 AnchorPrepareView ,具体示例代码如下:import android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewclass AnchorActivity : AppCompatActivity() {lateinit var anchorPrepareView: AnchorPrepareViewoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 1.创建并初始化 AnchorPrepareViewanchorPrepareView = AnchorPrepareView(this)anchorPrepareView.init("live_1235858", null)// 2.将 AnchorPrepareView 添加到界面setContentView(anchorPrepareView)}}
import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView;public class AnchorActivity extends AppCompatActivity {private AnchorPrepareView anchorPrepareView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 1.创建并初始化 AnchorPrepareViewanchorPrepareView = new AnchorPrepareView(this);anchorPrepareView.init("live_1235858", null);// 2.将 AnchorPrepareView 添加到界面setContentView(anchorPrepareView);}}
步骤 4. 添加主播用的推流页面
AnchorView 组件已内置了音视频推流、观众连麦、直播互动、直播管理等功能,您只需创建并加载AnchorView ,具体示例代码如下:import android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.anchorboardcast.AnchorViewimport com.trtc.uikit.livekit.features.anchorboardcast.RoomBehaviorimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewimport com.trtc.uikit.livekit.features.anchorprepare.LiveStreamPrivacyStatusimport io.trtc.tuikit.atomicxcore.api.live.LiveInfoclass AnchorActivity : AppCompatActivity() {lateinit var anchorPrepareView: AnchorPrepareViewoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 1.创建并初始化 AnchorPrepareViewanchorPrepareView = AnchorPrepareView(this)anchorPrepareView.init("live_1235858", null)// 2.将 AnchorPrepareView 添加到界面setContentView(anchorPrepareView)}fun initAnchorView() {// 1.创建 AnchorViewval anchorView = AnchorView(this)// 2.初始化 AnchorView,其中 liveInfo 为直播间信息,anchorPrepareView 为您的开播前的准备页面val liveInfo = LiveInfo()liveInfo.liveID = "live_1236666"liveInfo.liveName = anchorPrepareView.getState()?.roomName?.getValue() ?: ""liveInfo.isPublicVisible = anchorPrepareView.getState()?.liveMode?.getValue() == LiveStreamPrivacyStatus.PUBLICliveInfo.coverURL = anchorPrepareView.getState()?.coverURL?.getValue() ?: ""liveInfo.seatLayoutTemplateID = anchorPrepareView.getState()?.coGuestTemplateId?.getValue() ?: 600// 进房行为:// RoomBehavior.CREATE_ROOM: 主播创建房间// RoomBehavior.ENTER_ROOM: 观众进入房间anchorView.init(liveInfo, anchorPrepareView.getCoreView(), RoomBehavior.CREATE_ROOM, null)// 3.将 AnchorView 添加到界面setContentView(anchorView)}}
import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import com.trtc.uikit.livekit.features.anchorboardcast.AnchorView;import com.trtc.uikit.livekit.features.anchorboardcast.RoomBehavior;import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView;import com.trtc.uikit.livekit.features.anchorprepare.LiveStreamPrivacyStatus;import io.trtc.tuikit.atomicxcore.api.live.LiveInfo;public class AnchorActivity extends AppCompatActivity {private AnchorPrepareView anchorPrepareView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 1.创建并初始化 AnchorPrepareViewanchorPrepareView = new AnchorPrepareView(this);anchorPrepareView.init("live_1235858", null);// 2.将 AnchorPrepareView 添加到界面setContentView(anchorPrepareView);}private void initAnchorView() {// 1.创建 AnchorViewAnchorView anchorView = new AnchorView(this);// 2.初始化 AnchorViewLiveInfo liveInfo = new LiveInfo();liveInfo.setLiveID("live_1236666");liveInfo.setLiveName(anchorPrepareView.getState().roomName.getValue());liveInfo.setPublicVisible(anchorPrepareView.getState().liveMode.getValue() == LiveStreamPrivacyStatus.PUBLIC);liveInfo.setCoverURL(anchorPrepareView.getState().coverURL.getValue());liveInfo.setSeatLayoutTemplateID(anchorPrepareView.getState().coGuestTemplateId.getValue() == null ? 600 : anchorPrepareView.getState().coGuestTemplateId.getValue());// 进房行为:// RoomBehavior.CREATE_ROOM: 主播创建房间// RoomBehavior.ENTER_ROOM: 观众进入房间anchorView.init(liveInfo, anchorPrepareView.getCoreView(), RoomBehavior.CREATE_ROOM, null);// 3.将 AnchorView 添加到界面setContentView(anchorView);}}
步骤 5. 从准备页面跳转到推流页面
import android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListenerclass AnchorActivity : AppCompatActivity() {lateinit var anchorPrepareView: AnchorPrepareViewoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 1.创建并初始化 AnchorPrepareViewanchorPrepareView = AnchorPrepareView(this)anchorPrepareView.init("live_1235858", null)// 2.将 AnchorPrepareView 添加到界面setContentView(anchorPrepareView)// 3.设置 AnchorPrepareView 的回调anchorPrepareView.addAnchorPrepareViewListener(object : AnchorPrepareViewListener {override fun onClickStartButton() {initAnchorView()}override fun onClickBackButton() {finish()}})}}
import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView;import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListener;public class AnchorActivity extends AppCompatActivity {private AnchorPrepareView anchorPrepareView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 1.创建并初始化 AnchorPrepareViewanchorPrepareView = new AnchorPrepareView(this);anchorPrepareView.init("live_1235858", null);// 2.将 AnchorPrepareView 添加到界面setContentView(anchorPrepareView);// 3.设置 AnchorPrepareView 的回调anchorPrepareView.addAnchorPrepareViewListener(new AnchorPrepareViewListener() {@Overridepublic void onClickStartButton() {initAnchorView();}@Overridepublic void onClickBackButton() {finish();}});}}
自定义您的界面布局
TUILiveKit 支持灵活定制开播页与直播页的功能和样式,您可根据业务需求调整布局、隐藏 / 显示功能模块。
直播布局模板选择
TUILiveKit 提供 4 种直播布局模板,您可在主播开播页的 UI 交互「布局」入口 选择合适样式:
布局模板一览:
名称 | 动态宫格布局 | 浮动小窗布局 | 固定宫格布局 | 固定小窗布局 |
模板 ID | 600 | 601 | 800 | 801 |
描述 | 默认布局,可根据连麦人数动态调整宫格大小。 | 连麦嘉宾以浮动小窗形式显示。 | 连麦人数固定,每个嘉宾占据一个固定宫格。 | 连麦人数固定,嘉宾以固定小窗形式显示。 |
预览 | ![]() | ![]() | ![]() | ![]() |
自定义开播页功能区
import android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewclass AnchorActivity : AppCompatActivity() {lateinit var anchorPrepareView: AnchorPrepareViewoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)anchorPrepareView = AnchorPrepareView(this)anchorPrepareView.init("live_1235858", null)// 1. 自定义功能区 - 示例:隐藏整个功能区anchorPrepareView.disableFeatureMenu(true)setContentView(anchorPrepareView)}}
import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView;public class AnchorActivity extends AppCompatActivity {private AnchorPrepareView anchorPrepareView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);anchorPrepareView = new AnchorPrepareView(this);anchorPrepareView.init("live_1235858", null);// 1. 自定义功能区 - 示例:隐藏整个功能区anchorPrepareView.disableFeatureMenu(true);setContentView(anchorPrepareView);}}
隐藏整个功能区 | 隐藏美颜按钮 | 隐藏音效按钮 | 隐藏摄像头切换按钮 |
disableFeatureMenu(true) | disableMenuBeautyButton(true) | disableMenuAudioEffectButton(true) | disableMenuSwitchCameraButton(true) |
![]() | ![]() | ![]() | ![]() |
自定义主播直播页功能区
import android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.anchorboardcast.AnchorViewimport com.trtc.uikit.livekit.features.anchorboardcast.RoomBehaviorimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListenerimport com.trtc.uikit.livekit.features.anchorprepare.LiveStreamPrivacyStatusimport io.trtc.tuikit.atomicxcore.api.live.LiveInfoclass AnchorActivity : AppCompatActivity() {...fun initAnchorView() {val anchorView = AnchorView(this)val liveInfo = LiveInfo()liveInfo.liveID = "live_1236666"liveInfo.liveName = anchorPrepareView.getState()?.roomName?.getValue() ?: ""liveInfo.isPublicVisible = anchorPrepareView.getState()?.liveMode?.getValue() == LiveStreamPrivacyStatus.PUBLICliveInfo.coverURL = anchorPrepareView.getState()?.coverURL?.getValue() ?: ""liveInfo.seatLayoutTemplateID = anchorPrepareView.getState()?.coGuestTemplateId?.getValue() ?: 600anchorView.init(liveInfo, anchorPrepareView.getCoreView(), RoomBehavior.CREATE_ROOM, null)// 1. 自定义功能区 - 示例:隐藏主播连线功能anchorView.disableFooterCoHost(true)setContentView(anchorView)}}
import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import com.trtc.uikit.livekit.features.anchorboardcast.AnchorView;import com.trtc.uikit.livekit.features.anchorboardcast.RoomBehavior;import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView;import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListener;import com.trtc.uikit.livekit.features.anchorprepare.LiveStreamPrivacyStatus;import io.trtc.tuikit.atomicxcore.api.live.LiveInfo;public class AnchorActivity extends AppCompatActivity {...private void initAnchorView() {AnchorView anchorView = new AnchorView(this);LiveInfo liveInfo = new LiveInfo();liveInfo.setLiveID("live_1236666");liveInfo.setLiveName(anchorPrepareView.getState().roomName.getValue());liveInfo.setPublicVisible(anchorPrepareView.getState().liveMode.getValue() == LiveStreamPrivacyStatus.PUBLIC);liveInfo.setCoverURL(anchorPrepareView.getState().coverURL.getValue());liveInfo.setSeatLayoutTemplateID(anchorPrepareView.getState().coGuestTemplateId.getValue() == null ? 600 : anchorPrepareView.getState().coGuestTemplateId.getValue());anchorView.init(liveInfo, anchorPrepareView.getCoreView(), RoomBehavior.CREATE_ROOM, null);// 1. 自定义功能区 - 示例:隐藏主播连线功能anchorView.disableFooterCoHost(true);setContentView(anchorView);}}
隐藏顶部观众列表功能 | 隐藏底部观众连麦功能 | 隐藏底部主播连线功能 | 隐藏底部主播 PK 功能 |
disableHeaderVisitorCnt(true) | disableFooterCoGuest(true) | disableFooterCoHost(true) | disableFooterBattle(true) |
![]() | ![]() | ![]() | ![]() |
文案定制
TUILiveKit 使用 Android 通用的 XML 资源文件来管理 UI 所需的文案显示,您可以直接通过
XML 文件修改需要调整的文案:
图标定制
TUILiveKit 使用 Android 通用的
drawable 资源文件夹管理 UI 所需的图片资源,您可以通过替换资源文件快速修改自定义界面所需的图标,替换时请确保新的文件名称与原文件名称一致。
下一步
恭喜您,现在您已经成功集成了 主播开播 。接下来,您可以实现观众观看、直播列表等功能,可参考下表:
常见问题
开播后无画面?
请前往应用信息 > 权限 > 相机,检查摄像头权限是否开启,可参考下图:

点击开播按钮无法开播,提示“未登录”?















