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
Button Hiding
Invoke the hideFeatureButton interface to hide buttons, currently supporting Camera, Microphone, SwitchCamera, InviteUser. For details, see the enumeration type FeatureButton.
Note:
v3.2.9+ support.
Taking the hiding of the Camera Button as an example.
The call background image appears when the camera is turned off during a voice or video call. Modify the local user's call interface background image by calling setLocalViewBackgroundImage, and modify the remote user's call interface background image with setRemoteViewBackgroundImage.
Only available for 1V1 video calls, supported from v3.3.0+.
Use setLayoutMode to set the call interface layout, currently only supports LocalInLargeView and RemoteInLargeView, see the LayoutMode enum for details.
1. LocalInLargeView layout, with the local user in the large window:
2. RemoteInLargeView layout, with the remote user in the large window:
To replace an icon, source code import is required first. Copy the component to your project (the source code is in TypeScript version).
Note：
The Interface Replacing icons 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.
1. Download Source Code
Vue3
npminstall @tencentcloud/call-uikit-vue
2. Copy the source code into your own project, taking copying into the src/components/ directory as an example:
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 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
1. If you encounter the 'Cannot find module '../package.json'' error, it's because TUICallKit references a JSON file. You can add the related configuration in tsconfig.json, example:
2. If you encounter the 'Uncaught SyntaxError: Invalid or unexpected token' error, it's because TUICallKit uses decorators. You can add the related configuration in tsconfig.json, example:
{
"compilerOptions":{
"experimentalDecorators":true
}
}
5. Modify the icon components in the TUICallKit/Components/assets folder
Note:
To ensure the icon color and style remain consistent throughout the application, please keep the icon file name unchanged when replacing.
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?