@tencentcloud/sdk-mcp 1.3.8 → 1.4.0

package/resource/doc/roomkit/vue/features/virtual-background.md

@@ -9,9 +9,8 @@
 
 - **趣味互动：** 社交场景下，用户更换有趣的背景图片，增加互动乐趣。
 
-
 ## 前提条件
-- **用户状态：** 用户已经通过 useLoginState 完成登录鉴权，参考 [接入概览](https://write.woa.com/document/197379797539790848)，处于**已登录**状态。
+- **用户状态：** 用户已经通过 useLoginState 完成登录鉴权，参考 接入概览，处于**已登录**状态。
 
 - **环境依赖：** 项目已引入 `tuikit-atomicx-vue3`。
 
@@ -21,10 +20,9 @@
 
   - 将 `node_modules/trtc-sdk-v5/assets` 目录发布至 CDN 或者静态资源服务器中，详情可见 [SDK 文档](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-36-advanced-virtual-background.html)。
 
-  - 若选择 [方案一：使用 UI 组件快速集成](https://write.woa.com/#1362aad9-2836-4931-b947-2f0f7836d284)，在使用 [VirtualBackgroundPanel](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/VirtualBackgroundPanel) 组件时，需要通过 props 传入 `assetsPath` 静态资源地址。
-
-  - 若选择 [方案二：使用底层 API 自定义集成](https://write.woa.com/#b941dd3e-0f43-48af-8aa4-8818ab74a80e)，在使用 [initVirtualBackground](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#initVirtualBackground) 接口时，需要传入 `assetsPath` 静态资源地址。
+  - 若选择 方案一：使用 UI 组件快速集成，在使用 [VirtualBackgroundPanel](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/VirtualBackgroundPanel) 组件时，需要通过 props 传入 `assetsPath` 静态资源地址。
 
+  - 若选择 方案二：使用底层 API 自定义集成，在使用 [initVirtualBackground](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#initVirtualBackground) 接口时，需要传入 `assetsPath` 静态资源地址。
 
 ## 实现虚拟背景功能
 
@@ -33,17 +31,13 @@
 
 - **方案二（高级）：** 使用底层 API 自定义集成。基于 atomicx-core SDK API [useVirtualBackgroundState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-VirtualBackgroundState) 状态钩子自行实现 UI 和交互逻辑，灵活度最高。
 
-   ![虚拟背景](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/1d881d05dee711f09143525400bf7822.png)
-
    虚拟背景
 
-
 ## 方案一：使用 UI 组件快速集成
 
 `tuikit-atomicx-vue3` 提供了核心设置面板组件：
 - [**VirtualBackgroundPanel**](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/VirtualBackgroundPanel)**：** 虚拟背景的配置面板，包含背景虚化、图片选择和预览功能。
 
-
 ### 步骤1：引入组件
 ``` typescript
 import { VirtualBackgroundPanel } from 'tuikit-atomicx-vue3/room';
@@ -56,10 +50,10 @@ import { VirtualBackgroundPanel } from 'tuikit-atomicx-vue3/room';
 **以下示例展示了如何实现一个点击按钮弹出虚拟背景设置的完整交互：**
 
 > **注意：**
-> 
+>
 > - 将 `node_modules/trtc-sdk-v5/assets` 目录发布至 CDN 或者静态资源服务器中，详情可见 [SDK 文档](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-36-advanced-virtual-background.html)。
 > - 在使用 [VirtualBackgroundPanel](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/VirtualBackgroundPanel) 组件时，通过 props 传入 `assetsPath` 静态资源地址。
-> - 所有 TUIKit 组件必须包裹在 [UIKitProvider](https://write.woa.com/document/197379797539790848) 内部，否则将无法获取上下文依赖，导致样式异常。
+> - 所有 TUIKit 组件必须包裹在 UIKitProvider 内部，否则将无法获取上下文依赖，导致样式异常。
 
 ``` typescript
 <template>
@@ -75,7 +69,7 @@ import { VirtualBackgroundPanel } from 'tuikit-atomicx-vue3/room';
             <span>虚拟背景</span>
             <button @click="showSettings = false">关闭</button>
           </div>
-          
+
           <div class="modal-body">
             <!-- 3. 引入面板组件 -->
             <!-- @close 事件：当用户点击面板内的关闭按钮（如有）时触发 -->
@@ -102,7 +96,7 @@ const openSettings = () => {
     alert('当前浏览器不支持虚拟背景');
     return;
   }
-  
+
   // 2. 检查是否有可用摄像头
   if (cameraList.value.length === 0) {
     alert('未检测到摄像头，无法设置虚拟背景');
@@ -128,7 +122,7 @@ const openSettings = () => {
 在调用虚拟背景功能前，必须先检查浏览器是否支持，并初始化资源路径。
 
 > **注意：**
-> 
+>
 > - 将 node_modules/trtc-sdk-v5/assets 目录发布至 CDN 或者静态资源服务器中，详情可见 [SDK 文档](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-36-advanced-virtual-background.html)。
 > - 在使用 [initVirtualBackground](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#initVirtualBackground) 接口时，传入 assetsPath 静态资源地址。
 > - 虚拟背景功能依赖摄像头设备。可使用 [useDeviceState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) 检查设备状态。
@@ -162,10 +156,10 @@ onMounted(async () => {
 在用户确认应用背景前，通常需要先预览效果。使用 [setVirtualBackground](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setVirtualBackground) 方法可以设置预览效果，此时不会应用到远端可见的视频流中。
 
 > **说明：**
-> 
+>
 
 > 调用 `setVirtualBackground` 仅在本地预览画面生效，远端用户不会看到虚拟背景效果，需调用 `saveVirtualBackground` 后才会同步到远端视频流。
-> 
+>
 
 ``` typescript
 import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3/room';
@@ -234,7 +228,6 @@ const disableVirtualBackground = async () => {
 
 - **图片格式：** 自定义背景图片建议使用 `jpg` 或 `png` 格式，且分辨率不宜过大（建议 1920x1080 以内），以免影响加载速度和内存占用。
 
-
 ## 常见问题
 
 ### **在 Chrome 中运行 Demo 发现画面颠倒且卡顿？**
@@ -262,20 +255,6 @@ WebRTC 相关功能通常要求在 HTTPS 环境下运行，或者是 `localhost`
 腾讯云在 GitHub 上提供了示例项目 [atomicx-vite-vue3-ts](https://github.com/Tencent-RTC/TUIRoomKit/tree/main/Web/example/atomicx-vite-vue3-ts) ，您可以参考以实现完整的 RoomKit 功能。
 
 ## API 文档
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**State/Component**</td>
-
-<td rowspan="1" colSpan="1" >**功能描述**</td>
-
-<td rowspan="1" colSpan="1" >**API 文档**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useVirtualBackgroundState**</td>
-
-<td rowspan="1" colSpan="1" >虚拟背景管理</td>
-
-<td rowspan="1" colSpan="1" >[API 文档](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-VirtualBackgroundState)</td>
-</tr>
-</table>
+| **State/Component** | **功能描述** | **API 文档** |
+| --- | --- | --- |
+| **useVirtualBackgroundState** | 虚拟背景管理 | [API 文档](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-VirtualBackgroundState) |