Docs Overview/
Call/
Web/
Basic Features/
UI Customization/

UI Customization

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.



Vue3
React
import { TUICallKitServer, FeatureButton } from "@tencentcloud/call-uikit-vue";

TUICallKitServer.hideFeatureButton(FeatureButton.Camera);
import { TUICallKitServer, FeatureButton } from "@tencentcloud/call-uikit-react";

TUICallKitServer.hideFeatureButton(FeatureButton.Camera);

Custom Call Background Image

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.
Note:
v3.2.9+ support.



Vue3
React
import { TUICallKitServer } from "@tencentcloud/call-uikit-vue";

TUICallKitServer.setLocalViewBackgroundImage('http://xxx.png');
TUICallKitServer.setRemoteViewBackgroundImage('remoteUserId', 'http://xxx.png');
import { TUICallKitServer } from "@tencentcloud/call-uikit-react";

TUICallKitServer.setLocalViewBackgroundImage('http://xxx.png');
TUICallKitServer.setRemoteViewBackgroundImage('remoteUserId', 'http://xxx.png');

Set Layout

Note：
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:

Vue3
React
import { TUICallKitServer, LayoutMode } from "@tencentcloud/call-uikit-vue";

TUICallKitServer.setLayoutMode(LayoutMode.LocalInLargeView);
import { TUICallKitServer, LayoutMode } from "@tencentcloud/call-uikit-react";

TUICallKitServer.setLayoutMode(LayoutMode.LocalInLargeView);

Set the initial state of the camera

Note：
Supported from v3.3.0+.
Use setCameraDefaultState to set the initial state of the camera button, currently supports Enabled and Off.
Taking the default Off state of the camera as an example:
Vue3
React
import { TUICallKitServer } from "@tencentcloud/call-uikit-vue";

TUICallKitServer.setCameraDefaultState(false);
import { TUICallKitServer } from "@tencentcloud/call-uikit-react";

TUICallKitServer.setCameraDefaultState(false);

Replacing icons

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
npm install @tencentcloud/call-uikit-vue
2. Copy the source code into your own project, taking copying into the src/components/ directory as an example:
macOS + Vue3
Windows + Vue3
mkdir -p ./src/components/TUICallKit && cp -r ./node_modules/@tencentcloud/call-uikit-vue/* ./src/components/TUICallKit
xcopy .\node_modules\@tencentcloud\call-uikit-vue  .\src\components\TUICallKit /i /e
3. Modify Import Path
It's necessary to change CallKit to be imported from a local file, as shown below. For other usage details, refer to TUICallKit Quick Integration.
import { TUICallKit, TUICallKitServer, TUICallType } from "./components/TUICallKit/src/index";
4. 
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:
{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}
For other TSConfig issues, please refer to TSConfig Reference.
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.
Desktop
Mobile



Serial number
Resource Path
1
/TUICallKit/Components/assets/button/camera-close.svg
2
/TUICallKit/Components/assets/button/microphone-open.svg
3
/TUICallKit/Components/assets/button/speaker-open.svg
4
/TUICallKit/Components/assets/button/desktop/inviteUser.svg
5
/TUICallKit/Components/assets/button/hangup.svg
6
/TUICallKit/Components/assets/button/desktop/minimize.svg
7
/TUICallKit/Components/assets/button/desktop/fullScreen.svg






Serial number
Resource Path
1
/TUICallKit/Components/assets/button/mobile/minimize.svg
2
/TUICallKit/Components/assets/button/hangup.svg
3
/TUICallKit/Components/assets/button/accept.svg
4
/TUICallKit/Components/assets/button/microphone-open.svg
5
/TUICallKit/Components/assets/button/speaker-open.svg
6
/TUICallKit/Components/assets/button/camera-close.svg
7
/TUICallKit/Components/assets/button/switchCamera.svg

Replacing ringtones

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:
TUICallEngine integration guide
TUICallEngine APIs