tencent cloud

PrevNext

文档反馈

请输入关键字

Recent Pages

文档
实时音视频
    文档
    Download PDF

    Web

    最后更新时间：2024-04-30 10:40:41
    下载PDF
      本文将介绍如何定制 TUICallKit 的用户界面，我们提供了两个方案供您选择：界面微调方案和自实现 UI 方案。

      方案一：界面微调方案

      TUICallKit 是含 UI 音视频通话组件，为了方便的进行源码调整，推荐直接将组件拷贝到您的项目中（源码为 TypeScript 版本）。
      注意：
      界面微调方案适用于 Vue3 + Typescript 项目且 Callkit 版本号 ≥ 3.2.2，若您采用其他语言或者技术栈，请使用自实现 UI 方案。

      源码引入

      1. 下载源码
      Vue3
      npm install @tencentcloud/call-uikit-vue
      2. 将源码拷贝到自己的项目中，以拷贝到 src/components/ 目录为例：
      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. 修改引入路径
      需要将 CallKit 改为从本地文件中引入，如下方代码。其他用法细节可参考 TUICallKit 快速接入。
      import { TUICallKit, TUICallKitServer, TUICallType } from "./components/TUICallKit/src/index";
      4. 
      解决源码拷贝可能导致的报错
      
      如果您在使 TUICallKit 组件时遇到了报错，请不要担心，大多数情况下这是由于 ESLint 和 TSConfig 配置不一致造成的。您可以查阅文档，按照要求正确配置即可。如果您需要帮助，请随时联系我们，我们将确保您能够成功地使用此组件。以下是几个常见的问题：
      ESLint 报错
      TypeScript 报错
      若 TUICallKit 与您项目的代码风格不一致导致报错，可将本组件目录屏蔽，如在项目根目录增加 .eslintignore 文件，如：
      # .eslintignore
      src/components/TUICallKit
      如遇 Cannot find module '../package.json' 报错，是因为 TUICallKit 内引用了 JSON 文件，可在 tsconfig.json 中添加相关配置，示例：
      {
        "compilerOptions": {
          "resolveJsonModule": true
        }
      }
      其他 TSConfig 问题请参见 TSConfig Reference。

      替换图标

      您可以直接修改 TUICallKit/Components/assets 文件夹下的图标组件，以确保整个应用中的图标色调风格保持一致，请在替换时保持图标文件的名字不变。
      桌面端
      移动端
      
      序号
      资源路径
      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
      
      
      
      
      
      
      
      
      序号
      资源路径
      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

      替换铃声

      您可以替换 TUICallKit/src/TUICallService/assets/ 文件夹下的两个音频文件来达到替换铃声的目的：
      文件名
      用途
      phone_dialing.mp3
      发起呼叫时的声音
      phone_ringing.mp3
      接到呼叫时的声音

      方案二：自实现 UI 方案

      TUICallKit 的整个通话功能是基于 TUICallEngine 这个无 UI SDK实现的，您可以完全基于 TUICallEngine 实现一套自己的 UI 界面。详情可见：
      TUICallEngine 接入指引
      TUICallEngine API 接口地址
      联系我们

      联系我们，为您的业务提供专属服务。

      联系我们
      技术支持

      如果你想寻求进一步的帮助，通过工单与我们进行联络。我们提供7x24的工单服务。

      提交工单
      7x24 电话支持
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      隐私条款服务条款缓存条款