This document describes how to customize the UI of TUICallKit and provides two schemes for customization: slight UI adjustment and custom UI implementation.
Scheme 1: Slight UI Adjustment
TUICallKit is a component with UI audio and video call, For easy source code adjustment, it is recommended to copy the component directly into your project (source code is TypeScript)
Note：
The Interface Fine-tuning Plan is suitable for Vue3 + TypeScript and @tencentcloud/call-uikit-vue version number is 3.2.2 or later projects. If you are using other languages or technology stacks, please use the Custom UI Implementation.
Importing Source Code
1. Installation package dependencies
Vue3
npm install @tencentcloud/call-uikit-vue
2. Copy the source code to your project, for example to the src/components/ directory:
Solve Errors That May Be Caused by Copying Source Code
If you encounter an error while using the TUICallKit component, please don't worry. In most cases, this is due to inconsistencies between ESLint and TSConfig configurations. You can consult the documentation and configure correctly as required. If you need help, please feel free to contact us, and we will ensure that you can successfully use this component. Here are some common issues:
ESLint Error
TypeScript Error
If you encounter a Cannot find module '../package.json' error, it is because the TUICallKit references a JSON file. You can add the relevant configuration in tsconfig.json, for example:
If the TUICallKit causes an error due to inconsistency with your project's code style, you can block this component directory by adding a .eslintignore file in the root directory of your project, for example:
# .eslintignore
src/components/TUICallKit
Replacing icons
You can replace the icons in the TUICallKit/Components/assets folder to customize the color tone and style of the icons in your application. Make sure you do not change the filenames.
You can replace ringtones by replacing the three audio files in the TUICallKit/src/TUICallService/assets/ folder.
Filename
Description
phone_dialing.mp3
The sound of making a call
phone_ringing.mp3
The ringtone for incoming calls
Scheme 2: Custom UI Implementation
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:
Yes
No
Was this page helpful?