Audience Viewing
TUILiveKit's audience viewing page provides users with various and convenient live streaming and interaction features, enabling quick integration into your application to meet diverse audience needs.
Feature Overview
Live streaming: Clear and smooth viewing of the host's real-time live stream.
Interactive co-guest: Apply for mic connection to interact with the host via audio and video.
Live information: View the live streaming room title, description, and audience list, etc.
Live interactive: Send a gift (with animation effects and host notification), like (with animation and real-time statistics), and interact via bullet screen.
Live Streaming | Interactive co-guest | Live Information | Live Interactive |
![]() |
![]() | ![]() | ![]() |
Quick Start
Step 1. Activate the Service
Step 2. Code Integration
Step 3. Add an Audience Viewing view
In your viewer watching Activity, initialize and add the
AudienceContainerView
viewer watching view.import android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.audiencecontainer.AudienceContainerViewimport com.trtc.uikit.livekit.features.audiencecontainer.AudienceContainerViewDefine.AudienceContainerViewListenerclass YourAudienceActivity : AppCompatActivity() {lateinit var audienceContainerView: AudienceContainerViewlateinit var listener: AudienceContainerViewListeneroverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 1. Create AudienceContainerViewaudienceContainerView = AudienceContainerView(this)val roomId = "1236666"// 2. Initialize AudienceContainerViewaudienceContainerView.init(this, roomId)// 3. (Optional) Add AudienceContainerView event monitoringlistener = object : AudienceContainerViewListener {override fun onLiveEnded(roomId: String?, ownerName: String?, ownerAvatarUrl: String?) {// Live streaming end event, you can handle this event as your business need, here example code: end current page after live streaming endsfinish()}override fun onPictureInPictureClick() {// Picture-in-Picture button click event, you can handle this event as your business need, here example code: click the Picture-in-Picture button to convert the current page to picture-in-picture modeenterPictureInPictureMode()}}audienceContainerView.addListener(listener)// 4. Add AudienceContainerView to the interfacesetContentView(audienceContainerView)}override fun onDestroy() {// 5. (Optional) If you added an event listener, it needs to be removed on page terminationaudienceContainerView.removeListener(listener)super.onDestroy()}}
import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import com.trtc.uikit.livekit.features.audiencecontainer.AudienceContainerView;import com.trtc.uikit.livekit.features.audiencecontainer.AudienceContainerViewDefine;public class YourAudienceActivity extends AppCompatActivity {private AudienceContainerView mAudienceContainerView;private AudienceContainerViewDefine.AudienceContainerViewListener mListener;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 1. Create AudienceContainerViewmAudienceContainerView = new AudienceContainerView(this);// 2. Initialize AudienceContainerViewString roomId = "1236666";mAudienceContainerView.init(this, roomId);// 3. (Optional) Add AudienceContainerView event monitoringmListener = new AudienceContainerViewDefine.AudienceContainerViewListener() {@Overridepublic void onLiveEnded(String roomId, String ownerName, String ownerAvatarUrl) {// Live streaming end event, you can handle this event as your business need, here example code: end current page after live streaming endsfinish();}@Overridepublic void onPictureInPictureClick() {// Picture-in-Picture button click event, you can handle this event as your business need, here example code: click the Picture-in-Picture button to convert the current page to picture-in-picture modeenterPictureInPictureMode();}};mAudienceContainerView.addListener(mListener);// 4. Add AudienceContainerView to the interfacesetContentView(mAudienceContainerView);}@Overrideprotected void onDestroy() {// 5. (Optional) If you added an event listener, it needs to be removed on page terminationmAudienceContainerView.removeListener(mListener);super.onDestroy();}}
Step 4. Navigate to the Audience Viewing view
Usually in the live list, Use the following code example when you need to jump to the viewer watching page:
fun startActivity(context: Context) {val intent = Intent(context, YourAudienceActivity::class.java)intent.putExtra("roomId", "1236666")context.startActivity(intent)}
private void startActivity(Context context){Intent intent = new Intent(context, YourAudienceActivity.class);intent.putExtra("roomId", "1236666");context.startActivity(intent);}
Customize Your UI Layout
Customize the AudienceContainerView
Feature Area
By calling the API of the
audienceView
created in Step 3, you can customize and disable (hide) the operation area or specific features on the viewer watching page:import android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.audiencecontainer.AudienceContainerViewclass YourAudienceActivity : AppCompatActivity() {lateinit var audienceContainerView: AudienceContainerViewoverride fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)// 1. Create and initialize AudienceContainerViewaudienceContainerView = AudienceContainerView(this)val roomId = "1236666"audienceContainerView.init(this, roomId)// 2. Custom function example - forbid swiping to switch live roomsaudienceContainerView.disableSliding(true)// 3. Add AudienceContainerView to the interfacesetContentView(audienceContainerView)}}
import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import com.trtc.uikit.livekit.features.audiencecontainer.AudienceContainerView;public class YourAudienceActivity extends AppCompatActivity {private AudienceContainerView mAudienceContainerView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);// 1. Create and initialize AudienceContainerViewmAudienceContainerView = new AudienceContainerView(this);String roomId = "1236666";mAudienceContainerView.init(this, roomId);// 2. Custom function example - forbid swiping to switch live roomsmAudienceContainerView.disableSliding(true);// 3. Add AudienceContainerView to the interfacesetContentView(mAudienceContainerView);}}
API | Description |
disableHeaderLiveData(true) | Hide Top Operation Section Live Information |
disableHeaderFloatWin(true) | Hide Top Operation Section Floating Window Feature |
disableHeaderVisitorCnt(true) | Hide Top Operation Section Audience List Function |
disableFooterCoGuest(true) | Hide Bottom Operation Section Co-Anchoring Function |
disableSliding(true) | Forbid Swiping to Switch Live Rooms |
Text Customization (String Resources)
TUILiveKit uses standard Android XML resource files to manage the text displayed in the UI. You can directly modify the strings that need adjustment via the XML file:

Icon Customization (Drawable Resources)
TUILiveKit uses the standard Android drawable resource folder to manage the image resources for the UI. You can quickly change the custom icons by replacing the resource files. When replacing, ensure that the new file names are consistent with the original file names.

Next Steps
Congratulations! You have successfully integrated Audience Viewing. Next, you can implement features such as Host Live Streaming and the Live Stream List. Please refer to the table below:
Feature | Description | Integration Guide |
Host Streaming | The complete workflow for a host to start a stream, including pre-stream setup and various in-stream interactions. | |
Live Stream List | Display the live stream list interface and features, including the live stream list and room information display. |
FAQs
Why is the video screen black when a viewer selects video co-hosting?
Please go to App Info > Permissions > Camera and check if the camera permission is enabled. Refer to the image below:

Why can't other viewers in the live room see the barrage content sent by a viewer?
Reason 1: First check the network connection to ensure the viewer's device network is normal.
Reason 2: The viewer has been muted (banned) by the host and cannot send barrage.
Reason 3: The viewer's barrage content involves keyword blocking. Please confirm whether the content sent by the viewer complies with the live room rules.