弹幕消息组件(
BarrageStreamView
)负责在直播间屏幕上显示弹幕消息,从而提升直播的互动性和趣味性。该组件可以渲染用户通过消息发送组件发送的文本和表情消息。效果展示

说明:
为尊重表情设计版权,TUILiveKit 工程中不包含大表情元素切图,正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有,可有偿授权使用,如果需要获得授权可 提交工单 联系我们。


组件接入
组件使用
弹幕组件需要直播间信息,因此必须在观众成功进入直播间或主播创建直播间后才能使用。
初始化组件
在需要展示弹幕的位置,创建并初始化
BarrageStreamView
来展示弹幕消息。ownerId
用于区分房主和观众的显示效果。BarrageStreamView barrageStreamView = new BarrageStreamView(mContext);// ownerId 表示房主的 ID,用来区分房主与观众的显示效果barrageStreamView.init(roomId, ownerId);mLayoutBarrageContainer.addView(barrageStreamView);
插入本地弹幕消息
BarrageStreamView
提供了 insertBarrages
接口,用于插入自定义消息(例如礼物消息、直播间公告等)。您可以通过自定义样式实现不同的展示效果。说明:
此操作必须在进房成功的回调中执行。
// 在弹幕区插入一条礼物消息Barrage barrage = new Barrage();barrage.content = "gift";barrage.user.userId = "sender.userId";barrage.user.userName = "sender.userName";barrage.user.avatarUrl = "sender.avatarUrl";barrage.extInfo.put("GIFT_VIEW_TYPE", "GIFT_VIEW_TYPE_1");barrage.extInfo.put("GIFT_NAME", "giftName");barrage.extInfo.put("GIFT_COUNT", "giftCount");barrage.extInfo.put("GIFT_ICON_URL", "imageUrl");barrage.extInfo.put("GIFT_RECEIVER_USERNAME"," receiver.userName");barrageStreamView.insertBarrages(barrage);
自定义弹幕消息样式
弹幕消息样式默认有两种:普通弹幕(样式为 0)和自定义消息样式。如果您需要更多样式,可以重写
BarrageItemTypeDelegate
并实现 BarrageItemAdapter
。1. 重写
BarrageItemTypeDelegate
该代理用于根据消息的 extInfo
字段判断消息的类型,并返回对应的样式 ID。public static final int GIFT_VIEW_TYPE_1 = 1;public class BarrageViewTypeDelegate implements BarrageItemTypeDelegate {@Overridepublic int getItemType(int position, Barrage barrage) {if (barrage.extInfo != null && barrage.extInfo.containsKey("GIFT_VIEW_TYPE")) {String viewTypeString = String.valueOf(barrage.extInfo.get("GIFT_VIEW_TYPE"));if (String.valueOf(GIFT_VIEW_TYPE_1).equals(viewTypeString)) {return GIFT_VIEW_TYPE_1;}}return 0;}}mBarrageStreamView.setItemTypeDelegate(new BarrageViewTypeDelegate());
2. 实现自定义样式的
Adapter
为新的样式(例如 GIFT_VIEW_TYPE_1
)实现一个 BarrageItemAdapter
,用于创建和绑定自定义的视图布局。public class GiftBarrageAdapter implements BarrageItemAdapter {@Overridepublic RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent) {LinearLayout ll = new LinearLayout(mContext);ll.addView(new TextView(mContext));return new GiftViewHolder(ll, mDefaultGiftIcon);}@Overridepublic void onBindViewHolder(RecyclerView.ViewHolder holder, int position, Barrage barrage) {GiftViewHolder viewHolder = (GiftViewHolder) holder;viewHolder.bind(barrage);}// GiftViewHolder...}mBarrageStreamView.setItemAdapter(GIFT_VIEW_TYPE_1, new GiftBarrageAdapter(mContext));