@tencent-rtc/mcp 1.3.8 → 1.4.0

package/resource/doc/roomkit/vue/features/screen-share.md

@@ -1,9 +1,9 @@
 This document guides you on how to use Atomicx to implement screen sharing capabilities and handle room interactions based on screen sharing status.
 
 ## Prerequisites
-- The user has completed login authentication through [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState), please refer to [Integration Overview](https://write.woa.com/document/197379797539790848).
+- The user has completed login authentication through [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState), please refer to Integration Overview.
 
-- The user has entered a room through [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState), please refer to [Room Management](https://write.woa.com/document/197379861957083136).
+- The user has entered a room through [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState), please refer to Room Management.
 
 - If integrating in `iframe`, permissions need to be declared in the tag.
 
@@ -17,8 +17,6 @@ This document guides you on how to use Atomicx to implement screen sharing capab
 
 Use the [startScreenShare](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#startScreenShare) method to start screen sharing. In the Web environment, you will see the browser's screen selector where you can choose to share the entire screen, application window, or browser tab.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/3233e9a6dbe911f0a38652540044a08e.png)
-
 ``` typescript
 import { useDeviceState } from 'tuikit-atomicx-vue3/room';
 const { startScreenShare } = useDeviceState();
@@ -38,8 +36,6 @@ const handleStartShare = async () => {
 
 By setting the `screenAudio: true` parameter, you can share system audio while screen sharing. This is very useful when sharing videos, presentations, music, and other audio content.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/3e3557c9dbe911f0a4f35254007c27c5.png)
-
 ``` typescript
 import { useDeviceState } from 'tuikit-atomicx-vue3/room';
 const { startScreenShare } = useDeviceState();
@@ -56,55 +52,18 @@ const handleStartScreenShareWithAudio = async () => {
 ```
 
 **Browser Compatibility Notes:**
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Browser</td>
-
-<td rowspan="1" colSpan="1" >System Audio Sharing Support</td>
-
-<td rowspan="1" colSpan="1" >Notes</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Chrome 74+</td>
-
-<td rowspan="1" colSpan="1" >Supported</td>
-
-<td rowspan="1" colSpan="1" >Need to check **Share audio** in selector</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Edge 79+</td>
-
-<td rowspan="1" colSpan="1" >Supported</td>
-
-<td rowspan="1" colSpan="1" >Based on Chromium, same experience as Chrome</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Firefox</td>
-
-<td rowspan="1" colSpan="1" >Not Supported</td>
-
-<td rowspan="1" colSpan="1" >System audio sharing not supported yet</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >Safari</td>
-
-<td rowspan="1" colSpan="1" >Not Supported</td>
-
-<td rowspan="1" colSpan="1" >System audio sharing not supported yet</td>
-</tr>
-</table>
-
+| Browser | System Audio Sharing Support | Notes |
+| --- | --- | --- |
+| Chrome 74+ | Supported | Need to check **Share audio** in selector |
+| Edge 79+ | Supported | Based on Chromium, same experience as Chrome |
+| Firefox | Not Supported | System audio sharing not supported yet |
+| Safari | Not Supported | System audio sharing not supported yet |
 
 > **Note:**
-> 
+>
 
 > System audio sharing requires browser support, and users need to check the **Share audio** option in the screen selector. If the browser doesn't support system audio sharing, the `screenAudio` parameter will be ignored, but screen video sharing will work normally.
-> 
-
+>
 
 ### Step 3: Stop Screen Sharing
 
@@ -114,7 +73,7 @@ Users can stop screen sharing through the following methods:
    ``` typescript
    import { useDeviceState, DeviceStatus } from 'tuikit-atomicx-vue3/room';
    const { screenStatus, stopScreenShare } = useDeviceState();
-   
+
    // Stop screen sharing
    const handleStopScreenShare = async () => {
      try {
@@ -127,17 +86,13 @@ Users can stop screen sharing through the following methods:
    ```
 2. **Click the browser's native "Stop sharing" button**
 
-   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/471f5332dbe911f0809c525400454e06.png)
-
 3. **Close the shared window or tab**
-   
 
    > **Note:**
-   > 
+   >
 
    > When users stop screen sharing using any method, Atomicx will automatically update the [screenStatus](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#screenStatus) state.
-   > 
-
+   >
 
 ### Step 4: Permission Control and State Listening
 
@@ -173,9 +128,9 @@ When detecting that a user in the room has started screen sharing, it is recomme
   <div class="room-container">
     <RoomView :layout-template="layoutTemplate">
       <template #participantViewUI="{ participant, streamType }">
-        <ParticipantViewUI 
-          :participant="participant" 
-          :stream-type="streamType" 
+        <ParticipantViewUI
+          :participant="participant"
+          :stream-type="streamType"
         />
       </template>
     </RoomView>
@@ -184,8 +139,8 @@ When detecting that a user in the room has started screen sharing, it is recomme
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { 
-  RoomView, 
+import {
+  RoomView,
   RoomLayoutTemplate,
   useRoomParticipantState
 } from 'tuikit-atomicx-vue3/room';
@@ -272,32 +227,10 @@ try {
 ```
 
 ## API Documentation
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**State/Component**</td>
-
-<td rowspan="1" colSpan="1" >**Feature Description**</td>
-
-<td rowspan="1" colSpan="1" >**API Documentation**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useDeviceState**</td>
-
-<td rowspan="1" colSpan="1" >Contains audio/video device status, audio/video device list, and operation interfaces.</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useRoomParticipantState**</td>
-
-<td rowspan="1" colSpan="1" >Contains room user data and user management interface.</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState)</td>
-</tr>
-</table>
-
+| **State/Component** | **Feature Description** | **API Documentation** |
+| --- | --- | --- |
+| **useDeviceState** | Contains audio/video device status, audio/video device list, and operation interfaces. | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) |
+| **useRoomParticipantState** | Contains room user data and user management interface. | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState) |
 
 ## Common Questions
 
@@ -308,7 +241,6 @@ try {
 
 - **System Restriction:** Some operating systems do not support sharing audio from specific **application windows**. It is recommended to prioritize selecting **entire screen** or **browser tab**.
 
-
 ### How to detect when users stop screen sharing by clicking the browser's "Stop sharing" button?
 
 Atomicx automatically listens for the browser's stop sharing event and updates the `screenStatus` state. You just need to listen for changes in `screenStatus`:

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

@@ -14,7 +14,7 @@ Virtual background feature allows users to replace their real background with a
 
 ## Prerequisites
 
-- **User Status:** User has completed login authentication through useLoginState, refer to [Integration Overview](https://write.woa.com/document/197379797539790848), and is in **logged in** state.
+- **User Status:** User has completed login authentication through useLoginState, refer to Integration Overview, and is in **logged in** state.
 
 - **Environment Dependencies:** The project has imported `tuikit-atomicx-vue3`.
 
@@ -24,9 +24,9 @@ Virtual background feature allows users to replace their real background with a
 
   - Publish the `node_modules/trtc-sdk-v5/assets` directory to CDN or static resource server, see [SDK Documentation](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-36-advanced-virtual-background.html) for details.
 
-  - If choosing [Solution 1: Quick Integration Using UI Components](https://write.woa.com/#1362aad9-2836-4931-b947-2f0f7836d284), when using the [VirtualBackgroundPanel](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/VirtualBackgroundPanel) component, you need to pass the `assetsPath` static resource address through props.
+  - If choosing Solution 1: Quick Integration Using UI Components, when using the [VirtualBackgroundPanel](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/VirtualBackgroundPanel) component, you need to pass the `assetsPath` static resource address through props.
 
-  - If choosing [Solution 2: Custom Integration Using Underlying API](https://write.woa.com/#b941dd3e-0f43-48af-8aa4-8818ab74a80e), when using the [initVirtualBackground](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#initVirtualBackground) interface, you need to pass the `assetsPath` static resource address.
+  - If choosing Solution 2: Custom Integration Using Underlying API, when using the [initVirtualBackground](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#initVirtualBackground) interface, you need to pass the `assetsPath` static resource address.
 
 ## Implementing Virtual Background Feature
 
@@ -36,8 +36,6 @@ This feature provides two integration solutions, and you can choose the most sui
 
 - **Solution 2 (Advanced):** Custom integration using underlying API. Implement UI and interaction logic based on atomicx-core SDK API [useVirtualBackgroundState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-VirtualBackgroundState) state hook with the highest flexibility.
 
-   ![Virtual Background](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/1d881d05dee711f09143525400bf7822.png)
-
    Virtual Background
 
 ## Solution 1: Quick Integration Using UI Components
@@ -59,10 +57,10 @@ It is generally recommended to place [VirtualBackgroundPanel](https://github.com
 **The following example demonstrates how to implement a complete interaction to open virtual background settings by clicking a button:**
 
 > **Note:**
-> 
+>
 > - Publish the `node_modules/trtc-sdk-v5/assets` directory to CDN or static resource server, see [SDK Documentation](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-36-advanced-virtual-background.html) for details.
 > - When using the [VirtualBackgroundPanel](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/VirtualBackgroundPanel) component, pass the `assetsPath` static resource address through props.
-> - All TUIKit components must be wrapped inside [UIKitProvider](https://write.woa.com/document/197379797539790848), otherwise they will not be able to obtain context dependencies, resulting in style abnormalities.
+> - All TUIKit components must be wrapped inside UIKitProvider, otherwise they will not be able to obtain context dependencies, resulting in style abnormalities.
 
 ```typescript
 <template>
@@ -78,7 +76,7 @@ It is generally recommended to place [VirtualBackgroundPanel](https://github.com
             <span>Virtual Background</span>
             <button @click="showSettings = false">Close</button>
           </div>
-          
+
           <div class="modal-body">
             <!-- 3. Import panel component -->
             <!-- @close event: triggered when user clicks close button inside panel (if any) -->
@@ -105,7 +103,7 @@ const openSettings = () => {
     alert('Current browser does not support virtual background');
     return;
   }
-  
+
   // 2. Check if camera is available
   if (cameraList.value.length === 0) {
     alert('No camera detected, unable to set virtual background');
@@ -131,7 +129,7 @@ This section mainly introduces how to implement virtual background through atomi
 Before calling the virtual background feature, you must first check if the browser supports it and initialize the resource path.
 
 > **Note:**
-> 
+>
 > - Publish the node_modules/trtc-sdk-v5/assets directory to CDN or static resource server, see [SDK Documentation](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-36-advanced-virtual-background.html) for details.
 > - When using the [initVirtualBackground](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#initVirtualBackground) interface, pass the assetsPath static resource address.
 > - Virtual background feature depends on camera devices. You can use [useDeviceState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) to check device status.
@@ -165,10 +163,10 @@ onMounted(async () => {
 Before the user confirms applying the background, a preview effect is usually required. Using the [setVirtualBackground](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setVirtualBackground) method can set the preview effect, which will not be applied to the video stream visible to remote users.
 
 > **Note:**
-> 
+>
 
 > Calling `setVirtualBackground` only takes effect in the local preview screen, remote users will not see the virtual background effect. You need to call `saveVirtualBackground` to synchronize it to the remote video stream.
-> 
+>
 
 ```typescript
 import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3/room';
@@ -268,20 +266,6 @@ Tencent Cloud provides a sample project [atomicx-vite-vue3-ts](https://github.co
 
 ## API Documentation
 
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**State/Component**</td>
-
-<td rowspan="1" colSpan="1" >**Feature Description**</td>
-
-<td rowspan="1" colSpan="1" >**API Documentation**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**useVirtualBackgroundState**</td>
-
-<td rowspan="1" colSpan="1" >Virtual background management</td>
-
-<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-VirtualBackgroundState)</td>
-</tr>
-</table>
+| **State/Component** | **Feature Description** | **API Documentation** |
+| --- | --- | --- |
+| **useVirtualBackgroundState** | Virtual background management | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-VirtualBackgroundState) |