tencent cloud

文档反馈

最后更新时间:2024-07-26 10:11:25

    支持的语言

    目前支持简体中文、英文和日文

    切换语言

    TUICallKit 会优先获取浏览器语言,如果是中文,英文或者日文中的一种,则以浏览器语言为主,否则使用英文。如果想切换语言,可以使用 setLanguage 接口。
    import { TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue';
    
    TUICallKitServer.setLanguage("zh-cn"); // "en" | "zh-cn" | "ja_JP"

    添加新的语言

    如果您有其他语言需要支持,可以通过源码集成方式修改语言源文件实现。

    第一步:源码集成

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

    第二步:新增语言包

    以新增越南语为例:
    1. 创建目标语言源文件。
    在 src/components/TUICallKit/src/TUICallService/locales 目录下新增 vi.ts 文件,复制 src/components/TUICallKit/src/TUICallService/locales/zh-cn.ts 内容到 vi.ts,然后将 json 的 value 翻译成越南语。
    export const vi = { // 注意这里的导出变量
    'hangup': '挂断',
    'reject': '拒绝',
    'accept': '接受',
    'camera': '摄像头',
    'microphone': '麦克风',
    'speaker': '扬声器',
    'open camera': '打开摄像头',
    'close camera': '关闭摄像头',
    'open microphone': '打开麦克风',
    'close microphone': '关闭麦克风',
    'video-to-audio': '转语音通话',
    'virtual-background': '模糊背景',
    'other side reject call': '对方已拒绝',
    'reject call': '拒绝通话',
    'cancel': '取消通话',
    ...
    };
    2. 从 index.ts 导出
    修改 src/components/TUICallKit/src/TUICallService/locales/index.ts 文件。
    import { TUIStore } from '../CallService/index';
    import { NAME, StoreName } from '../const/index';
    import { en } from './en';
    import { zh } from './zh-cn';
    import { ja_JP } from './ja_JP';
    import { vi } from './vi'; // 新增语言文件导入
    
    .....
    
    export const languageData: languageDataType = {
    en,
    'zh-cn': zh,
    ja_JP,
    vi, // 新增语言文件导出
    };
    3. 新增 LanguageType 枚举。
    修改 src/components/TUICallKit/src/TUICallService/const/call.ts
    export enum LanguageType {
    EN = 'en',
    'ZH-CN' = 'zh-cn',
    JA_JP = 'ja_JP',
    VI = 'vi', // 新增枚举类型
    }
    4. 切换语言
    在项目中通过调用 setLanguage 接口切换语言。
    import { TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue';
    
    TUICallKitServer.setLanguage("vi");
    联系我们

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

    技术支持

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

    7x24 电话支持