实时音视频观众列表组件 (iOS UIKit)

观众列表组件（AudienceListView）封装了直播间在线人数展示和观众列表弹窗功能。您可以轻松地将其集成到您的 UI 中，为您的直播间添加观众互动的基础能力。
效果展示
﻿
快速开始
步骤 1.  开通服务
参考 开通服务 文档开通体验版或大规模直播版套餐。
步骤 2.  代码集成
参考 准备工作 完成 TUILiveKit 组件接入。
步骤 3. 集成观众列表组件
以主播开播的场景为例，将 AudienceListView 添加到您的主播视图控制器中，示例代码如下：
import TUILiveKit
﻿
class YourAnchorViewController: UIViewController {
﻿
    // 1. 定义观众列表组件
    private let audienceListView = AudienceListView()
    private let liveId: String
    
    // ... 其他代码 ...
﻿
    public override func viewDidLoad() {
        super.viewDidLoad()
        
        // 2. 将组件添加到您的视图中并设置布局
        view.addSubview(audienceListView)
        audienceListView.snp.remakeConstraints { make in
            make.centerY.equalTo(closeButton)
            make.trailing.equalTo(closeButton.snp.leading).offset(-8)
            make.leading.greaterThanOrEqualTo(liveInfoView.snp.trailing).offset(20)
        }
        
        // 3. 关联直播房间 id
        audienceListView.initialize(liveId: liveId)
    }
}
自定义组件
观众列表组件提供了直播间内的观众点击回调接口，该回调支持您根据自己的业务需求实现直播间内的观众管理。
组件接口
接口
参数
说明
onUserManageButtonClicked
LiveUserInfo
观众列表点击回调
public struct LiveUserInfo {
﻿
    public var userId: String           // 观众用户 id
    public var userName: String         // 观众用户昵称
    public var avatarURL: String        // 观众用户头像
﻿
    public init()
}
实现观众管理
默认情况下，点击观众列表中的用户会弹出管理弹框。您可以通过实现onUserManageButtonClicked 闭包，并通过 LiveAudienceStore 来执行具体操作，例如实现将用户踢出直播间的功能：
import UIKit
import TUILiveKit
import AtomicXCore
﻿
class YourAnchorViewController: UIViewController {
    // 1. 定义观众列表组件和 Store
    private let audienceListView = AudienceListView()
    private lazy var liveAudienceStore = LiveAudienceStore.create(liveId: self.liveId)
    private let liveId: String
﻿
    public override func viewDidLoad() {
        super.viewDidLoad()
        // ... 其他代码 ...
        
        // 2. 为组件绑定自定义管理事件
        audienceListView.onUserManageButtonClicked = { [weak self] userInfo in
            self?.showUserManagementAlert(for: userInfo)
        }
    }
    
    // 3. 实现自定义的用户管理弹框
    private func showUserManagementAlert(for user: LiveUserInfo) {
        let alertController = UIAlertController(title: "观众管理", message: "您希望对 \\(user.userName) 做什么？", preferredStyle: .actionSheet)
        
        let kickOutAction = UIAlertAction(title: "踢出直播间", style: .destructive) { [weak self] _ in
            self?.kickOutUser(user)
        }
        
        let cancelAction = UIAlertAction(title: "取消", style: .cancel)
        
        alertController.addAction(kickOutAction)
        alertController.addAction(cancelAction)
        
        present(alertController, animated: true)
    }
    
    // 4. 调用 Store 方法将用户踢出
    private func kickOutUser(_ user: LiveUserInfo) {
        liveAudienceStore.kickOutUser(user.userId) {
            print("Successfully kicked out \\(user.userName).")
        } onError: { error, message in
            print("Failed to kick out user, error: \\(message)")
        }
    }
}
接口	参数	说明
onUserManageButtonClicked	LiveUserInfo	观众列表点击回调
观众列表组件 (iOS UIKit)

本页目录：

效果展示

快速开始

步骤 1. 开通服务

步骤 2. 代码集成

步骤 3. 集成观众列表组件

自定义组件

组件接口

实现观众管理
