@tencentcloud/sdk-mcp 1.3.9 → 1.4.0

package/resource/doc/roomkit/vue/features/device-detection.md

@@ -9,10 +9,8 @@
 
 - **扬声器校准**：通过播放测试音，确认输出设备及其音量设置。
 
-
 ## 前提条件
-- 用户已经通过 [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState) 完成登录鉴权，请参考 [接入概览](https://write.woa.com/document/197379797539790848)。
-
+- 用户已经通过 [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState) 完成登录鉴权，请参考 接入概览。
 
 ## 实现设备检测功能
 
@@ -36,13 +34,13 @@
     <!-- 摄像头选择 -->
     <div class="camera-selector">
       <label>选择摄像头</label>
-      <select 
-        :value="currentCamera?.deviceId" 
+      <select
+        :value="currentCamera?.deviceId"
         @change="handleCameraChange"
         :disabled="isCameraTestLoading"
       >
-        <option 
-          v-for="camera in cameraList" 
+        <option
+          v-for="camera in cameraList"
           :key="camera.deviceId"
           :value="camera.deviceId"
         >
@@ -54,7 +52,7 @@
     <!-- 控制按钮 -->
     <div class="control-buttons">
       <button @click="getCameraList">获取摄像头列表</button>
-      <button 
+      <button
         @click="toggleCameraTest"
         :disabled="isCameraTestLoading"
       >
@@ -67,14 +65,14 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import { IconWarning } from '@tencentcloud/uikit-base-component-vue3';
-import { 
+import {
   useLoginState,
-  useDeviceState, 
+  useDeviceState,
   DeviceStatus,
   DeviceError,
 } from 'tuikit-atomicx-vue3/room';
 
-const { 
+const {
   isCameraTesting,
   isCameraTestLoading,
   cameraList,
@@ -129,8 +127,8 @@ const handleCameraChange = async (event: Event) => {
     <div class="volume-display">
       <div class="volume-label">麦克风音量</div>
       <div class="volume-bar-container">
-        <div 
-          class="volume-bar" 
+        <div
+          class="volume-bar"
           :style="{ width: `${testingMicVolume}%` }"
           :class="volumeClass"
         />
@@ -141,13 +139,13 @@ const handleCameraChange = async (event: Event) => {
     <!-- 麦克风选择 -->
     <div class="microphone-selector">
       <label>选择麦克风</label>
-      <select 
-        :value="currentMicrophone?.deviceId" 
+      <select
+        :value="currentMicrophone?.deviceId"
         @change="handleMicrophoneChange"
         :disabled="isMicrophoneTesting"
       >
-        <option 
-          v-for="mic in microphoneList" 
+        <option
+          v-for="mic in microphoneList"
           :key="mic.deviceId"
           :value="mic.deviceId"
         >
@@ -158,12 +156,12 @@ const handleCameraChange = async (event: Event) => {
 
     <!-- 控制按钮 -->
     <div class="control-buttons">
-      <button 
+      <button
         @click="getMicrophoneList"
       >
         获取设备
       </button>
-      <button 
+      <button
         @click="toggleMicrophoneTest"
       >
         {{ isMicrophoneTesting ? '停止测试' : '开始测试' }}
@@ -179,12 +177,12 @@ const handleCameraChange = async (event: Event) => {
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
-import { 
-  useDeviceState, 
+import {
+  useDeviceState,
   DeviceError,
 } from 'tuikit-atomicx-vue3/room';
 
-const { 
+const {
   isMicrophoneTesting,
   testingMicVolume,
   microphoneList,
@@ -251,13 +249,13 @@ const handleMicrophoneChange = async (event: Event) => {
     <!-- 扬声器选择 -->
     <div class="speaker-selector">
       <label>选择扬声器</label>
-      <select 
-        :value="currentSpeaker?.deviceId" 
+      <select
+        :value="currentSpeaker?.deviceId"
         @change="handleSpeakerChange"
         :disabled="isSpeakerTesting"
       >
-        <option 
-          v-for="speaker in speakerList" 
+        <option
+          v-for="speaker in speakerList"
           :key="speaker.deviceId"
           :value="speaker.deviceId"
         >
@@ -269,13 +267,13 @@ const handleMicrophoneChange = async (event: Event) => {
     <!-- 控制按钮 -->
     <div class="control-buttons">
       <button @click="getSpeakerList">获取扬声器列表</button>
-      <button 
+      <button
         @click="toggleSpeakerTest"
         :disabled="isSpeakerTesting"
       >
         {{ isSpeakerTesting ? '正在播放...' : '播放测试音频' }}
       </button>
-      <button 
+      <button
         v-if="isSpeakerTesting"
         @click="stopSpeakerTest"
       >
@@ -294,7 +292,7 @@ const handleMicrophoneChange = async (event: Event) => {
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useDeviceState } from 'tuikit-atomicx-vue3/room';
 
-const { 
+const {
   isSpeakerTesting,
   speakerList,
   currentSpeaker,
@@ -345,24 +343,9 @@ const handleSpeakerChange = async (event: Event) => {
 ```
 
 ## 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" >**useDeviceState**</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-DeviceState)</td>
-</tr>
-</table>
-
+| **State/Component** | **功能描述** | **API 文档** |
+| --- | --- | --- |
+| **useDeviceState** | 包含音视频设备状态，音视频设备列表及操作接口。 | [API 文档](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) |
 
 ## 常见问题
 
@@ -377,7 +360,6 @@ const handleSpeakerChange = async (event: Event) => {
 
 - **浏览器不支持：**使用 Chrome、Edge 等现代浏览器。
 
-
 ### 麦克风测试时音量一直为 0？
 
 可能的原因包括：

package/resource/doc/roomkit/vue/features/device-state.md

@@ -9,9 +9,8 @@
 
 - **网络质量监控：**提供包含延迟、丢包率在内的多维度网络信息。
 
-
 ## 前提条件
-- 用户已经通过 [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState) 完成登录鉴权，请参考 [接入概览](https://write.woa.com/document/197379797539790848)。
+- 用户已经通过 [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState) 完成登录鉴权，请参考 接入概览。
 
 - 若在 `iframe` 中集成，需在标签中声明权限。
 
@@ -76,11 +75,10 @@ watch(currentCamera, (camera) => {
 ```
 
 > **说明：**
-> 
+>
 
 > 调用 [setCurrentCamera](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setCurrentCamera) 切换设备时，如果摄像头已开启，Atomicx 会自动停止当前设备的采集，并使用新设备重新开始采集，视频流会无缝切换。如果切换失败，会保持使用原设备。
-> 
-
+>
 
 #### 移动端切换摄像头示例
 
@@ -98,7 +96,7 @@ const toggleCamera = async () => {
     console.warn('前后置摄像头切换仅在移动端支持');
     return;
   }
-  
+
   // 切换到相反的摄像头
   await switchCamera({ isFrontCamera: !isFrontCamera.value });
   console.log(`已切换到${isFrontCamera.value ? '前置' : '后置'}摄像头`);
@@ -110,10 +108,10 @@ const toggleCamera = async () => {
 当摄像头采集发生错误时，您可以通过 [cameraLastError](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#cameraLastError) 属性获取错误信息。
 
 > 注意：
-> 
+>
 
 > 常见的摄像头错误包括 `NoSystemPermission` (无系统权限) 和 `OccupiedError`（设备被占用）。您应基于此属性向用户展示明确的错误提示。
-> 
+>
 
 ``` typescript
 import { useDeviceState, DeviceError } from 'tuikit-atomicx-vue3/room';
@@ -165,11 +163,11 @@ const toggleMicrophone = async () => {
 ``` typescript
 import { useDeviceState } from 'tuikit-atomicx-vue3/room';
 
-const { 
-  microphoneList, 
-  currentMicrophone, 
-  getMicrophoneList, 
-  setCurrentMicrophone 
+const {
+  microphoneList,
+  currentMicrophone,
+  getMicrophoneList,
+  setCurrentMicrophone
 } = useDeviceState();
 
 // 获取麦克风列表
@@ -217,9 +215,9 @@ watch(captureVolume, (volume) => {
   <div class="mic-volume">
     <label>麦克风音量</label>
     <div class="volume-bar-container">
-      <div 
-        class="volume-bar" 
-        :style="{ width: `${currentMicVolume}%` }" 
+      <div
+        class="volume-bar"
+        :style="{ width: `${currentMicVolume}%` }"
       />
     </div>
     <span>{{ currentMicVolume }}</span>
@@ -285,11 +283,11 @@ watch(microphoneLastError, (error) => {
 您可以通过 [speakerList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#speakerList) 获取所有可用的扬声器设备，使用 [setCurrentSpeaker](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setCurrentSpeaker) 方法切换当前使用的扬声器。
 ``` typescript
 import { useDeviceState } from 'tuikit-atomicx-vue3/room';
-const { 
-  speakerList, 
-  currentSpeaker, 
-  getSpeakerList, 
-  setCurrentSpeaker 
+const {
+  speakerList,
+  currentSpeaker,
+  getSpeakerList,
+  setCurrentSpeaker
 } = useDeviceState();
 
 // 获取扬声器列表
@@ -334,10 +332,10 @@ watch(outputVolume, (volume) => {
 使用 [useDeviceState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) 中的 [networkInfo](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#networkInfo) 数据，您可以实时监控本地用户的网络质量。
 
 > **说明：**
-> 
+>
 
 > 仅当本地用户通过 [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#joinRoom)加入房间并打开麦克风或摄像头时，[networkInfo](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#networkInfo) 中才可以拿到有效数据。
-> 
+>
 
 ``` typescript
 <template>
@@ -436,24 +434,9 @@ const networkText = computed(() => {
 ```
 
 ## 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" >**useDeviceState**</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-DeviceState)</td>
-</tr>
-</table>
-
+| **State/Component** | **功能描述** | **API 文档** |
+| --- | --- | --- |
+| **useDeviceState** | 包含音视频设备状态，音视频设备列表及操作接口。 | [API 文档](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) |
 
 ## 常见问题
 
@@ -468,13 +451,10 @@ const networkText = computed(() => {
 
 - **播放端受限：**由于缺少扬声器设备，用户将无法听到房间内其他参会者的音频。
 
-
    **仍然可以使用的功能：**
 
-
    仅观看模式：用户依然可以观看远端参会者分享的视频流或屏幕共享画面。
 
-
 ### 如何实现设备热插拔检测？
 
 Atomicx 已经内置了设备热插拔检测功能，当媒体设备插拔时，设备列表和当前设备数据会自动更新。

package/resource/doc/roomkit/vue/features/free-beauty-panel.md

@@ -7,15 +7,13 @@
 
 - **在线教育：** 教师和学生保持整洁自然的形象，营造良好的课堂氛围。
 
-
 ## 前提条件
-- **用户状态：** 用户已经通过 useLoginState 完成登录鉴权，参考 [接入概览](https://write.woa.com/document/197379797539790848)，处于 **已登录** 状态。
+- **用户状态：** 用户已经通过 useLoginState 完成登录鉴权，参考 接入概览，处于 **已登录** 状态。
 
 - **环境依赖：** 项目已引入 `tuikit-atomicx-vue3`。
 
 - **设备要求：** 需要有可用的摄像头设备，并且用户已授权摄像头访问权限。如果用户拒绝授权，虚拟背景功能将无法使用。
 
-
 ## 实现基础美颜功能
 
 本功能提供两种集成方案，您可以根据业务需求选择最适合的一种：
@@ -23,15 +21,11 @@
 
 - **方案二（高级）：** 使用底层 API 自定义集成。基于 atomicx-core SDK API [useFreeBeautyState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-FreeBeautyState) 状态钩子自行实现 UI 和交互逻辑，灵活度最高。
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/70883e08df0d11f08304525400454e06.png)
-
-
 ## 方案一：使用 UI 组件快速集成
 
 `tuikit-atomicx-vue3` 提供了核心美颜设置面板组件：
 - [**FreeBeautyPanel**](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/FreeBeautyPanel)**：** 基础美颜配置面板，包含磨皮、美白、红润的参数调节功能。
 
-
 ### 步骤1：引入组件
 ``` typescript
 import { FreeBeautyPanel } from 'tuikit-atomicx-vue3/room';
@@ -44,10 +38,10 @@ import { FreeBeautyPanel } from 'tuikit-atomicx-vue3/room';
 **以下示例展示了如何实现一个点击按钮弹出美颜设置的完整交互：**
 
 > **注意：**
-> 
+>
 
-> 所有 TUIKit 组件必须包裹在 [UIKitProvider](https://write.woa.com/document/197379797539790848) 内部，否则将无法获取上下文依赖，导致样式异常。
-> 
+> 所有 TUIKit 组件必须包裹在 UIKitProvider 内部，否则将无法获取上下文依赖，导致样式异常。
+>
 
 ``` typescript
 <template>
@@ -63,7 +57,7 @@ import { FreeBeautyPanel } from 'tuikit-atomicx-vue3/room';
             <span>基础美颜</span>
             <button @click="showSettings = false">关闭</button>
           </div>
-          
+
           <div class="modal-body">
             <!-- 3. 引入面板组件 -->
             <!-- @close 事件：当用户点击面板内的关闭按钮（如有）时触发 -->
@@ -115,7 +109,6 @@ const openBeautySettings = () => {
 
 - **保存生效：** 关闭面板（触发 `@close` 事件）时自动保存当前设置，使其对远端生效。
 
-
 ## 方案二：使用底层 API 自定义集成
 
 本节主要介绍如何通过 atomicx-core SDK API [useFreeBeautyState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-FreeBeautyState) 接口来实现基础美颜。
@@ -125,10 +118,10 @@ const openBeautySettings = () => {
 在用户调节美颜参数（例如拖动滑块）时，使用 [setFreeBeauty](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setFreeBeauty) 进行实时预览。此时效果仅本地可见，不会传输给远端用户。
 
 > **注意：**
-> 
+>
 
 > 参数取值范围为 0-100。
-> 
+>
 
 ``` typescript
 import { useFreeBeautyState } from 'tuikit-atomicx-vue3/room';
@@ -151,10 +144,10 @@ const updatePreview = async (beauty: number, white: number, ruddy: number) => {
 用户确认预览效果满意后，调用 [saveBeautySetting](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#saveBeautySetting) 将当前配置应用到视频流中。此时远端用户可以看到美颜效果。
 
 > **注意：**
-> 
+>
 
 > 虚拟背景功能依赖摄像头设备。可使用 [useDeviceState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) 检查设备状态。
-> 
+>
 > - [cameraList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#cameraList)：当前可用的摄像头设备列表，如果列表为空，说明未检测到摄像头或摄像头权限被禁止。
 
 ``` typescript
@@ -180,7 +173,7 @@ const closeBeauty = async () => {
     whitenessLevel: 0,
     ruddinessLevel: 0
   });
-  
+
   // 2. 保存生效
   await saveBeautySetting();
 };
@@ -195,7 +188,6 @@ const closeBeauty = async () => {
 
 - **性能消耗：** 开启美颜会增加一定的 CPU 和 GPU 负载，建议在低端设备上引导用户适度使用。
 
-
 ## 常见问题
 
 ### **为什么调节美颜后远端看不到效果？**
@@ -213,26 +205,11 @@ const closeBeauty = async () => {
 
 - 进出房间： 退出房间时会自动重置所有美颜参数，无需开发者手动清理。
 
-
 ## **示例项目**
 
 腾讯云在 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" >**useFreeBeautyState**</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-FreeBeautyState)</td>
-</tr>
-</table>
+| **State/Component** | **功能描述** | **API 文档** |
+| --- | --- | --- |
+| **useFreeBeautyState** | 免费美颜功能管理 | [API 文档](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-FreeBeautyState) |