Audience Viewing Page
Feature Overview
The audience viewing page refers to the interface where viewers enter the host's live streaming room to watch the live broadcast, enabling features such as audience mic connection, live room information, online audience display, gift display, likes, and bullet screen display. This document describes how to complete the access work for the audience viewing page within 10 minutes.
watch live | audience mic connection |
 |
 |
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 and Initializing, This Step Can Be Placed in Own Activity
val mAudienceContainerView = AudienceContainerView(context)val roomId = "1236666"mAudienceContainerView.init(this, roomId, dataSource)
AudienceContainerView mAudienceContainerView = new AudienceContainerView(this);String roomId = "1236666";mAudienceContainerView.init(this, roomId, dataSource);
Load Audience Viewing Page Stream View to Activity
setContentView(mAudienceContainerView)
setContentView(mAudienceContainerView);
Listening to Audience Viewing Page Event Callback
mAudienceContainerView.addListener(object : AudienceContainerViewDefine.AudienceContainerViewListener {// room owner live stream callbackoverride fun onRoomDismissed(roomId: String, ownerName: String, ownerAvatarUrl: String) {}// Click the Picture-in-Picture button callbackoverride fun onPictureInPictureClick() {}})
mAudienceContainerView.addListener(new AudienceContainerViewDefine.AudienceContainerViewListener() {//room owner live stream callback@Overridepublic void onRoomDismissed(String roomId, String ownerName, String ownerAvatarUrl) {}// Click the Picture-in-Picture button callback@Overridepublic void onPictureInPictureClick() {PictureInPictureParams params = new PictureInPictureParams.Builder().build();enterPictureInPictureMode(params);}});
Feature Customization
Hide the Operation Section at the Top of the Host Page
mAudienceContainerView.disableHeaderLiveData(true)
mAudienceContainerView.disableHeaderLiveData(true);
Hide the Audience List Feature in the Top Operation Section
mAudienceContainerView.disableHeaderVisitorCnt(true)
mAudienceContainerView.disableHeaderVisitorCnt(true);
Hide the Co-Anchoring Function in the Bottom Operation Section
mAudienceContainerView.disableFooterCoGuest(true)
mAudienceContainerView.disableFooterCoGuest(true);
Hide Floating Window Feature
mAudienceContainerView.disableHeaderFloatWin(true)
mAudienceContainerView.disableHeaderFloatWin(true);
Forbid Live Stream Swipe
mAudienceContainerView.disableSliding(true)
mAudienceContainerView.disableSliding(true);
Implementing Audience Viewing Page Custom Data Source
The audience viewing page component uses the RoomEngine live stream list data source by default. If you have a separate backend live list, you can integrate it via the following way:
val dataSource = object : AudienceContainerViewDefine.LiveListDataSource() {override fun fetchLiveList(param: AudienceContainerViewDefine.FetchLiveListParam,callback: AudienceContainerViewDefine.LiveListCallback) {// Connect to your own business backend and return data to the UI component in the following formatval liveInfoList = mutableListOf<TUILiveListManager.LiveInfo>().apply {add(TUILiveListManager.LiveInfo().apply {roomInfo = TUIRoomDefine.RoomInfo().apply {roomId = "live_123456"name = "live_123456"}})}val cursor = "aabbccdd"callback.onSuccess(cursor, liveInfoList)}}val roomId = "1236666"mAudienceContainerView.init(this, roomId, dataSource)
AudienceContainerViewDefine.LiveListDataSource dataSource = new AudienceContainerViewDefine.LiveListDataSource(){@Overridepublic void fetchLiveList(AudienceContainerViewDefine.FetchLiveListParam param, AudienceContainerViewDefine.LiveListCallback callback) {//Connect to your own business backend and return data to the UI component in the following formatList<TUILiveListManager.LiveInfo> liveInfoList = new ArrayList<>();TUILiveListManager.LiveInfo liveInfo = new TUILiveListManager.LiveInfo();liveInfo.roomInfo = new TUIRoomDefine.RoomInfo();liveInfo.roomInfo.roomId = "live_123456";liveInfo.roomInfo.name = "live_123456";liveInfoList.add(liveInfo);String cursor = "aabbccdd";callback.onSuccess(cursor, liveInfoList);}};String roomId = "1236666";mAudienceContainerView.init(this, roomId, dataSource);
