TUILiveKit 搭建直播间

最近更新时间:2026-03-04 16:27:30

我的收藏
TUILiveKit 是一款适用于社交娱乐、购物、健身等互动直播场景的产品,通过集成该产品,仅需三步,30分钟内就可以为您的 App 添加互动连麦、送礼、房间管理等功能,快速上线业务。基本功能展示如下图:


接入方式选择

TUILiveKit 提供多种接入方式,以满足您不同程度的定制需求,具体如下:
接入方式
视频直播
语聊房
UI 自定义
无 UI 集成
(RoomEngine-SDK)
方式说明
视频直播将为您集成视频直播场景的所有功能。
语聊房将为您集成语音聊天室场景的所有功能。
UI 自定义提供了直播场景和语音聊天室场景下一系列 UI 组件。您可以选择您需要的组件进行接入。
无 UI 集成为您提供“无 UI”集成方案,对 UI 开发提供了友好的支持。您只需专注于 UI 界面开发,即可高效地构建功能完备、可完全自定义的实时互动应用。
适应场景
当您的 UI 和我们 Demo 中提供的 UI 一致,只需要修改图片资源、字符串资源时,可以使用此方式接入。
当您的 UI 和我们 Demo 中提供的 UI 一致,只需要修改图片资源、字符串资源时,可以使用此方式接入。
当您的 UI 和我们 Demo 中提供的 UI 部分一致需要屏蔽一些功能并新增一些自己的业务时,可以使用此方式接入。
当您想自己实现 UI 不想用我们提供的 UI 时,您可以使用此方式接入。
接入文档
语聊房
支持平台
Android、iOS、Flutter、Web、Electron、Uni-app
Android、iOS、Flutter
Android、iOS、Web
Android、iOS、Flutter、Web、Electron、Uni-app

直播间各功能开发指引

本章将提供直播间常见功能的开发指引,帮助您更快地找到对应功能的说明文档。
基础使用:开播及观看
直播互动:弹幕消息、送礼点赞、单房间连麦、跨房连线 / PK
成员管理:用户等级/身份、禁言与封禁/踢人、在线观众列表、在线人数
直播间管理:直播间列表、直播间审核、直播监播、直播间公告、直播统计
场景指引:电商场景、直播间弹幕抽奖、红包秒杀/福袋

开播及观看

开播平台
配置方式
App 端
完成 Android/iOS/Flutter/Uni-app 端接入后,可直接使用对应的开播功能和观看功能。
Web 端
完成 Web 端接入后,可直接使用对应的开播功能和观看功能。
PC 端开播
使用 Electron 推流助手 进行开播。

弹幕消息

TUILiveKit 内默认支持弹幕消息的发送与展示,不同接入方式的开发指引见:
接入方式
配置方式
视频直播/语聊房
包含 UI,接入完成可直接使用,无需额外配置。如需修改 UI 参见 界面调整
UI 自定义
无 UI 集成(RoomEngine-SDK)
参见 群聊文本消息接收文本消息 自行实现。
直播间用户进入/退出提醒:通过监听 onRemoteUserEnterRoomonRemoteUserLeaveRoom 实现在弹幕中绘制进入/退出提醒消息。
TUILiveKit 预置的弹幕消息 UI 展示如下:
弹幕消息发送组件
弹幕消息展示组件







送礼点赞

TUILiveKit 内提供全链路的送礼解决方案,不同接入方式的开发指引见:
接入方式
配置方式
视频直播/语聊房/UI 自定义
参见 直播送礼组件 进行接入即可。
无 UI 集成(RoomEngine-SDK)
使用该方案搭建语聊房时,可参见 礼物(语聊房)搭建。
使用该方案搭建视频直播时,可参见 礼物(视频直播)搭建。
说明:
仅 TUILiveKit 体验版及大规模直播版支持送礼点赞功能,详细参见 功能与计费说明
TUILiveKit 提供常见的礼物相关能力和 UI 效果如下:
送礼面板
礼物通知(子弹通知)
礼物通知(弹幕消息)
全屏礼物动画





单房间连麦

TUILiveKit 预置单房间连麦功能,根据接入方式的不同,功能的灵活度有所不同,详细参见下表:
接入方式
配置方式
视频直播/语聊房
包含 UI ,接入完成可直接使用,无需额外配置。如需修改 UI 参见 界面调整
UI 自定义
视频直播场景:参见 视频组件 > 单人连麦 进行接入。
语聊房场景:参见 语聊组件 进行麦位管理。
无 UI 集成(RoomEngine-SDK)
参见 观众连麦 进行接入。
说明:
仅 TUILiveKit 多人连麦版及大规模直播版支持单房间连麦,详细参见 功能与计费说明

跨房连线/PK

TUILiveKit 预置跨房连线/PK功能,根据接入方式的不同,功能的灵活度有所不同,详细参见下表:
接入方式
配置方式
视频直播/语聊房
包含 UI ,接入完成可直接使用,无需额外配置。如需修改 UI 参见 界面调整
UI 自定义
视频直播场景:参见 视频组件 > 主播连线 进行接入。
无 UI 集成(RoomEngine-SDK)
参见 主播连线主播 PK 进行接入。
说明:
仅 TUILiveKit 多人连麦版及大规模直播版支持跨房连线/PK,详细参见 功能与计费说明

用户等级/身份标识

用户等级与身份标识功能是直播互动场景中的重要组成部分,用于区分不同用户角色、特权等级和身份状态,从而实现差异化的界面展示、交互权限和功能访问控制。TUILiveKit 默认不提供基础的身份标识框架,但您可以参见以下方式进行实现:

实现用户等级/身份

在您的业务后台,根据您需要的用户等级/身份相关逻辑,自行维护并存储与每个用户 UserID 相对应的等级/身份。

展示用户等级/身份

在实现 弹幕消息 时,发送消息接口选择 sendMessage 接口,其中 message.data 设置为您从您的业务后台获取到的需要展示的等级/身份信息。使用 onRecvNewMessage 收到消息时,解析 data 为您的等级/身份信息,之后自行在弹幕上进行渲染。具体收发消息代码展示如下:
Java
Swift
// 发送消息
V2TIMMessage v2TIMMessage = V2TIMManager.getMessageManager().createTextMessage("text");
String jsonString = "{\\"level\\":\\"25\\",\\"identity\\":\\"normal\\"}"; // 在这里写入从您业务后台获取到的等级/身份信息
v2TIMMessage.setCloudCustomData(jsonString);
V2TIMManager.getMessageManager().sendMessage(v2TIMMessage, null, roomId, V2TIMMessage.V2TIM_PRIORITY_LOW,
true, null, new V2TIMSendCallback<V2TIMMessage>() {
// ...
});

// 接收消息
AdvancedMsgListener listener = new AdvancedMsgListener();
V2TIMManager.getMessageManager().addAdvancedMsgListener(listener);

private class AdvancedMsgListener extends V2TIMAdvancedMsgListener {
@Override
public void onRecvNewMessage(V2TIMMessage msg) {
Gson gson = new Gson();
Type type = new TypeToken<HashMap<String, Object>>() {}.getType();
// 在这里解析自定义数据后渲染到弹幕上
HashMap<String, Object> customData = gson.fromJson(msg.getCloudCustomData(), type);
}
}

import ImSDK_Plus

// 发送消息
let v2TimMessage = imManager.createTextMessage(text: "text")
let jsonString = "{\\"level\\":\\"25\\",\\"identity\\":\\"normal\\"}" // 在这里写入从您业务后台获取到的等级/身份信息
let data = jsonString.data(using: .utf8)
v2TimMessage?.cloudCustomData = data
V2TIMManager.sharedInstance().sendMessage(message: v2TimMessage, receiver: nil,
groupID: roomId, priority: .PRIORITY_LOW,
onlineUserOnly: true, offlinePushInfo: nil, progress: nil) {
} fail: { code, message in
}

// 接收消息
V2TIMManager.sharedInstance().addAdvancedMsgListener(listener: self)

extension YourClass: V2TIMAdvancedMsgListener {
func onRecvNewMessage(msg: V2TIMMessage) {
if let jsonObject = try? JSONSerialization.jsonObject(with: msg.cloudCustomData ?? Data(), options: []),
let dict = jsonObject as? [String: Any] {
// 在这里解析自定义数据后渲染到弹幕上
}
}
}

直播间禁言与封禁/踢人

出于管理要求,部分直播间会需要将指定成员禁言或踢出直播间。
TUILiveKit 预置直播间禁言与封禁/踢人,根据接入方式的不同,功能的灵活度有所不同,详细参见下表:
接入方式
配置方式
视频直播/语聊房
包含 UI ,接入完成可直接使用,无需额外配置。如需修改 UI 参见 界面调整
可从观众列表和弹幕组件2个位置选择相应用户进行封禁/踢人。
UI 自定义
默认无封禁/踢人功能,可在观众列表的 观众管理 中,在 onUserItemClick 回调内调用无 UI 集成接口来自行实现。
踢人接口:kickRemoteUserOutOfRoom
无 UI 集成(RoomEngine-SDK)
禁言请参见 禁止用户发言 进行接入。
踢人参见 kickRemoteUserOutOfRoom 接口实现。

在线观众列表

TUILiveKit 预置在线观众列表功能,可用于展示直播间实时人数及直播间中的在线观众列表。根据接入方式的不同,功能的灵活度有所不同,详细参见下表:
接入方式
配置方式
视频直播/语聊房
包含 UI ,接入完成可直接使用,无需额外配置。如需修改 UI 参见 界面调整
UI 自定义
参见 观众列表 进行接入。
无 UI 集成(RoomEngine-SDK)
可以通过getUserList方法获取,也可以通过监听onRemoteUserEnterRoom/onRemoteUserLeaveRoom来自行维护。
服务端 REST API
业务后台可通过 REST API 获得房间成员列表。

在线人数

TUILiveKit 预置展示直播间实时在线人数功能。根据接入方式的不同,功能的灵活度有所不同,详细参见下表:
接入方式
配置方式
视频直播/语聊房
包含 UI ,接入完成可直接使用,无需额外配置。如需修改 UI 参见 界面调整
UI 自定义/无 UI 集成(RoomEngine-SDK)
可以通过监听 onRoomUserCountChanged 实时得到当前直播间人数。直播间人数较少时(例如小于100),建议通过监听 onRemoteUserEnterRoom / onRemoteUserLeaveRoom 来自行维护在线人数以得到更准确的人数。
服务端 REST API
业务后台可通过 REST API 获得房间成员列表,但当直播间人数大于1000人时只返回1000人。

直播间列表

TUILiveKit 预置直播间列表功能,可用于展示所有直播间。
根据接入方式的不同,功能的灵活度有所不同,详细参见下表:
接入方式
配置方式
视频直播/语聊房/UI 自定义
参见 直播列表 进行接入。
无 UI 集成(RoomEngine-SDK)
通过 fetchLiveList 接口获取直播间列表。
服务端 REST API
业务后台可通过 REST API 获得直播列表。
TUILiveKit 预置的直播间列表效果如下:
双列瀑布流
单列瀑布流








说明:
仅 TUILiveKit 大规模直播版支持直播列表中的直播预览及瀑布流能力,详细参见 功能与计费说明

直播间审核

在直播场景中,用户很可能会发送不合适的内容,特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容,不仅严重损害了用户们的身心健康,更很有可能违法并导致业务被监管部门查封。目前 TUILiveKit 可通过云端审核服务实现敏感内容过滤,可针对不安全、不适宜的内容进行自动识别、处理,为您的产品体验和业务安全保驾护航。
使用 TUILiveKit 时可直接参见 直播审核(TUILiveKit)实现对直播音视频流、弹幕和用户信息的审核。

直播监播

为方便您实时管理和监控您的直播间,TUILiveKit 提供了直播监播的能力,可查看当前直播间,并可直接解散指定直播间。


直播间公告

直播间公告是每个直播间必备的内容,用户进入直播间可以看到该直播间的基本信息。同时,直播间公告也需要更改后实时通知给直播间的成员。
Live 房间信息支持 Notice 字段作为房间公告,设置或更新后会通过通知房间内用户。
接入方式
配置方式
含 UI 集成
主播端:添加主播推流页面 时,设置 liveInfo.notice 为您所需要的直播间公告。
观众端:参考下方 无UI集成 中的内容进行实现。
无 UI 集成(AtomicXCore-SDK)
主播端:
开播设置直播间公告:开播调用 LiveListStore 中的 createLive 接口时,传入的LiveInfo中设置 notice 字段为您的直播间公告。
更新直播间公告:开播后,调用 LiveListStore 中的 updateLiveInfo 接口修改直播间公告。
观众端:
加入直播间时,通过 joinLive 接口返回的LiveInfo中的notice字段即为直播间公告。此时可以通过弹幕的 插入本地提示消息,来将直播间公告显示在弹幕上。
直播间信息公告更新时,通过监听 LiveListState 中的 currentLive 字段来获取更新后的直播间公告。
服务端 REST API
参考 创建房间更新房间 中的 Notice 字段进行设置和更新。

直播统计

TUILiveKit 支持直播统计功能, 包含 累计观看次数、点赞总数、送礼总数、送礼总个数、送礼总金额 等字段,您可以参见以下方式进行接入。
接入方式
配置方式
视频直播/语聊房
包含 UI,接入完成可直接使用,主播在结束直播后将自动展示直播统计数据,无需额外配置。
UI 自定义
结束直播调用 LiveCoreView 中带有 TUIStopLiveBlock 回调的 stopLive 接口,该回调中带有本场直播的统计信息 TUILiveStatisticsData
无 UI 集成(RoomEngine-SDK)
结束直播调用 stopLive 接口时,回调中带有本场直播的统计信息 TUILiveStatisticsData

电商场景

商品管理模块是电商直播场景特有的,一般包含商品列表管理、商品弹窗管理、商品链接跳转与支付等。TUILiveKit 不直接提供商品管理功能,以下是商品管理的基础流程和使用建议:


商品列表/购物车

商品列表管理是商品管理的基础功能,主要包括商品的添加、删除、修改和查询等功能。通常会在后台数据库中存储商品的各种信息,例如商品名称、描述、价格、库存、图片等。在前端,您可以通过您的 API 接口获取这些信息,并以列表的形式展示给用户。

商品弹窗管理

在直播带货过程中,伴随着主播对商品的讲解与上架,通常需要在观众端弹出对应的商品信息,以便提示观众浏览和购买。商品信息弹窗可以通过向直播间内发送 IM 自定义消息 的方式实现,直播间观众收到自定义消息后进行解析和展示。您也可以通过您的业务侧自行实现自定义消息的收发。
如您需要在UI上展示商品弹窗,可参考以下方法:
接入方式
配置方式
视频直播/语聊房/UI自定义
主播
在主播页面上添加商品弹窗 UI。具体代码添加位置如下:
观众
在观众观看页面上添加商品弹窗 UI。具体代码添加位置如下:
无 UI 集成(RoomEngine-SDK)
在收到自定义消息并解析为商品相关信息后,在您的主播页面/观众观看页面 UI 的最上层,添加商品弹窗的 View 即可。

商品跳转与支付

直播间内的观众完成商品挑选后,需要通过点击商品链接,跳转到具体的电商店铺进行订单的确认及支付。这里的电商店铺可以是平台内店铺,或是集成的第三方平台店铺。待用户支付完成后,还需要获取支付结果,以便更新商品的销售状态和库存信息等。
说明:
上述商品管理模块仅供参考,实际应用中您需要结合业务需求自行设计并部署

直播间弹幕抽奖

直播间弹幕抽奖是指用户发送特定内容的 弹幕消息 参与直播间抽奖。实现思路为业务后台群内发言消息后回调请求获取弹幕消息内容,符合特定内容的消息发送者将加入奖池,否则不做处理。回调使用见 群内发言之后回调


红包秒杀/福袋

红包秒杀和福袋是电商直播中常见的营销互动功能,能有效提升用户参与度和购买转化率。TUILiveKit 不直接提供此功能,但您可基于其 IM 通信能力,结合您的业务后台来实现。

活动创建与通知

主播端向业务后台请求创建红包/福袋活动。业务后台创建活动成功后,通过 REST API 向直播间发送一条通知,通知所有观众活动开始。

用户参与逻辑

观众端收到活动通知后,展示参与入口。用户点击后,向您的业务后台发起参与请求。业务后台负责验证用户资格、记录参与信息,并可以实时更新参与人数。

抽奖与结果公布

到达预设的开奖时间,业务后台执行抽奖逻辑。抽奖完成后,业务后台再次通过 REST API 将中奖结果广播到直播间。

奖励发放

业务后台根据中奖结果,向用户的账户发放相应的奖励(例如优惠券、积分、余额等)。这一步通常与您的账户或营销系统对接。

关键技术点

自定义消息:整个功能的核心是定义和收发不同类型的自定义消息,用于同步活动状态(例如“活动开始”、“结果公布”)。客户端需要根据消息类型来展示不同的 UI 效果。
业务后台:所有活动管理、用户参与、抽奖和发奖的逻辑都由您的业务后台处理,确保流程的安全和可靠。
说明:
上述红包/福袋模块仅供参考,实际应用中您需要结合业务需求自行设计并部署。