Join Tencent RTC at NAB Show 2024 in Las Vegas!
Learn more 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
Join Tencent RTC at NAB Show 2024 in Las Vegas!
Learn more 
Only  $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Only $9.9! Get 50,000 minutes with our Starter Plan, perfect for your MVP project.
Grab It Now 
Call
Overview
  • Android
    • Integration
    • UI Customization
    • Offline Call Push
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Release Notes
  • iOS
    • Integration
    • UI Customization
    • Offline Call Push
      • VoIP
      • APNs
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Release Notes
  • Web
    • Integration
      • Web&H5 (React)
      • Web&H5 (Vue3)
    • UI Customization
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Configure Resolution and Fill Mode
      • Group Call
      • Floating Window
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallEvent
    • Release Notes
  • Flutter
    • Integration
    • Offline Call Push
    • UI Customization
    • On-Cloud Recording
    • More Features
      • Configuring Nicknames and Avatars
      • Group Call
      • Floating Window
      • Beauty Effects
      • Custom Ringtone
      • Monitoring Call Status
    • API Documentation
      • API Overview
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • Type Definition
    • Upgrading
    • Release Notes
  • Overview
    • Overview
  • Activate the Service
  • Pricing
    • Call Monthly Packages
    • Pay-As-You-Go
    • Free Minutes
  • ErrorCode
  • FAQs
    • All Platform
    • Flutter
    • Web
Call

UI Customization

This document describes how to customize the UI of TUICallKit. We provide two schemes. You can either make minor modifications to the UI source code we provide or implement your own UI.

Scheme 1: Using our UI source code

TUICallKit is a component with UI audio and video call, please click ChangeLog to see the latest update history. For easy source code adjustment, it is recommended to copy the component directly into your project (source code is TypeScript)

1. Installation package dependencies
Vue3
Vue2
npm install @tencentcloud/call-uikit-vue
npm install @tencentcloud/call-uikit-vue2
2. Copy the source code to your project, for example to the src/components/ directory:
macOS + Vue3
macOS + Vue2
Windows + Vue3
Windows + Vue2
mkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@tencentcloud/call-uikit-vue/* ./src/components/TUICallKit
mkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@tencentcloud/call-uikit-vue2/* ./src/components/TUICallKit
xcopy .\node_modules\@tencentcloud\call-uikit-vue .\src\components\TUICallKit /i /e
xcopy .\node_modules\@tencentcloud\call-uikit-vue2 .\src\components\TUICallKit /i /e
3. Modify the introduction path
TUICallKit needs to be brought in from a local file instead, as shown in the code below.
import { TUICallKit, TUICallKitServer } from "./components/TUICallKit/src/index";

Adjusting the UI layout

You can modify the audio/video call interface by modifying different pages under the src/components/ file, with each individual page performing the following functions:
- components/
- Calling-C2CVideo.vue One-to-one video call
- Calling-Group.Vue Group audio/video call
- ControlPanel.vue The control panel
- ControlPanelItem.vue Control panel items
- Dialing.vue The call making UI, incoming call UI, and one-to-one audio call UI
- MicrophoneIcon.vue The mic icon that can display changes in the volume level
- TUICallKit.vue The overall `TUICallKit` component
The style file is in src/style.css, which can be adjusted by yourself according to different UI styles.

Adjusting business logic

The main business logic code is in server.ts, which is used in conjunction with store/index.ts. If you want to handle the "kicked out" status in a targeted way, you can find the handleKickedOut() function in server.ts and add the processing logic, e.g:
private handleKickedOut(event: any) {
console.error("TUICallKit Kicked Out", JSON.stringify(event));
// do some thing...
alert("you are kick out, please re-login!");
}

Replacing icons

You can replace the icons in the src/icons folder to customize the color tone and style of the icons in your application. Make sure you do not change the filenames. To preview icons, go to src/assets.




Changing the style

The style file is src/style.css. You can adjust it to implement your desired UI style.

Scheme 2: Implementing your own UI

The features of TUICallKit are implemented based on the TUICallEngine SDK, which does not include UI elements. You can use TUICallEngine to implement your own UI. For detailed directions, refer to the documents below: