Audience Viewing Page
Feature Overview
The audience viewing page refers to the page where viewers enter the host's live streaming room to watch the live stream, enabling features such as audience co-broadcasting, live room information, online audience display, gift display, likes, and bullet screen. This document describes how to complete the access work for the audience viewing page within 10 minutes.
watch live | audience co-broadcasting |
![]() |
![]() |
Feature Integration
Note:
Note: Before completing the feature integration, you must first complete the integration steps in the overview.
Creating an Audience Viewing Page Stream View (This Step Can Be Placed in Your Own ViewController)
let audienceContainerView = AudienceContainerView(roomId: "yourRoomId")
Load the Audience Viewing Page Stream View Into ViewController
view.addSubView(audienceContainerView)audienceContainerView.snp.remakeConstraints { make inmake.edges.equalToSuperview()}
Listen to the Audience Viewing Page Event Callback
audienceContainerView.delegate = self// Implement AudienceContainerViewDelegate in your own ViewControllerextension YourViewController: AudienceContainerViewDelegate {//Room owner ended live stream callbackfunc 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()}}//Click the floating window button callbackfunc onClickFloatWindow() {FloatWindow.shared.showFloatWindow(controller: self, provider: audienceContainerView)}}
Feature Customization
Hide Room Information in Top Operation Section
audienceContainerView.disableHeaderLiveData(true)
Hide Audience List Feature in Top Operation Section
audienceContainerView.disableHeaderVisitorCnt(true)
Hide the Co-Anchoring Function in the Bottom Operation Section
audienceContainerView.disableFooterCoGuest(true)
Hide Floating Window Feature
audienceContainerView.disableHeaderFloatWin(true)
Forbid Swiping during Live Stream
audienceContainerView.disableSliding(true)
Implement Custom Data Source for Audience Viewing
The audience viewing component uses RoomEngine live stream list data by default. If your backend has a separate backend live list, you can integrate it via the following way:
audienceContainerView.dataSource = self// Implement AudienceContainerViewDataSource in your own ViewControllerextension YourViewController: AudienceContainerViewDataSource {func fetchLiveList(cursor: String, onSuccess: @escaping LiveListSuccessBlock, onError: @escaping LiveListErrorBlock) {// Connect to your own business backend and return data to the UI component in the following formatvar liveInfoList: [LiveInfo] = []var liveInfo = LiveInfo()liveInfo.roomId = "live_123456"liveInfo.name = "live_123456"liveInfoList.append(liveInfo)let cursor = "aabbccdd"onSuccess(cursor, liveInfoList)}}