@tencent-rtc/mcp 1.3.9 → 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) |

package/resource/doc/roomkit/vue/integration.md

@@ -1,25 +1,19 @@
 TUIRoomKit is an audio/video room UI application launched by Tencent Cloud. This upgrade introduces a brand new atomic component integration solution, allowing developers to flexibly combine these atomic components to build personalized audio/video room interfaces.
 
 > **Recommended: Use More Efficient AI Integration Assistant**
-> 
+>
 
 > We provide you with a brand new AI integration method. Simply describe your requirements to automatically generate integration code, greatly improving development efficiency.
-> 
+>
 
 > [Click here to experience AI integration immediately](https://cloud.tencent.com/document/product/647/127873)
-> 
-
+>
 
 This document describes how to integrate TUIRoomKit into existing Vue3 projects, and how to customize TUIRoomKit's styles, layouts, and functionality.
 - Desktop Multi-person Conference
 
-  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/31045da2d73111f097cb5254005ef0f7.png)
-
 - H5 Multi-person Conference
 
-  ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/1d8af2f1fd3611f0b5c0525400380f7d.png)
-
-
 ## Prerequisites
 
 ### Service Activation
@@ -29,7 +23,6 @@ Please refer to [Service Activation](https://cloud.tencent.com/document/product/
 
 - **SDKSecretKey**: Application secret key, used for key information in initialization configuration files.
 
-
 ### Environment Preparation
 - **Node.js**: ≥ 18.19.1 (Recommended to use official LTS version).
 
@@ -39,28 +32,22 @@ Please refer to [Service Activation](https://cloud.tencent.com/document/product/
 
 - **Devices**: Camera, microphone, speakers.
 
-
 ## Source Code Integration
 
 ### Step 1: Install Project Dependencies
 
 Install the following dependencies in your business project.
 
-
-
-
 【npm】
 ``` bash
-npm install @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api 
+npm install @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
 ```
 
-
 【pnpm】
 ``` bash
 pnpm install @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
 ```
 
-
 【yarn】
 ``` bash
 yarn add @tencentcloud/roomkit-web-vue3@latest tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api
@@ -96,12 +83,12 @@ Merge the following content into your project's App.vue file to configure global
       <!-- Your business component containing ConferenceMainView -->
     </UIKitProvider>
   </template>
-   
+
   <script setup>
   import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
   import { onMounted } from 'vue';
   import { useLoginState } from 'tuikit-atomicx-vue3/room';
-  
+
   // step 2: User login
   const { login, setSelfInfo } = useLoginState();
   const SDKAppID = 0;    // Note: Please replace with SDKAppID obtained from TRTC Console
@@ -124,14 +111,14 @@ Merge the following content into your project's App.vue file to configure global
     }
   });
   </script>
-  
+
   <!-- Step 3: Configure global styles (These styles override default styles of scaffolded new projects, configure as needed)-->
   <style>
   html, body {
     padding: 0 !important;
     margin: 0 !important;
   }
-  
+
   #app {
     width: 100% !important;
     height: 100% !important;
@@ -147,17 +134,17 @@ Merge the following content into your project's App.vue file to configure global
 
 ### Step 4: Start New Conference
 
-Conference hosts can start a new conference by calling the `conference.start` interface. Other participants can refer to the description in [Step 6](https://write.woa.com/#061c9593-1112-4763-aff2-7289b3af0c41) and call the `conference.join` interface to join the conference.
+Conference hosts can start a new conference by calling the `conference.start` interface. Other participants can refer to the description in Step 6 and call the `conference.join` interface to join the conference.
 
 > **Note:**
-> 
+>
 
 > Please refer to Step 3 and call the `conference.start` interface to start a conference after successful user login.
-> 
+>
 
 ``` typescript
 import { conference } from '@tencentcloud/roomkit-web-vue3';
-const startConference = async () => {  
+const startConference = async () => {
   await conference.start({
     roomId: '123456',   // Please replace with your real roomId
     options: {
@@ -170,13 +157,13 @@ startConference();
 
 ### Step 5: Join Existing Conference
 
-Participants can join a conference started by the conference host in [Step 4](https://write.woa.com/#7e2fb3c2-2b17-4445-985d-4af641ff66be) by calling the `conference.join` interface and filling in the corresponding roomId parameter.
+Participants can join a conference started by the conference host in Step 4 by calling the `conference.join` interface and filling in the corresponding roomId parameter.
 
 > **Note:**
-> 
+>
 
 > Please refer to Step 3 and call the `conference.join` interface to join a conference after successful user login.
-> 
+>
 
 ``` typescript
 import { conference } from '@tencentcloud/roomkit-web-vue3';
@@ -190,21 +177,16 @@ joinConference();
 
 ## Start Project
 
-
-
-
 【npm】
 ``` bash
 npm run dev
 ```
 
-
 【pnpm】
 ``` bash
 pnpm run dev
 ```
 
-
 【yarn】
 ``` bash
 yarn run dev
@@ -212,45 +194,21 @@ yarn run dev
 
 After successful startup, please open the debug address (usually http://localhost:5173) in your browser to access the application. You will see the conference interface as shown below:
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/7986ed3bfd3711f098c8525400370dda.png)
-
-
 ## Quick UI Customization
 
 ### Theme and Language
 
 Modify the default values of theme and language by configuring the parameters of `UIKitProvider` in App.vue.
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >UIKitProvider Parameter</td>
-
-<td rowspan="1" colSpan="1" >Available Values</td>
-
-<td rowspan="1" colSpan="1" >Default Value</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >theme</td>
-
-<td rowspan="1" colSpan="1" >"light" \| "dark"</td>
-
-<td rowspan="1" colSpan="1" >"light"</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >language</td>
-
-<td rowspan="1" colSpan="1" >"zh-CN" \| "en-US"</td>
-
-<td rowspan="1" colSpan="1" >"en-US"</td>
-</tr>
-</table>
+| UIKitProvider Parameter | Available Values | Default Value |
+| --- | --- | --- |
+| theme | "light" \\| "dark" | "light" |
+| language | "zh-CN" \\| "en-US" | "en-US" |
 
 ``` typescript
 <UIKitProvider theme="light" language="en-US">
   <router-view />
 </UIKitProvider>
- 
+
 <script setup lang="ts">
 import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
 ```
@@ -263,15 +221,10 @@ Step 1: Use [Account Management > Import Multiple Accounts](https://cloud.tencen
 
 Step 2: Use [Friend Management > Import Friends](https://cloud.tencent.com/document/product/269/8301) REST API interface to batch import user relationship chains;
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/c8e55003fd8611f08080525400074c32.png)
-
-
 ## TUIRoomKit Interface Customization
 
 ### Source Code Export
 
-
-
 【Vue3】
 1. Execute source code export script, default copy path is `./src/components/RoomKit`
 
@@ -280,9 +233,6 @@ Step 2: Use [Friend Management > Import Friends](https://cloud.tencent.com/docum
 ```
 2. Confirm according to script prompt whether to copy TUIRoomKit source code to `./src/components/RoomKit` directory. If you need to customize the copy directory, please enter 'y', otherwise enter 'n'.
 
-
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/05a672b6fd8711f0a1eb52540073fd3b.png)
-
 3. After source code export, TUIRoomKit source code will be added to your specified project path. At this time, you need to manually change the references of ConferenceMainView component, ConferenceMainViewH5 component and conference object from npm package address to the relative path address of TUIRoom source code.
 
 ``` typescript
@@ -292,7 +242,6 @@ Step 2: Use [Friend Management > Import Friends](https://cloud.tencent.com/docum
 ```
 4. Configure ESLint Validation
 
-
 If you encounter ESLint errors when running the project after exporting TUIRoomKit source code, you can add the RoomKit folder to the `.eslintignore` file to ignore ESLint detection.
 ``` javascript
 // Please replace with the real path of TUIRoomKit source code
@@ -322,9 +271,6 @@ function handleLayoutUpdate(layout: RoomLayoutTemplate) {
 
 TUIRoomKit default video stream widgets are shown in the figure. To customize video stream widgets, please modify the `RoomKit/components/RoomLayoutView/ParticipantViewUI/ParticipantViewUI.vue` component.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/2fab38f2d73111f0929b525400bf7822.png)
-
-
 ## Frequently Asked Questions
 
 #### **TUIRoomKit works normally during local development, but cannot properly capture user's camera or microphone devices after deployment to online environment?**
@@ -334,10 +280,9 @@ TUIRoomKit default video stream widgets are shown in the figure. To customize vi
 
 - **Related Resources:** For more details about URL domain and protocol restrictions, please refer to [URL Domain and Protocol Restrictions](https://cloud.tencent.com/document/product/647/17249#URL-.E5.9F.9F.E5.90.8D.E5.8D.8F.E8.AE.AE.E9.99.90.E5.88.B6).
 
-
 #### **Does TUIRoomKit support iframe integration?**
 
-Yes. When integrating TUIRoomKit using iframe, you need to configure the allow attribute in the iframe tag to grant necessary browser permissions (microphone, camera, screen sharing, fullscreen, etc.), as shown in the example below: 
+Yes. When integrating TUIRoomKit using iframe, you need to configure the allow attribute in the iframe tag to grant necessary browser permissions (microphone, camera, screen sharing, fullscreen, etc.), as shown in the example below:
 ``` typescript
 // Enable microphone, camera, screen sharing, fullscreen permissions
 <iframe allow="microphone; camera; display-capture; display; fullscreen;">

package/resource/doc/rtcengine/faq/common/error_code.md

@@ -0,0 +1 @@
+