tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Real-Time Communication
    Documentation
    Download PDF

    Electron

    Last updated: 2024-10-15 17:23:26
    Download PDF
      This article will detail how to customize the TUIRoomkit user interface. TUIRoomkit offers two customization methods: one is through the simple use of Custom UI API, and the other is by replacing existing UI components. We will introduce these methods in detail below.

      Scheme 1: Interface Fine-tuning

      TUIRoomkit provides a series of API, allowing for easy customization of the UI. The table below lists some of the main APIs and their functions:
      API
      Description
      Set the interface language.
      setTheme
      Set the interface topic.
      Enable the text watermark feature in the application. For details, see: Text Watermark.
      Disable the text messaging feature in the application. After invoking this function, users will not be able to send or receive text messages.
      Disable the screen sharing feature in the application. After invoking this function, users will not be able to share their screen with others.
      Hide specific feature buttons in the application. By invoking this function and passing in the appropriate FeatureButton enumerated values, the corresponding buttons will be hidden from the user interface.

      Scheme 2: UIKit Source Code Export and Modification

      You can directly modify the UI source code we provide to adjust the TUIRoomKit user interface according to your needs. Execute the following node script to automatically copy the TUIRoomKit interface source code into your project (default path ./src/components/TUIRoom).
      Note: After exporting the source code, you need to manually change the reference of the TUIRoom component from the npm package address to the relative path address of the TUIRoom source code.
      Vue3
      Vue2
      node ./node_modules/@tencentcloud/roomkit-electron-vue3/scripts/eject.js
      node ./node_modules/@tencentcloud/roomkit-electron-vue2.7/scripts/eject.js

      1. Replace Icons

      You can directly modify the icon components in the /TUIRoom/assets/icons/svg folder, to ensure the icon color and style are consistent throughout the app. Please keep the icon file names unchanged while replacing them.
      
      
      

      2. Adjust UI Layout

      You can adjust the UI layout of the multi-person video conference interface by modifying different components in the /TUIRoom/components/ folder
      - components/    
          - Chat                Chat
          - common              Public Icon Components
          - 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         Settings
          - RoomSidebar        Drawer Components

      Solution 3: Implement Your Own UI

      The overall feature of TUIRoomKit is based on the TUIRoomEngine, a UI-less SDK. You can fully implement your own UI interface based on TUIRoomEngine. For more details, see:
      TUIRoomEngine Integration Guide
      TUIRoomEngine API Address
      Contact Us

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy