このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。
AudienceListView

Component Overview
The audience list component mainly provides following features: display the real-time number of participants in the live broadcast, and show the online audience list in the live broadcast.
Audience List Component
Click Component to Display Online Audience Details Panel
Effect Display after Integration
﻿
﻿
﻿
﻿
﻿
﻿
Component Integration
Android
iOS
1. Create a directory named com.trtc.uikit.livekit under the src/main/java directory in your project, and copy the common directory and component/audiencelist directory under the livekit directory on github to the com.trtc.uikit.livekit directory you created.
2. Copy the res-common and res-audience-list directories under the main directory on github to the src/main directory in your own project.
3. Add the following configuration in the android node of your build.gradle.kts or build.gradle file:
build.gradle.kts
build.gradle
sourceSets.getByName("main") {
    res.setSrcDirs(
        listOf(
            "src/main/res", "src/main/res-common", "src/main/res-audience-lis"
        )
    )
}
sourceSets {
    main {
        res.srcDirs = [
                'src/main/res',
                'src/main/res-common',
                'src/main/res-audience-lis',
        ]
    }
}
4. Use the global string replacement feature in Android Studio to globally replace  import com.trtc.uikit.livekit.R;  with your project's own R file. An example is as follows:
﻿
Import components using CocoaPods. The specific steps for importing components are as follows:
1. You need to download the AudienceList and Common folders on GitHub to your local system.
﻿
2. Add dependencies of pod 'TUIAudienceList' and pod 'TUILiveResources' in your Podfile.
Swift
target 'xxxx' do
  ...
  ...
  pod 'TUILiveResources', :path => '../Component/Common/TUILiveResources.podspec'
  // The path is the relative path between your Podfile file and TUILiveResources.podspec file.
  pod 'TUIAudienceList', :path => '../Component/AudienceList/TUIAudienceList.podspec'
  // The path is the relative path between your Podfile file and TUIAudienceList.podspec file.
end
If you don't have a Podfile file, first use the terminal to cd into the xxxx.xcodeproj directory, then create it with the following command:
pod init
3. In the terminal, first cd to the Podfile directory, then execute the following commands to install components.
pod install
4. Any issues you encounter during integration and use, feel free to give feedback.
Component Usage
Notes:
Since online audience information can only be obtained in the live streaming room. When using the audience list component, note the use limits and reuse it after successfully entering the live streaming room.
Creating Components
Android
iOS
You have two ways to create a live streaming room information component, as follows:
1. Create in code
AudienceListView audienceListView = new AudienceListView(getContext());
2. Define in xml:
<com.trtc.uikit.livekit.component.audiencelist.AudienceListView
    android:id="@+id/audience_list_view"
    android:layout_width="135dp"
    android:layout_height="24dp"
    android:layout_gravity="end" />
import TUIAudienceList
﻿
let audienceListView = AudienceListView()
// ...Add audienceListView to your parent view here and adjust the layout
Component Initialization
Android
iOS
After successfully entering the room, you can call the init method of the AudienceListView to bind data and events for the component.
Note:
This operation needs to be executed after successful room entry. The callback for room entry success will return a TUIRoomDefine.RoomInfo object.
audienceListView.init(roomInfo); 
After successfully entering the room, you can call the initialize method of the AudienceListView to bind data and events for the component.
Note:
Note: This operation needs to be executed after successful room entry. The callback for room entry success will return a TUIRoomInfo object.
audienceListView.initialize(roomInfo: roomInfo) 
﻿
﻿
﻿
Audience List Component	Click Component to Display Online Audience Details Panel	Effect Display after Integration