Conference
  • 개요
  • Web
    • Demo 실행
    • 통합
    • UI 맞춤화
    • Conference Control
    • 룸 내 채팅
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • Virtual Background
    • 더 많은 기능
      • 플로팅 윈도우
      • Text Watermark
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEngine
        • TUIRoomEvents
        • TUIRoomEngine 정의
    • 자주 받는 질문들
  • iOS
    • Demo 실행
    • 통합
    • UI 맞춤화
    • 미팅 제어
    • 룸 내 채팅
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • 더 많은 기능
      • 플로팅 윈도우
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEngine
        • TUIRoomObserver
        • 유형 정의
    • 자주 받는 질문들
  • Android
    • Demo 실행
    • 통합
    • UI 맞춤화
    • 미팅 제어
    • 룸 내 채팅
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • 더 많은 기능
      • 플로팅 윈도우
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEngine
        • TUIRoomObserver
        • 유형 정의
    • 자주 받는 질문들
  • Electron
    • Demo 실행
    • 통합
    • UI 맞춤화
    • Conference Control
    • 룸 내 채팅
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • 더 많은 기능
      • 플로팅 윈도우
      • Text Watermark
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine 정의
    • 자주 받는 질문들
  • Flutter
    • Demo 실행
    • 통합
    • UI 맞춤화
    • 미팅 제어
    • In-Conference Chat
    • 클라우드 녹화
    • AI 노이즈 캔슬링
    • 로봇 스트리밍
    • 더 많은 기능
      • 플로팅 윈도우
    • 인터페이스 문서
      • RoomKit 인터페이스
      • RoomEngine 인터페이스
        • 인터페이스 개요
        • TUIRoomEngine
        • TUIRoomObserver
        • 유형 정의
    • 자주 받는 질문들
  • 개요
    • 개요
  • 서비스 활성화
  • 가격
    • 무료시간
    • 오디오/비디오 TRTC Conference 월정액 패키지
    • 구독 패키지 기간 과금 설명
    • 종량제
      • 오디오 및 비디오 시간 과금 설명
      • 클라우드 녹화 과금 설명
      • 믹스 트랜스코딩 및 CDN 중계 과금 설명
  • 서버 API
    • 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 맞춤화

This article will provide a detailed introduction on how to customize the user interface of TUIRoomkit. TUIRoomkit offers two customization methods: one is through a simple custom UI API, and the other is by replacing existing UI components. We will introduce each method in detail below.

Method 1: Fine-tuning the interface

TUIRoomkit provides a series of APIs that make it easy to customize the UI. The table below lists some of the main APIs and their functions:
API
Description
Set the interface language.
setTheme
Set the interface theme.
Enable the text messaging feature in the application. For details, see: Text Watermark.
Enable the virtual background feature in the application. After calling this function, a virtual background feature button will be displayed on the UI. For details, see: Virtual Background.
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 calling this function, users will not be able to share their screen with others.
Hide specific feature buttons in the application. After calling this function and passing in the appropriate FeatureButton enumeration value, the corresponding button will be hidden from the user interface.

Method 2: Modify the UIKit source code

You can directly modify the provided UI source code to adjust the user interface of TUIRoomKit according to your requirements.

Step 1: Exporting UIKit Source Code

Vue3
Vue2
1. Execute the source code export script, the default copy path is ./src/components/TUIRoom
node ./node_modules/@tencentcloud/roomkit-web-vue3/scripts/eject.js
2. Follow the script prompts to confirm that you want to copy the TUIRoomKit source code to the ./src/components/TUIRoom directory. Enter 'y' if you want to customize the copy directory, otherwise enter 'n'.



3. After exporting the source code, the TUIRoomKit source code will be added to the project path you specified. At this point, you need to manually change the reference to the ConferenceMainView component, conference object from the npm package address to the relative path address of the TUIRoom source code.
- import { ConferenceMainView, conference } from '@tencentcloud/roomkit-web-vue3';
// Replace the reference path with the real path of the TUIRoomKit source code.
+ import { ConferenceMainView, conference } from './src/components/TUIRoom/index.ts';
1. Execute the source code export script, the default copy path is ./src/components/TUIRoom
node ./node_modules/@tencentcloud/roomkit-web-vue2.7/scripts/eject.js
2. Follow the script prompts to confirm that you want to copy the TUIRoomKit source code to the ./src/components/TUIRoom directory. Enter 'y' if you want to customize the copy directory, otherwise enter 'n'.



3. After exporting the source code, the TUIRoomKit source code will be added to the project path you specified. At this point, you need to manually change the reference to the ConferenceMainView component, conference object from the npm package address to the relative path address of the TUIRoom source code.
- import { ConferenceMainView, conference } from '@tencentcloud/roomkit-web-vue2.7';
// Replace the reference path with the real path of the TUIRoomKit source code.
+ import { ConferenceMainView, conference } from './src/components/TUIRoom/index.ts';

Step 2:Configuring the UIKIT source code development environment

Config for Vue3 + Vite + TS
Config for Vue3 + Webpack + TS
Config for Vue2 + Webpack + TS
1. Install development environment dependencies
npm install typescript -S -D
2. Register for Pinia
TUIRoom uses Pinia for room data management, you need to register Pinia in the project entry file, which is the src/main.ts file.
// src/main.ts
import { createPinia } from 'pinia';

const app = createApp(App);
// register for Pinia
app.use(createPinia());
app.mount('#app');
3. Configuring esLint Checksums
If you don't want the TUIRoomKit component's esLint rules to conflict with your local rules and cause runtime errors, you can add the Ignore TUIRoom folder to .eslintignore.
// Please add the real path to the TUIRoom source code
src/components/TUIRoom
4. At this point you can run the project to see the effect of source code importation.
npm run dev
1. Install development environment dependencies
npm install typescript -S -D
2. Register for Pinia TUIRoom uses Pinia for room data management, you need to register Pinia in the project entry file, which is the src/main.ts file.
// src/main.ts
import { createPinia } from 'pinia';

const app = createApp(App);
// register for Pinia
app.use(createPinia());
app.mount('#app');
3. Configuring esLint Checksums
If you don't want the TUIRoomKit component's esLint rules to conflict with your local rules and cause runtime errors, you can add the Ignore TUIRoom folder to .eslintignore.
// Please add the real path to the TUIRoom source code
src/components/TUIRoom
4. At this point you can run the project to see the effect of source code importation.
npm run serve
Note:
TUIRoomKit component requires vue2 project to have vue2.7 installed and supports typescript environment. If your current project is in vue2.6 + js environment, follow the steps below to upgrade to vue2.7 + ts environment.
Upgrading from vue2.6 to vue2.7 is a smooth upgrade and has no effect on existing code. After configuring the ts environment, there is no impact on the existing js code. Please feel free to upgrade.
1. Upgrade vue2 to v2.7+, if your project's vue version is already v2.7+, ignore this step.
npm install vue@2 -S
2. Configure typescript to support TUIRoom component loading.
vue add typescript
The options for configuring the TS development environment can be found in the image:



3. Register for Pinia
TUIRoom uses Pinia for room data management, you need to register Pinia in the project entry file, which is the src/main.ts file.
import { createPinia, PiniaVuePlugin } from 'pinia';

Vue.use(PiniaVuePlugin);
const pinia = createPinia();

new Vue({
pinia,
render: h => h(App),
}).$mount('#app');
4. Configuring esLint Checksums
If you don't want the TUIRoomKit component's esLint rules to conflict with your local rules and cause runtime errors, you can add the Ignore TUIRoom folder to .eslintignore.
// Please add the real path to the TUIRoom source code
src/components/TUIRoom
5. At this point you can run the project to see the effect of source code importation.
npm run serve

Step 3:Modify the source code according to the requirements

1. Replace icons

You can directly modify the icon components in the /TUIRoom/components/common/icons folder to ensure that the icon color and style are consistent throughout the app. Please keep the icon file names unchanged when replacing.

2. Adjust UI layout

You can adjust the multi-person video conference interface UI layout by modifying different components in the /TUIRoom/components/ folder:
- components/
- Chat Chat
- common Common icon components
- ManageMember Member management
- RoomContent Room video
- RoomFooter Room page Footer section
- RoomHeader Room page Header section
- RoomHome Home page
- RoomInvite Invite members
- RoomLogin Login page
- RoomMore More
- RoomSetting Settings
- RoomSidebar Drawer component

Method 3: Implement your own UI

The overall functionality of TUIRoomKit is based on the TUIRoomEngine, a UI-less SDK. You can fully implement your own UI interface based on TUIRoomEngine. For more information, please see: