注意:集成提示:
注意:这篇档介绍基于 UI 组件 的开播方式(含完整交互 UI)。若你需通过 Core SDK 自行搭建主播端界面,请参考 主播开播 (Core SDK)。
一、功能概览
·开播前预览:支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置。
·连麦互动:支持直播过程中与观众 或 与其他直播间主播实时互动。
·观众互动:支持弹幕、礼物等丰富直播互动形式。
·直播间管理:支持在线用户列表展示、以及直播间内的禁言、踢人等多种管理操作。
| 开播前预览 | 连麦互动 | 观众互动 | 直播间管理 |
| | | | |
二、步骤 1. 开通服务
参考 开通服务 文档开通「体验版」或「大规模直播版」套餐。
三、步骤 2. 代码集成
参考 准备工作 接入 TUILiveKit。
四、步骤 3. 添加开播前的准备页面
AnchorPrepareView 组件已内置了摄像头预览、音效设置、布局设置、以及其他功能设置,你需创建并加载 AnchorPrepareView ,具体示例代码如下:
Kotlinimport android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListenerclass AnchorActivity : AppCompatActivity() { private val TAG = "AnchorActivity" lateinit var anchorPrepareView: AnchorPrepareView private val anchorPrepareViewListener = object : AnchorPrepareViewListener { override fun onClickStartButton() { // 点击预览界面开始直播按钮触发 } override fun onClickBackButton() { // 点击预览界面返回按钮触发 finishAndRemoveTask() } } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // 1.创建并初始化 AnchorPrepareView anchorPrepareView = AnchorPrepareView(this) anchorPrepareView.init("live_1236666", null) anchorPrepareView.addAnchorPrepareViewListener(anchorPrepareViewListener) // 2.将 AnchorPrepareView 添加到界面 setContentView(anchorPrepareView) }}
五、步骤 4. 添加主播用的推流页面
AnchorView 组件已内置了音视频推流、观众连麦、直播互动、直播管理等功能,你只需创建并加载 AnchorView ,具体示例代码如下:
注意:配合服务端 (RESTFUL API) 开播:
注意:如果你的房间是先通过 服务端 API 创建的,在集成时无需修改任何代码逻辑,只需将示例代码中的 liveID 替换为服务端生成的 ID 即可。SDK 将自动接管该房间并开启直播。
Kotlinimport android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListenerimport com.trtc.uikit.livekit.features.anchorprepare.LiveStreamPrivacyStatusimport com.trtc.uikit.livekit.features.anchorview.AnchorStateimport com.trtc.uikit.livekit.features.anchorview.AnchorViewimport com.trtc.uikit.livekit.features.anchorview.AnchorViewListenerimport com.trtc.uikit.livekit.features.anchorview.RoomBehaviorimport io.trtc.tuikit.atomicxcore.api.live.LiveInfoimport io.trtc.tuikit.atomicxcore.api.live.SeatLayoutTemplateclass AnchorActivity : AppCompatActivity() { private val TAG = "AnchorActivity" lateinit var anchorPrepareView: AnchorPrepareView private val anchorPrepareViewListener = object : AnchorPrepareViewListener { override fun onClickStartButton() { // 完成从准备页到主播开播页的切换 initAnchorView() } override fun onClickBackButton() { finishAndRemoveTask() } } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // 1.创建并初始化 AnchorPrepareView anchorPrepareView = AnchorPrepareView(this) anchorPrepareView.init("live_1236666", null) anchorPrepareView.addAnchorPrepareViewListener(anchorPrepareViewListener) // 2.将 AnchorPrepareView 添加到界面 setContentView(anchorPrepareView) } val anchorViewListener = object : AnchorViewListener { override fun onEndLiving(state: AnchorState) { finishAndRemoveTask() } override fun onClickFloatWindow() { } } fun initAnchorView() { // 1.创建 AnchorView val anchorView = AnchorView(this) // 2.初始化 AnchorView,其中 liveInfo 为直播间信息,anchorPrepareView 为你的开播前的准备页面 val liveInfo = LiveInfo() liveInfo.liveID = "live_1236666" liveInfo.liveName = anchorPrepareView.getState()?.roomName?.value ?: "" liveInfo.isPublicVisible = anchorPrepareView.getState()?.liveMode?.value == LiveStreamPrivacyStatus.PUBLIC liveInfo.coverURL = anchorPrepareView.getState()?.coverURL?.value ?: "" liveInfo.seatTemplate = SeatLayoutTemplate.VideoDynamicGrid9Seats // 进房行为: // RoomBehavior.CREATE_ROOM: 主播创建房间 // RoomBehavior.ENTER_ROOM: 主播进入服务端 rest api 创建的直播间 anchorView.init(liveInfo, anchorPrepareView.getCoreView(), RoomBehavior.CREATE_ROOM, null) anchorView.addAnchorViewListener(anchorViewListener) // 3.将 AnchorView 添加到界面 setContentView(anchorView) }}
六、AI 助手:知识咨询与代码集成
你在接入直播与语聊 SDK 过程中,可以通过 MCP 使用 AI 助手,快速完成知识咨询、报错排查和集成代码生成。支持 Web/Android/iOS/Flutter/uni-app/HarmonyOS 等平台,答案基于产品文档。适用于查询 AtomicXCore SDK 和 UI 组件用法以及集成文档等场景,立即体验,提出你的第一个问题。
七、自定义你的界面布局
TUILiveKit 支持灵活定制开播页与直播页的功能和样式,你可根据业务需求调整布局、隐藏 / 显示功能模块。
八、直播布局模板选择
TUILiveKit 提供 4 种直播布局模板,你可在主播开播页的 UI 交互「布局」入口 选择合适样式:
九、布局模板一览:
| 布局分类 | 动态宫格布局 | 浮动小窗布局 | 固定宫格布局 | 固定小窗布局 |
| 模板取值 | VideoDynamicGrid9Seats | VideoDynamicFloat7Seats | VideoFixedGrid9Seats | VideoFixedFloat7Seats |
| 描述 | 默认布局,可根据连麦人数动态调整宫格大小。 | 连麦嘉宾以浮动小窗形式显示。 | 连麦人数固定,每个嘉宾占据一个固定宫格。 | 连麦人数固定,嘉宾以固定小窗形式显示。 |
| 运行效果 | | | | |
十、自定义开播页功能区
通过调用 步骤 3 创建的 prepareView 的 API,可自定义隐藏开播准备页的操作区或特定功能:
Kotlinimport android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewclass AnchorActivity : AppCompatActivity() { lateinit var anchorPrepareView: AnchorPrepareView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) anchorPrepareView = AnchorPrepareView(this) anchorPrepareView.init("live_1235858", null) // 1. 自定义功能区 – 例如:隐藏整个功能区 anchorPrepareView.disableFeatureMenu(true) setContentView(anchorPrepareView) }}
| 隐藏整个功能区 | 隐藏美颜按钮 | 隐藏音效按钮 | 隐藏摄像头切换按钮 |
| disableFeatureMenu(true) | disableMenuBeautyButton(true) | disableMenuAudioEffectButton(true) | disableMenuSwitchCameraButton(true) |
| | | | |
十一、自定义主播直播页界面
·参考 主播核心页面 进行主播界面定制,在 AnchorView 中修改 UI 样式,添加你的业务组件。
·参考 调整视频直播挂件 进行视频位挂件定制,在 AnchorView 中修改视频位上的名称、头像挂件等 UI。
十二、文案定制
TUILiveKit 使用 Android 通用的 XML 资源文件来管理 UI 所需的文案显示,你可以直接通过 XML 文件修改需要调整的文案:
十三、图标定制
TUILiveKit 使用 Android 通用的 drawable 资源文件夹管理 UI 所需的图片资源,你可以通过替换资源文件快速修改自定义界面所需的图标,替换时请确保新的文件名称与原文件名称一致。
十四、下一步
恭喜你,现在你已经成功集成了 主播开播 。接下来,你可以实现观众观看、直播列表等功能,可参考下表:
| 功能 | 描述 | 集成指引 |
| 观众观看 | 实现观众进入主播的直播间后观看直播,实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。 | 观众观看 |
| 直播列表 | 展示直播列表界面和功能,包含直播列表,房间信息展示功能。 | 直播列表 |
| 礼物系统 | 实现自定义礼物素材配置、计费系统对接、PK 场景互动等功能。 | 礼物系统 |
十五、开播后无画面?
请前往应用信息 > 权限 > 相机,检查摄像头权限是否开启,可参考下图:
十六、点击开播按钮无法开播,提示“未登录”?
参考 登录指引, 确认已完成登录功能接入。