观众观看页
功能简介
观众观看页是指观众进入主播的直播间后观看直播,实现观众连麦 、直播间信息、在线观众、礼物显示、点赞,弹幕显示等功能。本文将介绍如何在 10 分钟之内完成观众观看页的接入工作。
观看直播 | 观众连麦 |
![]() |
![]() |
功能接入
说明:
创建观众观看页流视图(此步骤可以放在自己的ViewController中)
let audienceContainerView = AudienceContainerView(roomId: "yourRoomId")
将观众观看页流视图加载到ViewController中
view.addSubView(audienceContainerView)audienceContainerView.snp.remakeConstraints { make inmake.edges.equalToSuperview()}
监听观众观看页事件回调
audienceContainerView.delegate = self// 在您自己的 ViewController 中实现 AudienceContainerViewDelegateextension YourViewController: AudienceContainerViewDelegate {//房主结束直播回调func onLiveEnded(roomId: String, avatarUrl: String, userName: String) {let audienceEndView = AudienceEndStatisticsView(roomId: roomId, avatarUrl: avatarUrl, userName: userName)audienceEndView.delegate = selfview.addSubview(audienceEndView)audienceEndView.snp.remakeConstraints { make inmake.edges.equalToSuperview()}}// 点击悬浮窗按钮回调func onClickFloatWindow() {FloatWindow.shared.showFloatWindow(controller: self, provider: audienceContainerView)}}
功能定制
隐藏顶部操作区中的房间信息
audienceContainerView.disableHeaderLiveData(true)
隐藏顶部操作区中的观众列表功能
audienceContainerView.disableHeaderVisitorCnt(true)
隐藏底部操作区的连麦功能
audienceContainerView.disableFooterCoGuest(true)
隐藏悬浮窗功能
audienceContainerView.disableHeaderFloatWin(true)
禁止直播上下滑动
audienceContainerView.disableSliding(true)
实现观众观看页自定义数据源
观众观看页组件默认使用RoomEngine直播列表数据源,如果自己后台有单独的后台直播列表,可以按照下面的方式接入:
audienceContainerView.dataSource = self// 在您自己的 ViewController 中实现 AudienceContainerViewDataSourceextension YourViewController: AudienceContainerViewDataSource {func fetchLiveList(cursor: String, onSuccess: @escaping LiveListSuccessBlock, onError: @escaping LiveListErrorBlock) {// 对接自己的业务后台,按照下面的格式返回数据给UI组件var liveInfoList: [LiveInfo] = []var liveInfo = LiveInfo()liveInfo.roomId = "live_123456"liveInfo.name = "live_123456"liveInfoList.append(liveInfo)let cursor = "aabbccdd"onSuccess(cursor, liveInfoList)}}