TUILiveKit 主播开播页为直播场景提供开箱即用的全功能界面,支持快速搭建主播开播所需的核心能力,让您无需关注复杂 UI 与逻辑实现,即可高效集成直播开播流程。
功能概览
开播前预览:支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置;
连麦互动:支持直播过程中与观众 或 与其他直播间主播实时互动;
观众互动:支持弹幕、礼物等丰富直播互动形式;
直播间管理:支持在线用户列表展示、以及直播间内的禁言、踢人等多种管理操作。
开播前预览 | 连麦互动 | 观众互动 | 直播间管理 |
![]() | ![]() | ![]() | ![]() |
快速接入
步骤 1. 开通服务
步骤 2. 代码集成
步骤 3. 添加开播前的准备页面
AnchorPrepareView
组件已内置了摄像头预览、音效设置、布局设置、以及其它功能设置,您需创建并加载主播开播页视图,具体示例代码如下:// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器class YourAnchorPrepareViewController: UIViewController {// 1. 声明创建 LiveCoreView 实例private let coreView = LiveCoreView()// 2. 懒加载 AnchorPrepareViewprivate lazy var prepareView: AnchorPrepareView = {// 3. AnchorPrepareView 初始化时传入 coreView 实例对象let view = AnchorPrepareView(coreView: coreView)return view}()public override func viewDidLoad() {super.viewDidLoad()// 4. 将 prepareView 添加到视图上view.addSubview(prepareView)prepareView.snp.makeConstraints { make inmake.edges.equalToSuperview()}}}
步骤 4. 添加主播用的推流页面
AnchorView
组件已内置了音视频推流、观众连麦、直播互动、直播管理等功能,您只需创建并加载主AnchorView
,具体示例代码如下:// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器class YourAnchorViewController: UIViewController {// 直播间信息private let liveInfo: LiveInfo// 核心 view 组件private let coreView: LiveCoreView// 进房行为:// RoomBehavior.createRoom: 主播创建房间// RoomBehavior.enterRoom: 观众进入房间private let behavior: RoomBehavior// 1. 声明 anchorView 实例private let anchorView: AnchorView// 2. 新增便利构造函数完成实例初始化public init(liveInfo: LiveInfo, coreView: LiveCoreView? = nil) {self.liveInfo = liveInfoself.behavior = behaviorif let coreView = coreView {self.coreView = coreView} else {self.coreView = LiveCoreView()}// 3. 实例化主播开播页self.anchorView = AnchorView(liveInfo: liveInfo, coreView: self.coreView, behavior: .createRoom)super.init(nibName: nil, bundle: nil)}public override func viewDidLoad() {super.viewDidLoad()// 4. 将 anchorView 添加到视图上view.addSubview(anchorView)anchorView.snp.makeConstraints { make inmake.edges.equalToSuperview()}}}
步骤 5. 从准备页面跳转到推流页面
// 在步骤1 AnchorPrepareView 初始化时设置代理class YourAnchorPrepareViewController: UIViewController {private lazy var prepareView: AnchorPrepareView = {let view = AnchorPrepareView(coreView: coreView)// 1. 设置回调代理prepareView.view.delegate = selfreturn view}()}// 2. 实现 AnchorPrepareViewDelegate 回调代理extension YourAnchorPrepareViewController : AnchorPrepareViewDelegate {// 响应开播按钮点击事件// - state: PrepareState 封装了主播开播页的摄像头、音效等功能设置,您只需按以下示例代码设置即可public func onClickStartButton(state: PrepareState) {// 4. 跳转到主播开播页// 4.1. 初始化直播信息var liveInfo = LiveInfo()// 您只需要设置 roomId 即可liveInfo.roomId = roomIdliveInfo.name = state.roomNameliveInfo.coverUrl = state.coverUrlliveInfo.isPublicVisible = state.privacyMode == .publicliveInfo.seatLayoutTemplateId = state.templateMode.rawValueliveInfo.backgroundUrl = state.coverUrlliveInfo.pkTemplateId = state.pkTemplateMode.rawValue// 4.2. 实例化您的直播开播视图控制器let anchorVC = YourAnchorViewController(liveInfo: liveInfo, coreView: coreView)anchorVC.modalPresentationStyle = .fullScreen// 4.3. 跳转到您的直播开播视图控制器present(anchorVC, animated: false)}// 响应返回按钮点击事件public func onClickBackButton() {if let nav = navigationController {nav.popViewController(animated: true)} else {dismiss(animated: true)}}}
自定义您的界面布局
TUILiveKit 支持灵活定制开播页与直播页的功能和样式,您可根据业务需求调整布局、隐藏 / 显示功能模块。
直播布局模板选择
TUILiveKit 提供 4 种直播布局模板,您可在主播开播页的 UI 交互「布局」入口 选择合适样式:

布局模板一览:
名称 | 动态宫格布局 | 浮动小窗布局 | 固定宫格布局 | 固定小窗布局 |
模板 ID | 600 | 601 | 800 | 801 |
描述 | 默认布局,可根据连麦人数动态调整宫格大小。 | 连麦嘉宾以浮动小窗形式显示。 | 连麦人数固定,每个嘉宾占据一个固定宫格。 | 连麦人数固定,嘉宾以固定小窗形式显示。 |
预览 | ![]() | ![]() | ![]() | ![]() |
自定义开播页功能区
// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器class YourAnchorPrepareViewController: UIViewController {private let coreView = LiveCoreView()private lazy var prepareView: AnchorPrepareView = {let view = AnchorPrepareView(coreView: coreView)view.delegate = selfreturn view}()public override func viewDidLoad() {super.viewDidLoad()// 1. 将 prepareView 添加到视图上view.addSubview(prepareView)prepareView.snp.makeConstraints { make inmake.edges.equalToSuperview()}// 2. 自定义功能区 - 示例:隐藏美颜功能prepareView.disableMenuBeautyButton(true)}}
隐藏整个功能区 | 隐藏美颜按钮 | 隐藏音效按钮 | 隐藏摄像头切换按钮 |
disableFeatureMenu(true) | disableMenuBeautyBtn(true) | disableMenuAudioEffectBtn(true) | disableMenuSwitchCameraBtn(true) |
![]() | ![]() | ![]() | ![]() |
自定义主播直播页功能区
// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器class YourAnchorViewController: UIViewController {// 声明 anchorView 实例private let anchorView: AnchorViewpublic override func viewDidLoad() {super.viewDidLoad()// 将 anchorView 添加到视图上view.addSubview(anchorView)anchorView.snp.makeConstraints { make inmake.edges.equalToSuperview()}// 隐藏主播连线功能anchorView.disableFooterCoHost
(true)}}
隐藏顶部观众列表功能 | 隐藏底部观众连麦功能 | 隐藏底部主播连线功能 | 隐藏底部主播 PK 功能 |
disableHeaderVisitorCnt(true) | disableFooterCoGuest(true) | disableFooterCoHost(true) | disableFooterBattle(true) |
![]() | ![]() | ![]() | ![]() |
文案定制
说明:
Apple Strings Catalog (.xcstrings) 是在 Xcode 15 中引入的本地化格式。它增强了开发者管理本地化字符串的方式,支持处理复数、设备特定变体等的结构化格式。这种格式正成为管理 iOS 和 macOS 应用程序本地化的推荐方法。

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

点击开播按钮无法开播,提示“未登录”?