- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 组件介绍（TUICallKit）
- 开通服务（TUICallKit）
- 跑通 Demo（TUICallKit）
- 快速接入（TUICallKit）
- Chat 集成通话能力（TUICallKit）
- 界面定制（TUICallKit）
- 离线唤醒（TUICallKit）
- AI 降噪（TUICallKit）
- 虚拟背景（TUICallKit）
- 会话聊天（TUICallKit）
- 云端录制（TUICallKit）
- 更多特性（TUICallKit）
- 解决方案（TUICallKit）
- 服务端 API（TUICallKit）
- 客户端 API（TUICallKit）
- 错误码表（TUICallkit）
- 发布日志（TUICallKit）
- 常见问题（TUICallKit）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 开播和观看（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 悬浮窗（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 组件介绍（TUICallKit）
- 开通服务（TUICallKit）
- 跑通 Demo（TUICallKit）
- 快速接入（TUICallKit）
- Chat 集成通话能力（TUICallKit）
- 界面定制（TUICallKit）
- 离线唤醒（TUICallKit）
- AI 降噪（TUICallKit）
- 虚拟背景（TUICallKit）
- 会话聊天（TUICallKit）
- 云端录制（TUICallKit）
- 更多特性（TUICallKit）
- 解决方案（TUICallKit）
- 服务端 API（TUICallKit）
- 客户端 API（TUICallKit）
- 错误码表（TUICallkit）
- 发布日志（TUICallKit）
- 常见问题（TUICallKit）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 开播和观看（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 悬浮窗（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
功能介绍
互动弹幕功能是一项重要的实时交流工具，支持多种互动方式。用户可以在弹幕中输入表情和文本消息，增强消息的趣味性，使得互动体验更加愉快和生动。通过这一功能，观众能够在直播过程中与主播和其他观众进行更为丰富的交流，提升整体的参与感和乐趣。TUILiveKit 中已经通过即时通信 IM 实现了互动弹幕的功能。
弹幕组件主要包提供2个 Widget 组件，发送弹幕消息 Widget（
BarrageSendWidget）和显示弹幕消息的 Widget（BarrageDisplayWidget）：BarrageSendWidget：发送弹幕消息 Widget，点击后可以拉起输入界面。BarrageDisplayWidget：接收到弹幕消息后，会显示弹幕消息到该 Widget 上。效果如下图所示：
BarrageSendWidget | BarrageDisplayWidget | LiveKit 中接入barrage组件效果 |
 |  |  |
快速接入
说明：
如果您已经集成了 LiveKit 组件，我们在 LiveKit 中默认已经接入了 barrage 组件，您可以直接在 LiveKit 中体验弹幕功能。
添加barrage 组件到项目中
1. 从 github下载 barrage 组件到本地，并将 barrage (TUILiveKit/Flutter/barrage) 目录拷贝到您的工程目录中，例如 livekit 中接入barrage 组件，目录如下图所示：
2. 在您的项目工程的 pubspec.yaml 文件的 dependencies 节点下中，添加 barrage 的本地依赖。
dependencies:flutter:sdk: flutterflutter_localizations:sdk: flutterintl: ^0.19.0# 添加 barrage 本地依赖barrage:path: ../barrage
接入发送弹幕消息组件
在您需要接入发送弹幕消息的地方构建 BarrageSendController 和 BarrageSendWidget 对象，并将构建的 BarrageSendWidget 对象添加到您的 Widget 树上。示例代码如下：
BarrageSendController _sendController = BarrageSendController(roomId: "liveRoomId", /// liveRoomId 替换为您的直播间IDownerId: "liveOwnerId", /// liveOwnerId 替换为您的直播间主播IDselfUserId: "selfUserId", /// selfUserId 替换为您的当前登录的用户IDselfName: "selfUserName"; /// selfUserName 替换为您的当前登录的用户昵称BarrageSendWidget(controller: _sendController);
接入显示弹幕消息组件
在您需要接入显示弹幕消息的地方构建 BarrageDisplayController 和 BarrageDisplayWidget 对象，并将构建的 BarrageDisplayWidget 对象添加到您的 Widget 树上。示例代码如下：
BarrageDisplayController _displayController = BarrageDisplayController(roomId: "liveRoomId", /// liveRoomId 替换为您的直播间IDownerId: "liveOwnerId", /// liveOwnerId 替换为您的直播间主播IDselfUserId: "selfUserId", /// selfUserId 替换为您的当前登录的用户IDselfName: "selfUserName"; /// selfUserName 替换为您的当前登录的用户昵称BarrageDisplayWidget(controller: _displayController);
插入本地弹幕消息
当您需要插入本地的弹幕消息时，可以调用 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);
自定义弹幕消息
当您需要针对特定的弹幕消息，展示自定义的弹幕 item 时，您可以通过 BarrageDisplayWidget 的 setCustomBarrageBuilder 方法实现。例如，自定义一个显示红色文本的弹幕示例代码如下所示：
/// 1、定义一个自定义弹幕 item 构建器class GiftBarrageItemBuilder extends CustomBarrageBuilder {@overrideWidget buildWidget(BuildContext context, Barrage barrage) { /// 当 shouldCustomizeBarrageItem 返回true时，自定义Widgetreturn const Text(barrage.content,style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.red),);}@overridebool shouldCustomizeBarrageItem(Barrage barrage) { /// 当弹幕消息的数据模型，判断当前弹幕消息是否需要自定义if (barrage.extInfo.keys.isNotEmpty) {return true;}return false;}}/// 2、给 BarrageDisplayWidget 设置 setCustomBarrageBuilder_displayController.setCustomBarrageBuilder(GiftBarrageItemBuilder());
常见问题
弹幕组件初始化时机
由于弹幕组件的 controller 需要接入一些直播间信息参数，所以需要在观众进入直播间或者主播创建直播间后，在加载弹幕组件。
是
否
本页内容是否解决了您的问题？