tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Chat
    Documentation
    Download PDF

    Web

    Last updated: 2024-09-11 17:23:43
    Download PDF
      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:
      TUICallEngine integration guide
      TUICallEngine APIs
      Contact Us

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

      Contact Us
      Technical Support

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

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy