Conference

Web
- Run Sample Demo
- Integration
- UI Customization
- Conference Control
- In-Conference Chat
- On-Cloud Recording
- AI Noise Suppression
- Robot Streaming
- Virtual Background
- More Features
  - Floating Window
  - Text Watermark
- API Documentation
  - RoomKit API
  - RoomEngine API
    - API Overview
    - TUIRoomEngine
    - TUIRoomEvents
    - TUIRoomEngine Defines
- FAQs
iOS
- Run Sample Demo
- Integration
- UI Customization
- Conference Control
- In-Conference Chat
- On-Cloud Recording
- AI Noise Suppression
- Robot Streaming
- More Features
  - Floating Window
- API Documentation
  - RoomKit API
  - RoomEngine API
    - API Overview
    - TUIRoomEngine
    - TUIRoomObserver
    - Type Definition
- FAQs
Android
- Run Sample Demo
- Integration
- UI Customization
- Conference Control
- In-Conference Chat
- On-Cloud Recording
- AI Noise Suppression
- Robot Streaming
- More Features
  - Floating Window
- API Documentation
  - RoomKit API
  - RoomEngine API
    - API Overview
    - TUIRoomEngine
    - TUIRoomObserver
    - Type Definition
- FAQs
Electron
- Run Sample Demo
- Integration
- UI Customization
- Conference Control
- In-Conference Chat
- On-Cloud Recording
- AI Noise Suppression
- Robot Streaming
- More Features
  - Floating Window
  - Text Watermark
- API Documentation
  - RoomKit API
  - RoomEngine API
    - API Overview
    - TUIRoomEvent
    - TUIRoomEngine
    - TUIRoomEngine Defines
- FAQs
Flutter
- Run Sample Demo
- Integration
- UI Customization
- Conference Control
- In-Conference Chat
- On-Cloud Recording
- AI Noise Suppression
- Robot Streaming
- More Features
  - Floating Window
- API Documentation
  - RoomKit API
  - RoomEngine API
    - API Overview
    - TUIRoomEngine
    - TUIRoomObserver
    - Type Definition
- FAQs
Overview
- Overview

Activate the Service
Pricing
- Free Minutes
- Conference Monthly Packages
- Billing Explanation for Subscription Package Duration
- Pay-as-you-go
  - Billing of Audio and Video Duration
  - Billing of On-Cloud Recording and Recording Delivery
  - Billing of MixTranscoding and Relay to CDN
Server APIs
- REST API
  - RESTful API Overview
  - RESTful API List
  - Room Management
    - Create a Room
    - Destroy a Room
    - Update the Room Information
    - Get the Room Information
  - User Management
    - Get the Room Member List
    - Update the Room Member Information
    - Change the Room Ownership
    - Mark Room Members
    - Ban Room Members
    - Unban Room Members
    - Get the Banned Room Member List
    - Remove Room Member
  - Seat Management
    - Get the Seat List
    - Pick User on the Seat
    - Kick User off the Seat
    - Lock the Seat
- Third-Party Callback
  - Callback Overview
  - Callback Command List
  - Callback Configuration
    - Query Callback Configuration
    - Create Callback Configuration
    - Update Callback Configuration
    - Delete Callback Configuration
  - Room Related
    - After a Room Is Created
    - After a Room Is Destroyed
    - After the Room Information Is Updated
  - User Related
    - After a Room Is Entered
    - After a Room Is Left
  - Seat Connection Related
    - After the Seat List Is Changed
Error Code

Conference

UI Customization

This article will introduce how to customize the User Interface of TUIRoomKit. We provide two solutions for you to choose from: Fine-tuning Solution and Self-implemented UI Solution.
Solution 1: Fine-tuning Solution
By directly modifying the UI source code we provide, you can adjust the User Interface of TUIRoomKit. The source code of TUIRoomKit's interface is located in the Android/tuiroomkit folder on Github:
Replace Icon
You can directly replace the icons in the src/res/drawable-xxhdpi folder to ensure that the color tone and style of the icons in the entire App remain consistent. Please keep the name of the icon file unchanged when replacing.
﻿
﻿
﻿
Replace Copywriting
You can modify the string content of the video conference interface by modifying the strings.xml files in values-zh and values-en.
Solution 2: Custom Partial UI Solution
The UI code of TUIRoomKit is located in the src/main/java/com/tencent/cloud/tuikit/roomkit/view directory, and the screen view is in the TUIVideoSeat Component.
The key files of TUIRoomKit's View are as follows. You can change the corresponding view according to your needs and adjust your UI.
               |—— PrepareActivity    // Preparation page Activity
               |
               |—— CreateRoomActivity // Create room Activity
               |
               |—— EnterRoomActivity  // Enter room Activity
               |
    activity ——|—— RoomMainActivity   // Room main page Activity
       |
view ——|
       |
    component——|—— PrepareView        // Preparation page View
               |
               |—— CreateRoomView     // Create room View
               |
               |—— EnterRoomView      // Enter room View
               |
               |—— RoomMainView       // Audio/video conference main page View
               |
               |—— TopView            // Top button view, including: Speaker/Receiver switch, Switch Camera, etc.
               |
               |—— BottomView         // Bottom button view, including: Camera, Mic, Member Management, etc.
               |
               |—— UseListView        // User List view
               |
               |—— RaiseHandApplicationListView      // Raise Hand to Speak mode, Raise Hand application list page
               |
               |—— TransferMasterView // Room Owner Transfer page
               |
               |—— MoreFunctionView   // "More" function view, including Chat, Beauty, and Set up functions
               |
               |—— MeetingActivity    // Audio/video conference main activity
Modification of BottomView's Bottom Button
To make it easier for you to customize the bottom function buttons, our BottomView is automatically constructed by reading the list. Taking the video switch button as an example, the code is as follows.
private BottomItemData createCameraItem() {    
   BottomItemData cameraItemData = new BottomItemData();
   //Set button type to differentiate different buttons  
   cameraItemData.setType(BottomItemData.Type.VIDEO);    
   //Set whether the button is clickable
   if (isOwner()) {     
     cameraItemData.setEnable(true);   
   } else if (mRoomStore.roomInfo.enableSeatControl) {     
     cameraItemData.setEnable(false);  
   } else {      
     cameraItemData.setEnable(mRoomStore.roomInfo.enableVideo);   
   } 
   //Set the default icon of the button
   cameraItemData.setIconId(R.drawable.tuiroomkit_ic_camera_off);  
   //Set the background image of the button 
   cameraItemData.setBackground(R.drawable.tuiroomkit_bg_bottom_item_black); 
   //Set the icon of the button when it is not clickable     
   cameraItemData.setDisableIconId(R.drawable.tuiroomkit_ic_camera_off);    
   //Set the default icon of the button
   cameraItemData.setName(mContext.getString(R.string.tuiroomkit_item_open_camera));
      
   //Button click effect, if your button needs to switch images/names, etc. when clicked, you need to construct this data
   BottomSelectItemData camaraSelectItemData = new BottomSelectItemData();    
   //Set the name of the button when selected        
   camaraSelectItemData.setSelectedName(mContext.getString(R.string.tuiroomkit_item_close_camera));  
   //Set the name of the button when not selected   
   camaraSelectItemData.setUnSelectedName(mContext.getString(R.string.tuiroomkit_item_open_camera)); 
   //Set whether the button is selected  
   camaraSelectItemData.setSelected(false);    
   //Set the icon of the button when selected 
   camaraSelectItemData.setSelectedIconId(R.drawable.tuiroomkit_ic_camera_on);   
   //Set the icon of the button when not selected  
   camaraSelectItemData.setUnSelectedIconId(R.drawable.tuiroomkit_ic_camera_off);  
   //Set the click event of the button when selected/unselected
   camaraSelectItemData.setOnItemSelectListener(new BottomSelectItemData.OnItemSelectListener() {        
         @Override      
         public void onItemSelected(boolean isSelected) {       
            enableCamera(isSelected);     
         }   
   });    
   cameraItemData.setSelectItemData(camaraSelectItemData);   
   return cameraItemData;
   }
Solution 3: Custom All UI Solution
The overall function of TUIRoomKit is based on the TUIRoomEngine, a UI-less SDK. You can completely implement your own UI interface based on TUIRoomEngine. For details, please refer to 
the TUIRoomEngine API interface address.

Solution 1: Fine-tuning Solution
- Replace Icon
- Replace Copywriting
Solution 2: Custom Partial UI Solution
- Modification of BottomView's Bottom Button
Solution 3: Custom All UI Solution