Voice Room

LiveKit Component Collection Introduction

LiveKit is a collection of UI components for live streaming scenarios based on Tencent Cloud RoomEngine SDK. It provides a series of general UI components, including core components, live room information component, audience list component, barrage component, gift component, etc.
By leveraging these UI components, you can quickly build your own voice chat room business logic like building blocks.



Component Name
Functionality
Thumbnail
SeatGridView
The voice chat room core components provide rich APIs for enabling and disabling the voice chat room, managing seat positions in the live streaming room, applying to join the seat, inviting to take seat, moving seat positions, and kicking someone off the seat.



LiveInfoView
The live room information component displays anchor information and live room information, allowing viewers to follow or unfollow their favorite anchors, among other features.






AudienceListView
The viewer list component displays the latest 100 viewers who have entered the live room and the total number of viewers. You can show a simplified view of the viewer list in your live streaming interface, and when the simplified view is clicked, it can bring up the detailed viewer list view.






BarrageView
The interactive barrage component allows anchors and viewers to send text messages or emoji messages to each other.
The interactive barrage component provides BarrageInputView (barrage sending view) and BarrageStreamView (barrage display view).






GiftView
The interactive gifts component allows live streaming viewers to send virtual gifts to their favorite live anchors, with gift animation effects supported.
The interactive gifts component provides GiftButton (gift sending button) and GiftPlayView (gift playback view).






MusicView
The music list component allows you to add background music to the live streaming room. You can also pause, replay, or delete background music.



AudioEffectView
The Audio Effects Setting Component provides settings for your live streaming volume, background music volume, voice changer, and other effects.




SeatGridView Component Introduction

SeatGridView is a basic control we've developed for the Voice Chat Room UIKit. This core control offers a rich set of APIs, including enabling voice chat rooms, disabling voice chat rooms, seat position management in live streaming rooms, such as applying to join the seat, inviting to take seat, moving seat positions, and kicking someone off the seat. By calling just a few lines of SeatGridView component APIs, you can achieve the following live streaming view.
For details on integrating the SeatGridView component, see the Access Documentation for SeatGridView Access Documentation.
Seat List - Grid Layout
Seat List - Element Layout
Seat List - Vertical Layout













Key Component Introduction

LiveInfoView Component

LiveInfoView (Live Room Information Component) displays the information of the anchor and the live room. By default, it shows the anchor information view. When you click on the anchor information view, a detailed view of the live room information will be displayed.
Anchor Information View:



Live Room Information View:



The Live Room Information Component is coming soon, stay tuned.

AudienceListView Component

AudienceListView (Audience List Component) displays the first 100 viewers who recently entered the live room and the total number of viewers. By default, it shows the audience list view, and clicking on it will expand to show a detailed view of the audience list.
Audience List View



Audience List Details



Audience List Component is coming soon, stay tuned.

BarrageView Component

BarrageView (Interactive Barrage Component) is an important real-time communication tool that supports various interactive methods. Users can input emojis in the barrage to enhance the entertainment value of messages, making the interaction experience more enjoyable and vivid. Through this feature, viewers can have richer interactions with anchors and other viewers during live streaming, enhancing the overall sense of participation and fun. You can add the barrage sending component to the layout where you want to send barrages, and add the barrage display component to the layout where you want to display barrages.
Barrage Sending Component



Barrage Display Component



If you want to integrate the barrage component, please refer to the Interactive Barrage Component Integration Documentation.

GiftView Component

GiftView (Interactive Gifts Component) is a virtual gift interaction platform designed to add more fun to users' social experience. Through this component, users can send virtual gifts to their favorite live streaming anchors to express their appreciation, favorite, and support. The interactive gifts component supports setting Gift Material,Balance Display, Normal Gift Playback, Full Screen Gift Playback, and Recharge Button among other features.
Gift Sending Component



Gift Display Component



If you want to integrate the gift component, please refer to the Interactive Gifts Component Integration Documentation.

MusicView Component

MusicView (Music List Component) allows you to add background music to your live streaming room. Simply display our music list component when you need background music, and you can play your favorite music on the music component we provide.
Music List Component



The Background Music Component is coming soon. Stay tuned.

AudioEffectView Component

AudioEffectView (Audio Effects Setting Component) allows you to set live streaming volume, background music volume, and voice changer effects. Simply display the audio effects setting component when you need to adjust these effects, and you can easily adjust to the desired results.
Audio Effects Setting Component



The Audio Effects Setting Component is coming soon. Stay tuned.