Live Stream List Feed
Feature Overview
The live stream list waterfall flow page mainly shows all online video live streaming and live voice rooms in the current application. The waterfall layout interface supports video stream preview without entering the room. It supports single-column and two-column waterfall layouts, pull-down refresh, swipe playback, etc. This document describes how to complete the access work for the waterfall flow page within 10 minutes.
two-column waterfall layout | single-column waterfall layout |
![]() |
![]() |
Feature Integration
Note:
1. Before completing the feature integration, you must first complete the integration steps in the overview.
2. If you are in the local development and debugging stage, you can use the local
GenerateTestUserSig.genTestSig
function to generate UserSig. In this method, the SDKSecretKey is vulnerable to decompilation and reverse engineering. If your key is leaked, attackers can steal your Tencent Cloud traffic.3. If your project is to be released online, please use the server-generated UserSig method.
Creating a Waterfall Flow View (Choose to Use Single Column or Two-Column Waterfall Layout)
let liveLitView = LiveListView(style: .doubleColumn)
Load the Waterfall Flow View Into ViewController or a Specific Layout
view.addSubView(liveListView)liveListView.snp.remakeConstraints { make inmake.edges.equalToSuperview()}
Listen to Waterfall Flow Item Click Event
liveLitView.itemClickDelegate = self// Implement OnItemClickDelegate in your own ViewControllerextension YourViewController: OnItemClickDelegate {func onItemClick(liveInfo: LiveInfo, frame: CGRect) {// You can implement your own redirect to enter live room interface}}
Waterfall Layout Page Related Operation
For a more complete and smooth experience, we recommend you perform the following operations:
// Implement in your own ViewControllerclass YourViewController: UIViewController {override func viewDidAppear(_ animated: Bool) {// Refresh the live stream list in viewDidAppear to ensure getting the latest list and starting playback each time returning to the current pagesuper.viewDidAppear(animated)rootView.refreshLiveList()}override func viewWillDisappear(_ animated: Bool) {super.viewWillDisappear(animated)// Call this method in viewWillDisappear to stop the current video stream when entering another pagerootView.onRouteToNextPage()}}
Feature Customization
Implementing Waterfall Flow List Custom Data Source
Waterfall Flow default uses RoomEngine live list data source. If your backend has a separate backend live list, you can integrate it via the following way:
liveListView.dataSource = selfextension YourViewController: LiveListDataSource {public func fetchLiveList(cursor: String, onSuccess: @escaping LiveListBlock, onError: @escaping TUIErrorBlock) {// 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)}}
Implementing Waterfall Flow Custom Widgets
The video stream image/live cover is at the bottom of the Waterfall Flow. The default UI is displayed as follows. The 3D stickers at the top support customization, and the UI can be customized based on the returned data.
two-column waterfall layout | single-column waterfall layout |
![]() |
![]() |
liveListView.adapter = selfextension YourViewController: LiveListViewAdapter {public func createLiveInfoView(info: LiveInfo) -> UIView {// Custom widget viewreturn CustomView(liveInfo: info)}public func updateLiveInfoView(view: UIView, info: LiveInfo) {if let infoView = view as? CustomView {// Refresh the data bound to the widget viewinfoView.updateView(liveInfo: info)}}}