이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
Docs Overview/
Live/
Andorid/
기본 기능/
인터랙티브 댓글 자막/

인터랙티브 댓글 자막

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

Customize message style

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.

Insert Custom Message

The barrage display component TUIBarrageDisplayView provides the external interface method insertBarrages for inserting custom messages (in batches). Custom messages are usually used in combination with custom styles to achieve different display effects.
// 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);
Note：
The extInfo of TUIBarrage is a Map, used for storing custom data.

Key code

Integration

The barrage component mainly provides two Objects：
TUIBarrageButton：Clicking it can bring up the input interface.
TUIBarrageDisplayView：Used for displaying barrage messages.
In scenarios where barrage messages need to be sent, create a TUIBarrageButton , which can bring up the input interface when clicked:
// File Location: tuilivekit/src/main/java/com/trtc/uikit/livekit/common/uicomponent/barrage/TUIBarrageButton.java
TUIBarrageButton barrageButton = new TUIBarrageButton(mContext, roomId);
mBarrageButtonContainer.addView(barrageButton);
In scenarios where barrage messages need to be displayed, use TUIBarrageDisplayView to show the barrage messages:
// File Location: tuilivekit/src/main/java/com/trtc/uikit/livekit/common/uicomponent/barrage/TUIBarrageDisplayView.java
TUIBarrageDisplayView barrageDisplayView = new TUIBarrageDisplayView(mContext, roomId);
mLayoutBarrageContainer.addView(barrageDisplayView);

Sending and receiving barrage messages