主播开播(iOS)

最近更新时间:2025-09-18 11:20:02

我的收藏
TUILiveKit 主播开播页为直播场景提供开箱即用的全功能界面,支持快速搭建主播开播所需的核心能力,让您无需关注复杂 UI 与逻辑实现,即可高效集成直播开播流程。

功能概览

开播前预览:支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置;
连麦互动:支持直播过程中与观众 或 与其他直播间主播实时互动;
观众互动:支持弹幕、礼物等丰富直播互动形式;
直播间管理:支持在线用户列表展示、以及直播间内的禁言、踢人等多种管理操作。
开播前预览
连麦互动
观众互动
直播间管理











快速接入

步骤 1. 开通服务

参考 开通服务 文档开通「体验版」或「大规模直播版」套餐。

步骤 2. 代码集成

参考 准备工作 接入 TUILiveKit。

步骤 3. 添加开播前的准备页面

AnchorPrepareView组件已内置了摄像头预览、音效设置、布局设置、以及其它功能设置,您需创建并加载主播开播页视图,具体示例代码如下:
Swift
// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器
class YourAnchorPrepareViewController: UIViewController {

// 1. 声明创建 LiveCoreView 实例
private let coreView = LiveCoreView()
// 2. 懒加载 AnchorPrepareView
private 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 in
make.edges.equalToSuperview()
}
}
}

步骤 4. 添加主播用的推流页面

AnchorView 组件已内置了音视频推流、观众连麦、直播互动、直播管理等功能,您只需创建并加载主AnchorView ,具体示例代码如下:
swift
// 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 = liveInfo
self.behavior = behavior
if 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 in
make.edges.equalToSuperview()
}
}
}

步骤 5. 从准备页面跳转到推流页面

结合 步骤 3 实现 AnchorPrepareView 组件的代理事件,完成主播开播页的路由跳转,具体示例代码如下:
swift
// 在步骤1 AnchorPrepareView 初始化时设置代理
class YourAnchorPrepareViewController: UIViewController {
private lazy var prepareView: AnchorPrepareView = {
let view = AnchorPrepareView(coreView: coreView)
// 1. 设置回调代理
prepareView.view.delegate = self
return view
}()
}

// 2. 实现 AnchorPrepareViewDelegate 回调代理
extension YourAnchorPrepareViewController : AnchorPrepareViewDelegate {
// 响应开播按钮点击事件
// - state: PrepareState 封装了主播开播页的摄像头、音效等功能设置,您只需按以下示例代码设置即可
public func onClickStartButton(state: PrepareState) {
// 4. 跳转到主播开播页
// 4.1. 初始化直播信息
var liveInfo = LiveInfo()
// 您只需要设置 roomId 即可
liveInfo.roomId = roomId
liveInfo.name = state.roomName
liveInfo.coverUrl = state.coverUrl
liveInfo.isPublicVisible = state.privacyMode == .public
liveInfo.seatLayoutTemplateId = state.templateMode.rawValue
liveInfo.backgroundUrl = state.coverUrl
liveInfo.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
描述
默认布局,可根据连麦人数动态调整宫格大小。
连麦嘉宾以浮动小窗形式显示。
连麦人数固定,每个嘉宾占据一个固定宫格。
连麦人数固定,嘉宾以固定小窗形式显示。
预览







自定义开播页功能区

通过调用 步骤 3 创建的prepareView 的 API,可自定义隐藏开播准备页的操作区或特定功能:
swift
// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器
class YourAnchorPrepareViewController: UIViewController {

private let coreView = LiveCoreView()
private lazy var prepareView: AnchorPrepareView = {
let view = AnchorPrepareView(coreView: coreView)
view.delegate = self
return view
}()

public override func viewDidLoad() {
super.viewDidLoad()
// 1. 将 prepareView 添加到视图上
view.addSubview(prepareView)
prepareView.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
// 2. 自定义功能区 - 示例:隐藏美颜功能
prepareView.disableMenuBeautyButton(true)
}
}
隐藏整个功能区
隐藏美颜按钮
隐藏音效按钮
隐藏摄像头切换按钮
disableFeatureMenu(true)
disableMenuBeautyBtn(true)
disableMenuAudioEffectBtn(true)
disableMenuSwitchCameraBtn(true)













自定义主播直播页功能区

通过调用 步骤 4 创建的 anchorView 的 API,可自定义隐藏主播直播页的操作区或特定功能:
swift
// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器
class YourAnchorViewController: UIViewController {
// 声明 anchorView 实例
private let anchorView: AnchorView
public override func viewDidLoad() {
super.viewDidLoad()
// 将 anchorView 添加到视图上
view.addSubview(anchorView)
anchorView.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
// 隐藏主播连线功能
anchorView.disableFooterCoHost(true)
}
}
隐藏顶部观众列表功能
隐藏底部观众连麦功能
隐藏底部主播连线功能
隐藏底部主播 PK 功能
disableHeaderVisitorCnt(true)
disableFooterCoGuest(true)
disableFooterCoHost(true)
disableFooterBattle(true)













文案定制

TUILiveKit 使用更为方便的 Apple Strings Catalog 工具来管理 UI 所需的文案显示,您可以很直观的通过 Xcode 视图化管理工具修改需要调整的文案:
说明:
Apple Strings Catalog (.xcstrings) 是在 Xcode 15 中引入的本地化格式。它增强了开发者管理本地化字符串的方式,支持处理复数、设备特定变体等的结构化格式。这种格式正成为管理 iOS 和 macOS 应用程序本地化的推荐方法。


图标定制

TUILiveKit 使用 TUILiveKit.xcassets 管理 UI 所需的图片资源,您可以借助 Xcode 图形化工具快速修改自定义界面所需的图标。


下一步

恭喜您,现在您已经成功集成了 主播开播 。接下来,您可以实现观众观看直播列表等功能,可参考下表:
功能
描述
集成指引
观众观看
实现众进入主播的直播间后观看直播,实现观众连麦 、直播间信息、在线观众、弹幕显示等功能
直播列表
展示直播列表界面和功能,包含直播列表,房间信息展示功能

常见问题

开播后无画面?

请前往手机设置 > App > 相机,检查摄像头权限是否开启,可参考下图:


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

参考 登录指引, 确认已完成登录功能接入。