@tencentcloud/sdk-mcp 1.6.3 → 1.6.5

package/resource/integration/livekit/preset/live/ios/live-host-integration.md

@@ -0,0 +1,358 @@
+TUILiveKit 主播开播页为直播场景提供**开箱即用的全功能界面**，支持快速搭建主播开播所需的核心能力，让您无需关注复杂 UI 与逻辑实现，即可高效集成直播开播流程。
+
+> **集成提示：**
+>
+> 本文档介绍基于 **UI 组件** 的开播方式（含完整交互 UI）。若您需通过 **Core SDK** 自行搭建主播端界面，请参考 主播开播 (Core SDK)。
+>
+
+## 功能概览
+- **开播前预览：**支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置。
+
+- **连麦互动：**支持直播过程中与观众 或 与其他直播间主播实时互动。
+
+- **观众互动：**支持弹幕、礼物等丰富直播互动形式。
+
+- **直播间管理：**支持在线用户列表展示、以及直播间内的禁言、踢人等多种管理操作。
+
+| 开播前预览 | 连麦互动 | 观众互动 | 直播间管理 |
+| --- | --- | --- | --- |
+|  |  |  |  |
+
+## 快速接入
+
+### 步骤1：开通服务
+
+参考 开通服务 文档开通「体验版」或「大规模直播版」套餐。
+
+### 步骤2：代码集成
+
+参考 准备工作 接入 `TUILiveKit`。
+
+### 步骤3：添加开播前的准备页面
+
+`AnchorPrepareView` 组件已内置了摄像头预览、音效设置、布局设置、以及其它功能设置，您需创建并加载主播开播页视图，具体示例代码如下：
+
+【Swift】
+``` swift
+import UIKit
+import Snapkit
+import TUILiveKit
+import AtomicXCore
+
+// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器
+class YourAnchorPrepareViewController: UIViewController {
+    private let roomId = "testLiveId"
+
+    // 懒加载 AnchorPrepareView
+    private lazy var prepareView: AnchorPrepareView = {
+        // AnchorPrepareView 初始化时传入roomId
+        let view = AnchorPrepareView(roomId: roomId)
+        return view
+    }()
+
+    public override func viewDidLoad() {
+        super.viewDidLoad()
+        // 将 prepareView 添加到视图上
+        view.addSubview(prepareView)
+        prepareView.snp.makeConstraints { make in
+            make.edges.equalToSuperview()
+        }
+    }
+}
+```
+
+### 步骤4：添加主播用的推流页面
+
+`AnchorView` 组件已内置了音视频推流、观众连麦、直播互动、直播管理等功能，您只需创建并加载 `AnchorView` ，具体示例代码如下：
+
+【swift】
+``` swift
+import UIKit
+import Snapkit
+import TUILiveKit
+import AtomicXCore
+
+// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器
+class YourAnchorViewController: UIViewController {
+    // 核心 view 组件
+    private let coreView: LiveCoreView
+
+    // 声明 anchorView 实例
+    private let anchorView: AnchorView
+
+    public init(liveInfo: LiveInfo, coreView: LiveCoreView? = nil, behavior: RoomBehavior = .createRoom) {
+        if let coreView = coreView {
+            self.coreView = coreView
+        } else {
+            self.coreView = LiveCoreView(viewType: .pushView)
+        }
+        // 实例化主播开播页
+        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()
+        // 将 anchorView 添加到视图上
+        view.addSubview(anchorView)
+        anchorView.snp.makeConstraints { make in
+            make.edges.equalToSuperview()
+        }
+    }
+}
+```
+
+### 步骤5：事件回调定制
+
+`AnchorView` 还提供了 `delegate`（`AnchorViewDelegate`）扩展点，用于监听主播开播页内的核心生命周期事件，包括真正开播成功、下播（含统计数据）、点击悬浮窗等回调，建议在 步骤 4 创建 `AnchorView` 后立即设置：
+
+|方法|说明|
+|---------|---------|
+|`func onStartLiving()`|主播已成功开始直播（房间创建/进入成功，推流已开始）时回调。|
+|`func onEndLiving(state: AnchorState)`|主播下播时回调，`state` 携带本场直播的统计数据：`totalDuration`（直播时长）、`totalViewers`（观众总数）、`totalMessageSent`（弹幕总数）、`totalGiftCoins`（礼物总收益）、`totalGiftUniqueSenders`（送礼人数）、`totalLikesReceived`（点赞总数）、`liveEndedReason`（下播原因），可用于展示下播结算页。|
+|`func onClickFloatWindow()`|用户点击悬浮窗回调。|
+
+``` swift
+import UIKit
+import Snapkit
+import TUILiveKit
+import AtomicXCore
+
+// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器
+class YourAnchorViewController: UIViewController {
+    // 核心 view 组件
+    private let coreView: LiveCoreView
+
+    // 声明 anchorView 实例
+    private let anchorView: AnchorView
+
+    public init(liveInfo: LiveInfo, coreView: LiveCoreView? = nil, behavior: RoomBehavior = .createRoom) {
+        if let coreView = coreView {
+            self.coreView = coreView
+        } else {
+            self.coreView = LiveCoreView(viewType: .pushView)
+        }
+        // 实例化主播开播页
+        self.anchorView = AnchorView(liveInfo: liveInfo, coreView: self.coreView, behavior: behavior)
+        super.init(nibName: nil, bundle: nil)
+        // 设置代理，监听主播页核心事件
+        anchorView.delegate = self
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    public override func viewDidLoad() {
+        super.viewDidLoad()
+        // 将 anchorView 添加到视图上
+        view.addSubview(anchorView)
+        anchorView.snp.makeConstraints { make in
+            make.edges.equalToSuperview()
+        }
+    }
+}
+
+// 实现 AnchorViewDelegate 回调代理
+extension YourAnchorViewController: AnchorViewDelegate {
+    // 主播已成功开始直播（推流已开始）
+    func onStartLiving() {
+    }
+
+    // 主播下播，state 携带本场直播的统计数据
+    func onEndLiving(state: AnchorState) {
+        let duration = state.totalDuration
+        let viewers = state.totalViewers
+        let messageCount = state.totalMessageSent
+        let giftCoins = state.totalGiftCoins
+        let giftSenders = state.totalGiftUniqueSenders
+        let likes = state.totalLikesReceived
+        let reason = state.liveEndedReason
+        // 可在此处跳转到您的下播结算页，展示以上统计数据
+    }
+
+    // 用户点击了悬浮窗
+    func onClickFloatWindow() {
+    }
+}
+
+// 实现 FloatWindowProvider 回调代理
+extension YourAnchorViewController: FloatWindowProvider {
+    public func getRoomId() -> String {
+        liveID
+    }
+
+    public func getOwnerId() -> String {
+        LiveListStore.shared.state.value.currentLive.liveOwner.userID
+    }
+
+    public func getCoreView() -> AtomicXCore.LiveCoreView {
+        coreView
+    }
+
+    public func relayoutCoreView() {
+        anchorView.relayoutCoreView()
+    }
+
+    public func getIsLinking() -> Bool {
+        let connectedSeats = CoGuestStore.create(liveID: liveID).state.value.connected
+        let selfUserID = LoginStore.shared.state.value.loginUserInfo?.userID ?? ""
+        return connectedSeats.contains(where: { $0.userID == selfUserID })
+    }
+}
+
+```
+
+### **步骤6：从准备页面跳转到推流页面**
+
+结合 步骤 3 实现 `AnchorPrepareView` 组件的代理事件，完成主播开播页的路由跳转，具体示例代码如下：
+
+> **配合服务端 (RESTFUL API) 开播：**
+>
+> 如果您的房间是先通过 服务端 API 创建的，在集成时无需修改任何代码逻辑，只需将示例代码中的 `liveID` 替换为服务端生成的 ID 即可。SDK 将自动接管该房间并开启直播。
+>
+
+【swift】
+``` swift
+import UIKit
+import TUILiveKit
+import AtomicXCore
+
+// 在 AnchorPrepareView 初始化时设置代理
+class YourAnchorPrepareViewController: UIViewController {
+    private lazy var prepareView: AnchorPrepareView = {
+        let view = AnchorPrepareView(roomId: roomId)
+        // 设置代理
+        view.delegate = self
+        return view
+    }()
+}
+
+// 实现 AnchorPrepareViewDelegate 回调代理
+extension YourAnchorPrepareViewController : AnchorPrepareViewDelegate {
+    // 响应开播按钮点击事件
+    //   - state: PrepareState 封装了主播开播页的摄像头、音效等功能设置，您只需按以下示例代码设置即可
+    public func onClickStartButton(state: PrepareState) {
+        // 跳转到主播开播页
+        // 初始化直播信息
+        var liveInfo = LiveInfo(seatTemplate: .videoDynamicGrid9Seats)
+        // 如果您使用了服务端 API 预创房，请在此处填入服务端返回的 RoomId。
+        liveInfo.liveID = roomId
+        liveInfo.liveName = state.roomName
+        liveInfo.coverURL = state.coverUrl
+        liveInfo.isPublicVisible = state.privacyMode == .public
+        liveInfo.backgroundURL = state.coverUrl
+
+        // 实例化您的直播开播视图控制器
+        let anchorVC = YourAnchorViewController(liveInfo: liveInfo, coreView: prepareView.getCoreView())
+        anchorVC.modalPresentationStyle = .fullScreen
+        // 跳转到您的直播开播视图控制器
+        present(anchorVC, animated: false)
+    }
+
+    // 响应返回按钮点击事件
+    public func onClickBackButton() {
+        if let nav = navigationController {
+            nav.popViewController(animated: true)
+        } else {
+            dismiss(animated: true)
+        }
+    }
+}
+```
+
+###
+
+## 自定义您的界面布局
+
+`TUILiveKit` 支持灵活定制开播页与直播页的功能和样式，您可根据业务需求调整布局、隐藏 / 显示功能模块。
+
+### 直播布局模板选择
+
+`TUILiveKit` 提供 **4 种直播布局模板**，您可在主播开播页的 **UI 交互「布局」入口** 选择合适样式：
+
+#### 布局模板一览：
+| <strong>布局</strong> | <strong>动态宫格布局</strong> | <strong>浮动小窗布局</strong> | <strong>固定宫格布局</strong> | <strong>固定小窗布局</strong> |
+| --- | --- | --- | --- | --- |
+| <strong>模板取值</strong> | <code>.videoDynamicGrid9Seats</code> | <code>.videoDynamicFloat7Seats</code> | <code>.videoFixedGrid9Seats</code> | <code>.videoFixedFloat7Seats</code> |
+| <strong>描述</strong> | 默认布局，可根据连麦人数动态调整宫格大小。 | 连麦嘉宾以浮动小窗形式显示。 | 连麦人数固定，每个嘉宾占据一个固定宫格。 | 连麦人数固定，嘉宾以固定小窗形式显示。 |
+| <strong>预览</strong> |  |  |  |  |
+
+### 自定义开播页功能区
+
+通过调用 步骤 3 创建的 `prepareView` 的 API，可自定义隐藏开播准备页的操作区或特定功能：
+
+【swift】
+``` swift
+import UIKit
+import Snapkit
+import TUILiveKit
+import AtomicXCore
+
+// YourAnchorPrepareViewController 代表您加载主播开播页的视图控制器
+class YourAnchorPrepareViewController: UIViewController {
+    private let roomId = "testLiveId"
+    private lazy var prepareView: AnchorPrepareView = {
+        let view = AnchorPrepareView(roomId: roomId)
+        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.disableMenuBeauty(true)
+    }
+}
+```
+
+|隐藏整个功能区|隐藏美颜按钮|隐藏音效按钮|隐藏摄像头切换按钮|
+|---------|---------|---------|---------|
+|`disableFeatureMenu(true)`|`disableMenuBeauty(true)`|`disableMenuAudioEffect(true)`|`disableMenuSwitchCamera(true)`|
+|||||
+
+### 自定义主播直播页界面
+- 参考 主播核心页面 进行主播界面定制，在 `AnchorView` 中修改 UI 样式，添加您的业务组件。
+
+- 参考 调整视频直播挂件 进行视频位挂件定制，在 `AnchorView` 中修改视频位上的名称、头像挂件等 UI。
+
+### 文案定制
+
+`TUILiveKit` 使用更为方便的 [Apple Strings Catalog](https://developer.apple.com/documentation/xcode/localizing-and-varying-text-with-a-string-catalog) 工具来管理 UI 所需的文案显示，您可以很直观的通过 Xcode 视图化管理工具修改需要调整的文案：
+
+> **说明：**
+>
+> [Apple Strings Catalog](https://developer.apple.com/documentation/xcode/localizing-and-varying-text-with-a-string-catalog) (.xcstrings) 是在 Xcode 15 中引入的本地化格式。它增强了开发者管理本地化字符串的方式，支持处理复数、设备特定变体等的结构化格式。这种格式正成为管理 iOS 和 macOS 应用程序本地化的推荐方法。
+>
+
+### 图标定制
+
+`TUILiveKit` 使用 `TUILiveKit.xcassets` 管理 UI 所需的图片资源，您可以借助 Xcode 图形化工具快速修改自定义界面所需的图标。
+
+## 下一步
+
+恭喜您，现在您已经成功集成了 **主播开播** 。接下来，您可以实现**观众观看**、**直播列表、礼物系统**等功能，可参考下表：
+| <strong>功能</strong> | <strong>描述</strong> | <strong>集成指引</strong> |
+| --- | --- | --- |
+| <strong>观众观看</strong> | 实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。 | 观众观看 |
+| <strong>直播列表</strong> | 展示直播列表界面和功能，包含直播列表，房间信息展示功能。 | 直播列表 |
+| <strong>礼物系统</strong> | 实现自定义礼物素材配置、计费系统对接、PK 场景互动等功能。 | 礼物系统 |
+
+## 常见问题
+
+### 开播后无画面？
+
+请前往手机**设置** > **App** > **相机**，检查摄像头权限是否开启，可参考下图：
+
+### 点击开播按钮无法开播，提示“未登录”？
+
+参考 登录指引， 确认已完成登录功能接入。

package/resource/integration/livekit/preset/live/ios/live-list-integration.md

@@ -0,0 +1,246 @@
+## 功能预览
+
+本文对 TUILiveKit 中的**直播列表页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的直播列表页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
+- **双列瀑布流**：默认同时预览2个直播间的画面。
+
+- **单列瀑布流**：默认同时预览1个直播间的画面（**仅视频直播支持单列预览**）。
+
+| 双列瀑布流 | 单列瀑布流 |
+| --- | --- |
+|  | ### |
+
+   > **注意：**
+   >
+   > 预览直播间画面时，预览时长都会被计入观众的音视频时长，组件详细计费相关内容请参考 计费说明。
+   >
+
+## 快速接入
+
+### 步骤1：开通服务
+
+参考 开通服务 文档开通「体验版」或「大规模直播版」套餐。
+
+### 步骤2：代码集成
+
+参考 准备工作 接入 `TUILiveKit`。
+
+### 步骤3：添加直播列表瀑布流视图
+
+您可以根据需要选择使用单列或双列瀑布流。
+
+【Swift】
+``` swift
+// 示例： YourLiveListViewController 代表您直播列表瀑布流的视图控制器
+class YourLiveListViewController: UIViewController {
+
+    // 1.  声明 liveListView 作为成员变量
+    //        - style: .doubleColumn // 双列瀑布流
+    //        - style: .singleColumn // 单列瀑布流
+    // 示例为双列瀑布流，如需单列传入 .singleColumn即可
+    private let liveListView = LiveListView(style: .doubleColumn)
+
+    public override func viewDidLoad() {
+        super.viewDidLoad()
+        // 2. 将 liveListView 添加到视图上
+        view.addSubview(liveListView)
+        liveListView.snp.makeConstraints { make in
+            make.edges.equalToSuperview()
+        }
+        // 3. 设置列表的点击事件代理
+        liveListView.itemClickDelegate = self
+    }
+}
+```
+
+### 步骤4：实现直播列表页到观众观看页的路由跳转
+
+**双列瀑布流直播列表** 和 **单列瀑布流** 均会通过 `OnItemClickDelegate`回调点击事件，您只需在直播列表视图控制器中实现 `OnItemClickDelegate` 来响应用户的点击事件，并在 `onItemClick` 中实现跳转进入观众观看页的功能，观众观看页的实现可参考 观众观看:
+
+**交互示例：**
+
+**代码示例**：
+
+【Swift】
+``` swift
+// 在您的直播瀑布流列表视图控制器中实现 OnItemClickDelegate, 示例：YourLiveListViewController
+extension YourLiveListViewController: OnItemClickDelegate {
+
+    func onItemClick(liveInfo: LiveInfo, frame: CGRect) {
+        // 1. 实例化您的观众观看视图控制器
+        let audienceVC = YourAudienceViewController(roomId: liveInfo.roomId)
+        audienceVC.modalPresentationStyle = .fullScreen
+        // 2. 跳转到您的观众观看视图控制器
+        present(audienceVC, animated: false)
+    }
+
+}
+```
+
+### 步骤5：直播列表的页面跳转交互优化
+
+为了让您在页面跳转过程中获得更加完整与流畅的体验，结合 iOS 页面路由的系统特性，`LiveListView` 组件提供了 `refreshLiveList` 和 `onRouteToNextPage` 方法，方便您仅通过简单的一行代码调用，就能优化直播列表展示与视频流播放体验。具体优化方式如下：
+
+【Swift】
+``` swift
+// 在您的直播瀑布流列表视图控制器中实现，示例：YourLiveListViewController
+class YourLiveListViewController: UIViewController {
+
+    override func viewDidAppear(_ animated: Bool) {
+        super.viewDidAppear(animated)
+        // refreshLiveList: 在viewDidAppear时调用此方法，以确保每次回到当前页面都能拿到最新的列表
+        liveListView.refreshLiveList()
+    }
+
+    override func viewWillDisappear(_ animated: Bool) {
+        super.viewWillDisappear(animated)
+        // onRouteToNextPage: 在viewWillDisappear时调用此方法，当您进入别的页面时停止当前直播列表页播放的视频流
+        liveListView.onRouteToNextPage()
+    }
+}
+```
+
+## 自定义您的界面布局
+
+TUILiveKit 提供了灵活的接口定制直播列表瀑布流组件，您可以根据业务需求自定义数据源和列表项样式。
+
+### 自定义数据源
+
+如果您的后台有单独的直播列表数据，可以通过实现 `LiveListDataSource` 接口来自定义数据源，而不使用组件默认的列表数据。
+
+【Swift】
+``` swift
+// 示例：YourLiveListViewController 代表您直播列表瀑布流的视图控制器
+class YourLiveListViewController: UIViewController {
+
+    private let liveListView: LiveListView = LiveListView(style: .doubleColumn)
+
+    public override func viewDidLoad() {
+        super.viewDidLoad()
+        view.addSubview(liveListView)
+        liveListView.snp.makeConstraints { make in
+            make.edges.equalToSuperview()
+        }
+        liveListView.itemClickDelegate = self
+        // 1. 设置自定义数据源代理
+        liveListView.dataSource = self
+    }
+}
+
+// 2. 实现自定义数据源代理: LiveListDataSource
+extension YourLiveListViewController: LiveListDataSource {
+
+    public func fetchLiveList(cursor: String, onSuccess: @escaping LiveListBlock, onError: @escaping TUIErrorBlock) {
+        // 3. 对接自己的业务后台，按照下面的格式返回数据给UI组件
+        var liveInfoList: [LiveInfo] = []
+        var liveInfo = LiveInfo()
+        liveInfo.roomId = "live_123456"
+        liveInfo.name = "live_123456"
+        liveInfoList.append(liveInfo)
+        let cursor = "aabbccdd"
+        onSuccess(cursor, liveInfoList)
+    }
+}
+```
+
+### 自定义挂件
+
+瀑布流列表项底部默认显示视频流画面或直播封面。如果您需要自定义列表项顶部的 UI 元素（例如主播头像、直播标题等），可以通过实现 `LiveListViewAdapter` 接口来完成。
+
+【Swift】
+``` swift
+// 示例：YourLiveListViewController 代表您直播列表瀑布流的视图控制器
+class YourLiveListViewController: UIViewController {
+
+    private let liveListView: LiveListView = LiveListView(style: .doubleColumn)
+
+    public override func viewDidLoad() {
+        super.viewDidLoad()
+        view.addSubview(liveListView)
+        liveListView.snp.makeConstraints { make in
+            make.edges.equalToSuperview()
+        }
+        liveListView.itemClickDelegate = self
+        liveListView.dataSource = self
+        // 1. 设置自定义挂件代理
+        liveListView.adapter = self
+    }
+}
+
+// 2. 实现自定义挂件代理
+extension YourLiveListViewController: LiveListViewAdapter {
+    public func createLiveInfoView(info: LiveInfo) -> UIView {
+        // 自定义挂件view
+        return YourCustomView(liveInfo: info)
+    }
+
+    public func updateLiveInfoView(view: UIView, info: LiveInfo) {
+        if let infoView = view as? YourCustomView {
+            // 更新挂件view中绑定的数据
+            infoView.updateView(liveInfo: info)
+        }
+    }
+}
+```
+
+### 自定义转场动画
+
+在**双列瀑布流直播列表**和**单列瀑布流**中跳转到观众观看页，为了转场效果更好，往往需要自定义转场动画。 `TUILiveKit` 在 `GitHub` 仓库开源了直播转场动画 [LiveTransitioningDelegate](https://github.com/Tencent-RTC/TUILiveKit/blob/main/iOS/TUILiveKit/Sources/TUILiveListViewController.swift#L193) ，您只需设置 `audienceVC.transitioningDelegate` 即可实现跟 TUILiveKit 一样的转场动画：
+
+【Swift】
+``` swift
+// 在您的直播瀑布流列表视图控制器中的 OnItemClickDelegate 回调中, 示例：YourLiveListViewController
+extension YourLiveListViewController: OnItemClickDelegate {
+
+    func onItemClick(liveInfo: LiveInfo, frame: CGRect) {
+        let audienceVC = YourAudienceViewController(roomId: liveInfo.roomId)
+        audienceVC.modalPresentationStyle = .fullScreen
+        // 设置过渡动画代理
+        audienceVC.transitioningDelegate = LiveTransitioningDelegate(originFrame: frame)
+        present(audienceVC, animated: false)
+    }
+
+}
+```
+
+|**双列瀑布流直播列表转场动画**|**单列瀑布流转场动画**|
+|---------|---------|
+|||
+
+## 下一步
+
+恭喜您，现在您已经成功集成了 **直播列表** 功能。接下来，您可以根据您的业务场景实现**主播开播、观众观看**等功能
+
+**视频直播场景：**
+| <strong>功能</strong> | <strong>描述</strong> | <strong>集成指引</strong> |
+| --- | --- | --- |
+| <strong>主播开播</strong> | 实现主播开播全流程功能，包括开播前的准备和开播后的各种互动 | 主播开播 |
+| <strong>观众观看</strong> | 实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能 | 观众观看 |
+
+**语聊房场景：**
+| <strong>功能</strong> | <strong>描述</strong> | <strong>集成指引</strong> |
+| --- | --- | --- |
+| <strong>主播开播</strong> | 实现主播开播语聊房全流程功能，包括开播前的准备和开播后的各种互动。 | 主播开播 |
+| <strong>观众观看</strong> | 实现观众进入主播的语聊房后进行互动，如上麦、收发弹幕等功能。 | 观众观看 |
+
+## 常见问题
+
+### 集成直播列表功能后页面没有任何直播怎么办？
+
+如果您看到空白页面，需要检查您是否已完成 登录步骤。为了测试该功能，您可以使用两台设备：一台设备用于开播，另一台设备在直播列表页面，就能拉取到已开播的直播间。
+
+### 单列瀑布流和双列瀑布流有什么区别？
+
+单列瀑布流一次预览一个直播间画面，而双列瀑布流则同时预览两个直播间画面。您可以根据自己的设计需求选择合适的布局。
+
+### 预览直播画面是否收费？
+
+是的，预览直播间画面时长会计入观众的音视频时长，这部分是需要付费的。详细的 计费说明 可以参考文档中的相关内容。
+
+### 我使用了自定义数据源 (LiveListDataSource)，但列表不显示/不刷新怎么办？
+
+请确保您正确实现了 `LiveListDataSource` 接口。重点检查以下几点：
+- 检查 `fetchLiveList` 方法是否被正确调用。
+
+- 确保在获取数据后（无论成功或失败）都调用了 `callback.onSuccess` 或 `callback.onFailure`。
+
+- 检查您的业务后台接口是否返回了正确的数据格式。