• 서비스
  • 가격
  • 리소스
  • 기술지원
이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.

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

Refer to the Activate Service document to enable the Free trial or official package.

Step 2. Code Integration

Refer to Preparations guide to integrate the TUILiveKit SDK.

Step 3. Add an Audience Viewing view

In your viewer watching Activity, initialize and add the AudienceContainerView viewer watching view.
Kotlin
Java
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.AudienceContainerViewListener

class YourAudienceActivity : AppCompatActivity() {
lateinit var audienceContainerView: AudienceContainerView
lateinit var listener: AudienceContainerViewListener

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// 1. Create AudienceContainerView
audienceContainerView = AudienceContainerView(this)
val roomId = "1236666"
// 2. Initialize AudienceContainerView
audienceContainerView.init(this, roomId)

// 3. (Optional) Add AudienceContainerView event monitoring
listener = 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 ends
finish()
}

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 mode
enterPictureInPictureMode()
}
}
audienceContainerView.addListener(listener)
// 4. Add AudienceContainerView to the interface
setContentView(audienceContainerView)
}

override fun onDestroy() {
// 5. (Optional) If you added an event listener, it needs to be removed on page termination
audienceContainerView.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;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 1. Create AudienceContainerView
mAudienceContainerView = new AudienceContainerView(this);
// 2. Initialize AudienceContainerView
String roomId = "1236666";
mAudienceContainerView.init(this, roomId);
// 3. (Optional) Add AudienceContainerView event monitoring
mListener = new AudienceContainerViewDefine.AudienceContainerViewListener() {
@Override
public 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 ends
finish();
}

@Override
public 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 mode
enterPictureInPictureMode();
}
};
mAudienceContainerView.addListener(mListener);
// 4. Add AudienceContainerView to the interface
setContentView(mAudienceContainerView);
}

@Override
protected void onDestroy() {
// 5. (Optional) If you added an event listener, it needs to be removed on page termination
mAudienceContainerView.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:
Kotlin
Java
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:
Kotlin
Java
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.trtc.uikit.livekit.features.audiencecontainer.AudienceContainerView

class YourAudienceActivity : AppCompatActivity() {
lateinit var audienceContainerView: AudienceContainerView

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// 1. Create and initialize AudienceContainerView
audienceContainerView = AudienceContainerView(this)
val roomId = "1236666"
audienceContainerView.init(this, roomId)
// 2. Custom function example - forbid swiping to switch live rooms
audienceContainerView.disableSliding(true)
// 3. Add AudienceContainerView to the interface
setContentView(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;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 1. Create and initialize AudienceContainerView
mAudienceContainerView = new AudienceContainerView(this);
String roomId = "1236666";
mAudienceContainerView.init(this, roomId);

// 2. Custom function example - forbid swiping to switch live rooms
mAudienceContainerView.disableSliding(true);

// 3. Add AudienceContainerView to the interface
setContentView(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.