tencent cloud

实时音视频

文档实时音视频直播与语聊 SDKUI 组件库聊天弹幕组件聊天弹幕组件（iOS UIKit）

聊天弹幕组件（iOS UIKit）

下载
聚焦模式
字号
最后更新时间： 2026-07-01 17:45:24

功能预览

TUILiveKit 直播弹幕为直播场景提供完整互动解决方案，能够增强直播的互动性和趣味性。通过本文档，您可快速实现直播间弹幕互动功能，并支持深度定制以满足业务需求。
弹幕消息发送组件（BarrageInputView）
弹幕消息展示组件（BarrageStreamView）





组件构成

组件名称
具体内容
弹幕消息组件（BarrageStreamView）
负责实时展示和管理弹幕消息流的组件，提供消息列表渲染、时间聚合、用户交互和响应式适配等完整的消息展示解决方案。
消息发送组件（BarrageInputView）
提供富文本编辑和消息发送功能的输入组件，集成表情选择器、字符限制、状态管理和跨平台适配，为用户提供流畅的消息输入体验。

快速开始

步骤1：开通服务

请参考 开通服务，领取 TUILiveKit 体验版或者开通专业版。

步骤2：代码集成

参考 准备工作 完成 TUILiveKit 组件接入。

步骤3：接入弹幕消息发送组件

在您的应用中接入弹幕消息发送组件，使主播/观众能够方便地发送弹幕消息。请参考示例代码创建 BarrageInputView 组件并添加到您的视图
Swift
// 1. 创建 BarrageInputView 对象
let roomId = "your_room_id" //替换为您真实的roomId,与LiveID等价
let barrageInputView = BarrageInputView(roomId: roomId)
// ...此处将barrageInputView添加到您的父视图上并调整布局
说明：
1. 弹幕消息发送组件支持系统键盘和表情键盘切换。
2. 为尊重表情设计版权，TUILiveKit 工程中不包含大表情元素切图，正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有，可有偿授权使用，如果需要获得授权可 提交工单 联系我们。




步骤4：接入弹幕消息展示组件

在需要展示弹幕的位置，创建并初始化 BarrageStreamView 来展示弹幕消息。ownerId 用于区分房主和观众的显示效果。
Swift
let liveID = "your_live_id"  //替换为您真实的LiveID
let ownerId = "your_owner_id"  //替换为您真实的ownerId
// 1. 创建 BarrageStreamView 对象
let barrageDisplayView = BarrageStreamView(liveID: liveID)

// 2. 此处将 barrageDisplayView 添加到您的父视图上并调整布局
barrageDisplayView.setOwnerId(ownerId)

步骤5：插入本地弹幕消息

BarrageStore 提供了 appendLocalTip 接口，用于插入自定义消息（例如礼物消息、直播间公告等）。您可以通过自定义样式实现不同的展示效果。
说明：
此操作必须在进房成功后执行。
Swift
import TUILiveKit
import AtomicXCore
// 示例：在弹幕区插入一条礼物消息
let barrage = Barrage()
barrage.textContent = "gift"
barrage.liveID = "your_live_id" //替换为您真实的LiveID
barrage.sender.userID = "sender.userId"
barrage.sender.userName = "sender.userName"
barrage.sender.avatarURL = "sender.avatarUrl"
barrage.timestampInSecond = Date().timeIntervalSince1970

let giftCount = 1
barrage.extensionInfo = [
    "TYPE": "GIFTMESSAGE",
    "gift_name": gift.name,
    "gift_count": "\\(giftCount)",
    "gift_icon_url": gift.iconURL,
    "gift_receiver_username": userName
]

// 获取 BarrageStore 实例
let barrageStore = BarrageStore.shared(liveID: ""your_live_id") //替换为您真实的liveID"
barrageStore.appendLocalTip(message: barrage)

自定义弹幕消息样式

效果示例




弹幕消息样式默认有两种：普通弹幕（样式为 0）和自定义消息样式。如果您需要更多样式，可实现 BarrageStreamView 的代理方法 BarrageStreamViewDelegate。
Swift
import UIKit
import TUILiveKit
import AtomicXCore

class MyViewController: UIViewController, BarrageStreamViewDelegate {
    let liveID = "your_live_id"  //替换为您真实的liveID
    let barrageDisplayView = BarrageStreamView(liveID: liveID)

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

    func onBarrageClicked(user: LiveUserInfo) {
        // 此处您可添加弹幕消息点击事件处理逻辑，user为消息发送者信息
    }
    
    func barrageDisplayView(_ barrageDisplayView: BarrageStreamView, createCustomCell barrage: Barrage) -> UIView? {
        guard let type = barrage.extensionInfo?["TYPE"], type == "GIFTMESSAGE" else {
            // 是否需要使用自定义UI，如不需要返回 nil 即可
           return nil
           // 如果需要，也可以根据消息类型返回特定的样式
           // return GiftBarrageView(barrage: barrage)
       }
        
        // 返回自定义消息样式UI
        return CustomBarrageView(barrage: barrage)
    }
}


// 自定义UI
class CustomBarrageView: UIView {
    let barrage: Barrage
    init(barrage: Barrage) {
        self.barrage = barrage
        super.init(frame: .zero)
        setupUI()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    // ...此处布局与绘制您自己的UI
}

常见问题

为什么我无法看到弹幕消息？

请检查以下几点：
确保您已经为 BarrageInputView 传递了正确的 roomId，为BarrageStreamView 传递了正确的 LiveID。
检查网络连接是否正常。

如何在弹幕消息中区分房主和观众？

在初始化 BarrageStreamView 时，您需要传入 ownerId 参数。组件会根据 ownerId 自动识别房主发送的弹幕，并应用不同的样式。您也可以通过自定义弹幕样式，根据 Barrage 消息中的 user.userId 字段来判断是否为房主，并显示您想要的特定效果。
上一篇: 聊天弹幕组件（Flutter）下一篇: 聊天弹幕组件（Web 桌面浏览器）

帮助和支持

本页内容是否解决了您的问题？

填写满意度调查问卷，共创更好文档体验。

文档反馈