Docs Overview/
BarrageStreamView/

BarrageStreamView

Component Overview

<Message Rendering Component> will display your bullet screen messages on the screen. Users can manually input emojis and text messages in the bullet screen through the Message Sending Component. Our message rendering component will then render the received messages on the screen, thereby enhancing the fun of the live stream and making the interaction experience more enjoyable and vivid.
Android
iOS
Flutter
BarrageStreamView: A rendering component that displays barrage messages on the screen.
BarrageStreamView: A message rendering component that displays barrage messages on the screen.
BarrageDisplayWidget: A rendering component that displays barrage messages on the screen.
The rendering is shown as follows:


Component Integration

Android
iOS
Flutter
1. Download TUILiveKit from
2. GitHub to your local system.
3. Copy the Android/tuilivekit/component/barrage directory to your project.
4. In your settings.gradle.kts or settings.gradle file, add the configuration:
settings.gradle.kts
settings.gradle
include(":barrage")
include ':barrage'
5. In the build.gradle.kts or build.gradle file of the project where you need to introduce dependencies, add the dependency configuration:
build.gradle.kts
build.gradle
api(project(":barrage"))
api project(':barrage')
Import components using CocoaPods. The specific steps to import components are as follows:
1. You need to download the Barrage folder from GitHub to your local system.

2. Add pod 'TUIBarrage' dependency in the Podfile file of your project.
Swift
target 'xxxx' do
  ...
  ...
  pod 'TUIBarrage', :path => '../Component/Barrage/TUIBarrage.podspec' 
  // The path is the relative path between your Podfile file and TUIBarrage.Podspec file.
end
If you don't have a Podfile file, first use the terminal to cd into the xxxx.xcodeproj directory, then create it with the following command:
pod init
3. In the terminal, first cd to the Podfile directory, then execute the following commands to install components.
pod install
4. Any issues you encounter during integration and use, feel free to give us feedback.
1. In the dependencies node of the pubspec.yaml file in the project engineering, add a dependency on barrage.
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.19.0
  # Add barrage dependency
  live_uikit_barrage: ^1.0.0
1. Execute the
2. flutter pub get command.
3. Configure multilingual support. Add multilingual support for the gift component to the localizationsDelegates and supportedLocales properties of your application's MaterialApp.
MaterialApp(localizationsDelegates: const [
  ...BarrageLocalizations.localizationsDelegates,
], supportedLocales: const [
  ...BarrageLocalizations.supportedLocales,
], 
// ...
);

Component Usage

Notes:
Since the barrage component requires live room information parameters, it is necessary to load the barrage component after Audience Entering the Live Room or Anchor Create Live Room.

Integrating Message Rendering Component

Android
iOS
Flutter
At the position to display barrage, use BarrageStreamView to display barrage messages:
BarrageStreamView barrageStreamView = new BarrageStreamView(mContext);
// ownerId indicates the room owner's ID, used to distinguish display effects between host and viewers
barrageStreamView.init(roomId, ownerId);
mLayoutBarrageContainer.addView(barrageStreamView);
At the position to display barrage, use BarrageStreamView to display barrage messages:
import TUIBarrage

let barrageDisplayView = BarrageStreamView(roomId: roomId)
// ...Add barrageInputView to your parent view here and adjust the layout
After obtaining the room owner information, set the ownerId to distinguish display effects between host and viewers.
barrageDisplayView.setOwnerId(ownerId)
Notes:
You can only successfully receive bullet screens inside the room after successfully entering the room.
Build BarrageDisplayController and BarrageDisplayWidget objects where you need to display barrage messages, and add the built BarrageDisplayWidget object to your Widget tree. Sample code is as follows:
BarrageDisplayController _displayController = BarrageDisplayController(
                roomId: "liveRoomId",             /// Replace with your live stream room ID
                ownerId:  "liveOwnerId",          /// Replace with your live stream host ID 
                selfUserId: "selfUserId",         /// Replace with your currently logged-in user ID
                selfName: "selfUserName";         /// Replace with your currently logged-in user nickname
BarrageDisplayWidget(controller: _displayController);

Insert Local Danmu Message

Android
iOS
Flutter
BarrageStreamView provides the insertBarrages API method for batch inserting custom messages (such as gift messages, live room notices). Usually, custom messages combined with custom styles can achieve different display effects.
Sample code:
// Insert a gift message into the barrage area
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);
Notes:
is a Map for storing custom data.
BarrageStreamView provides the insertBarrages API method for batch inserting custom messages (such as gift messages, live room notices). Usually, custom messages combined with custom styles can achieve different display effects.
Sample code:
import TUIBarrage
import RTCCommon

// Example 1: Insert a gift message into 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"

let giftCount = 1
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])
Notes:
is a Map for storing custom data.
When you need to insert a local barrage message, you can call the insertMessage method of the BarrageDisplayWidget to insert a local message. For example, after detecting that an audience enters the room in LiveKit, you can insert a barrage message indicating that an audience has entered the room. The sample code is as follows:
BarrageUser barrageUser = BarrageUser();
barrageUser.userId = "enterRoomUserId";            /// Displayed user ID information
barrageUser.userName = "enterRoomUserName";        /// Displayed user nickname information
barrageUser.avatarUrl = "enterRoomUserAvatar";     /// Displayed user avatar information
barrageUser.level = "66";                          /// Displayed user level information

Barrage barrage = Barrage();
barrage.user = barrageUser;
barrage.content = "Enter a room";                       /// Displayed text content
_displayController.insertMessage(barrage);


Custom Barrage Message

Android
iOS
Flutter
There are two default barrage message styles: ordinary barrage message style and custom message style. Specific styles are represented by integers, with the ordinary barrage message style being 0.
If you need more message styles (such as gift sending echo), you need to rewrite the BarrageStreamView's agent BarrageItemTypeDelegate and implement the new style BarrageItemAdapter.
Rewrite the BarrageItemTypeDelegate agent to support the new style GIFT_VIEW_TYPE_1.
public static final int    GIFT_VIEW_TYPE_1       = 1;
public class BarrageViewTypeDelegate implements BarrageItemTypeDelegate {
    @Override
    public 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());
Implement an adapter for custom styles and set it to style GIFT_VIEW_TYPE_1.
public class GiftBarrageAdapter implements BarrageItemAdapter {

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent) {
        LinearLayout ll = new LinearLayout(mContext);
        ll.addView(new TextView(mContext));
        return new GiftViewHolder(ll, mDefaultGiftIcon);
    }

    @Override
    public 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));
There are two default barrage message styles: ordinary barrage message style and custom message style.
If you need more message styles (such as gift sending echo), you can implement the proxy method BarrageStreamViewDelegate of BarrageStreamView.
import TUIBarrage

class MyViewController: BarrageStreamViewDelegate {
    let barrageDisplayView = BarrageStreamView(roomId: roomId)

    override func viewDidLoad() {
        super.viewDidLoad()
        barrageDisplayView.delegate = self  // Set the proxy for BarrageStreamView
        
        // ...
    }


    func onBarrageClicked(user: TUIUserInfo) {
        // Here you can add the event processing logic for barrage message clicks. 'user' is the sender information.
    }
    
    func barrageDisplayView(_ barrageDisplayView: BarrageStreamView, createCustomCell barrage: TUIBarrage) -> UIView? {
        // Whether to use Custom UI, if not needed, return nil just
        guard let type = barrage.extInfo["TYPE"], type.value as? String == "GIFTMESSAGE" else {
            return nil
        }
        
        // Return custom message style UI (gift echo)
        return CustomBarrageView(barrage: barrage)
    }
}


// Custom UI
class CustomBarrageView: UIView {
    let barrage: TUIBarrage
    init(barrage: TUIBarrage) {
        self.barrage = barrage
        super.init(frame: .zero)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    // ...Layout and draw your own UI here
}

When you need to display a custom barrage item for specific barrage messages, you can implement it through the setCustomBarrageBuilder method of BarrageDisplayWidget. For example, the sample code for customizing a barrage that displays red text is shown below:
/// 1. Define a custom barrage item builder
class GiftBarrageItemBuilder extends CustomBarrageBuilder {
  @override
  Widget buildWidget(BuildContext context, Barrage barrage) { /// When shouldCustomizeBarrageItem returns true, customize widget
    return const Text(
      barrage.content,
      style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.red),
    );
  }

  @override
  bool shouldCustomizeBarrageItem(Barrage barrage) {    /// For the data model of the barrage message, determine whether the current barrage message needs to be customized
    if (barrage.extInfo.keys.isNotEmpty) {
      return true;
    }
    return false;
  }
}

/// 2. Set setCustomBarrageBuilder for BarrageDisplayWidget
_displayController.setCustomBarrageBuilder(GiftBarrageItemBuilder());




WebRTC Trtc Logo
Copyright © 2013-2025 Tencent RTC. All Rights Reserved.
  1. Privacy Policy
  3. Legal
  5. Cookie Policy
  7. Tencent Cloud