tencent cloud

Feedback

Last updated: 2024-09-11 17:23:43
    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

    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:
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support