支持的语言
目前支持简体中文、英文和日文。
切换语言
TUICallKit 会优先获取浏览器语言,如果是中文,英文或者日文中的一种,则以浏览器语言为主,否则使用英文。如果想切换语言,可以使用 setLanguage 接口。 import { TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue';
TUICallKitServer.setLanguage("zh-cn");
添加新的语言
如果您有其他语言需要支持,可以通过源码集成方式修改语言源文件实现。
第一步:源码集成
注意:
源码集成适用于 Vue + Typescript
项目且 TUICallKit
版本号 ≥ 3.2.2。
1. 下载源码
npm install @tencentcloud/call-uikit-vue
2. 将源码拷贝到自己的项目中,以拷贝到 src/components/
目录为例:
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. 修改引入路径
import { TUICallKit, TUICallKitServer, TUICallType } from "./components/TUICallKit/src/index";
如果您在使 TUICallKit 组件时遇到了报错,请不要担心,大多数情况下这是由于 ESLint 和 TSConfig 配置不一致造成的。您可以查阅文档,按照要求正确配置即可。如果您需要帮助,请随时联系我们,我们将确保您能够成功地使用此组件。以下是几个常见的问题:
若 TUICallKit 与您项目的代码风格不一致导致报错,可将本组件目录屏蔽,如在项目根目录增加 .eslintignore
文件,如:
# .eslintignore
src/components/TUICallKit
1. 如遇 Cannot find module '../package.json' 报错,是因为 TUICallKit 内引用了 JSON 文件,可在 tsconfig.json 中添加相关配置,示例:
{
"compilerOptions": {
"resolveJsonModule": true
}
}
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. 切换语言
import { TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue';
TUICallKitServer.setLanguage("vi");
本页内容是否解决了您的问题?