tencent cloud

Feedback

Last updated: 2024-07-26 10:11:03

    Supported Languages

    Currently supports Simplified Chinese, English, Japanese.

    Switch Language

    TUICallKit will prioritize the browser language. If it is one of Chinese, English, or Japanese, the browser language will be used. Otherwise, English will be used. If you want to switch languages, you can use the setLanguage interface.
    import { TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue';
    
    TUICallKitServer.setLanguage("zh-cn"); // "en" | "zh-cn" | "ja_JP"

    Add New Language

    If you need support for other languages, you can modify the language source file via source code integration.

    Step 1: Source Code Integration

    Note:
    Source code integration is suitable for Vue + TypeScript projects and TUICallKit version 3.2.2 or above.
    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
    You need to change TUICallKit to import from a local file, as shown in the code 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
    }
    }

    Step 2: Add a new language pack

    For example, adding Vietnamese:
    1. Create the target language source file.
    Add a new file named vi.ts in the src/components/TUICallKit/src/TUICallService/locales directory. Copy the contents of src/components/TUICallKit/src/TUICallService/locales/zh-cn.ts to vi.ts and then translate the JSON values into Vietnamese.
    export const vi = { // Note the export variable here
    'hangup': 'Hang Up',
    'reject': 'Reject',
    'accept': 'Acceptance',
    'camera': 'Camera',
    'microphone': 'Microphone',
    'speaker': 'Speaker',
    'open camera': 'Turn on the camera',
    'close camera': 'Turn off the camera',
    'open microphone': 'Open microphone',
    'close microphone': 'Turn off the microphone',
    'video-to-audio': 'Switch to audio call',
    'virtual-background': 'Blur background',
    'other side reject call': 'The other side has rejected',
    'reject call': 'Reject call',
    'cancel': 'Cancel call',
    ...
    };
    2. Export from index.ts
    Modify the src/components/TUICallKit/src/TUICallService/locales/index.ts file.
    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'; // Import new language file
    
    .....
    
    export const languageData: languageDataType = {
    en,
    'zh-cn': zh,
    ja_JP,
    vi, // Export new language file
    };
    3. Add new LanguageType enum.
    Modify the src/components/TUICallKit/src/TUICallService/const/call.ts
    export enum LanguageType {
    EN = 'en',
    'ZH-CN' = 'zh-cn',
    JA_JP = 'ja_JP',
    VI = 'vi', // Add new enum type
    }
    4. Switch Language
    Switch languages in the project by calling the setLanguage interface.
    import { TUICallKitServer, TUICallType } from '@tencentcloud/call-uikit-vue';
    
    TUICallKitServer.setLanguage("vi");
    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