开播前预览 | 连麦互动 | 观众互动 | 直播间管理 |
![]() | ![]() | ![]() | ![]() |
AnchorPrepareView 组件已内置了摄像头预览、音效设置、布局设置、以及其它功能设置,您需创建并加载主播开播页视图,具体示例代码如下:import UIKitimport Snapkitimport TUILiveKitimport AtomicXCore// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器class YourAnchorPrepareViewController: UIViewController {private let roomId = "testLiveId"// 2. 懒加载 AnchorPrepareViewprivate lazy var prepareView: AnchorPrepareView = {// 3. AnchorPrepareView 初始化时传入roomIdlet view = AnchorPrepareView(roomId: roomId)return view}()public override func viewDidLoad() {super.viewDidLoad()// 4. 将 prepareView 添加到视图上view.addSubview(prepareView)prepareView.snp.makeConstraints { make inmake.edges.equalToSuperview()}}}
AnchorView 组件已内置了音视频推流、观众连麦、直播互动、直播管理等功能,您只需创建并加载 AnchorView ,具体示例代码如下:import UIKitimport Snapkitimport TUILiveKitimport AtomicXCore// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器class YourAnchorViewController: UIViewController {// 核心 view 组件private let coreView: LiveCoreView// 1. 声明 anchorView 实例private let anchorView: AnchorViewpublic init(liveInfo: LiveInfo, coreView: LiveCoreView? = nil, behavior: RoomBehavior = .createRoom) {if let coreView = coreView {self.coreView = coreView} else {self.coreView = LiveCoreView(viewType: .pushView)}// 3. 实例化主播开播页self.anchorView = AnchorView(liveInfo: liveInfo, coreView: self.coreView, behavior: behavior)super.init(nibName: nil, bundle: nil)}required init?(coder: NSCoder) {fatalError("init(coder:) has not been implemented")}public override func viewDidLoad() {super.viewDidLoad()// 4. 将 anchorView 添加到视图上view.addSubview(anchorView)anchorView.snp.makeConstraints { make inmake.edges.equalToSuperview()}}}
import UIKitimport TUILiveKitimport AtomicXCore// 1. 在 AnchorPrepareView 初始化时设置代理class YourAnchorPrepareViewController: UIViewController {private lazy var prepareView: AnchorPrepareView = {let view = AnchorPrepareView(roomId: roomId)// 设置代理view.delegate = selfreturn view}()}// 2. 实现 AnchorPrepareViewDelegate 回调代理extension YourAnchorPrepareViewController : AnchorPrepareViewDelegate {// 响应开播按钮点击事件// - state: PrepareState 封装了主播开播页的摄像头、音效等功能设置,您只需按以下示例代码设置即可public func onClickStartButton(state: PrepareState) {// 4. 跳转到主播开播页// 4.1. 初始化直播信息var liveInfo = LiveInfo(seatTemplate: .videoDynamicGrid9Seats)// 如果您使用了服务端 API 预创房,请在此处填入服务端返回的 RoomId。liveInfo.liveID = roomIdliveInfo.liveName = state.roomNameliveInfo.coverURL = state.coverUrlliveInfo.isPublicVisible = state.privacyMode == .publicliveInfo.backgroundURL = state.coverUrl// 4.2. 实例化您的直播开播视图控制器let anchorVC = YourAnchorViewController(liveInfo: liveInfo, coreView: prepareView.getCoreView())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 交互「布局」入口 选择合适样式:
布局 | 动态宫格布局 | 浮动小窗布局 | 固定宫格布局 | 固定小窗布局 |
模板取值 | .videoDynamicGrid9Seats | .videoDynamicFloat7Seats | .videoFixedGrid9Seats | .videoFixedFloat7Seats |
描述 | 默认布局,可根据连麦人数动态调整宫格大小。 | 连麦嘉宾以浮动小窗形式显示。 | 连麦人数固定,每个嘉宾占据一个固定宫格。 | 连麦人数固定,嘉宾以固定小窗形式显示。 |
预览 | ![]() | ![]() | ![]() | ![]() |
import UIKitimport Snapkitimport TUILiveKitimport AtomicXCore// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器class YourAnchorPrepareViewController: UIViewController {private let roomId = "testLiveId"private lazy var prepareView: AnchorPrepareView = {let view = AnchorPrepareView(roomId: roomId)view.delegate = selfreturn view}()public override func viewDidLoad() {super.viewDidLoad()// 1. 将 prepareView 添加到视图上view.addSubview(prepareView)prepareView.snp.makeConstraints { make inmake.edges.equalToSuperview()}// 2. 自定义功能区 - 示例:隐藏美颜功能prepareView.disableMenuBeauty(true)}}
隐藏整个功能区 | 隐藏美颜按钮 | 隐藏音效按钮 | 隐藏摄像头切换按钮 |
disableFeatureMenu(true) | disableMenuBeauty(true) | disableMenuAudioEffect(true) | disableMenuSwitchCamera(true) |
![]() | ![]() | ![]() | ![]() |
AnchorView 中修改 UI 样式,添加您的业务组件。AnchorView 中修改视频位上的名称、头像挂件等 UI。
TUILiveKit 使用 TUILiveKit.xcassets 管理 UI 所需的图片资源,您可以借助 Xcode 图形化工具快速修改自定义界面所需的图标。

文档反馈