@tencent-rtc/mcp 1.6.7 → 1.6.8

package/resource/knowledge/callkit/core-sdk/uni-app/answer-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,75 +44,75 @@ 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>. |
 
-## 实现接听通话
+## Answer an incoming call
 
-### 步骤1：创建通话界面
+### Step 1: Create the call view
 
-您需要创建一个通话页面，当发起通话时唤起通话页面，实现方式如下：
-1. **创建通话页面**：您可以新建一个页面作为通话宿主页面，用于响应来电时的跳转逻辑。
+You need to create a call page that is brought to the foreground when an incoming call arrives. 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 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 example below shows how to add "Answer" and "Reject" buttons:**
 
-1. **添加接听按钮：**添加"接听"按钮，将其点击事件绑定至 [accept](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#accept) 方法。
+1. **Add the Answer button:** add an "Answer" button and bind its tap event to the [accept](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#accept) method.
 
    ``` typescript
    <template>
      <view class="btn" @tap="handleAccept">
        <image class="btn-img" :src="ACCEPT_SRC"></image>
-       <text class="btn-text">接听</text>
+       <text class="btn-text">Answer</text>
      </view>
    </template>
 
    <script setup lang="ts">
-     import ACCEPT_SRC from "../../../static/icon/accept.png"; // 替换为您项目的真实图标路径
+     import ACCEPT_SRC from "../../../static/icon/accept.png"; // Replace with the actual icon path in your project
      import { useCallState } from '@/uni_modules/tuikit-atomic-x/state/CallState';
 
      const { accept } = useCallState();
@@ -158,18 +144,18 @@ const handleLogin = () => {
    </style>
 
    ```
-2. **添加拒接按钮：**添加"拒接"按钮，将其点击事件分别绑定至 [reject](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#reject) 方法。
+2. **Add the Reject button:** add a "Reject" button and bind its tap event to the [reject](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#reject) method.
 
    ``` typescript
     <template>
      <view class="btn" @tap="handleReject">
        <image class="btn-img" :src="REJECT_SRC"></image>
-       <text class="btn-text">拒绝</text>
+       <text class="btn-text">Reject</text>
      </view>
    </template>
 
    <script setup lang="ts">
-     import REJECT_SRC from "../../../static/icon/hangup.png"; // 替换为您项目的真实图标路径
+     import REJECT_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';
 
      const { reject } = useCallState();
@@ -199,7 +185,7 @@ const handleLogin = () => {
      }
    </style>
    ```
-3. **拨打方取消通话或您拒接时销毁界面：**无论拨打方取消呼叫，还是接收方拒接，均会触发 `onCallEnded`（通话结束）事件。建议监听此事件，以便在通话终止时及时关闭（销毁）通话界面。
+3. **Destroy the view when the caller cancels or you reject the call:** whether the caller cancels the call or the callee rejects it, the `onCallEnded` (call ended) event is triggered. We recommend listening to this event so you can close (destroy) the call view promptly when the call ends.
 
    ``` typescript
    import { useCallState } from '@/uni_modules/tuikit-atomic-x/state/CallState';
@@ -209,7 +195,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) => {
@@ -223,37 +210,37 @@ 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
        }
      });
    }
 
    ```
 
-### 步骤3：来电唤起通话界面
+### Step 3: Bring up the call view on incoming call
 
-在您的项目中监听来电事件（`onCallReceived`），当收到来电时唤起通话页面。实现方式如下：
-1. **监听来电事件：**订阅 `onCallReceived` 事件。
+Listen to the incoming-call event (`onCallReceived`) in your project and navigate to the call page when a call arrives. Implement it as follows:
+1. **Listen to the incoming-call event:** subscribe to `onCallReceived`.
 
-2. **唤起通话界面：**收到来电唤起通话页面。
+2. **Bring up the call view:** navigate to the call page when a call arrives.
 
    ``` typescript
    import { useCallState } from '@/uni_modules/tuikit-atomic-x/state/CallState';
 
    const { addCallListener } = useCallState();
 
-   // 通话页面路由
-   const CALL_PAGE = '/uni_modules/tuikit-atomic-x/pages/call'; // 替换为您在步骤1 中创建的真实路径
-   // 建议在应用初始化的时候执行该方法
+   // Call page route
+   const CALL_PAGE = '/uni_modules/tuikit-atomic-x/pages/call'; // Replace with the actual path you created in Step 1
+   // It is recommended to call this method during application initialization
    export function initCallService() {
      addCallListener('onCallReceived', (event: string) => {
        uni.navigateTo({
@@ -263,12 +250,12 @@ const handleLogin = () => {
    }
    ```
 
-### 步骤4：来电播放提示
+### Step 4: Play the ringtone on incoming call
 
-在您的项目中监听来电事件（`onCallReceived`），当收到来电时播放铃声。实现方式如下：
-1. **监听来电事件：**订阅 `onCallReceived` 事件。
+Listen to the incoming-call event (`onCallReceived`) in your project and play a ringtone when a call arrives. Implement it as follows:
+1. **Listen to the incoming-call event:** subscribe to `onCallReceived`.
 
-2. **唤起通话界面：**收到来电播放铃声。
+2. **Play the ringtone:** play a ringtone when the incoming call arrives.
 
    ``` typescript
    import { watch } from 'vue';
@@ -277,7 +264,7 @@ const handleLogin = () => {
    const { addCallListener, selfInfo } = useCallState();
 
    /**
-    * 创建或获取音频播放实例（单例复用）
+    * Create or get the audio playback instance (reused as a singleton)
     */
    function ensureAudioContext() {
      if (!uni.$innerAudioContext) {
@@ -291,8 +278,8 @@ const handleLogin = () => {
    }
 
    /**
-    * 播放铃声
-    * @param src - 铃声文件路径
+    * Play the ringtone
+    * @param src - path to the ringtone file
     */
    function playRingtone(src: string) {
      const ctx = ensureAudioContext();
@@ -312,7 +299,7 @@ const handleLogin = () => {
    }
 
    /**
-    * 停止铃声
+    * Stop the ringtone
     */
    function stopRingtone() {
      if (uni.$innerAudioContext) {
@@ -327,35 +314,35 @@ const handleLogin = () => {
 
    export { playRingtone, stopRingtone };
 
-   // 在应用启动的时候执行该方法
+   // Call this method during application startup
    export function initCallService() {
      ensureAudioContext();
 
-     // 监听通话状态变化：接通(status=2)或结束(status=0)时停止铃声
+     // Watch for call state changes: stop the ringtone when connected (status=2) or ended (status=0)
      watch(() => selfInfo.value, (newVal) => {
        if (newVal?.status === 2 || newVal?.status === 0) {
          stopRingtone();
        }
      }, { immediate: true, deep: true });
 
-     // 收到来电时播放铃声
+     // Play the ringtone when a call is received
      addCallListener('onCallReceived', () => {
        playRingtone('/static/audio/ring.mp3');
      });
 
-     // 通话结束时停止铃声
+     // Stop the ringtone when the call ends
      addCallListener('onCallEnded', () => {
        stopRingtone();
      });
    }
    ```
 
-### 步骤5：来电打开媒体设备
+### Step 5: Turn on media devices on incoming call
 
-收到来电时，您可以通过 `onCallReceived` 事件获取本次通话的媒体类型。为了提供更佳的用户体验，建议在唤起通话界面时，根据通话类型预先开启对应的媒体设备。实现步骤如下：
-1. **监听来电事件**：订阅 `onCallReceived` 事件。
+When an incoming call arrives, you can obtain the media type of the call from the `onCallReceived` event. For a better user experience, we recommend turning on the corresponding media devices in advance when bringing up the call view. Steps:
+1. **Listen to the incoming-call event:** subscribe to `onCallReceived`.
 
-2. **根据来电媒体类型打开设备：**若为语音通话仅开启麦克风，若为视频通话开启麦克风和摄像头。
+2. **Turn on devices based on the media type:** for audio calls, only turn on the microphone; for video calls, turn on both the microphone and the camera.
 
    ``` typescript
    import { useCallState } from '@/uni_modules/tuikit-atomic-x/state/CallState';
@@ -364,9 +351,9 @@ const handleLogin = () => {
    const { addCallListener } = useCallState();
    const { openLocalCamera, openLocalMicrophone } = useDeviceState();
 
-   // 通话页面路由
-   const CALL_PAGE = '/uni_modules/tuikit-atomic-x/pages/call'; // 替换为您在步骤1 中创建的真实路径
-   // 在应用启动的时候执行该方法
+   // Call page route
+   const CALL_PAGE = '/uni_modules/tuikit-atomic-x/pages/call'; // Replace with the actual path you created in Step 1
+   // Call this method during application startup
    export function initCallService() {
      addCallListener('onCallReceived', (event: string) => {
        let res: any;
@@ -376,13 +363,13 @@ const handleLogin = () => {
          console.error('[CallService] onCallReceived parse error:', error);
          return;
        }
-       // 视频通话时打开摄像头
+       // Turn on the camera for video calls
        if (res.mediaType === 1) {
          openLocalCamera({ isFront: true });
        }
-       // 打开麦克风
+       // Turn on the microphone
        openLocalMicrophone();
-       // 跳转到通话页面
+       // Navigate to the call page
        uni.navigateTo({
          url: CALL_PAGE
        });
@@ -390,19 +377,19 @@ const handleLogin = () => {
    }
    ```
 
-### 运行效果
+### Result
 
-当您完成以上 6 步后，"接听一通电话"运行效果如下：
+After the 6 steps above, the "Answer a call" flow looks as follows:
 
-## 定制页面
+## Customize the UI
 
-**CallCoreView** 提供了完善的 UI 定制能力，支持头像及音量提示等图标的自由替换。**为助力快速集成，您可以直接从 **[GitHub](https://github.com/Tencent-RTC/TUIKit_uni-app/tree/main/App)**下载。这些图标由我们的设计师专为 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/tree/main/App)**. 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">
@@ -421,7 +408,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) {
@@ -431,7 +418,7 @@ const handleLogin = () => {
   }
 
   /**
-   * 批量转换对象中所有 value 的路径为绝对路径
+   * Convert all values of an icon map to absolute paths in a batch
    */
   function convertIconPaths(iconMap) {
     const result = {};
@@ -441,10 +428,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(() => {
@@ -464,30 +451,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
 
@@ -508,7 +492,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) {
@@ -518,7 +502,7 @@ const handleLogin = () => {
      }
 
      /**
-      * 批量转换对象中所有 value 的路径为绝对路径
+      * Convert all values of an icon map to absolute paths in a batch
       */
      function convertIconPaths(iconMap) {
        const result = {};
@@ -529,8 +513,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(() => {
@@ -549,23 +533,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">
@@ -593,7 +577,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) {
@@ -603,7 +587,7 @@ const handleLogin = () => {
   }
 
   /**
-   * 下载头像并缓存，返回本地绝对路径
+   * Download and cache the avatar; return the local absolute path
    */
   function downloadAvatar(url) {
     if (avatarCache[url]) {
@@ -628,18 +612,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) {
@@ -666,7 +650,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);
@@ -688,23 +672,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>
@@ -724,7 +708,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) {
@@ -733,8 +717,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({
@@ -752,23 +736,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">
@@ -814,12 +798,12 @@ const handleLogin = () => {
 </style>
 ```
 
-## 更多功能
+## More features
 
-### 自定义用户头像/昵称
+### Customize the user's avatar and nickname
 
-通话开始前，您可以通过 [setSelfInfo](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#setSelfInfo) 方法，设置自己的昵称和头像。
-- **setSelfInfo 示例代码**：
+Before a call starts, you can set your own nickname and avatar via the [setSelfInfo](https://liteav.sdk.qcloud.com/doc/product/tuikit/atomic-x/uni-app/zh/v1.0/api/index.html#setSelfInfo) method.
+- Example code for `setSelfInfo`:
 
    ``` typescript
    import { useLoginState } from "@/uni_modules/tuikit-atomic-x/state/LoginState";
@@ -827,7 +811,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({
@@ -837,29 +821,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>
@@ -880,10 +861,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;
@@ -911,42 +892,39 @@ 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. |
 
-恭喜您，已经完成了“接听一通电话”，接下来，您可参考 拨打第一通电话 实现拨打电话功能。
+## Next step
 
-## 常见问题
+Congratulations, you have completed "Answer 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>