@tencent-rtc/mcp 1.4.6 → 1.6.0-beta.1

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

@@ -1,271 +0,0 @@
-# Virtual Background
-
-Virtual background feature allows users to replace their real background with a custom image or apply blur effects during video calls or live streams. With this feature, users can effectively protect privacy, hide cluttered backgrounds, or showcase corporate image through specific backgrounds.
-
-## Use Cases
-
-- **Remote Work/Meetings:** When attending meetings at home or in public places, use background blur or virtual background to hide the real environment and protect personal privacy.
-
-- **Online Education:** Teachers use unified teaching backgrounds to create a professional classroom atmosphere.
-
-- **Brand Display:** Company employees use backgrounds with company logos in external meetings to enhance brand image.
-
-- **Fun Interaction:** In social scenarios, users can change to interesting background images to increase interaction fun.
-
-## Prerequisites
-
-- **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`.
-
-- **Device Requirements:** A camera device must be available, and the user has granted camera access permission. If the user denies authorization, the virtual background feature will not be available.
-
-- **Resource Dependencies:** Virtual background feature depends on AI model files. To ensure the browser can properly load and run these files, you need to complete the following steps:
-
-  - 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, 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, 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
-
-This feature provides two integration solutions, and you can choose the most suitable one based on your business requirements:
-
-- **Solution 1 (Recommended):** Quick integration using UI components. Directly import the virtual background panel component ([VirtualBackgroundPanel](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/VirtualBackgroundPanel)) provided by `tuikit-atomicx-vue3`, and embed it into your application's dialog or sidebar with the lowest development cost.
-
-- **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
-
-## Solution 1: Quick Integration Using UI Components
-
-`tuikit-atomicx-vue3` provides core settings panel components:
-
-- [**VirtualBackgroundPanel**](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/VirtualBackgroundPanel)**:** Configuration panel for virtual background, including background blur, image selection, and preview functionality.
-
-### Step 1: Import Component
-
-```typescript
-import { VirtualBackgroundPanel } from 'tuikit-atomicx-vue3/room';
-```
-
-### Step 2: Use Component
-
-It is generally recommended to place [VirtualBackgroundPanel](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/VirtualBackgroundPanel) in a dialog or modal, triggered by clicking a button.
-
-**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, otherwise they will not be able to obtain context dependencies, resulting in style abnormalities.
-
-```typescript
-<template>
-  <UIKitProvider theme="light" language="en-US">
-    <div class="toolbar-container">
-      <!-- 1. Trigger button -->
-      <button @click="openSettings">Set Virtual Background</button>
-
-      <!-- 2. Settings dialog -->
-      <div v-if="showSettings" class="modal-mask">
-        <div class="modal-content">
-          <div class="modal-header">
-            <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) -->
-            <VirtualBackgroundPanel assetsPath='https://xxxx/assets' @close="showSettings = false" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </UIKitProvider>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { VirtualBackgroundPanel, useVirtualBackgroundState, useDeviceState } from 'tuikit-atomicx-vue3/room';
-
-const showSettings = ref(false);
-const { isSupported } = useVirtualBackgroundState();
-const { cameraList } = useDeviceState();
-
-const openSettings = () => {
-  // 1. Check if browser supports virtual background
-  if (!isSupported()) {
-    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');
-    return;
-  }
-
-  // 3. Open settings panel
-  showSettings.value = true;
-};
-</script>
-
-<style scoped>
-.modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:white;width:600px;border-radius:8px;overflow:hidden}.modal-header{padding:16px;display:flex;justify-content:space-between;border-bottom:1px solid #eee}
-</style>
-```
-
-## Solution 2: Custom Integration Using Underlying API
-
-This section mainly introduces how to implement virtual background through atomicx-core SDK API [**useVirtualBackgroundState**](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-VirtualBackgroundState) interface.
-
-### Step 1: Initialization and Detection
-
-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.
-> - [cameraList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#cameraList): List of currently available camera devices. If the list is empty, it means no camera is detected or camera permission is denied.
-
-```typescript
-import { onMounted } from 'vue';
-import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3/room';
-
-const { isSupported, initVirtualBackground } = useVirtualBackgroundState();
-
-onMounted(async () => {
-  // 1. Check browser compatibility
-  if (!isSupported()) {
-    console.warn('Current browser does not support virtual background');
-    return;
-  }
-
-  // 2. Initialize resources
-  try {
-    await initVirtualBackground({ assetsPath: './assets' });
-    console.log('Virtual background initialized');
-  } catch (error) {
-    console.error('Initialization failed', error);
-  }
-});
-```
-
-### Step 2: Set Preview
-
-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';
-
-const { setVirtualBackground } = useVirtualBackgroundState();
-
-// Enable background blur preview
-const previewBlur = async () => {
-  await setVirtualBackground({
-    enable: true,
-    type: 'blur',
-    level: 0.5 // Blur level, optional
-  });
-};
-
-// Enable background image preview
-const previewImage = async (imageUrl: string) => {
-  await setVirtualBackground({
-    enable: true,
-    type: 'image',
-    source: imageUrl // Image URL, supports local or network path
-  });
-};
-```
-
-### Step 3: Save and Apply
-
-After the user confirms the preview effect is satisfactory, call [saveVirtualBackground](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#saveVirtualBackground) to actually apply the configuration to the current video stream, at which point remote users will see the effect.
-
-```typescript
-import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3/room';
-
-const { saveVirtualBackground } = useVirtualBackgroundState();
-
-const confirmSettings = async () => {
-  try {
-    await saveVirtualBackground();
-    console.log('Virtual background applied');
-  } catch (error) {
-    console.error('Save failed', error);
-  }
-};
-```
-
-### Step 4: Disable Virtual Background
-
-If you need to disable virtual background and restore the real background, you can set its `enable` property to `false` and save.
-
-```typescript
-import { useVirtualBackgroundState } from 'tuikit-atomicx-vue3/room';
-
-const { setVirtualBackground, saveVirtualBackground } = useVirtualBackgroundState();
-
-const disableVirtualBackground = async () => {
-  // 1. Set to disabled state
-  await setVirtualBackground({ enable: false });
-  // 2. Save and apply
-  await saveVirtualBackground();
-};
-```
-
-## Development Notes
-
-- **Resource File Path:** The `assetsPath` in `initVirtualBackground` must correctly point to the directory of AI model files. If the path is incorrect, virtual background will not start. Please refer to [SDK Documentation](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-36-advanced-virtual-background.html) to obtain the resource file package.
-
-- **Performance Consumption:** Enabling virtual background consumes high CPU and GPU resources. On low-end devices, it may cause video frame drops or overheating. It is recommended to prompt users to disable it when device performance is insufficient.
-
-- **Browser Compatibility:** Not all browsers support virtual background (depending on WebAssembly and SIMD features). Be sure to call `isSupported()` for checking before UI rendering.
-
-- **Image Format:** Custom background images are recommended to use `jpg` or `png` format, and resolution should not be too large (recommended within 1920x1080) to avoid affecting loading speed and memory consumption.
-
-## FAQ
-
-### **Running Demo in Chrome shows flipped and laggy screen?**
-
-Virtual background plugin uses GPU acceleration. You need to find and enable hardware acceleration mode in browser settings. You can copy `chrome://settings/system` to the browser address bar and enable hardware acceleration mode.
-
-### **Why does the computer overheat or the fan runs at high speed after enabling virtual background?**
-
-Virtual background feature requires real-time recognition of human contours and image processing, which has certain requirements for CPU and GPU computing power. It is recommended to disable this feature when not needed, or avoid enabling it on low-end devices.
-
-### **Initialization failed with error "assets load failed", what to do?**
-
-Please check if the `assetsPath` passed in `initVirtualBackground` is correct. Ensure that the path contains the necessary AI model files and can be directly accessed through the browser. If it is a cross-domain resource, CORS policy needs to be configured.
-
-### **Does virtual background support mobile browsers?**
-
-Due to performance limitations of mobile browsers and differences in WebAssembly support, the experience may not be as stable as desktop. It is recommended to use it primarily on desktop Chrome (recommended 94+), Edge, and other mainstream browsers, and perform proper compatibility checks with `isSupported()`.
-
-### **Unable to use virtual background in local development?**
-
-WebRTC-related features usually require running in an HTTPS environment, or `localhost` / `127.0.0.1`. Please ensure that your development environment meets secure context requirements.
-
-## **Sample Project**
-
-Tencent Cloud provides a sample project [atomicx-vite-vue3-ts](https://github.com/Tencent-RTC/TUIRoomKit/tree/main/Web/example/atomicx-vite-vue3-ts) on GitHub, which you can refer to implement complete RoomKit features.
-
-## API Documentation
-
-| **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,315 +0,0 @@
-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
-
-- H5 Multi-person Conference
-
-## Prerequisites
-
-### Service Activation
-
-Please refer to [Service Activation](https://cloud.tencent.com/document/product/647/104842) to get the TUIRoomKit trial version, and obtain the following information from the [Application Management](https://console.cloud.tencent.com/trtc) page:
-- **SDKAppID**: Application identifier, Tencent Cloud completes billing statistics based on `SDKAppID`.
-
-- **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).
-
-- **Vue**: ≥ 3.4.21.
-
-- **Modern Browsers**: Modern browsers that support [WebRTC APIs](https://cloud.tencent.com/document/product/647/17249#.E6.94.AF.E6.8C.81.E7.9A.84.E5.B9.B3.E5.8F.B0).
-
-- **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
-```
-
-【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
-```
-
-### Step 2: **Import **TUIRoomKit** Components**
-``` typescript
-<template>
-  <ConferenceMainView v-if="isPC"></ConferenceMainView>
-  <ConferenceMainViewH5 v-else></ConferenceMainViewH5>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { ConferenceMainView, ConferenceMainViewH5 } from '@tencentcloud/roomkit-web-vue3';
-import { getPlatform } from '@tencentcloud/universal-api';
-
-const isPC = ref(getPlatform() === 'pc');
-</script>
-
-```
-
-### Step 3: Configure App.vue File
-
-Merge the following content into your project's App.vue file to configure global UI styles and user login logic:
-- Configure global `UIKitProvider`: Import the `UIKitProvider` component and set default theme and language;
-
-- User Login: Execute `login` and `setSelfInfo` in the `onMounted` hook;
-
-  ``` typescript
-  <template>
-    <!-- Step 1: Configure global UIKitProvider -->
-    <UIKitProvider theme="light" language="en-US">
-      <!-- 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
-  const userId = 'Enter your real userId';    // Note: Please replace with real userId
-  const userName = 'Enter your real userName';  // Note: Please replace with real userName
-  const userSig = 'Enter your real userSig';    // Note: For generating temporary userSig, please refer to https://cloud.tencent.com/document/product/647/17275#console
-  onMounted(async () => {
-    try {
-      await login({
-        userId,
-        userSig,
-        sdkAppId: SDKAppID,
-      });
-      await setSelfInfo({
-        userName,
-        avatarUrl: '',
-      });
-    } catch (error: any) {
-      console.error('Login failed:', error);
-    }
-  });
-  </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;
-    padding: 0 !important;
-    margin: 0 !important;
-    max-width: 100% !important;
-    max-height: 100% !important;
-    text-align: left !important;
-    overflow: hidden;
-  }
-  </style>
-  ```
-
-### 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 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 () => {
-  await conference.start({
-    roomId: '123456',   // Please replace with your real roomId
-    options: {
-      roomName: 'My Temporary Conference',
-    },
-  });
-}
-startConference();
-```
-
-### Step 5: Join Existing Conference
-
-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';
-const joinConference = async () => {
-  await conference.join({
-    roomId: '123456',   // Please replace with your real roomId
-  });
-}
-joinConference();
-```
-
-## Start Project
-
-【npm】
-``` bash
-npm run dev
-```
-
-【pnpm】
-``` bash
-pnpm run dev
-```
-
-【yarn】
-``` bash
-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:
-
-## Quick UI Customization
-
-### Theme and Language
-
-Modify the default values of theme and language by configuring the parameters of `UIKitProvider` in App.vue.
-| 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';
-```
-
-### Configure User Contact List
-
-TUIRoomKit scheduled meeting user selection list and in-meeting call user selection list display user relationship chain list by default. Please refer to the following steps to batch import user relationship chains:
-
-Step 1: Use [Account Management > Import Multiple Accounts](https://cloud.tencent.com/document/product/269/4919) REST API interface to batch import user accounts;
-
-Step 2: Use [Friend Management > Import Friends](https://cloud.tencent.com/document/product/269/8301) REST API interface to batch import user relationship chains;
-
-## TUIRoomKit Interface Customization
-
-### Source Code Export
-
-【Vue3】
-1. Execute source code export script, default copy path is `./src/components/RoomKit`
-
-``` bash
-  node ./node_modules/@tencentcloud/roomkit-web-vue3/scripts/eject.js
-```
-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'.
-
-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
-- import { ConferenceMainView, conference } from '@tencentcloud/roomkit-web-vue3';
-// Replace reference path to the real path of TUIRoomKit source code
-+ import { ConferenceMainView, ConferenceMainViewH5, conference } from './components/RoomKit/index.ts';
-```
-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
-src/components/RoomKit
-```
-
-### Custom Room Stream Layout
-
-TUIRoomKit currently supports three stream layouts: grid, sidebar, and top bar, with grid layout as default.
-``` typescript
-// RoomKit/views/ConferenceMainView/index.vue
-import { RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
-// Change default video stream layout to sidebar layout
-const participantViewLayout = ref(RoomLayoutTemplate.SidebarLayout);
-function handleLayoutUpdate(layout: RoomLayoutTemplate) {
-  participantViewLayout.value = layout;
-}
-
-// Change default video stream layout to top bar layout
-const participantViewLayout = ref(RoomLayoutTemplate.CinemaLayout);
-function handleLayoutUpdate(layout: RoomLayoutTemplate) {
-  participantViewLayout.value = layout;
-}
-```
-
-### Custom Video Stream Widgets
-
-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.
-
-## Frequently Asked Questions
-
-#### **TUIRoomKit works normally during local development, but cannot properly capture user's camera or microphone devices after deployment to online environment?**
-- **Root Cause Analysis:** Browsers have strict restrictions on the capture of audio and video devices (microphone, camera) for security and privacy protection considerations. Capture operations are only allowed in secure environments. Secure environment protocols include: https://, localhost, file://, etc. HTTP protocol is considered insecure, and browsers will prohibit access to media devices by default.
-
-- **Solution:** If everything works normally in your local (localhost) testing, but capture fails after deployment, please immediately check whether your webpage is deployed on HTTP protocol. You must use HTTPS protocol to deploy your webpage and ensure you have valid security certificates.
-
-- **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:
-``` typescript
-// Enable microphone, camera, screen sharing, fullscreen permissions
-<iframe allow="microphone; camera; display-capture; display; fullscreen;">
-```
-
-#### Does TUIRoomKit support setting internal network proxy?
-
-Yes. Please refer to the following guidance to set internal network proxy parameters. For more internal network proxy information, please refer to [Dealing with Firewall Restrictions](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-34-advanced-proxy.html).
-``` typescript
-// Please set internal network proxy parameters before entering room
-import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
-import { useRoomEngine } from 'tuikit-atomicx-vue3/room';
-const { roomEngine } = useRoomEngine();
-
-TUIRoomEngine.once('ready', () => {
-  const trtcCloud = roomEngine.instance?.getTRTCCloud();
-  trtcCloud.callExperimentalAPI(JSON.stringify({
-    api: 'setNetworkProxy',
-    params: {
-      websocketProxy: "wss://proxy.example.com/ws/",
-      turnServer: [{
-        url: '14.3.3.3:3478',
-        username: 'turn',
-        credential: 'turn',
-      }],
-      iceTransportPolicy: 'relay',
-    },
-  }));
-});
-```

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

@@ -1 +0,0 @@
-

package/resource/doc/rtcengine/web/how_to_run_web_sdk_demo.md

@@ -1,59 +0,0 @@
-# Tutorial: Demo Quick Run
-
-This article mainly introduces how to quickly run Tencent Cloud TRTC Web demo.
-
-## Prerequisites
-
-You have registered a Tencent Cloud account and completed real-name authentication.
-
-## Operation steps
-
-### Step 1: Create a new application
-
-Please visit the [TRTC console](https://console.trtc.io/) and create an RTC Engine application.
-
-### Step 2. Get your SDKAppId and SDKSecretKey
-
-After your application created, you can get your **SDKAppID** and **SDKSecretKey** in Basic information , which are used to run demo.
-
-## Step 3: Run the Demo
-
-1. **Run demo online**
-
-   We provides the following basic demos. You can choose the project framework you are familiar with to run and experience:
-
-   1.1 [quick-demo-js](https://web.sdk.qcloud.com/trtc/webrtc/v5/demo/quick-demo-js/index.html) is a demo coded by Javascript. Source code: [github](https://github.com/LiteAVSDK/TRTC_Web/tree/main/quick-demo-js).
-
-   1.2 [quick-demo-vue2-js](https://web.sdk.qcloud.com/trtc/webrtc/v5/demo/quick-demo-vue2-js/index.html) is a demo coded by Vue2 + Javascript. Source code: [github](https://github.com/LiteAVSDK/TRTC_Web/tree/main/quick-demo-vue2-js).
-
-   1.3 [quick-demo-vue3-ts](https://web.sdk.qcloud.com/trtc/webrtc/v5/demo/quick-demo-vue3-ts/index.html) is a demo coded by Vue3 + Typescript. Source code: [github](https://github.com/LiteAVSDK/TRTC_Web/tree/main/quick-demo-vue3-ts).
-
-2. **Run Demo locally**
-
-   2.1 Download source code by [Github](https://github.com/LiteAVSDK/TRTC_Web/tree/main) or [Zip](https://web.sdk.qcloud.com/trtc/webrtc/download/webrtc_latest.zip).
-
-   2.2 Run demo locally by following steps.
-
-   (1) Open the demo file
-
-   - for `quick-demo-js`, open the `TRTC_Web/quick-demo-js/index.html` directly via a browser.
-   - for `quick-demo-vue2-js`, enter the `TRTC_Web/quick-demo-vue2-js/` directory, then run `npm start` in this directory, the default browser will automatically open the address [http://localhost:8080/](http://localhost:8080/)
-   - for `quick-demo-vue3-ts`, enter the `TRTC_Web/quick-demo-vue3-ts/` directory, then run `npm start` in this directory, the default browser will automatically open the address [http://localhost:3000/](http://localhost:3000/)
-
-   (2) Fill in the SDKAppId and SDKSecretKey obtained in [Step 2](#Step-2.-Get-your-SDKAppId-and-SDKSecretKey) on the page opened in the browser.
-
-   (3) Functional experience
-
-   - Click the [Enter Room] button to enter the room.
-   - Click the [Start Local Audio/Video] button to capture the microphone or camera.
-   - Click the [Stop Local Audio/Video] button to stop capturing the microphone or camera.
-   - Click the [Start Share Screen] button to start screen sharing.
-   - Click the [Stop Share Screen] button to cancel screen sharing.
-
-   (4) After joining the room, you can share the invitation link to experience the TRTC Web voice and video communication function with the invitee.
-
-> **Important Notes:**
->
-> - To deploy to the public network for experience, you need to access it through HTTPS protocol, that is, `https://domain/xxx`. For the reason, please refer to the document [Page Access Protocol Restriction Description](./tutorial-05-info-browser.html#h2-3).
-> - Currently, the desktop Chrome browser supports TRTC Web SDK's related features more completely, so it is recommended to use Chrome browser for experience, please refer to the document [Browser Compatibility Information](./tutorial-05-info-browser.html#h2-2).
-> - The correct way to generate UserSig is to integrate the UserSig calculation code into your server and provide an interface for the App. When you need UserSig, your App sends a request to the business server to obtain a dynamic UserSig. For more details, please refer to [Generating UserSig on the Server](https://trtc.io/document/35166?platform=web&product=rtcengine&menulabel=coresdk).