文档概览/
消息渲染组件/

消息渲染组件

组件概述

消息渲染组件会将您的弹幕消息显示在屏幕上。用户可以通过消息发送组件在弹幕中输入表情和文本消息，我们的消息渲染组件就会将接收到的消息渲染到屏幕上，从而增强直播的趣味性，使得互动体验更加愉快和生动。
Android
iOS
Flutter
BarrageStreamView：消息渲染组件，会显示弹幕消息显示到屏幕上。
BarrageStreamView：消息渲染组件，会显示弹幕消息显示到屏幕上。
BarrageDisplayWidget：消息渲染组件，会显示弹幕消息显示到屏幕上。
效果图展示如下：


组件接入

Android
iOS
Flutter
1. 从 GitHub 下载 TUILiveKit 到本地。
2. 将 Android/tuilivekit/component/barrage 目录拷贝到您的工程中。
3. 在您的 settings.gradle.kts 或者 settings.gradle 文件增加配置：
settings.gradle.kts
settings.gradle
include(":barrage")
include ':barrage'
4. 在您需要引入的工程的 build.gradle.kts 或者 build.gradle 文件中，增加依赖配置：
build.gradle.kts
build.gradle
api(project(":barrage"))
api project(':barrage')

使用 CocoaPods 导入组件，导入组件具体骤如下：
1. 您需要在GitHub上下载Barrage文件夹到本地。

2. 请在您的项目 Podfile 文件中添加 pod 'TUIBarrage' 依赖。
Swift
target 'xxxx' do
  ...
  ...
  pod 'TUIBarrage', :path => '../Component/Barrage/TUIBarrage.podspec' 
  //路径是您的Podfile文件与TUIBarrage.Podspec文件之间的相对路径
end
如果您没有Podfile 文件，首先终端cd 到xxxx.xcodeproj目录，然后通过以下命令创建：
pod init
3. 在终端中，首先cd到Podfile目录下，然后执行以下命令，安装组件。
pod install
4. 您在接入和使用过程中遇到的任何问题，欢迎给我们 反馈。
1. 在项目工程的 pubspec.yaml 文件的 dependencies 节点中，添加 barrage 的依赖。
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.19.0
  # 添加 barrage 依赖
  live_uikit_barrage: ^1.0.0
2. 执行 flutter pub get 命令
3. 配置多语言支持，在您应用 MaterialApp 的 localizationsDelegates 和 supportedLocales 属性上添加 gift 组件的多语言支持。
MaterialApp(localizationsDelegates: const [
  ...BarrageLocalizations.localizationsDelegates,
], supportedLocales: const [
  ...BarrageLocalizations.supportedLocales,
], 
// ...
);

组件使用

说明：
由于弹幕组件需要直播间信息参数，所以需要在观众进入直播间或者主播创建直播间后，再加载弹幕组件。

接入消息渲染组件

Android
iOS
Flutter
在需要展示弹幕的位置，使用 BarrageStreamView 来展示弹幕消息：
BarrageStreamView barrageStreamView = new BarrageStreamView(mContext);
// ownerId 表示房主的 ID，用来区分房主与观众的显示效果
barrageStreamView.init(roomId, ownerId);
mLayoutBarrageContainer.addView(barrageStreamView);
在需要展示弹幕的位置，使用 BarrageStreamView 来展示弹幕消息：
import TUIBarrage

let barrageDisplayView = BarrageStreamView(roomId: roomId)
// ...此处将barrageInputView添加到您的父视图上并调整布局
在获取到房主信息后，设置 ownerId 用来区分房主与观众的显示效果。
barrageDisplayView.setOwnerId(ownerId)
说明：
您只有在进房成功后，才可成功收到房间内的弹幕。
在您需要接入显示弹幕消息的地方构建 BarrageDisplayController 和 BarrageDisplayWidget 对象，并将构建的 BarrageDisplayWidget 对象添加到您的 Widget 树上。示例代码如下：
BarrageDisplayController _displayController = BarrageDisplayController(
                roomId: "liveRoomId",             /// liveRoomId   替换为您的直播间ID
                ownerId:  "liveOwnerId",          /// liveOwnerId  替换为您的直播间主播ID 
                selfUserId: "selfUserId",         /// selfUserId   替换为您的当前登录的用户ID
                selfName: "selfUserName";         /// selfUserName 替换为您的当前登录的用户昵称
BarrageDisplayWidget(controller: _displayController);

插入本地弹幕消息

Android
iOS
Flutter
弹幕展示组件 BarrageStreamView 对外提供 insertBarrages 接口方法，用于（批量）插入自定义消息（如 礼物消息、直播间公告），通常自定义消息配合自定义样式，可以实现不一样的展示效果。
示例代码：
// 在弹幕区插入一条礼物消息
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);
说明：
Barrage 的 extInfo 是一个Map，用于存放自定义数据。
弹幕展示组件 BarrageStreamView 对外提供 insertBarrages 接口方法，用于（批量）插入自定义消息（如 礼物消息、直播间公告），通常自定义消息配合自定义样式，可以实现不一样的展示效果。
示例代码：
import TUIBarrage
import RTCCommon

// 示例1：在弹幕区插入一条礼物消息
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])
说明：
TUIBarrage 的 extInfo 是一个Map，用于存放自定义数据。
当您需要插入本地的弹幕消息时，可以调用 BarrageDisplayWidget 的 insertMessage 方法，插入本地消息。例如，LiveKit 中监听到 观众进房后，可以插入一条 观众进房的 弹幕消息，示例代码如下所示：
BarrageUser barrageUser = BarrageUser();
barrageUser.userId = "enterRoomUserId";            /// 弹幕上展示的用户Id信息
barrageUser.userName = "enterRoomUserName";        /// 弹幕上展示的用户昵称信息
barrageUser.avatarUrl = "enterRoomUserAvatar";     /// 弹幕上展示的用户头像信息
barrageUser.level = "66";                          /// 弹幕上展示的用户等级信息

Barrage barrage = Barrage();
barrage.user = barrageUser;
barrage.content = "进入房间";                       /// 弹幕上展示的文本内容
_displayController.insertMessage(barrage);


自定义弹幕消息

Android
iOS
Flutter
弹幕消息样式默认有两种：普通弹幕消息样式 和 自定义消息样式。具体样式使用整数表示，普通弹幕消息样式是0。
如果您需要更多消息样式（如礼物发送回显），需要重写 BarrageStreamView 的代理 BarrageItemTypeDelegate，并实现新增样式 BarrageItemAdapter。
重写 BarrageItemTypeDelegate 代理，支持新的样式 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());
实现自定义样式的 adapter，并设置给样式 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));
弹幕消息样式默认有两种：普通弹幕消息样式 和 自定义消息样式。
如果您需要更多消息样式（如礼物发送回显），可实现 BarrageStreamView 的代理方法 BarrageStreamViewDelegate：
import TUIBarrage

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

    override func viewDidLoad() {
        super.viewDidLoad()
        barrageDisplayView.delegate = self  // 设置BarrageStreamView的代理
        
        // ...
    }


    func onBarrageClicked(user: TUIUserInfo) {
        // 此处您可添加弹幕消息点击事件处理逻辑，user为消息发送者信息
    }
    
    func barrageDisplayView(_ barrageDisplayView: BarrageStreamView, createCustomCell barrage: TUIBarrage) -> UIView? {
        // 是否需要使用自定义UI，如不需要返回 nil 即可
        guard let type = barrage.extInfo["TYPE"], type.value as? String == "GIFTMESSAGE" else {
            return nil
        }
        
        // 返回自定义消息样式UI（礼物回显）
        return CustomBarrageView(barrage: barrage)
    }
}


// 自定义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")
    }
    // ...此处布局与绘制您自己的UI
}

当您需要针对特定的弹幕消息，展示自定义的弹幕 item 时，您可以通过 BarrageDisplayWidget 的 setCustomBarrageBuilder 方法实现。例如，自定义一个显示红色文本的弹幕示例代码如下所示：
/// 1、定义一个自定义弹幕 item 构建器
class GiftBarrageItemBuilder extends CustomBarrageBuilder {
  @override
  Widget buildWidget(BuildContext context, Barrage barrage) { /// 当 shouldCustomizeBarrageItem 返回true时，自定义Widget
    return const Text(
      barrage.content,
      style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.red),
    );
  }

  @override
  bool shouldCustomizeBarrageItem(Barrage barrage) {    /// 当弹幕消息的数据模型，判断当前弹幕消息是否需要自定义
    if (barrage.extInfo.keys.isNotEmpty) {
      return true;
    }
    return false;
  }
}

/// 2、给 BarrageDisplayWidget 设置 setCustomBarrageBuilder
_displayController.setCustomBarrageBuilder(GiftBarrageItemBuilder());



WebRTC Trtc Logo
Copyright © 2013-2025 Tencent RTC. All Rights Reserved.
  1. 隐私条款
  3. 法律
  5. Cookie政策
  7. 腾讯云