TUILiveKit 搭建直播间

最近更新时间:2025-11-20 17:43:32

我的收藏
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 提供了直播监播的能力,可查看当前直播间,并可直接解散指定直播间。


直播间公告

直播间公告(主题)是每个直播间必备的内容,用户进入直播间可以看到该直播间的基本信息。同时,直播间公告也需要更改后实时通知给直播间的成员。
TUILiveKit 房间资料支持 RoomName,Notice 等字段,作为房间公告,更新后会通过通知同步到端上 SDK。具体可参见 创建房间更新房间资料

直播统计

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 效果。
业务后台:所有活动管理、用户参与、抽奖和发奖的逻辑都由您的业务后台处理,确保流程的安全和可靠。
说明:
上述红包/福袋模块仅供参考,实际应用中您需要结合业务需求自行设计并部署。