功能预览
TUILiveKit 弹幕系统为直播场景提供完整互动解决方案,能够增强直播的互动性和趣味性。通过本文档,您可快速实现直播间弹幕互动功能,并支持深度定制以满足业务需求。弹幕消息发送组件(BarrageInputView) | 弹幕消息展示组件(BarrageStreamView) |
![]() | ![]() |
组件构成
组件名称 | 具体内容 |
弹幕消息展示组件(BarrageStreamView) | 负责实时展示和管理弹幕消息流的组件,提供消息列表渲染、时间聚合、用户交互和响应式适配等完整的消息展示解决方案。 |
弹幕消息发送组件(BarrageInputView) | 提供富文本编辑和消息发送功能的输入组件,集成表情选择器、字符限制和状态管理,为用户提供流畅的消息输入体验。 |
快速开始
步骤1:开通服务
步骤2:代码集成
步骤3:接入弹幕消息发送组件
在您的应用中接入弹幕消息发送组件,使主播/观众能够方便地发送弹幕消息。请参考示例代码创建
BarrageInputView 组件并添加到您的视图:// 1. 创建 BarrageInputView 对象val barrageInputView = BarrageInputView(context)// 2. 初始化 BarrageInputView ,liveId 为您当前进入的直播间房间 IdbarrageInputView.init("your liveId")// 3. 将 BarrageInputView 对象添加到您的视图上yourBarrageInputContainerView.addView(barrageInputView)
说明:
1. 弹幕消息发送组件支持系统键盘和表情键盘切换。
2. 为尊重表情设计版权,
TUILiveKit 工程中不包含大表情元素切图,正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有,可有偿授权使用,如果需要获得授权可 提交工单 联系我们。

步骤4:接入弹幕消息展示组件
在您的应用中接入弹幕消息展示组件,使主播/观众能够直观地看到已发送的弹幕消息列表。请参考示例代码创建
BarrageStreamView 组件并添加到视图:// 1. 创建 BarrageStreamView 对象val barrageStreamView = BarrageStreamView(context)// 2. 初始化 BarrageStreamView 对象,liveId 为您当前进入的直播间房间id,ownerId 为当前房主的 userId,用来区分房主与观众的显示效果barrageStreamView.init("your liveId", "your ownerId")// 3. 将 BarrageStreamView 对象添加到您的视图上yourBarrageContainerView.addView(barrageStreamView)
插入本地弹幕消息
BarrageStreamView 提供了插入本地消息的能力,该消息仅在本地显示,通常用于“系统提示”、“欢迎语”或“操作反馈”等。可以参考如下代码插入消息并显示到本地弹幕中(代码示例为在弹幕中插入一条文本消息):import io.trtc.tuikit.atomicxcore.api.barrage.Barrage// 1. 创建 Barrage 对象val barrage = Barrage()// 2. 初始化 Barrage 消息内容,您可以根据业务诉求,自定义您的消息barrage.textContent = "your barrage context"barrage.sender.userID = "your sender userId"barrage.sender.userName = "your sender userName"barrage.sender.avatarURL = "your sender avatarURL"// 3. 将创建的弹幕消息插入本地弹幕展示组件中barrageStreamView.insertBarrages(barrage)
自定义弹幕消息样式
TUILiveKit 的弹幕系统支持高度的样式定制。您可以根据消息携带的“业务标签(Tag)”来决定其展示效果。本章节分为两部分:如何修改系统默认弹幕,以及如何自定义本地插入的消息样式。场景一:修改默认弹幕样式
如果您希望修改弹幕组件默认的文本弹幕或礼物弹幕的 UI 效果,可以直接覆盖其预设的适配器。
效果示例

实现步骤
1. 实现 UI 适配器
创建一个类实现
BarrageItemAdapter,定义您理想的布局和数据绑定逻辑。class YourBarrageAdapter(private val context: Context) : BarrageItemAdapter {override fun onCreateViewHolder(parent: ViewGroup): RecyclerView.ViewHolder {// 按照您的业务诉求自定义 UI 视图val view = LayoutInflater.from(parent.context).inflate(R.layout.item_barrage_your_custom, parent, false)return YourViewHolder(view)}override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int, barrage: Barrage) {(holder as? YourViewHolder)?.bind(barrage)}private inner class YourViewHolder(view: View) :RecyclerView.ViewHolder(view) {fun bind(barrage: Barrage) {// 绑定数据}}}
2. 注册并覆盖默认样式
在
BarrageStreamView 初始化后进行注册。TUILiveKit 当前已内置的弹幕类型定义:类型 0 为普通文本消息,类型 1 为礼物消息。// 覆盖默认文本弹幕 (类型 0)barrageStreamView.setItemAdapter(0, YourBarrageAdapter())// 覆盖默认礼物弹幕 (类型 1)barrageStreamView.setItemAdapter(1, YourGiftBarrageAdapter())
场景二:自定义插入的本地弹幕消息样式
此场景适用于由您的业务逻辑触发(例如:系统欢迎语、操作反馈),且仅在本地显示的弹幕。通过“定义标签”与“识别标签”实现定制。
实现步骤
1. 自定义弹幕标识
在调用
UI 接口插入消息前,为弹幕对象关联一个自定义的业务标识(例如 type = "system_notice")。import io.trtc.tuikit.atomicxcore.api.barrage.Barrageprivate fun insertSystemWelcome() {val barrage = Barrage()barrage.textContent = "欢迎来到直播间,请文明发言。"// 配置业务标识,用于后续 UI 识别val extInfo = HashMap<String, String>()extInfo["type"] = "system_notice"barrage.extensionInfo = extInfo// 直接调用 UI 组件接口插入,不涉及远端发送barrageStreamView.insertBarrages(barrage)}
2. 定义弹幕识别逻辑
实现
BarrageItemTypeDelegate 接口,根据标签返回您自定义的样式 ID(如定义类型 100 为您的自定义样式 ID)。class YourBarrageTypeDelegate : BarrageItemTypeDelegate {override fun getItemType(position: Int, barrage: Barrage): Int {val type = barrage.extensionInfo?.get("type")return when (type) {"system_notice" -> 100 // 自定义样式 IDelse -> 0 // 默认走普通文本弹幕的逻辑}}}
3. 实现并注册自定义适配器
定义
YourSystemNoticeAdapter 来承接 ItemType 100 的渲染工作。// 1. 定义适配器class YourSystemNoticeAdapter : BarrageItemAdapter {override fun onCreateViewHolder(parent: ViewGroup): RecyclerView.ViewHolder {val view = LayoutInflater.from(parent.context).inflate(R.layout.item_barrage_system_notice, parent, false)return SystemNoticeViewHolder(view)}override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int, barrage: Barrage) {(holder as? SystemNoticeViewHolder)?.bind(barrage)}private inner class SystemNoticeViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {fun bind(barrage: Barrage) {// 渲染自定义视图逻辑}}}// 2. 绑定到组件barrageStreamView.setItemTypeDelegate(YourBarrageTypeDelegate())barrageStreamView.setItemAdapter(100, YourSystemNoticeAdapter())
常见问题
如何在自定义弹幕消息中区分房主和观众?
您也可以在自定义弹幕样式时,根据
Barrage 消息中的 sender.userID 字段来判断是否为房主,并显示您想要的特定效果。为什么我的自定义样式弹幕无法显示?
如果自定义样式未生效,请按以下步骤排查:
步骤1:注册状态检查。确保您已在
BarrageStreamView 初始化后,正确调用了 setItemTypeDelegate 和 setItemAdapter 方法。步骤2:类型
ID 匹配。检查 getItemType 返回的整数 ID 是否与注册适配器时传入的完全一致。步骤3:数据源检查。确认发送端在
extensionInfo 中确实包含了用于识别类型的标识位。
