logo
On this page

Tutorial navigator

Make an interactive livestream

Check the following to make your livestream even more interactive:

  1. Participate in PK battles with other hosts
  2. Share your screen during live streaming
  3. Send virtual gifts
  4. Add advanced beauty effects like filters, face shaping, and makeup

FAQs

Here are answers to some frequently asked questions.

1. How to ensure uninterrupted audio when the app is sent to the background?

2. How to make the audience leave the room automatically after ending the live stream?

Debugging

Let's explore some common debugging scenarios:

1. Why does the app work fine in debug mode but crash in release mode?

2. How to enable logging for UIKit?

Feature map

The Live Streaming Kit (ZegoUIKitPrebuiltLiveStreaming) offers default behaviors and styles, but we also provide the flexibility to further customize or add your own business logic if the defaults don't fully meet your needs.

The numbers shown in the diagram correspond to the categories in the specific feature list.

Category Feature Description
1 Top ViewSet user avatarSet the user's avatar and make it effective in the TopMenuBar, AudioVideoView, and member list.
Set user avatar onClick callbackPerform customized operations such as displaying user details through the callback.
Add minimize buttonMinimize the livestream window within the app.
Exit Livestream confirmation callbackAdd a customized confirmation popup when the user exits the livestream
Customize exit livestream confirmation popup textCustomize the text displayed on the popup confirmation when the user exits the livestream.
Calculate livestream durationConfigure whether or not to display the duration of the livestream and to set a callback for the duration.
Set TopMenuBar padding
Set TopMenuBar margin
Set TopMenuBar backgroundColor
Set TopMenuBar height
2 AudioVideoViewSet user avatarSet the user's avatar, which will then be displayed in the TopMenuBar, AudioVideoView, and Member List.
Set Video MirrorSet the video mirror effect, but only for the user's own video.
Show username on viewDisplay the user name in the bottom right corner of the video view.
Show user avatarDisplay the user avatar, but only in audio mode.
Show sound waveDisplay the sound wave, but only in audio mode.
Use video view aspect fillSet whether the video rendering should be filled, which means the video will not have black bars, but it may be cropped or scaled.
Customize foreground viewSet a custom foreground view for the AudioVideoView.
Customize background viewSet a custom background view for the AudioVideoView.
3 InRoomMessageViewSet InRoomMessageView width
Set InRoomMessageView height
Set InRoomMessageView Opacity
Set InRoomMessageView maximum number of lines
Customize InRoomMessageView username text style
Customize InRoomMessageView message text style
Set InRoomMessageView background color
Set InRoomMessageView border radius
Set InRoomMessageView padding
Customize InRoomMessageView message item
Message send status callbackThis callback will be triggered when the message is successfully sent or failed.
4 Bottom Menu BarCustomize host buttonsOnly applicable when the user's role is "host".
Customize co-host buttonsOnly applicable when the user's role is "co-host".
Customize audience buttonsOnly applicable when the user's role is "audience".
Add host extend buttonsOnly applicable when the user's role is "host".
Add co-host extend buttonsOnly applicable when the user's role is "co-host".
Add audience extend buttonsOnly applicable when the user's role is "audience".
Set whether to show message button
Limit the maximum number of bottom buttons
Customize the style of built-in buttons
Built-in button list
Set BottomMenuBar padding
Set BottomMenuBar margin
Set BottomMenuBar backgroundColor
Set BottomMenuBar height
5 Member ListCustomize member item
Item onClick callback
6 EffectsCustomize beauty effectsAdd or remove beauty effect items.
Customize voice change effectsAdd or remove voice change effect items.
Customize reverb effectsAdd or remove reverb effect items.
Customize background color
Customize header title text style
Customize back icon
Customize reset icon
Customize icon border color in selected state
Customize icon border color in normal state
Customize icon color in selected state
Customize icon color in normal state
Customize text style in selected state
Customize text style in normal state
Customize slider text style
Customize slider text background color
Customize slider active track color
Customize slider inactive track color
Customize slider thumb color
Customize slider thumb radius
7 Customization before starting the live streamCustomize whether to skip the preview interface
Customize the back button
Customize the beauty effect button
Customize the switch camera button
Customize the "start live" button
8 Advanced beauty effectsAchieve advanced beauty effectsImplement advanced beauty features such as filters, face shapes, and makeup.
9 Screen sharingAchieve screen sharing live streaming
10 PK battlesParticipate in PK battles with other hosts
11 Live stream callbackCallback - user is removed from the livestream room
Callback - Audience leaves the live stream roomAfter implementing the callback, it is necessary to pop back to the previous page.
Live stream end callbackAfter implementing the callback, it is necessary to pop back to the previous page.
Callback - live stream state is updated
Callback for confirming camera opening by others
Callback for confirming microphone opening by others
Callback for when the maximum number of co-hosts is reached
12 OtherCustomize layoutsSupports PictureInPicture and Gallery layout
Set whether the host's camera is turned on by default
Set whether the host's microphone is turned on by default
Set whether the speaker is turned on by default when joining the livestream
Set whether the camera is turned on by default after the audience joins the livestream
Set whether to stop co-hosting when both the microphone and camera are turned off
Set up video configuration for livestream
Customize UI text in the Livestream
Customize the foreground view in the live stream
Customize the background view in the live stream
Limit the Maximum Number of co-hosts
Actively leave the live stream room
Remove a co-host from the live stream room
Invite an audience to become a co-host

Previous

Quick start (with cohosting)

Next

PK battles