@tencent-rtc/mcp 1.6.7 → 1.7.0

package/resource/knowledge/callkit/core-sdk/uni-app/make-call.md

@@ -1,54 +1,40 @@
-本文档将帮助您使用 **AtomicXCore SDK** 的 **DeviceState**、**CallState 以及**核心组件 **CallCoreView**，快速构建一个支持通话功能的 **App**。
+This document helps you quickly build an **app** with calling capabilities using the **AtomicXCore SDK** components **DeviceState**, **CallState**, and the core view component **CallCoreView**.
 
-> 推荐使用更高效的 AI 集成助手
->
-
-> 我们为您提供了全新的 AI 集成方式，只需要描述您的需求，即可自动生成集成代码，大幅提升开发效率。
->
-
-> 点击这里，立即体验 AI 集成
->
-
-## 准备工作
-
-### 步骤1：开通服务
+## Prerequisites
 
-请参见 开通服务，获取体验版或付费版 SDK。
+### Step 1: Activate the service
 
-### 步骤2：在当前项目中导入 AtomicXCore
-1. **安装组件**：打开 [AtomicXCore SDK](https://ext.dcloud.net.cn/plugin)，单击**下载插件并导入 HBuilderX**，选择需要集成的项目并单击**确定**。
+### Step 2: Import AtomicXCore into your project
+1. **Install the component**: open the [AtomicXCore SDK](https://ext.dcloud.net.cn/plugin) page, click **Download plugin and import into HBuilderX**, select the target project, and click **Confirm**.
 
-   也可从 [GitHub](https://github.com/Tencent-RTC/TUIKit_uni-app) 下载源码，将 `App/uni_modules/tuikit-atomic-x` 目录拷贝至您项目的 `uni_modules/` 下。
+   You can also download the source code from [GitHub](https://github.com/Tencent-RTC/TUIKit_uni-app) and copy the `App/uni_modules/tuikit-atomic-x` directory into your project's `uni_modules/` folder.
 
-2. **配置工程权限： **请在应用的 manifest.json 文件的 app-plus > distribute 节点下，确保添加了以下必要的权限：
+2. **Configure project permissions:** in your application's `manifest.json` file, under the `app-plus > distribute` node, make sure the following required permissions are added:
 
-  - Android 平台（`Android`节点）：在 `permissions` 数组中，请确保包含以下权限：
+  - Android platform (`Android` node): make sure the following permissions are included in the `permissions` array:
 
       ``` json
       "<uses-permission android:name=\"android.permission.RECORD_AUDIO\" />",
       "<uses-permission android:name=\"android.permission.CAMERA\"/>"
       ```
-  - iOS 平台（`iOS` 节点）：在 `privacyDescription` 对象中，请确保包含以下描述：
+  - iOS platform (`iOS` node): make sure the following descriptions are included in the `privacyDescription` object:
 
       ``` json
-      "NSCameraUsageDescription" : "应用需要访问您的相机以进行通话",
-      "NSMicrophoneUsageDescription" : "应用需要访问您的麦克风以进行通话"
+      "NSCameraUsageDescription" : "The app needs access to your camera for calls",
+      "NSMicrophoneUsageDescription" : "The app needs access to your microphone for calls"
       ```
 
-      在 `UIBackgroundModes` 数组中，添加 `audio` 以支持后台音频播放。
+      Add `audio` to the `UIBackgroundModes` array to support background audio playback.
 
       ``` json
       "UIBackgroundModes" : [ "audio" ]
       ```
 
-### 步骤3：实现登录逻辑
+### Step 3: Implement the login logic
 
-在您的项目中调用 LoginState 中的 [login](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#login) 方法完成登录，**这是使用 **`AtomicXCore`** 所有功能的关键前提**。
+Call the [login](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#login) method on LoginState in your project to sign in. **This is a mandatory prerequisite for using any feature of** `AtomicXCore`.
 
-> **重要：**
->
-
-> 推荐在您 App 自身的用户账户登录成功后，再调用 LoginState 中的 login 方法，以确保登录业务逻辑的清晰和一致。
+> We recommend calling the `login` method on `LoginState` only after your app's own user account has signed in successfully, so that the login business logic stays clean and consistent.
 >
 
 ``` typescript
@@ -58,78 +44,78 @@ const { login } = useLoginState();
 
 const handleLogin = () => {
     login({
-      sdkAppID: 1400000001,  // 替换为您的 SDKAppID
-      userID: "test_001",    // 替换为您的 UserID
-      userSig: "xxxxxxxxxx"  // 替换为您的 UserSig
+      sdkAppID: 1400000001,  // Replace with your SDKAppID
+      userID: "test_001",    // Replace with your UserID
+      userSig: "xxxxxxxxxx"  // Replace with your UserSig
     })
  }
 ```
 
-**登录接口参数说明：**
-| <strong>参数</strong> | <strong>类型</strong> | <strong>说明</strong> |
+**Login parameters:**
+| <strong>Parameter</strong> | <strong>Type</strong> | <strong>Description</strong> |
 | --- | --- | --- |
-| sdkAppID | number | 从 <a href="https://console.cloud.tencent.com/trtc">控制台</a> 获取，通常是以 <code>140</code> 或 <code>160</code> 开头的 10 位整数。 |
-| userID | string | 当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。为避免多端登录冲突，<strong>请勿使用</strong><code>1</code>、<code>123</code><strong>等简单 ID</strong>。 |
-| userSig | string | 用于腾讯云鉴权的票据。请注意：<br>- 开发环境：您可以采用本地 <code>GenerateTestUserSig.genTestSig</code> 函数生成 userSig 或者通过 <a href="https://console.cloud.tencent.com/im/tool-usersig">UserSig 辅助工具</a> 生成临时的 UserSig。<br>- 生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参考 <a href="https://cloud.tencent.com/document/product/647/17275">服务端生成 UserSig</a>。<br>更多信息请参见 <a href="https://cloud.tencent.com/document/product/647/17275">如何计算及使用 UserSig</a>。 |
+| sdkAppID | number | Obtained from the <a href="https://console.cloud.tencent.com/trtc">Console</a>. It is typically a 10-digit integer starting with <code>140</code> or <code>160</code>. |
+| userID | string | The unique ID of the current user. Only letters, digits, hyphens, and underscores are allowed. To avoid multi-endpoint login conflicts, <strong>do not use</strong> simple IDs such as <code>1</code> or <code>123</code>. |
+| userSig | string | The ticket used for Tencent Cloud authentication. Please note:<br>- Development environment: you can use the local <code>GenerateTestUserSig.genTestSig</code> function to generate a userSig, or generate a temporary UserSig with the <a href="https://console.cloud.tencent.com/im/tool-usersig">UserSig helper tool</a>.<br>- Production environment: to prevent key leakage, always generate the UserSig on the server side. See <a href="https://cloud.tencent.com/document/product/647/17275">Server-side UserSig generation</a> for details.<br>For more information, see <a href="https://cloud.tencent.com/document/product/647/17275">How to compute and use UserSig</a>. |
 
-## 拨打第一通电话
+## Make your first call
 
-### 步骤1：创建通话界面
+### Step 1: Create the call view
 
-您需要创建一个通话页面，当发起通话时唤起通话页面，实现方式如下：
-1. **创建通话页面**：您可以新建一个页面作为通话宿主页面，用于响应来电时的跳转逻辑。
+You need to create a call page that is brought to the foreground when a call is initiated. Do the following:
+1. **Create a call page**: create a new page to act as the host page for the call, responsible for the navigation logic triggered by an incoming or outgoing call.
 
-2. **通话页面绑定 CallCoreView **: 通话视图核心组件，自动监听 **CallState** 数据并完成画面渲染，同时提供布局切换、头像与图标配置等 UI 定制化能力。
+2. **Bind CallCoreView to the call page**: `CallCoreView` is the core view component of the call UI. It automatically listens to **CallState** and renders the video/audio views, and provides UI customization capabilities such as layout switching and avatar/icon configuration.
 
    ``` html
       <call-core-view style="height: 50px; width: 50px;"></call-core-view>
    ```
 
-   > **说明：**
+   > **Note:**
    >
 
-   > **CallCoreView **为原生组件，不需要在文件中单独进行 **import**。挂载在页面上即可使用。
+   > **CallCoreView** is a native component and does not need to be **imported** separately in the file. Simply mount it on the page to use it.
    >
 
-   **CallCoreView 视图组件功能说明：**
+   **CallCoreView features:**
 
-   |**功能**|**说明**|**参考文档**|
+   |**Feature**|**Description**|**Reference**|
    |---------|---------|---------|
-   |**设置布局模式**|支持自由切换布局模式。若未设置，将根据通话人数自动适配布局。|切换布局模式|
-   |**设置头像**|支持通过传入头像资源路径，为特定用户自定义头像。|自定义默认头像|
-   |**设置音量提示图标**|支持根据不同音量等级，配置个性化的音量指示图标。|自定义音量提示的图标|
-   |**设置网络提示图标**|支持根据实时网络质量，配置对应的网络状态提示图标。|自定义网络提示的图标|
-   |**设置等待接听用户的动画**|在多人通话场景下，支持传入 GIF 图像路径，为待接听状态的用户展示动画。|自定义 loading 动画|
+   |**Set the layout mode**|Freely switch between layout modes. If not set, the layout is auto-selected based on the number of participants.|Switch the layout mode|
+   |**Set the avatar**|Customize the avatar for a specific user by passing in the avatar resource path.|Customize the default avatar|
+   |**Set the volume indicator icon**|Configure personalized volume indicator icons for different volume levels.|Customize the volume indicator icon|
+   |**Set the network indicator icon**|Configure the corresponding network indicator icon based on real-time network quality.|Customize the network indicator icon|
+   |**Set the waiting animation for callees**|In multi-party call scenarios, pass in a GIF image path to show an animation for users in the "waiting to answer" state.|Customize the loading animation|
 
-### 步骤2：添加通话控制按钮
+### Step 2: Add call control buttons
 
-您可以参考 **DeviceState**、**CallState** 提供的 API ，自定义添加您的按钮。
-- **DeviceState 功能说明：**麦克风（开关 / 音量）、摄像头（开关 / 切换 / 画质）、屏幕共享，设备状态实时监听。建议将对应方法绑定至按钮点击事件，并通过监听设备状态变更来实时刷新按钮的 UI 状态。
+You can add your own buttons based on the APIs provided by **DeviceState** and **CallState**.
+- **DeviceState features:** microphone (on/off, volume), camera (on/off, switch, quality), screen sharing, and real-time device state listening. It is recommended to bind these methods to your button click events, and refresh the button UI in real time by listening to device state changes.
 
-- **CallState 功能说明：**接听、挂断、拒接等核心通话控制能力。建议将对应方法绑定至按钮点击事件，并监听通话状态的变化，以确保按钮显示与当前通话阶段保持同步。
+- **CallState features:** core call control capabilities such as answering, hanging up, and rejecting calls. It is recommended to bind these methods to your button click events, and listen to call state changes to keep the button state in sync with the current call phase.
 
-- **图标资源下载：**按钮图标可以直接从 [GitHub](https://github.com/Tencent-RTC/TUIKit_uni-app/tree/main/App) 下载。这些图标由我们的设计师专为 TUICallKit 打造，无版权风险，可放心使用。
+- **Icon assets download:** you can download button icons directly from [GitHub](https://github.com/Tencent-RTC/TUIKit_uni-app/tree/main/App). These icons are designed by our designers specifically for TUICallKit and are free from copyright issues.
 
-| <strong>图标：</strong> |  |  |  |  |  |  |  |  |
+| <strong>Icons:</strong> |  |  |  |  |  |  |  |  |
 | --- | --- | --- | --- | --- | --- | --- | --- | --- |
 
-   以添加挂断、麦克风、摄像头按钮为例，实现方式如下：
+   The following example shows how to add a hangup button, a microphone toggle button, and a camera toggle button:
 
-1. **添加挂断按钮**：创建并添加挂断按钮，在点击事件中调用 [hangup](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#hangup) 并销毁界面。
+1. **Add the hangup button**: create and add a hangup button. On tap, call [hangup](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#hangup) and destroy the view.
 
    ``` typescript
    <template>
      <view class="btn" @tap="handleHangup">
        <image class="btn-img" :style="[style]" :src="HANGUP_SRC"></image>
        <text class="btn-text" v-if="isShowText">
-         挂断
+         Hang up
        </text>
      </view>
    </template>
 
    <script setup lang="ts">
      import { computed } from "vue";
-     import HANGUP_SRC from "../../../static/icon/hangup.png"; // 根据实际情况替换为您存放图标的路径
+     import HANGUP_SRC from "../../../static/icon/hangup.png"; // Replace with the actual icon path in your project
      import {
        useCallState
      } from '@/uni_modules/tuikit-atomic-x/state/CallState';
@@ -155,7 +141,7 @@ const handleLogin = () => {
 
      const handleHangup = () => {
        hangup();
-       // 在点击事件中调用 hangup 接口并销毁页面
+       // Call the hangup API in the click handler and destroy the page
      };
    </script>
 
@@ -180,21 +166,21 @@ const handleLogin = () => {
    </style>
 
    ```
-2. **添加麦克风开关按钮：**创建并添加麦克风开关按钮，在点击事件中调用 [openLocalMicrophone](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#openLocalMicrophone) 或 [closeLocalMicrophone](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#closeLocalMicrophone) 接口，并监听麦克风状态，实时更新按钮文本。
+2. **Add the microphone toggle button:** create and add a microphone toggle button. On tap, call [openLocalMicrophone](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#openLocalMicrophone) or [closeLocalMicrophone](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#closeLocalMicrophone), and listen to the microphone state to update the button text in real time.
 
    ``` typescript
    <template>
      <view class="btn" @tap="handleMic">
        <image class="btn-img" :src="microphoneStatus === DeviceStatus.ON "></image>
        <text class="btn-text">
-         {{ microphoneStatus === DeviceStatus.ON ? '麦克风已开' : '麦克风已关' }}
+         {{ microphoneStatus === DeviceStatus.ON ? 'Microphone on' : 'Microphone off' }}
        </text>
      </view>
    </template>
 
    <script setup lang="ts">
-     import MIC_ON_SRC from "../../../static/icon/mic-on.png"; // 根据实际情况替换为您存放图标的路径
-     import MIC_OFF_SRC from "../../../static/icon/mic-off.png"; // 根据实际情况替换为您存放图标的路径
+     import MIC_ON_SRC from "../../../static/icon/mic-on.png"; // Replace with the actual icon path in your project
+     import MIC_OFF_SRC from "../../../static/icon/mic-off.png"; // Replace with the actual icon path in your project
      import {
        useDeviceState,
        DeviceStatus
@@ -205,7 +191,7 @@ const handleLogin = () => {
        closeLocalMicrophone,
      } = useDeviceState()
 
-     // 点击事件调用开启或关闭麦克风
+     // Toggle the microphone in the click handler
      const handleMic = () => {
        if (microphoneStatus.value === DeviceStatus.ON) {
          closeLocalMicrophone();
@@ -235,21 +221,21 @@ const handleLogin = () => {
      }
    </style>
    ```
-3. **添加摄像头开关按钮：**创建并添加摄像头开关按钮，在点击事件中调用 [openLocalCamera](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#openLocalCamera) 或 [closeLocalCamera](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#closeLocalCamera) 接口，并监听摄像头的状态，实时更新按钮文本。
+3. **Add the camera toggle button:** create and add a camera toggle button. On tap, call [openLocalCamera](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#openLocalCamera) or [closeLocalCamera](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#closeLocalCamera), and listen to the camera state to update the button text in real time.
 
    ``` typescript
     <template>
      <div class="btn" @tap="handleCamera">
        <image class="btn-img" :src="cameraStatus === DeviceStatus.ON "></image>
        <text class="btn-text">
-         {{cameraStatus === DeviceStatus.ON ? '摄像头已开' : '摄像头已关'}}
+         {{cameraStatus === DeviceStatus.ON ? 'Camera on' : 'Camera off'}}
        </text>
      </div>
    </template>
 
    <script setup lang="ts">
-     import CAMERA_ON_SRC from "../../../static/icon/camera-on.png"; // 根据实际情况替换为您存放图标的路径
-     import CAMERA_OFF_SRC from "../../../static/icon/camera-off.png"; // 根据实际情况替换为您存放图标的路径
+     import CAMERA_ON_SRC from "../../../static/icon/camera-on.png"; // Replace with the actual icon path in your project
+     import CAMERA_OFF_SRC from "../../../static/icon/camera-off.png"; // Replace with the actual icon path in your project
      import {
        useDeviceState,
        DeviceStatus
@@ -261,7 +247,7 @@ const handleLogin = () => {
        isFrontCamera,
      } = useDeviceState()
 
-     // 摄像头按钮点击事件
+     // Camera button click handler
      const handleCamera = () => {
        if (cameraStatus.value === DeviceStatus.ON) {
          closeLocalCamera()
@@ -292,14 +278,14 @@ const handleLogin = () => {
    </style>
    ```
 
-### 步骤3：发起通话
+### Step 3: Initiate a call
 
-您可以在 calls 调用成功后跳转通话界面，我们建议您根据媒体类型自动开启麦克风或摄像头获得更好的通话体验，实现方式如下：
-1. **发起通话：**调用 [calls](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#calls) 发起通话。
+After the `calls` API succeeds, navigate to the call view. We also recommend enabling the microphone (and camera for video calls) automatically according to the media type for a better call experience. Implement it as follows:
+1. **Initiate a call:** call [calls](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#calls) to start a call.
 
-2. **开启媒体设备：**发起通话成功后开启麦克风，如果是视频通话同时开启摄像头。
+2. **Turn on media devices:** after the call is initiated successfully, turn on the microphone, and for video calls also turn on the camera.
 
-3. **唤起通话页面：**发起通话成功，唤起通话页面。
+3. **Show the call view:** navigate to the call view once the call is initiated successfully.
 
    ``` typescript
    <script setup lang="ts">
@@ -311,46 +297,46 @@ const handleLogin = () => {
    const { openLocalCamera, openLocalMicrophone } = useDeviceState();
 
    const calleeUserID = ref('');
-   const mediaType = ref(1); // 0: 语音, 1: 视频
+   const mediaType = ref(1); // 0: audio, 1: video
 
    const startCall = () => {
      const userID = calleeUserID.value.trim();
      if (!userID) {
-       uni.showToast({ icon: 'none', title: '请输入对方用户ID' });
+       uni.showToast({ icon: 'none', title: 'Please enter the callee user ID' });
        return;
      }
 
-     // 1. 打开本地设备
+     // 1. Turn on local devices
      if (mediaType.value === 1) {
        openLocalCamera({ isFront: true });
      }
      openLocalMicrophone();
 
-     // 2. 发起通话
+     // 2. Initiate the call
      calls({
        participantIds: [userID],
        mediaType: mediaType.value,
        success: () => {
-         console.log('发起通话成功');
+         console.log('Call initiated successfully');
          uni.navigateTo({
-           url: '/uni_modules/tuikit-atomic-x/pages/call?layoutTemplate=Float' // 示例路径，请替换为您在步骤 1 中创建的真实通话界面路径
+           url: '/uni_modules/tuikit-atomic-x/pages/call?layoutTemplate=Float' // Example path; replace with the actual call page path you created in Step 1
          });
        },
        fail: (code: number, message: string) => {
-         console.error('发起通话失败:', code, message);
-         uni.showToast({ icon: 'none', title: `通话失败: ${message}` });
+         console.error('Failed to initiate call:', code, message);
+         uni.showToast({ icon: 'none', title: `Call failed: ${message}` });
        }
      });
    };
    </script>
    ```
 
-### 步骤4：结束通话
+### Step 4: End the call
 
-无论您调用 hangup 挂断还是对方主动结束通话，均会触发 `onCallEnded` 事件。 建议监听该事件，当该事件被触发（即通话结束）时，执行关闭当前界面的操作。实现方式如下：
-1. **监听通话结束事件**：监听 `onCallEnded` 事件。
+Whether you call `hangup` or the remote party ends the call, the `onCallEnded` event is triggered. We recommend listening to this event and closing the current view when it fires (i.e., when the call ends). Implement it as follows:
+1. **Listen to the call-ended event**: listen to `onCallEnded`.
 
-2. **销毁通话页面**：`onCallEnded` 触发后，销毁通话页面。
+2. **Destroy the call view**: when `onCallEnded` fires, destroy the call view.
 
    ``` typescript
    import { useCallState } from '@/uni_modules/tuikit-atomic-x/state/CallState';
@@ -360,7 +346,8 @@ const handleLogin = () => {
    const { closeLocalCamera, closeLocalMicrophone } = useDeviceState();
 
    /**
-    * 初始化通话服务（最小示例：仅处理通话结束事件并回退页面）建议在应用初始化时执行
+    * Initialize the call service (minimal example: handle only the call-ended event and pop the page).
+    * Call this during application startup.
     */
    export function initCallService() {
      addCallListener('onCallEnded', (event: string) => {
@@ -374,43 +361,43 @@ const handleLogin = () => {
 
        console.log('[CallService] onCallEnded, reason:', res.reason);
 
-       // 关闭本地设备
+       // Close local devices
        closeLocalCamera();
        closeLocalMicrophone();
 
-       // 页面回退
+       // Navigate back
        const pages = getCurrentPages();
        if (pages.length > 1) {
          uni.navigateBack({ delta: 1 });
        } else {
-         uni.redirectTo({ url: '/pages/index/index' }); // 示例路径：请结合您的项目真实路径进行修改
+         uni.redirectTo({ url: '/pages/index/index' }); // Example path; adjust to your actual project path
        }
      });
    }
    ```
 
-   **onCallEnded 事件参数详细说明**：
+   **`onCallEnded` event parameters:**
 
-| <strong>参数</strong> | <strong>类型</strong> | <strong>说明</strong> |
+| <strong>Parameter</strong> | <strong>Type</strong> | <strong>Description</strong> |
 | --- | --- | --- |
-| callId | String | 此次通话的唯一标识。 |
-| mediaType | CallMediaType | 通话媒体类型，用于指定发起音频通话还是视频通话。<br>- <code>CallMediaType.Video</code>：视频通话。<br>- <code>CallMediaType.Audio</code>：语音通话。 |
-| reason | CallEndReason | 通话结束的原因。<br>- <code>Unknown</code>：未知原因，无法确定结束原因。<br>- <code>Hangup</code>：正常挂断，用户主动挂断通话。<br>- <code>Reject</code>：拒绝接听，被叫方拒绝来电。<br>- <code>Busy</code>：对方忙线，被叫方正在通话中。<br>- <code>Cancel</code>：通话取消，主叫方在对方接听前取消。 |
-| userId | String | 触发结束的用户 ID。 |
+| callId | String | The unique identifier of this call. |
+| mediaType | CallMediaType | The media type of the call, indicating whether it is an audio or video call.<br>- <code>CallMediaType.Video</code>: video call.<br>- <code>CallMediaType.Audio</code>: audio call. |
+| reason | CallEndReason | The reason the call ended.<br>- <code>Unknown</code>: unknown reason.<br>- <code>Hangup</code>: normal hangup; the user actively hung up.<br>- <code>Reject</code>: the callee rejected the call.<br>- <code>Busy</code>: the callee is busy on another call.<br>- <code>Cancel</code>: the caller canceled the call before the callee answered. |
+| userId | String | The user ID that triggered the end. |
 
-### 运行效果
+### Result
 
-当您完成以上 5 步后，"拨打一通电话"运行效果如下：
+After the 5 steps above, the "Make a call" flow looks as follows:
 
-## 定制页面
+## Customize the UI
 
-**CallCoreView** 提供了完善的 UI 定制能力，支持头像及音量提示等图标的自由替换。**为助力快速集成，您可以直接从 **[GitHub](https://github.com/Tencent-RTC/TUIKit_uni-app/blob/main/App/uni_modules/tuikit-atomic-x/static/icon/handsfree-on.png)**下载。这些图标由我们的设计师专为 TUICallKit 打造，无版权风险，可放心使用。**
+**CallCoreView** offers comprehensive UI customization, allowing you to freely replace icons such as avatars and volume indicators. **To speed up integration, you can download the assets directly from **[GitHub](https://github.com/Tencent-RTC/TUIKit_uni-app/blob/main/App/uni_modules/tuikit-atomic-x/static/icon/handsfree-on.png)**. These icons are designed by our designers specifically for TUICallKit and are free from copyright issues.**
 
-### 自定义音量提示的图标
+### Customize the volume indicator icon
 
-您可以通过设置 **CallCoreView** 组件的 `volumeLevelIcons` 属性来设置音量大小等级不同的提示图标。
+You can configure different volume-level indicator icons via the `volumeLevelIcons` property of the **CallCoreView** component.
 
-`volumeLevelIcons`**属性设置示例代码**：
+Example code for the `volumeLevelIcons` property:
 ``` typescript
 <template>
   <view class="call-view-container">
@@ -429,7 +416,7 @@ const handleLogin = () => {
   const systemInfo = ref({});
 
   /**
-   * 将 /static/ 相对路径转为原生层可用的本地绝对路径
+   * Convert a /static/ relative path to a local absolute path usable by the native layer
    */
   function toAbsolutePath(relativePath) {
     if (plus && plus.io && plus.io.convertLocalFileSystemURL) {
@@ -439,7 +426,7 @@ const handleLogin = () => {
   }
 
   /**
-   * 批量转换对象中所有 value 的路径为绝对路径
+   * Convert all values of an icon map to absolute paths in a batch
    */
   function convertIconPaths(iconMap) {
     const result = {};
@@ -449,10 +436,10 @@ const handleLogin = () => {
     return result;
   }
 
-  // 音量等级图标：key 为等级名称，value 为图标本地绝对路径
+  // Volume-level icons: keys are level names, values are local absolute paths of the icons
   const volumeLevelIcons = ref(convertIconPaths({
-    "Mute": "/static/images/callview-self-mute.png", // 可以替换您项目中的实际图标路径
-    "Low": "/static/images/callview-network.png" // 可以替换您项目中的实际图标路径
+    "Mute": "/static/images/callview-self-mute.png", // Replace with the actual icon path in your project
+    "Low": "/static/images/callview-network.png" // Replace with the actual icon path in your project
   }));
 
   onMounted(() => {
@@ -472,30 +459,27 @@ const handleLogin = () => {
 </style>
 ```
 
-> **说明：**
->
-
-> uni-app 传递给原生层的参数只支持本地路径，因此需要将相对路径转化为本地路径。
+> uni-app only supports local paths for parameters passed to the native layer, so relative paths must be converted to local paths.
 >
 
-- **属性参数详细说明：**
+- **Property parameter details:**
 
-| <strong>参数</strong> | <strong>类型</strong> | <strong>是否必填</strong> | <strong>说明</strong> |
+| <strong>Parameter</strong> | <strong>Type</strong> | <strong>Required</strong> | <strong>Description</strong> |
 | --- | --- | --- | --- |
-| icons | [String: String] | 是 | 音量等级与图标资源的映射表。结构说明如下：<br>- key ( VolumeLevel ) 表示音量等级：<br>- <code>Mute</code>：表示麦克风关闭，静音状态。<br>- <code>Low</code>：表示音量范围 (0-25]。<br>- <code>Medium</code>：表示音量范围 (25-50]。<br>- <code>High</code>：表示音量范围 (50-75]。<br>- <code>Peak</code>：表示音量范围 (75-100]。<br>- Value ( String ) 表示对应音量等级的图标资源路径。 |
+| icons | [String: String] | Yes | The mapping between volume levels and icon resources. Structure:<br>- key (VolumeLevel) indicates the volume level:<br>- <code>Mute</code>: microphone is off (muted).<br>- <code>Low</code>: volume range (0-25].<br>- <code>Medium</code>: volume range (25-50].<br>- <code>High</code>: volume range (50-75].<br>- <code>Peak</code>: volume range (75-100].<br>- Value (String) is the icon resource path for the corresponding volume level. |
 
-- **音量提示图标：**
+- **Volume indicator icons:**
 
-| <strong>图标</strong> | <strong>说明</strong> |
+| <strong>Icon</strong> | <strong>Description</strong> |
 | --- | --- |
-|  | 【图标含义】音量提示图标。<br>【推荐用法】您可以将该图标等级设置为 <code>Low</code> 或 <code>Medium</code>，当用户音量大于对应等级时显示。 |
-|  | 【图标含义】静音图标。<br>【推荐用法】您可以将该图标等级设置为 <code>Mute</code>，当该用户静音时显示。 |
+|  | [Meaning] Volume indicator icon.<br>[Recommended usage] Set this icon at the <code>Low</code> or <code>Medium</code> level; it is displayed when the user's volume is above the corresponding level. |
+|  | [Meaning] Mute icon.<br>[Recommended usage] Set this icon at the <code>Mute</code> level; it is displayed when the user is muted. |
 
-### 自定义网络提示的图标
+### Customize the network indicator icon
 
-您可以设置 **CallCoreView** 组件的 `networkQualityIcons` 属性设置不同网络状态的提示图标。
+You can configure the network indicator icons for different network states via the `networkQualityIcons` property of the **CallCoreView** component.
 
-- `networkQualityIcons`** 属性设置示例代码：**
+- Example code for the `networkQualityIcons` property:
 
    ``` typescript
 
@@ -516,7 +500,7 @@ const handleLogin = () => {
      const systemInfo = ref({});
 
      /**
-      * 将 /static/ 相对路径转为原生层可用的本地绝对路径
+      * Convert a /static/ relative path to a local absolute path usable by the native layer
       */
      function toAbsolutePath(relativePath) {
        if (plus && plus.io && plus.io.convertLocalFileSystemURL) {
@@ -526,7 +510,7 @@ const handleLogin = () => {
      }
 
      /**
-      * 批量转换对象中所有 value 的路径为绝对路径
+      * Convert all values of an icon map to absolute paths in a batch
       */
      function convertIconPaths(iconMap) {
        const result = {};
@@ -537,8 +521,8 @@ const handleLogin = () => {
      }
 
      const networkQualityIcons = ref(convertIconPaths({
-       "BAD": "/static/images/callview-network-bad.png",  // 可以替换您项目中的实际图标路径
-       "VERY_BAD": "/static/images/callview-network-bad.png"  // 可以替换您项目中的实际图标路径
+       "BAD": "/static/images/callview-network-bad.png",  // Replace with the actual icon path in your project
+       "VERY_BAD": "/static/images/callview-network-bad.png"  // Replace with the actual icon path in your project
      }));
 
      onMounted(() => {
@@ -557,23 +541,23 @@ const handleLogin = () => {
      }
    </style>
    ```
-- `networkQualityIcons`**接口参数详细说明：**
+- `networkQualityIcons` parameter details:
 
-| <strong>参数</strong> | <strong>类型</strong> | <strong>是否必填</strong> | <strong>说明</strong> |
+| <strong>Parameter</strong> | <strong>Type</strong> | <strong>Required</strong> | <strong>Description</strong> |
 | --- | --- | --- | --- |
-| icons | [String: String] | 是 | 网络质量与图标资源的映射表。结构说明如下：<br>- Key ( String)：表示网络质量等级：<br>- <code>UNKNOWN</code>：未知网络状态。<br>- <code>EXCELLENT</code>：网络状态极佳。<br>- <code>GOOD</code>：网络状态较好。<br>- <code>POOR</code>：网络状态较差。<br>- <code>BAD</code>：网络状态差。<br>- <code>VERY_BAD</code>：网络状态极差。<br>- <code>DOWN</code>：网络断开。<br>- Value ( String )：对应网络状态的图标资源路径。 |
+| icons | [String: String] | Yes | The mapping between network quality and icon resources. Structure:<br>- Key (String): the network quality level:<br>- <code>UNKNOWN</code>: unknown network state.<br>- <code>EXCELLENT</code>: excellent network.<br>- <code>GOOD</code>: good network.<br>- <code>POOR</code>: poor network.<br>- <code>BAD</code>: bad network.<br>- <code>VERY_BAD</code>: very bad network.<br>- <code>DOWN</code>: network disconnected.<br>- Value (String): the icon resource path for the corresponding network state. |
 
-- **网络较差的提示图标：**
+- **Poor-network indicator icon:**
 
-| <strong>图标</strong> | <strong>说明</strong> |
+| <strong>Icon</strong> | <strong>Description</strong> |
 | --- | --- |
-|  | 【图标含义】网络较差的提示图标。<br>【推荐用法】您可以将该图标等级设置为 <code>BAD</code>、<code>VERY_BAD</code> 或 <code>DOWN</code>，当网络较差时显示该图标。 |
+|  | [Meaning] Poor-network indicator icon.<br>[Recommended usage] Set this icon at the <code>BAD</code>, <code>VERY_BAD</code>, or <code>DOWN</code> level; it is displayed when the network is poor. |
 
-### 自定义默认头像
+### Customize the default avatar
 
-您可以设置 **CallCoreView** 的 `participantAvatars` 属性设置用户头像。建议您监听响应式数据 allParticipants（所有参与通话的成员）：当获取到用户头像时设置并展示；若用户未设置头像或加载失败，则显示默认头像（占位图）。
+You can set the `participantAvatars` property of **CallCoreView** to configure user avatars. We recommend listening to the reactive `allParticipants` (all call participants): when a user's avatar is available, set and display it; if the user has no avatar or loading fails, fall back to a default avatar (placeholder).
 
-`participantAvatars`**属性设置示例代码：**
+Example code for the `participantAvatars` property:
 ``` typescript
 <template>
   <view class="call-view-container">
@@ -601,7 +585,7 @@ const handleLogin = () => {
   let defaultAvatarReady = false;
 
   /**
-   * 将相对路径转为原生层可用的本地绝对路径
+   * Convert a relative path to a local absolute path usable by the native layer
    */
   function toAbsolutePath(relativePath) {
     if (plus && plus.io && plus.io.convertLocalFileSystemURL) {
@@ -611,7 +595,7 @@ const handleLogin = () => {
   }
 
   /**
-   * 下载头像并缓存，返回本地绝对路径
+   * Download and cache the avatar; return the local absolute path
    */
   function downloadAvatar(url) {
     if (avatarCache[url]) {
@@ -636,18 +620,18 @@ const handleLogin = () => {
     });
   }
 
-  // 预下载默认头像
+  // Pre-download the default avatar
   const defaultAvatarPromise = downloadAvatar(DEFAULT_AVATAR_URL).then(localPath => {
     defaultAvatarLocalPath = localPath;
     defaultAvatarReady = true;
-    // 默认头像就绪后，补刷一次参与者头像
+    // After the default avatar is ready, refresh participant avatars once
     if (allParticipants.value && allParticipants.value.length > 0) {
       updateParticipantAvatars(allParticipants.value);
     }
   });
 
   /**
-   * 根据参与者列表，下载头像并构建 { userId: localPath } 映射
+   * Given the participant list, download avatars and build a { userId: localPath } map
    */
   async function updateParticipantAvatars(participants) {
     if (!participants || participants.length === 0) {
@@ -674,7 +658,7 @@ const handleLogin = () => {
     participantAvatars.value = avatarMap;
   }
 
-  // 监听参与者变化，更新头像映射
+  // Watch participant changes and update the avatar map
   watch(() => allParticipants.value, async (newVal) => {
     if (!newVal) return;
     await updateParticipantAvatars(newVal);
@@ -696,23 +680,23 @@ const handleLogin = () => {
   }
 </style>
 ```
-- `participantAvatars`**属性参数详细说明：**
+- `participantAvatars` parameter details:
 
-| <strong>参数</strong> | <strong>类型</strong> | <strong>是否必填</strong> | <strong>说明</strong> |
+| <strong>Parameter</strong> | <strong>Type</strong> | <strong>Required</strong> | <strong>Description</strong> |
 | --- | --- | --- | --- |
-| avatars | [String: String] | 是 | 用户头像映射表。字典结构说明如下：<br>- Key：用户的 userID。<br>- Value：该用户的头像资源绝对路径。 |
+| avatars | [String: String] | Yes | The user avatar map. Structure:<br>- Key: the user's userID.<br>- Value: the absolute path of the user's avatar resource. |
 
-- **默认头像资源：**
+- **Default avatar asset:**
 
-| <strong>图标</strong> | <strong>说明</strong> |
+| <strong>Icon</strong> | <strong>Description</strong> |
 | --- | --- |
-|  | 【图标含义】默认头像。<br>【推荐用法】当用户头像加载失败或无头像时，您可以给该用户设置此默认头像。 |
+|  | [Meaning] Default avatar.<br>[Recommended usage] When a user's avatar fails to load or is not available, set this as their default avatar. |
 
-### 自定义 loading 动画
+### Customize the loading animation
 
-您可以设置 **CallCoreView** 的 `waitingAnimation` 属性，为等待中用户设置等待动画获得更好的体验。
+You can set the `waitingAnimation` property of **CallCoreView** to configure a waiting animation for waiting users for a better experience.
 
-- `waitingAnimation`** 属性设置示例代码：**
+- Example code for the `waitingAnimation` property:
 
    ``` typescript
      <template>
@@ -732,7 +716,7 @@ const handleLogin = () => {
      const systemInfo = ref({});
 
      /**
-      * 将 /static/ 相对路径转为原生层可用的本地绝对路径
+      * Convert a /static/ relative path to a local absolute path usable by the native layer
       */
      function toAbsolutePath(relativePath) {
        if (plus && plus.io && plus.io.convertLocalFileSystemURL) {
@@ -741,8 +725,8 @@ const handleLogin = () => {
        return relativePath;
      }
 
-     // 等待动画 GIF：传入本地绝对路径供原生组件渲染
-     const waitingAnimation = ref(toAbsolutePath("/static/images/callview-loading.gif")); // 可以替换您项目中的实际图标路径
+     // Waiting animation GIF: pass a local absolute path for the native component to render
+     const waitingAnimation = ref(toAbsolutePath("/static/images/callview-loading.gif")); // Replace with the actual icon path in your project
 
      onMounted(() => {
        uni.getSystemInfo({
@@ -760,23 +744,23 @@ const handleLogin = () => {
      }
    </style>
    ```
-- `waitingAnimation`** 接口参数详细说明：**
+- `waitingAnimation` parameter details:
 
-   |**参数**|**类型**|**是否必填**|**说明**|
+   |**Parameter**|**Type**|**Required**|**Description**|
    |---------|---------|---------|---------|
-   |path|String|是|GIF 格式图像资源的绝对路径。|
+   |path|String|Yes|The absolute path of the GIF image resource.|
 
-- **等待接听的动画：**
+- **Waiting-to-answer animation:**
 
-| <strong>图标</strong> | <strong>说明</strong> |
+| <strong>Icon</strong> | <strong>Description</strong> |
 | --- | --- |
-|  | 【图标含义】用户等待接听动画。<br>【推荐用法】群组通话时设置的动画。设置后，当用户的状态为等待接听时，显示该动画。 |
+|  | [Meaning] Waiting-to-answer animation for a user.<br>[Recommended usage] Animation used in group calls. Once configured, this animation is displayed when the user is in the "waiting to answer" state. |
 
-### 添加通话计时提示
+### Add a call duration indicator
 
-通话计时可通过响应式数据 activeCall 的 `duration` 字段实时获得，实时显示通话计时的实现方式如下：
+The call duration is available in real time via the `duration` field on the reactive `activeCall` data. To show the call duration in real time:
 
-**绑定通话计时数据**：将 `activeCall.duration` 字段绑定至 UI 。该字段为响应式数据，会自动驱动 UI 实时刷新，无需手动维护定时器。
+**Bind the call duration data**: bind the `activeCall.duration` field to the UI. This field is reactive and drives the UI to update automatically, so you do not need to maintain a timer manually.
 ``` typescript
 <template>
   <view v-if="isConnected" class="call-timer">
@@ -822,12 +806,12 @@ const handleLogin = () => {
 </style>
 ```
 
-## 更多功能
+## More features
 
-### 自定义用户头像/昵称
+### Customize the user's avatar and nickname
 
-通话开始前，您可以通过 setSelfInfo 方法，设置自己的昵称和头像。
-- **setSelfInfo 示例代码**：
+Before a call starts, you can set your own nickname and avatar via the `setSelfInfo` method.
+- Example code for `setSelfInfo`:
 
    ``` typescript
    import { useLoginState } from "@/uni_modules/tuikit-atomic-x/state/LoginState";
@@ -835,7 +819,7 @@ const handleLogin = () => {
    const { setSelfInfo } = useLoginState();
 
    /**
-    * 设置当前登录用户的个人信息（昵称、头像等）
+    * Set the profile (nickname, avatar, etc.) of the currently signed-in user
     */
    export const setSelfUserInfo = (userID: string, nickname: string, avatarURL: string): void => {
      setSelfInfo({
@@ -845,29 +829,26 @@ const handleLogin = () => {
          avatarURL,
        },
        success: () => {
-         console.log('用户信息设置成功');
+         console.log('User profile set successfully');
        },
        fail: (errCode: number, errMsg: string) => {
-         console.error('用户信息设置失败:', errCode, errMsg);
+         console.error('Failed to set user profile:', errCode, errMsg);
        },
      });
    };
    ```
-- **setSelfInfo 接口参数详细说明：**
+- `setSelfInfo` parameter details:
 
-| <strong>参数</strong> | <strong>类型</strong> | <strong>是否必填</strong> | <strong>说明</strong> |
+| <strong>Parameter</strong> | <strong>Type</strong> | <strong>Required</strong> | <strong>Description</strong> |
 | --- | --- | --- | --- |
-| userProfile | UserProfile | 是 | 用户信息结构体：<br>- <code>userID</code>：用户的 ID。<br>- <code>avatarURL</code>：用户头像的 URL。<br>- <code>nickname</code>：用户的昵称。<br>更多字段详情可参考 UserProfile。 |
+| userProfile | UserProfile | Yes | The user profile struct:<br>- <code>userID</code>: the user's ID.<br>- <code>avatarURL</code>: the URL of the user's avatar.<br>- <code>nickname</code>: the user's nickname.<br>For more fields, see UserProfile. |
 
-### 切换布局模式
+### Switch the layout mode
 
-**CallCoreView** 内置三种布局模式，您可以设置 `layoutTemplate` 属性来设置布局模式。若未主动配置，**CallCoreView** 将根据通话人数自动适配：1 V 1 场景下默认采用 `Float` 模式，多人通话场景下则自动切换为 `Grid` 模式。不同布局模式的说明如下：
-| <strong>Float 模式</strong> | <strong>Grid 模式</strong> | <strong>PIP 模式</strong> |
-| --- | --- | --- |
-|  |  |  |
-| - <strong>布局逻辑：</strong>呼叫等待时全屏显示己方画面；接通后全屏显示对方画面，己方画面以悬浮小窗展示。<br>- <strong>交互特性：</strong>支持小窗拖拽移动，点击小窗可实现大小画面互换。 | - <strong>布局逻辑：</strong>所有成员画面呈网格状平铺排列成宫格模式布局，适用 2 人以上通话，支持点击放大画面功能。<br>- <strong>交互特性：</strong>支持点击特定成员画面放大查看。 | - <strong>布局逻辑：</strong>1 v 1 场景固定显示对方画面，多人场景：采用当前发言者（Active Speaker） 策略，自动识别并全屏展示正在说话的用户。<br>- <strong>交互特性：</strong>等待时显示自己的画面，接通后还会显示通话计时。 |
+**CallCoreView** provides three built-in layout modes. You can set the `layoutTemplate` property to choose the layout. If not set, **CallCoreView** auto-selects the layout based on the number of participants: `Float` is the default for 1-vs-1 scenarios, and it automatically switches to `Grid` for multi-party calls. The layout modes are described below:
+| - <strong>Layout logic:</strong> during outgoing ringing, the local view is shown full-screen; after the call is connected, the remote view is shown full-screen and the local view becomes a floating small window.<br>- <strong>Interaction:</strong> supports dragging the small window; tap the small window to swap the main and small views. | - <strong>Layout logic:</strong> all participants' views are tiled in a grid layout. Suitable for calls with 2 or more participants; tap a specific view to enlarge it.<br>- <strong>Interaction:</strong> tap a specific participant's view to enlarge it. | - <strong>Layout logic:</strong> in 1-vs-1 scenarios, the remote view is always shown. In multi-party scenarios, the Active Speaker strategy is used to automatically detect and show the current speaker in full screen.<br>- <strong>Interaction:</strong> the local view is shown while waiting; after the call is connected, the call duration is also displayed. |
 
-- `layoutTemplate`**属性设置示例代码：**
+- Example code for the `layoutTemplate` property:
 
    ``` typescript
    <template>
@@ -888,10 +869,10 @@ const handleLogin = () => {
      const { activeCall } = useCallState();
 
      const systemInfo = ref({});
-     // 布局模板：'Float' 单人浮窗布局，'Grid' 多人宫格布局
+     // Layout template: 'Float' for 1v1 floating layout, 'Grid' for multi-party grid layout
      const layoutTemplate = ref("Grid");
 
-     // 根据通话信息自动切换布局：多人或群聊用 Grid，单人用 Float
+     // Automatically switch the layout based on call info: use Grid for multi-party or group chats, Float for 1v1
      watch(() => activeCall.value, (newValue) => {
        if (!newValue || !newValue.inviteeIds) {
          return;
@@ -919,15 +900,15 @@ const handleLogin = () => {
    </style>
 
    ```
-- `layoutTemplate`** 属性参数详细说明：**
+- `layoutTemplate` parameter details:
 
-| <strong>参数</strong> | <strong>类型</strong> | <strong>说明</strong> |
+| <strong>Parameter</strong> | <strong>Type</strong> | <strong>Description</strong> |
 | --- | --- | --- |
-| <code>layoutTemplate</code> | String | CallCoreView 的布局模式<br>- Float：<br>- 布局逻辑：呼叫等待时全屏显示己方画面；接通后全屏显示对方画面，己方画面以悬浮小窗展示。<br>- 交互特性：支持小窗拖拽移动，点击小窗可实现大小画面互换。<br>- Grid：<br>- 布局逻辑：所有成员画面呈网格状平铺排列成宫格模式布局，适用 2 人以上通话，支持点击放大画面功能。<br>- 交互特性：支持点击特定成员画面放大查看。<br>- PIP：<br>- 布局逻辑：1v1 场景固定显示对方画面，多人场景：采用当前发言者（Active Speaker） 策略，自动识别并全屏展示正在说话的用户。<br>- 交互特性：等待时显示自己的画面，接通后还会显示通话计时。 |
+| <code>layoutTemplate</code> | String | Layout mode of CallCoreView.<br>- Float:<br>- Layout logic: during outgoing ringing, the local view is shown full-screen; after the call is connected, the remote view is shown full-screen and the local view becomes a floating small window.<br>- Interaction: supports dragging the small window; tap the small window to swap the main and small views.<br>- Grid:<br>- Layout logic: all participants' views are tiled in a grid layout. Suitable for calls with 2 or more participants; tap a specific view to enlarge it.<br>- Interaction: tap a specific participant's view to enlarge it.<br>- PIP:<br>- Layout logic: in 1v1 scenarios, the remote view is always shown. In multi-party scenarios, the Active Speaker strategy is used to automatically detect and show the current speaker in full screen.<br>- Interaction: the local view is shown while waiting; after the call is connected, the call duration is also displayed. |
 
-### 设置通话的默认超时时间
+### Set the default call timeout
 
-您可以在发起通话 [calls](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#calls) 时，通过配置参数 CallParams 中的 `timeout` 字段来指定等待超时时间。示例代码如下：
+When starting a call via [calls](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#calls), you can specify the wait timeout via the `timeout` field of the `CallParams` configuration. Example:
 ``` typescript
 <script setup>
 import { ref } from 'vue';
@@ -936,12 +917,12 @@ import { useCallState } from '@/uni_modules/tuikit-atomic-x/state/CallState';
 const { calls } = useCallState();
 
 const calleeUserID = ref('');
-const mediaType = ref(1); // 0: 语音, 1: 视频
+const mediaType = ref(1); // 0: audio, 1: video
 
 const startCall = () => {
   const userID = calleeUserID.value.trim();
   if (!userID) {
-    uni.showToast({ icon: 'none', title: '请输入对方用户ID' });
+    uni.showToast({ icon: 'none', title: 'Please enter the callee user ID' });
     return;
   }
   calls({
@@ -951,29 +932,29 @@ const startCall = () => {
       timeout: 30
     },
     success: () => {
-      console.log('发起通话成功');
+      console.log('Call initiated successfully');
       uni.navigateTo({
-        url: '/uni_modules/tuikit-atomic-x/pages/call?layoutTemplate=Float' // 示例路径，请替换为您在步骤 1 中创建的真实通话界面路径
+        url: '/uni_modules/tuikit-atomic-x/pages/call?layoutTemplate=Float' // Example path; replace with the actual call page path you created in Step 1
       });
     },
     fail: (code, message) => {
-      console.error('发起通话失败:', code, message);
-      uni.showToast({ icon: 'none', title: `通话失败: ${message}` });
+      console.error('Failed to initiate call:', code, message);
+      uni.showToast({ icon: 'none', title: `Call failed: ${message}` });
     }
   });
 };
 </script>
 
 ```
-| <strong>参数</strong> | <strong>类型</strong> | <strong>是否必填</strong> | <strong>说明</strong> |
+| <strong>Parameter</strong> | <strong>Type</strong> | <strong>Required</strong> | <strong>Description</strong> |
 | --- | --- | --- | --- |
-| participantIds | Array | 是 | 目标用户的 userId 列表。 |
-| mediaType | CallMediaType | 是 | 通话媒体类型，用于指定发起音频通话还是视频通话。<br>- <code>CallMediaType.Video</code>：视频通话。<br>- <code>CallMediaType.Audio</code>：语音通话。 |
-| params | CallParams | 否 | 通话扩展参数，如：房间号、通话邀请超时时间等。<br>- <code>roomId</code> (String)：房间 ID，可选参数，未指定时由服务端自动分配。<br>- <code>timeout</code> (Int)：呼叫超时时间（秒）。<br>- <code>userData</code> (String)：用户自定义数据。<br>- <code>chatGroupId</code> (String)：Chat 群组 ID，用于群组通话场景。<br>- <code>isEphemeralCall</code> (Boolean)：是否为加密通话（不产生通话记录）。 |
+| participantIds | Array | Yes | The list of target userIds. |
+| mediaType | CallMediaType | Yes | The media type of the call, indicating whether it is an audio or video call.<br>- <code>CallMediaType.Video</code>: video call.<br>- <code>CallMediaType.Audio</code>: audio call. |
+| params | CallParams | No | Extended call parameters, such as room ID, call invitation timeout, etc.<br>- <code>roomId</code> (String): the room ID. Optional; if not specified, the server assigns one automatically.<br>- <code>timeout</code> (Int): call timeout in seconds.<br>- <code>userData</code> (String): user-defined data.<br>- <code>chatGroupId</code> (String): the Chat group ID, used for group call scenarios.<br>- <code>isEphemeralCall</code> (Boolean): whether the call is ephemeral (does not produce a call record). |
 
-### 播放等待接听的提示音
+### Play the ringback tone while waiting
 
-您可以监听自己的通话状态，在等待接听时播放铃声，在接听通话或通话结束时停止播放铃声。
+You can listen to your own call state, play a ringtone while waiting for the callee to answer, and stop the ringtone when the call is answered or ended.
 ``` typescript
 import { watch } from 'vue';
 import { useCallState } from '@/uni_modules/tuikit-atomic-x/state/CallState';
@@ -1012,11 +993,11 @@ function stopRingtone() {
 }
 
 export { playRingtone, stopRingtone };
-// 建议在应用初始化的时候执行该函数
+// It is recommended to call this function during application initialization
 export function initCallService() {
   ensureAudioContext();
 
-  // 通话接通(status=2)或结束(status=0)时，停止铃声
+  // Stop the ringtone when the call is connected (status=2) or ended (status=0)
   watch(() => selfInfo.value, (newVal) => {
     if (newVal?.status === 2 || newVal?.status === 0) {
       stopRingtone();
@@ -1025,36 +1006,33 @@ export function initCallService() {
 }
 ```
 
-## 下一步
-
-恭喜您，已经完成了"拨打一通电话"，接下来，您可参考 接听第一通电话 实现接听电话功能。
+## Next step
 
-## 常见问题
+Congratulations, you have completed "Make a call". Next, you can .
 
-### 如何保证通话过程中屏幕常亮？
+## FAQ
 
-uni-app 官方提供了对应的设置接口 [uni.setScreenBrightness](https://uniapp.dcloud.net.cn/api/system/brightness.html)
+### How can I keep the screen always on during a call?
 
-### 如何禁止系统侧滑返回上一个页面的行为？
+uni-app provides an official API for this: [uni.setScreenBrightness](https://uniapp.dcloud.net.cn/api/system/brightness.html).
 
-iOS 端可以通过设置页面上的 disableSwipeBack 属性进行禁止。详情参考 [uni-app 官方文档](https://uniapp.dcloud.net.cn/collocation/pages.html)。
+### How can I disable the system back-swipe gesture on the previous page?
 
-Android 端可以通过 onBackPress 拦截系统侧滑和物理返回，示例代码如下：
+On iOS, you can disable it by setting the `disableSwipeBack` property on the page. See the [official uni-app documentation](https://uniapp.dcloud.net.cn/collocation/pages.html) for details.
 
-> **注意：**
->
+On Android, you can intercept both the back-swipe gesture and the physical back button via `onBackPress`. Example:
 
-> 使用该方式进行系统侧滑和物理返回的拦截需要确保该页面使用的是 [自定义导航栏](https://uniapp.dcloud.net.cn/collocation/pages.html#customnav)。
+> When using this approach to intercept the system back-swipe and physical back button, make sure the page uses a [custom navigation bar](https://uniapp.dcloud.net.cn/collocation/pages.html#customnav).
 >
 
 ``` typescript
 <script setup>
   import { onBackPress } from '@dcloudio/uni-app'
 
-  // 拦截系统侧滑和物理返回键，防止通话中误退出
+  // Intercept the system back-swipe and physical back button to prevent accidental exit during a call
   onBackPress((option) => {
     if (option.from === 'backbutton') {
-      return true; // 返回 true 阻止默认回退行为
+      return true; // Return true to block the default back behavior
     }
   });
 </script>