- Release Notes and Announcements
- Release Notes
- TRTC Live (TUILiveKit) Product Launch Announcement
- TRTC Conference Official Editions Launched
- The commercial version of Conference is coming soon
- Terms and Conditions Applicable to $9.9 Starter Package
- Rules for the "First Subscription $100 Discount" Promotion
- Announcement on the Start of Beta Testing for Multi-person Audio and Video Conference
- TRTC Call Official Editions Launched
- License Required for Video Playback in New Version of LiteAV SDK
- TRTC to Offer Monthly Packages
- Product Introduction
- Purchase Guide
- Billing Overview
- RTC-Engine Packages
- TRTC Call Monthly Packages
- TRTC Conference Monthly Packages
- TRTC Live Monthly Packages
- Pay-As-You-Go
- Billing Explanation for Subscription Package Duration
- Billing of On-Cloud Recording
- Billing of MixTranscoding and Relay to CDN
- Free Minutes
- FAQs
- Billing of Monitoring Dashboard
- Billing of Recording Delivery
- Overdue and Suspension Policy
- Refund Policies
- User Tutorial
- Free Demo
- Video Calling (Including UI)
- Overview (TUICallKit)
- Activate the Service（TUICallKit）
- Integration (TUICallKit)
- UI Customization (TUICallKit)
- Offline Call Push (TUICallKit)
- On-Cloud Recording (TUICallKit)
- Additional Features（TUICallKit）
- Server APIs (TUICallKit)
- Client APIs (TUICallKit)
- ErrorCode
- Release Notes (TUICallKit)
- FAQs(TUICallKit)
- Multi-Participant Conference (with UI)
- Overview (TUIRoomKit)
- Activate the Service (TUIRoomKit)
- Integration (TUIRoomKit)
- UI Customization (TUIRoomKit)
- Conference Control (TUIRoomKit)
- Cloud Recording (TUIRoomKit)
- API Documentation(TUIRoomKit)
- In-Conference Chat (TUIRoomKit)
- FAQs (TUIRoomKit)
- Error Code (TUIRoomKit)
- Live Streaming (Including UI)
- Voice Chat Room (with UI)
- Integration (No UI)
- SDK Download
- API Examples
- Integration Guide
- Client APIs
- Advanced Features
- Relay to CDN
- Enabling Advanced Permission Control
- RTMP Streaming with TRTC
- Utilizing Beautification Effects
- Testing Hardware Devices
- Testing Network Quality
- On-Cloud Recording
- Custom Capturing and Rendering
- Custom Audio Capturing and Playback
- Sending and Receiving Messages
- Event Callbacks
- Access Management
- How to push stream to TRTC room with OBS WHIP
- Server APIs
- Console Guide
- Solution
- FAQs
- Legacy Documentation
- Protocols and Policies
- TRTC Policy
- Glossary
- Release Notes and Announcements
- Release Notes
- TRTC Live (TUILiveKit) Product Launch Announcement
- TRTC Conference Official Editions Launched
- The commercial version of Conference is coming soon
- Terms and Conditions Applicable to $9.9 Starter Package
- Rules for the "First Subscription $100 Discount" Promotion
- Announcement on the Start of Beta Testing for Multi-person Audio and Video Conference
- TRTC Call Official Editions Launched
- License Required for Video Playback in New Version of LiteAV SDK
- TRTC to Offer Monthly Packages
- Product Introduction
- Purchase Guide
- Billing Overview
- RTC-Engine Packages
- TRTC Call Monthly Packages
- TRTC Conference Monthly Packages
- TRTC Live Monthly Packages
- Pay-As-You-Go
- Billing Explanation for Subscription Package Duration
- Billing of On-Cloud Recording
- Billing of MixTranscoding and Relay to CDN
- Free Minutes
- FAQs
- Billing of Monitoring Dashboard
- Billing of Recording Delivery
- Overdue and Suspension Policy
- Refund Policies
- User Tutorial
- Free Demo
- Video Calling (Including UI)
- Overview (TUICallKit)
- Activate the Service（TUICallKit）
- Integration (TUICallKit)
- UI Customization (TUICallKit)
- Offline Call Push (TUICallKit)
- On-Cloud Recording (TUICallKit)
- Additional Features（TUICallKit）
- Server APIs (TUICallKit)
- Client APIs (TUICallKit)
- ErrorCode
- Release Notes (TUICallKit)
- FAQs(TUICallKit)
- Multi-Participant Conference (with UI)
- Overview (TUIRoomKit)
- Activate the Service (TUIRoomKit)
- Integration (TUIRoomKit)
- UI Customization (TUIRoomKit)
- Conference Control (TUIRoomKit)
- Cloud Recording (TUIRoomKit)
- API Documentation(TUIRoomKit)
- In-Conference Chat (TUIRoomKit)
- FAQs (TUIRoomKit)
- Error Code (TUIRoomKit)
- Live Streaming (Including UI)
- Voice Chat Room (with UI)
- Integration (No UI)
- SDK Download
- API Examples
- Integration Guide
- Client APIs
- Advanced Features
- Relay to CDN
- Enabling Advanced Permission Control
- RTMP Streaming with TRTC
- Utilizing Beautification Effects
- Testing Hardware Devices
- Testing Network Quality
- On-Cloud Recording
- Custom Capturing and Rendering
- Custom Audio Capturing and Playback
- Sending and Receiving Messages
- Event Callbacks
- Access Management
- How to push stream to TRTC room with OBS WHIP
- Server APIs
- Console Guide
- Solution
- FAQs
- Legacy Documentation
- Protocols and Policies
- TRTC Policy
- Glossary
This article will introduce how to customize the User Interface of TUIRoomkit. We provide two options for you to choose from: Skinning Scheme and Custom UI Scheme.
Option 1: Interface Fine-tuning Scheme
By directly modifying the Source Code of the UI we provide, you can adjust the User Interface of TUIRoomKit. The Source Code of TUIRoomKit's interface is located in the Electron/ folder on Github:
Replace Icons
You can directly modify the icon components in the
packages/renderer/src/TUIRoom/assests/icons/svg Folder to ensure that the color tone style of the icons throughout the app remains consistent. Please keep the icon file names unchanged when replacing.
Adjust UI Layout
You can adjust the UI layout of the Multi-person Video Conference interface by modifying the different pages in the
packages/renderer/src/TUIRoom/components/ folder.- components/- base- Chat Chat- common Common Icon Component- ManageMember Member Management- RoomContent Room Video- RoomFooter Room Page Footer- RoomHeader Room Page Header- RoomHome Home Page- RoomInvite Invite Members- RoomLogin Login Page- RoomMore More- RoomSetting Set Up- RoomSidebar Drawer Component
Option 2: Custom UI Scheme
The overall functionality of TUIRoom is based on the TUIRoomEngine, a UI-less SDK. You can completely implement your own User Interface based on TUIRoomEngine. For details, please see:
TUIRoomEngine Access Guide
TUIRoomEngine API Interface Address
Yes
No
Was this page helpful?