Last updated: 2023-09-19 14:47:18Download PDF

TUICallKit UI Customization Guide

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

You can modify the UI source code to make minor changes to the ready-made UI we provide. The UI source code is in the Web/ directory of the TUICallKit project.

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 layout

You can modify the views in the src/components/ folder to change the call UI.
- 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

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: