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 speak, moving seat positions, and kicking someone off the mic. | |
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 speak, moving seat positions, and kicking someone off the mic. By calling just a few lines of SeatGridView component APIs, you can achieve the following live streaming view.
Microphone Position List - Grid Layout | Microphone Position List - Element Layout | Microphone Position 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.
Was this page helpful?