TUILiveKit 的观众观看页为用户提供了丰富且便捷的直播观看与互动功能,能快速集成到您的应用中,满足观众多样化的需求。
功能概览
直播观看:清晰、流畅观看主播实时直播画面。
互动连麦:申请连麦,与主播进行音视频互动。
直播信息:查看直播间标题、简介,及在线观众列表等信息。
直播互动:送礼物(有动画特效,主播接收提示)、点赞(有动画及实时统计)、发弹幕互动。
直播观看 | 互动连麦 | 直播信息 | 直播互动 |
![]() |
![]() | ![]() | ![]() |
快速接入
步骤 1. 开通服务
步骤 2. 代码集成
步骤 3. 添加观众拉流页面
在您的观众视图控制器中
YourAudienceViewController
初始化添加 AudienceContainerView
观众拉流视图://YourAudienceViewController
代表您观众观看页的视图控制器classYourAudienceViewController
: UIViewController {// 1. 声明 audienceView 作为成员变量private let audienceView:AudienceContainerView
// 2. 新增便利构造函数:// - roomId: 直播房间idpublic init(roomId: String) {// 3.初始化 AudienceContainerView 组件
self.audienceView = AudienceContainerView(roomId: roomId)super.init(nibName: nil, bundle: nil)}public override func viewDidLoad() {super.viewDidLoad()// 4. 将 audienceView 添加到视图上view.addSubview(audienceView)audienceView.snp.makeConstraints { make inmake.edges.equalToSuperview()}}}
步骤 4. 导航路由到观众拉流页面
// 1. 实例化您的观众观看视图控制器let audienceVC =YourAudienceViewController
(roomId: "您的直播房间 id")audienceVC.modalPresentationStyle = .fullScreen// 2. 跳转到您的观众观看视图控制器present(audienceVC, animated: false)
自定义您的界面布局
自定义观众观看页功能区
//YourAudienceViewController
代表您观众观看页的视图控制器classYourAudienceViewController
: UIViewController {private let audienceView:AudienceContainerView
public init(roomId: String) {self.audienceView = AudienceContainerView(roomId: roomId)super.init(nibName: nil, bundle: nil)}public override func viewDidLoad() {super.viewDidLoad()// 1. 将 audienceView 添加到视图上view.addSubview(audienceView)audienceView.snp.makeConstraints { make inmake.edges.equalToSuperview()}// 2. 自定义功能区 示例 - 禁止上下滑动切换直播间audienceView.disableSliding(true)}}
隐藏顶部操作区直播信息 | 隐藏顶部操作区悬浮窗功能 | 隐藏顶部操作区中的观众列表功能 | 隐藏底部操作区的连麦功能 | 禁止上下滑动切换直播间 |
disableHeaderLiveData(true) | disableHeaderFloatWin(true) | disableHeaderVisitorCnt(true) | disableFooterCoGuest(true) | disableSliding(true) |
![]() | ![]() | ![]() | ![]() | ![]() |
文案定制
说明:
Apple Strings Catalog (.xcstrings) 是在 Xcode 15 中引入的本地化格式。它增强了开发者管理本地化字符串的方式,支持处理复数、设备特定变体等的结构化格式。这种格式正成为管理 iOS 和 macOS 应用程序本地化的推荐方法。

图标定制
TUILiveKit 使用
TUILiveKit.xcassets
管理 UI 所需的图片资源,您可以借助 Xcode 图形化工具快速修改自定义界面所需的图标。
下一步
恭喜您,现在您已经成功集成了观众观看。接下来,您可以实现主播开播、直播列表等功能,可参考下表:
常见问题
观众选择视频连麦后,视频画面显示黑屏?
请前往手机设置 > App > 相机,检查摄像头权限是否开启,可参考下图:

观众发送弹幕时,直播间内其他观众看不到弹幕内容?
原因 1: 先检查网络连接,确保观众设备网络正常。
原因 2: 该观众被主播禁言,无法发送弹幕。
原因 3:观众的弹幕内容涉及 关键词屏蔽,请确认观众发送的弹幕内容是否符合直播间规则。