Live
  • 개요
  • Andorid
    • Demo 실행
    • 통합
    • 인터페이스 문서
    • 인터랙티브 댓글 자막
    • 인터랙티브 선물
    • 배포 설명
    • 자주 받는 질문들
  • iOS
    • Demo 실행
    • 통합
    • 인터페이스 문서
    • 인터랙티브 댓글 자막
    • 인터랙티브 선물
    • 배포 설명
    • 자주 받는 질문들
  • 개요
    • 개요
  • 서비스 활성화
  • 가격
    • 무료시간
    • 실시간 인터랙티브 라이브 방송 Live 월정액 패키지
    • Billing Explanation for Subscription Package Duration
    • Pay-as-you-go
      • Billing of Audio and Video Duration
      • Billing of On-Cloud Recording and Recording Delivery
      • Billing of MixTranscoding and Relay to CDN
  • ErrorCode
Live
이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

인터랙티브 댓글 자막

Overview

Interactive Bullet-screen feature supports the following functions: sending barrage messages, inserting custom messages, and custom message styles. Interactive Bullet-screen messages support emoji input, adding fun to the messages and making the interaction more enjoyable.



Display barrage



Send barrage
Note:
Support switching between system keyboard and emoji keyboard.

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:
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:
TUIBarrageDisplayView barrageDisplayView = new TUIBarrageDisplayView(mContext, roomId); mLayoutBarrageContainer.addView(barrageDisplayView);

Customize message style

The barrage display component TUIBarrageDisplayView provides setAdapter and TUIBarrageDisplayAdapter for customizing the pop-up message Item style:
public interface TUIBarrageDisplayAdapter { RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType); void onBindViewHolder(RecyclerView.ViewHolder holder, TUIBarrage barrage); int getItemViewType(int position, TUIBarrage barrage); }
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:
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.

InsertCustomMessage

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.