tencent cloud

Feedback

Interactive Bullet Comments (TUILiveKit)

Last updated: 2024-12-20 11:09:22

    Description of the Feature

    The interactive barrage feature is a crucial real-time communication tool, supporting various interactive methods. Users can input emojis in the barrage to enhance the entertainment value of messages, making the interactive experience more enjoyable and vivid. Through this feature, the audience can engage in richer communication with anchors and other viewers during live streaming, boosting the overall sense of participation and fun. The TUILiveKit has already implemented the interactive barrage feature through Chat.

    Use Instructions

    Display Barrage
    Send Barrage
    
    
    
    
    
    
    Note:
    1. Supports switching between System Keyboard and Emoji Keyboard.
    2. To respect the copyright of emoji designs, the TUILiveKit project does not include large emoji elements. Before the official commercial launch, please replace them with your own designed or copyrighted emoji packs. The default Little Yellow Face Emoji Pack shown below is copyrighted by Tencent Cloud and can be licensed for a fee. If you need authorization, please submit a ticket to contact us.
    
    

    Feature Customization

    Custom barrage message style from Definition

    Android
    iOS
    The barrage display component TUIBarrageDisplayView provides setAdapter and TUIBarrageDisplayAdapter for customizing the pop-up message Item style. If you need the Self Definition message view, please refer to the following path for changes.
    // File Location: tuilivekit/src/main/java/com/trtc/uikit/livekit/common/uicomponent/barrage/view/adapter/TUIBarrageDisplayAdapter.java
    public interface TUIBarrageDisplayAdapter {
    RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType);
    
    void onBindViewHolder(RecyclerView.ViewHolder holder, TUIBarrage barrage);
    
    int getItemViewType(int position, TUIBarrage barrage);
    }
    // File Location: tuilivekit/src/main/java/com/trtc/uikit/livekit/common/uicomponent/gift/view/GiftBarrageAdapter.java
    public class GiftBarrageAdapter implements TUIBarrageDisplayAdapter {
    private final Context mContext;
    
    public GiftBarrageAdapter(Context context) {
    mContext = context;
    }
    
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if (viewType == GIFT_VIEW_TYPE_1) {
    // Handling of custom style 1
    LinearLayout ll = new LinearLayout(mContext);
    ll.addView(new TextView(mContext));
    return new GiftViewHolder(ll);
    }
    return null;
    }
    
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, TUIBarrage barrage) {
    if (holder instanceof GiftViewHolder) {
    GiftViewHolder viewHolder = (GiftViewHolder) holder;
    viewHolder.bind(barrage);
    }
    }
    
    @Override
    public int getItemViewType(int position, TUIBarrage barrage) {
    if (...) { // If the current barrage requires a custom Item style, return the corresponding style type.
    return GIFT_VIEW_TYPE_1;
    }
    return 0; // 0 indicates that the default style is used
    }
    
    private static class GiftViewHolder extends RecyclerView.ViewHolder {
    
    public GiftViewHolder(View itemView) {
    super(itemView);
    // ...
    }
    
    public void bind(TUIBarrage barrage) {
    // ...
    }
    }
    }
    // set custom Adapter
    barrageDisplayView.setAdapter(new GiftBarrageAdapter(mContext));
    TUIBarrage is defined as follows:
    // File Location:
    // tuilivekit/src/main/java/com/trtc/uikit/livekit/common/uicomponent/barrage/model/TUIBarrage.java
    // tuilivekit/src/main/java/com/trtc/uikit/livekit/common/uicomponent/barrage/model/TUIBarrageUser.java
    public class TUIBarrage {
    public final TUIBarrageUser user = new TUIBarrageUser(); //Sender
    public String content; //Sent content
    public HashMap<String, Object> extInfo = new HashMap<>(); //Expanded informati
    }
    
    public class TUIBarrageUser {
    public String userId;
    public String userName;
    public String avatarUrl;
    public String level;
    }
    Note:
    Supports multiple custom styles (specified by multiple return values through getItemViewType ), 0 represents the default style.
    There are two styles of Danmaku messages: Ordinary Danmaku Message Style and Gift Sending Echo Message Style.
    If you need to define the Ordinary Danmaku Message Style, please refer to the following path for changes:
    // File Location: iOS/TUILiveKit/Source/Common/UIComponent/Barrage/View/Cell/TUIBarrageCell.swift
    
    class TUIBarrageDefaultCell: UIView {
    // Ordinary Danmaku Message Style
    ...
    func constructViewHierarchy() {
    // View Hierarchy Construction
    }
    
    func activateConstraints() {
    // View Layout
    }
    }
    If you need to modify the Gift Sending Echo Message Style, please refer to the following path for changes:
    // File Location: iOS/TUILiveKit/Source/Common/UIComponent/Gift/View/CustomBarrageCell.swift
    class CustomBarrageCell {
    static func getCustomCell(barrage: TUIBarrage) -> UIView {
    // Returns the UI style for gift echo messages
    }
    }
    
    TUIBarrage Definition is as follows:
    // File Location:
    // iOS/TUILiveKit/Source/Common/UIComponent/Barrage/Model/TUIBarrage.swift
    // iOS/TUILiveKit/Source/Common/UIComponent/Barrage/Model/TUIBarrageUser.swift
    
    class TUIBarrage: Codable{
    var user: TUIBarrageUser
    var content: String
    var extInfo: [String: AnyCodable]
    }
    
    class TUIBarrageUser: Codable {
    var userId: String
    var userName: String
    var avatarUrl: String
    var level: String
    }

    Insert custom messages

    The barrage display component TUIBarrageDisplayView provides the insertBarrages interface method for (batch) inserting custom Definition messages. Typically, custom Definition messages combined with custom styles achieve unique display effects.
    Android
    iOS
    // Example: Insert a gift message in the barrage area.
    TUIBarrage barrage = new TUIBarrage();
    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);
    barrageDisplayView.insertBarrages(barrage);
    // File Location:
    // iOS/TUILiveKit/Source/View/LiveRoom/View/Anchor/LivingView.swift
    // iOS/TUILiveKit/Source/View/LiveRoom/View/Anchor/AudienceLivingView.swift
    
    // Example: Inserting a gift message in the barrage area
    let barrage = TUIBarrage()
    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["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])
    Note:
    TUIBarrage's extInfo is a Map, used to store custom data.

    Key code

    Quick Integration

    The barrage component mainly provides 2 APIs:
    TUIBarrageButton: Clicking it brings up the input interface.
    TUIBarrageDisplayView: Used to display barrage messages.
    In scenarios where you need to send barrages, create TUIBarrageButton, click to bring up the input interface:
    Android
    iOS
    //File Location: tuilivekit/src/main/java/com/trtc/uikit/livekit/common/uicomponent/barrage/TUIBarrageButton.java
    TUIBarrageButton barrageButton = new TUIBarrageButton(mContext, roomId);
    mBarrageButtonContainer.addView(barrageButton);
    let barrageButton = TUIBarrageButton(roomId: roomId, ownerId: ownerId)
    addSubView(barrageButton)
    In scenarios where you need to display barrages, use TUIBarrageDisplayView to display barrage messages:
    Android
    iOS
    // File Location: tuilivekit/src/main/java/com/trtc/uikit/livekit/common/uicomponent/barrage/TUIBarrageDisplayView.java
    TUIBarrageDisplayView barrageDisplayView = new TUIBarrageDisplayView(mContext, roomId);
    mLayoutBarrageContainer.addView(barrageDisplayView);
    let barrageDisplayView = TUIBarrageDisplayView(roomId: roomId, ownerId: ownerId)
    addSubView(barrageDisplayView)

    Sending and Receiving Barrage Messages

    
    
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support