BarrageInputView
: A view for sending barrage messages, which can pull up the input interface when clicked.BarrageStreamView
: A view for receiving barrage messages, which will display barrage messages on this view.BarrageSendWidget
) and a Widget for displaying barrage messages (BarrageDisplayWidget
):BarrageSendWidget
: A widget for sending barrage messages, which can pull up the input interface when clicked.BarrageDisplayWidget
: After receiving barrage messages, it will display them on this widget.BarrageSendWidget | BarrageDisplayWidget | Effect of integrating barrage component in LiveKit |
| | |
BarrageInputView
: A view for sending barrage messages, which can pull up the input interface when clicked.BarrageStreamView
: A view for receiving barrage messages, which will display barrage messages on this view.dependencies:flutter:sdk: flutterflutter_localizations:sdk: flutterintl: ^0.19.0# Add local dependency of barragebarrage:path: ../barrage
Android/tuilivekit/component/barrage
directory to your project.Android/tuilivekit/component/common
directory to your project.settings.gradle
file in your project:include ':common'include ':barrage'
build.gradle
file of the project you need to import:api project(':common')api project(':barrage')
BarrageInputView
at the position where you need to send barrage messages, which can pull up the input interface when clicked:let barrageInputView =BarrageInputView
(roomId: roomId)addSubView(barrageInputView)
BarrageSendController _sendController = BarrageSendController(roomId: "liveRoomId", /// liveRoomId Replace with your live room IDownerId: "liveOwnerId", /// liveOwnerId Replace with your live room anchor IDselfUserId: "selfUserId", /// selfUserId Replace with your current logged-in user IDselfName: "selfUserName"; /// selfUserName Replace with your current logged-in user nicknameBarrageSendWidget(controller: _sendController);
BarrageInputView
at the position where you need to send barrage messages, which can pull up the input interface when clicked:BarrageInputView barrageInputView = new BarrageInputView(mContext);barrageInputView.init(roomId);mBarrageInputContainer.addView(barrageInputView);
BarrageStreamView
to display barrage messages where needed:let barrageDisplayView =BarrageStreamView
(roomId: roomId)addSubView(barrageDisplayView)
barrageDisplayView.setOwnerId(ownerId)
BarrageDisplayController _displayController = BarrageDisplayController(roomId: "liveRoomId", /// liveRoomId Replace with your live room IDownerId: "liveOwnerId", /// liveOwnerId Replace with your live room anchor IDselfUserId: "selfUserId", /// selfUserId Replace with your current logged-in user IDselfName: "selfUserName"; /// selfUserName Replace with your current logged-in user nicknameBarrageDisplayWidget(controller: _displayController);
BarrageStreamView
to display barrage messages where needed:BarrageStreamView barrageStreamView = new BarrageStreamView(mContext);// ownerId represents the ID of the host, which is used to differentiate the display effects between the anchor and the audience.barrageStreamView.init(roomId, ownerId);mLayoutBarrageContainer.addView(barrageStreamView);
insertBarrages
API method for (batch) insertion of custom messages (such as gift messages, live room announcements). Custom messages with custom styles can achieve different display effects.// Example 1: Insert a gift message in the barrage arealet barrage = TUIBarrage()barrage.content = "gift"barrage.user.userId = sender.userIdbarrage.user.userName = sender.userNamebarrage.user.avatarUrl = sender.avatarUrlbarrage.user.level = sender.levelbarrage.extInfo["TYPE"] = AnyCodable("GIFTMESSAGE")barrage.extInfo["gift_name"] = AnyCodable(gift.giftName)barrage.extInfo["gift_count"] = AnyCodable(giftCount)barrage.extInfo["gift_icon_url"] = AnyCodable(gift.imageUrl)barrage.extInfo["gift_receiver_username"] = AnyCodable(receiver.userName)barrageDisplayView.insertBarrages([barrage])// Example 2: Echo the message after sending a barrage// Implement the delegate of BarrageInputView, BarrageInputViewDelegateextension MyViewController: BarrageInputViewDelegate {func barrageInputViewOnSendBarrage(_ barrage: TUIBarrage) {barrageDisplayView.insertBarrages([barrage])}}
TUIBarrage
's extInfo
is a Map
used to store custom data.BarrageUser barrageUser = BarrageUser();barrageUser.userId = "enterRoomUserId"; /// UserId information displayed on the barrage.barrageUser.userName = "enterRoomUserName"; /// Nickname information displayed on the barragebarrageUser.avatarUrl = "enterRoomUserAvatar"; /// Avatar information displayed on the barragebarrageUser.level = "66"; /// Level information displayed on the barrageBarrage barrage = Barrage();barrage.user = barrageUser;barrage.content = "enter the room"; /// Text content displayed on the barrage_displayController.insertMessage(barrage);
insertBarrages
API method for (batch) insertion of custom messages (such as gift messages, live room announcements). Custom messages with custom styles can achieve different display effects.// Insert a gift message in the barrage areaBarrage barrage = new Barrage();barrage.content = "gift";barrage.user.userId = sender.userId;barrage.user.userName = sender.userName;barrage.user.avatarUrl = sender.avatarUrl;barrage.user.level = sender.level;barrage.extInfo.put(Constants.GIFT_VIEW_TYPE, GIFT_VIEW_TYPE_1);barrage.extInfo.put(GIFT_NAME, barrage.giftName);barrage.extInfo.put(GIFT_COUNT, giftCount);barrage.extInfo.put(GIFT_ICON_URL, barrage.imageUrl);barrage.extInfo.put(GIFT_RECEIVER_USERNAME, receiver.userName);mBarrageStreamView.insertBarrages(barrage);
Barrage
's extInfo
is a Map
used to store custom data.class MyViewController: BarrageStreamViewDelegate {func barrageDisplayView(_ barrageDisplayView: BarrageStreamView, createCustomCell barrage: TUIBarrage) -> UIView? {// Whether to use custom UI, return nil if not neededguard let type = barrage.extInfo["TYPE"], type.value as? String == "GIFTMESSAGE" else {return nil}// Return custom message style UI (gift display)return CustomBarrageCell(barrage: barrage)}}
/// 1. Define a custom barrage item builderclass GiftBarrageItemBuilder extends CustomBarrageBuilder {@overrideWidget buildWidget(BuildContext context, Barrage barrage) { /// Customize the Widget when `shouldCustomizeBarrageItem` returns truereturn const Text(barrage.content,style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.red),);}@overridebool shouldCustomizeBarrageItem(Barrage barrage) { /// Determine if the current barrage message needs customization based on the data model of the barrage messageif (barrage.extInfo.keys.isNotEmpty) {return true;}return false;}}/// 2. Set `setCustomBarrageBuilder` for `BarrageDisplayWidget`_displayController.setCustomBarrageBuilder(GiftBarrageItemBuilder());
public static final int GIFT_VIEW_TYPE_1 = 1;public class BarrageViewTypeDelegate implements BarrageItemTypeDelegate {@Overridepublic int getItemViewType(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());
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));
Was this page helpful?