本文将指导您如何快速集成 TUILiveKit 组件，实现主播开播全流程功能，包括开播前的准备和开播后的各种互动。
效果展示
TUILiveKit 提供了完整的主播功能模块，涵盖了从开播准备到直播互动的所有环节：
主播开播页：实现摄像头预览、美颜、滤镜、摄像头翻转等功能。
主播直播页：支持观众连麦、主播连线、主播 PK、直播间信息展示、观众列表、礼物和弹幕等功能。
主播开播预览 | 主播直播中 | 主播连麦中 |
 |  |
 |
布局样式
TUILiveKit 提供了四种预设的布局模板，您可以在主播开播页布局功能入口根据需求选择合适的样式。
名称 | 动态宫格布局 | 浮动小窗布局 | 固定宫格布局 | 固定小窗布局 |
模板 ID | 600 | 601 | 800 | 801 |
描述 | 默认布局，可根据连麦人数动态调整宫格大小。 | 连麦嘉宾以浮动小窗形式显示。 | 连麦人数固定，每个嘉宾占据一个固定宫格。 | 连麦人数固定，嘉宾以固定小窗形式显示。 |
预览 |  |  |  |  |
前提条件
功能接入
步骤 1：创建并加载主播准备页视图
主播准备页用于在开播前进行摄像头预览和功能设置，您需创建并加载主播准备页视图，具体示例代码如下：
val roomId = "1236666"val anchorPrepareView = AnchorPrepareView(context)anchorPrepareView.init(roomId, null)setContentView(mAnchorPrepareView)
String roomId = "live_123456";mAnchorPrepareView = new AnchorPrepareView(this);mAnchorPrepareView.init(roomId, null);setContentView(mAnchorPrepareView)
步骤 2：监听开播页回调
实现
AnchorPrepareViewDefine.AnchorPrepareViewListener 代理方法，以响应用户点击 “开始直播”或“返回” 按钮的事件。// 在您的 Activity 中实现 AnchorPrepareViewDefine.AnchorPrepareViewListener 接口，并重写下面两个方法。// 点击开始直播按钮回调override fun onClickStartButton() {//}override fun onClickBackButton() {finish();}// 给主播准备页视图添加监听器。anchorPrepareView.addAnchorPrepareViewListener(this)
// 在您的 Activity 中实现 AnchorPrepareViewDefine.AnchorPrepareViewListener 接口，并重写下面两个方法。// 点击开始直播按钮回调@Overridepublic void onClickStartButton() {}// 点击返回按钮回调@Overridepublic void onClickBackButton() {}// 给主播准备页视图添加监听器。mAnchorPrepareView.addAnchorPrepareViewListener(this)
步骤 3：创建并加载主播直播页
在
AnchorPrepareViewDefine.AnchorPrepareViewListener.onClickStartButton 回调中创建 AnchorView 实例，并传入直播信息进行初始化。您可以根据需要通过设置 liveInfo.seatLayoutTemplateId 来选择不同的布局。如果未设置，将默认使用 600 动态宫格布局。val anchorView = AnchorView(context)val liveInfo = LiveInfo()liveInfo.roomInfo = TUIRoomDefine.RoomInfo();liveInfo.roomInfo.roomId = "1236666"liveInfo.roomInfo.name = anchorPrepareView?.state?.roomName?.getValue()liveInfo.isPublicVisible = anchorPrepareView?.state?.liveMode?.getValue() == LiveStreamPrivacyStatus.PUBLICliveInfo.coverUrl = anchorPrepareView?.state?.coverURL?.getValue()// 选择不同布局liveInfo.seatLayoutTemplateId = 600anchorView.init(liveInfo, anchorPrepareView?.coreView, AnchorViewDefine.RoomBehavior.CREATE_ROOM);setContentView(anchorView)
mAnchorView = new AnchorView(this);TUILiveListManager.LiveInfo liveInfo = new TUILiveListManager.LiveInfo();liveInfo.roomInfo = new TUIRoomDefine.RoomInfo();liveInfo.roomInfo.roomId = "1236666";liveInfo.roomInfo.name = mAnchorPrepareView.getState().roomName.getValue();liveInfo.isPublicVisible = mAnchorPrepareView.getState().liveMode.getValue() == AnchorPrepareViewDefine.LiveStreamPrivacyStatus.PUBLIC;liveInfo.coverUrl = mAnchorPrepareView.getState().coverURL.getValue();mAnchorView.init(liveInfo, mAnchorPrepareView.getCoreView(), AnchorViewDefine.RoomBehavior.CREATE_ROOM);setContentView(mAnchorView)
步骤 4：监听并处理直播事件
您可以实现
AnchorViewDelegate 代理方法，以响应用户单击结束直播或悬浮窗按钮的事件。// 在您的 Activity 中实现 AnchorViewDefine.AnchorViewListener 接口，并重写下面两个方法。// 点击结束直播按钮回调override fun onEndLiving(state: AnchorViewDefine.AnchorState?) {}// 点击悬浮窗按钮回调override fun onClickFloatWindow() {}// 给主播开播页视图添加监听器。anchorView.addAnchorViewListener(this)
// 在您的 Activity 中实现 AnchorViewDefine.AnchorViewListener 接口，并重写下面两个方法。// 点击结束直播按钮回调@Overridepublic void onEndLiving(AnchorViewDefine.AnchorState state) {}// 点击悬浮窗按钮回调@Overridepublic void onClickFloatWindow() {}// 给主播开播页视图添加监听器。mAnchorView.addAnchorViewListener(this);
功能定制
主播开播页功能定制
隐藏操作区视图。
anchorPrepareView.disableFeatureMenu(true)
mAnchorPrepareView.disableFeatureMenu(true);
隐藏操作区美颜功能。
anchorPrepareView.disableMenuBeautyButton(true)
mAnchorPrepareView.disableMenuBeautyButton(true);
隐藏操作区音效功能。
anchorPrepareView.disableMenuAudioEffectButton(true)
mAnchorPrepareView.disableMenuAudioEffectButton(true);
隐藏操作区翻转功能。
anchorPrepareView.disableMenuSwitchButton(true)
mAnchorPrepareView.disableMenuSwitchButton(true);
主播直播页功能定制
隐藏主播页顶部操作区。
anchorView.disableHeaderLiveData(true)
mAnchorView.disableHeaderLiveData(true);
隐藏顶部操作区中的观众列表功能。
anchorView.disableHeaderVisitorCnt(true)
mAnchorView.disableHeaderVisitorCnt(true);
隐藏底部操作区的连麦功能。
anchorView.disableFooterCoGuest(true)
mAnchorView.disableFooterCoGuest(true);
隐藏底部操作区的连线功能。
anchorView.disableFooterCoHost(true)
mAnchorView.disableFooterCoHost(true);
隐藏底部操作区的 PK 功能。
anchorView.disableFooterBattle(true)
mAnchorView.disableFooterBattle(true);
隐藏更多设置面板中的音效功能。
anchorView.disableFooterSoundEffect(true)
mAnchorView.disableFooterSoundEffect(true);
