@tencentcloud/sdk-mcp 1.4.7 → 1.6.0-beta.2

package/resource/doc/roomkit/vue/features/room-view.md

@@ -1,241 +0,0 @@
-本篇文档将指导您使用 Atomicx 的核心视图组件 `RoomView` 实现实时音视频房间的视频画面渲染。通过配置布局模板和利用组件插槽，您可以快速实现视频布局的切换与个性化定制。
-
-`RoomView` 是 Atomicx 中负责视频画面渲染的主容器组件。它会自动处理视频流的订阅、渲染和释放，您只需关注其布局配置和 UI 增强。
-
-## 核心能力
-
-`RoomView` 作为多人音视频房间的核心视图容器，内置了多项企业级音视频处理能力：
-- **智能性能管理**：支持视口内视频流懒加载，并能根据流区域尺寸，远端流数量自动进行高低清流切换，显著降低系统能耗与带宽占用。
-
-- **精细化排序策略**：系统根据角色（主持人优先）与媒体状态（音视频开启优先）自动调整画面顺序。
-
-- **交互式演讲者模式**：支持双击锁定主画面，并在侧边栏或顶部栏布局中支持收起非核心区域，聚焦演示内容。
-
-- **沉浸式视觉设计**：所有视频窗口强制保持 `16:9` 的标准比例，并配合交互显示的工具栏，提供无干扰的多人音视频房间体验。
-
-## 可定制范围
-
-`RoomView` 仅聚焦于底层视频流的播放，而将视图层的所有“表现权”交给了开发者。使用 `RoomView` 您可以自由定义：
-- **布局切换**：根据业务场景（例如演讲模式或讨论模式）实时变换布局。
-
-- **视频挂件 UI：**包含昵称标签、音量动态波形、角色徽章等。
-
-## **前提条件**
-- 用户已经通过 [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState) 完成登录鉴权，请参考 接入概览。
-
-- 用户已经通过 [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) 进入房间，参考 房间管理。
-
-- 已在 `App.vue` 中配置全局 `UIKitProvider`，具体请参考 [配置 App.vue](https://cloud.tencent.com/document/product/647/81962#ce98ee15-b0cb-43af-81da-70f51231430e)。
-
-## 实现视频布局功能
-
-### 步骤1：引入并渲染基础布局
-
-在您的会议页面（例如 RoomLayoutView.vue）中引入 `RoomView` 及布局枚举 `RoomLayoutTemplate`。
-``` typescript
-<template>
-  <div class="room-container">
-    <RoomView />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { RoomView } from 'tuikit-atomicx-vue3/room';
-</script>
-
-<style lang="scss">
-.room-container {
- width: 100%;
- height: 100%;
-}
-</style>
-```
-
-> **注意：**
->
-
-> `RoomView` 会自动占满父容器的高度和宽度，请确保其父容器具备明确的尺寸。
->
-
-### 步骤2：切换布局模式
-
-您可以根据业务逻辑（例如点击切换按钮）动态更新 `RoomView` 属性 `layoutTemplate` 的值。
-| 属性名 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| `layoutTemplate` | `RoomLayoutTemplate` | `RoomLayoutTemplate.GridLayout` | 视频流布局 |
-
-`RoomLayoutTemplate` 可选值解析：
-| 布局模式 | 枚举值 | 描述 |
-| --- | --- | --- |
-| 宫格布局 | `RoomLayoutTemplate.GridLayout` | 默认布局。所有参会者画面均匀排列，参会者超出 9 人时支持翻页。 |
-| 侧边栏布局 | `RoomLayoutTemplate.SidebarLayout` | 主画面突出显示，其余参会者画面以侧边栏的形式排列，适用于演讲、报告等场景。 |
-| 顶部栏布局 | `RoomLayoutTemplate.CinemaLayout` | 主画面突出显示，其余参会者画面以顶部栏的形式排列，适用于演讲、报告等场景。 |
-
-``` typescript
-<template>
-  <!-- 添加布局切换按钮 -->
-  <div class="layout-switcher">
-    <button @click="switchLayout(RoomLayoutTemplate.GridLayout)">宫格</button>
-    <button @click="switchLayout(RoomLayoutTemplate.SidebarLayout)">侧边栏</button>
-    <button @click="switchLayout(RoomLayoutTemplate.CinemaLayout)">顶部栏</button>
-  </div>
-  <div class="room-container">
-    <RoomView :layoutTemplate="currentLayout" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { RoomView, RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
-// 默认使用宫格布局
-const currentLayout = ref(RoomLayoutTemplate.GridLayout);
-
-// 切换布局
-const switchLayout = (layout: RoomLayoutTemplate) => {
-  currentLayout.value = layout;
-};
-</script>
-
-<style lang="scss">
-.room-container {
- width: 100%;
- height: 100%;
-}
-</style>
-```
-
-### 步骤3：实现视频流挂件信息
-
-您可以通过使用 `participantViewUI` 插槽，为视频画面定制 UI 显示内容（例如设置昵称，添加自定义图标）。
-
-| 插槽参数 | 类型 | 说明 |
-| --- | --- | --- |
-| `participant` | `RoomParticipant` | 当前视频流对应的参会者对象，包含用户的 `userId`、`userName`、`role` 等实时状态信息。 |
-| `streamType` | `VideoStreamType` | 区分当前是摄像头流（Camera）还是屏幕分享流（Screen） |
-
-#### 准备视觉资源
-
-为了提供完整的交互反馈，建议您提前准备以下图标：
-- 麦克风状态图标：区分开启、静音及动态音量条。
-
-- 身份标识图标：用于区分房主（Owner）、管理员（Admin）与普通成员。
-
-- 网络信号图标：展示实时的上/下行网络质量。
-
-   > **特别说明：**
-   >
-
-   > 我们在示例项目的 @tencentcloud/uikit-base-component-vue3 npm 包中提供了免版权的图标，您可以直接引入使用。
-   >
-
-#### 实现代码示例
-1. 新增文件 `ParticipantViewUI.vue` 实现单个视频流挂件层 UI 渲染逻辑。
-
-   ``` typescript
-   <template>
-     <div class="stream-cover-container">
-       <div class="corner-user-info-container">
-         <div
-           v-if="showMasterIcon || showAdminIcon"
-           :class="{ 'master-icon': showMasterIcon, 'admin-icon': showAdminIcon }"
-         >
-           <IconUser />
-         </div>
-         <div v-if="!isScreenStream" :class="['audio-icon-container']">
-           <div class="audio-level-container">
-             <div class="audio-level" :style="audioLevelStyle" />
-           </div>
-           <IconMicOff v-if="!isMicrophoneOn" class="audio-icon" size="20" />
-           <IconMicOn v-else class="audio-icon" size="20" />
-         </div>
-         <span class="user-name" :title="displayName">
-           {{ displayName }}
-         </span>
-       </div>
-     </div>
-   </template>
-
-   <script setup lang="ts">
-   import { computed, defineProps } from 'vue';
-   import {
-     IconUser,
-     IconMicOff,
-     IconMicOn,
-   } from '@tencentcloud/uikit-base-component-vue3';
-   import { RoomParticipantRole, DeviceStatus, VideoStreamType, useRoomParticipantState } from 'tuikit-atomicx-vue3/room';
-   import type { RoomParticipant } from 'tuikit-atomicx-vue3/room';
-
-   interface Props {
-     participant: RoomParticipant;
-     streamType: VideoStreamType;
-   }
-   const props = defineProps<Props>();
-
-   const { speakingUsers } = useRoomParticipantState();
-   const speakingAudioVolume = computed(() => speakingUsers.value.get(props.participant.userId) || 0);
-   const audioLevelStyle = computed(() => {
-     if (props.participant.microphoneStatus === DeviceStatus.Off || !speakingAudioVolume.value) {
-       return '';
-     }
-     return `height: ${speakingAudioVolume.value * 4}%`;
-   });
-
-   const isMicrophoneOn = computed(() => props.participant.microphoneStatus === DeviceStatus.On);
-   const displayName = computed(() => props.participant.nameCard || props.participant.userName || props.participant.userId);
-
-   const showMasterIcon = computed(() => {
-     const { role } = props.participant;
-     return role === RoomParticipantRole.Owner && props.streamType === VideoStreamType.Camera;
-   });
-
-   const showAdminIcon = computed(() => {
-     const { role } = props.participant;
-     return (role === RoomParticipantRole.Admin && props.streamType === VideoStreamType.Camera);
-   });
-   </script>
-
-   <style lang="scss" scoped>
-   .stream-cover-container {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  border-radius: 12px;  pointer-events: none;  .corner-user-info-container {    position: absolute;    bottom: 8px;    left: 8px;    display: flex;    align-content: center;    align-items: center;    box-sizing: border-box;    min-width: 118px;    max-width: calc(100% - 24px);    padding-right: 10px;    height: 32px;    overflow: hidden;    font-size: 14px;    color: var(--uikit-color-white-1);    border-radius: 16px;    background-color: var(--uikit-color-black-5);    .master-icon,    .admin-icon {      display: flex;      flex-shrink: 0;      align-items: center;      justify-content: center;      width: 32px;      height: 32px;      margin-left: 0;      border-radius: 50%;      background-color: var(--button-color-primary-default);    }    .admin-icon {      background-color: var(--text-color-warning);    }    .audio-icon-container {      margin-left: 4px;      position: relative;      width: 20px;      height: 20px;      flex-shrink: 0;      min-width: 20px;      &:first-child {        margin-left: 8px;      }      .audio-level-container {        position: absolute;        top: 2px;        left: 6px;        display: flex;        flex-flow: column-reverse wrap;        justify-content: space-between;        width: 8px;        height: 12px;        overflow: hidden;        border-radius: 4px;        .audio-level {          width: 100%;          background-color: var(--text-color-success);          transition: height 0.2s;        }      }      .audio-icon {        position: absolute;        top: 0;        left: 0;      }    }    .user-name {      margin-left: 4px;      overflow: hidden;      text-overflow: ellipsis;      white-space: nowrap;      min-width: 0;    }    .screen-icon {      flex-shrink: 0;      min-width: 0;      color: var(--uikit-color-white-1);      margin-left: 4px;      margin-right: 2px;    }    .screen-info {      margin-left: 4px;      font-size: 12px;      color: var(--uikit-color-white-1);      flex-shrink: 0;      min-width: 0;    }  }}
-   </style>
-   ```
-2. 配置 `RoomView` 插槽，在页面中渲染视频流挂件内容。
-
-   ``` typescript
-   <template>
-     <div class="room-container">
-       <RoomView :layout-template="currentLayout">
-         <template #participantViewUI="{ participant, streamType }">
-           <ParticipantViewUI :participant="participant" :stream-type="streamType" />
-         </template>
-       </RoomView>
-     </div>
-   </template>
-
-   <script setup lang="ts">
-   import { ref } from 'vue';
-   import { RoomView, RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
-   // 引入新增的 ParticipantViewUI.vue 文件
-   import ParticipantViewUI from './ParticipantViewUI.vue';
-
-   // 默认使用宫格布局
-   const currentLayout = ref(RoomLayoutTemplate.GridLayout);
-   </script>
-   ```
-
-## API 文档
-| **State/Component** | **功能描述** | **API 文档** |
-| --- | --- | --- |
-| **useRoomParticipantState** | 包含房间内用户数据，用户管理接口。 | [API 文档](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState) |
-
-## 常见问题
-
-### **RoomView 是否包含屏幕分享流的渲染？**
-
-`RoomView` 内置远端屏幕分享流的渲染，对于本地屏幕共享您需要通过 `participantViewUI` 插槽完成本地屏幕分享的占位 UI。
-
-### RoomView 是否默认包含 UI 挂件？
-
-`RoomView` 内部无默认 UI 挂件，您可以参考 [RoomView 开源使用示例](https://github.com/Tencent-RTC/TUIRoomKit/tree/main/Web/example/atomicx-vite-vue3-ts/src/components/RoomLayoutView) 快速完成自定义 UI 挂件。
-
-### RoomView 提供的布局均不满足需求，是否可以提供更多的可选布局？

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

@@ -1,315 +0,0 @@
-TUIRoomKit 是腾讯云推出的音视频房间 UI 应用。本次升级引入了全新的原子化组件接入方案，开发者可以灵活组合这些原子化组件，以构建个性化的音视频房间界面。
-
-> **推荐使用更高效的 AI 集成助手**
->
-
-> 我们为您提供了全新的 AI 集成方式，只需要描述您的需求，即可自动生成集成代码，大幅提升开发效率。
->
-
-> [点击这里，立即体验 AI 集成](https://cloud.tencent.com/document/product/647/127873)
->
-
-本文档介绍如何将 TUIRoomKit 集成到现有的 Vue3 项目中，同时介绍如何对 TUIRoomKit 的样式、布局及功能进行自定义修改。
-- 桌面端多人会议
-
-- H5 多人会议
-
-## 前提条件
-
-### 开通服务
-
-请参考 [开通服务](https://cloud.tencent.com/document/product/647/104842) 领取 TUIRoomKit 体验版，并在 [应用管理](https://console.cloud.tencent.com/trtc) 页面获取以下信息:
-- **SDKAppID**: 应用标识，腾讯云基于 `SDKAppID` 完成计费统计。
-
-- **SDKSecretKey**: 应用密钥，用于初始化配置文件的密钥信息。
-
-### 环境准备
-- **Node.js**: ≥ 18.19.1 (推荐使用官方 LTS 版本)。
-
-- **Vue**: ≥ 3.4.21。
-
-- **现代浏览器**：支持 [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) 的现代浏览器。
-
-- **设备**：摄像头、麦克风、扬声器。
-
-## 源码接入
-
-### 步骤1：安装项目依赖
-
-在您的业务项目中安装以下依赖。
-
-【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
-```
-
-### 步骤2：**引用 **TUIRoomKit** 组件**
-``` 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>
-
-```
-
-### 步骤3：配置 App.vue 文件
-
-将以下内容合并到项目的 App.vue 文件中，以配置全局 UI 样式和用户登录逻辑：
-- 配置全局 `UIKitProvider`：引入 `UIKitProvider` 组件，并设置默认主题和语言；
-
-- 用户登录： 在 `onMounted` 钩子中执行 `login` 和 `setSelfInfo`；
-
-   ``` typescript
-   <template>
-     <!-- Step 1: 配置全局 UIKitProvider -->
-     <UIKitProvider theme="light" language="zh-CN">
-       <!-- 您包含 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: 用户登陆
-   const { login, setSelfInfo } = useLoginState();
-   const SDKAppID = 0;    // 注意：请替换为实时音视频控制台获取的 SDKAppID 信息
-   const userId = '填入您真实的 userId';    // 注意：请替换为真实的 userId
-   const userName = '填入您真实的 userName';  // 注意：请替换为真实的 userName
-   const userSig = '填入您真实的 userSig';    // 注意：生成临时 userSig 请参考 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: 配置全局样式（此样式用来覆盖脚手架搭建的新项目的默认样式，可按需配置）-->
-   <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>
-   ```
-
-### 步骤4：发起新的会议
-
-会议主持人可以通过调用 `conference.start`  接口来发起一场新的会议，其他参会者可以参见 步骤6 的描述，调用 `conference.join` 接口加入该会议。
-
-> **注意：**
->
-
-> 请参考步骤 3 在用户登录成功后调用 `conference.start `接口发起会议。
->
-
-``` typescript
-import { conference } from '@tencentcloud/roomkit-web-vue3';
-const startConference = async () => {
-  await conference.start({
-    roomId: '123456',   // 请替换为您真实的 roomId
-    options: {
-      roomName: '我的临时会议',
-    },
-  });
-}
-startConference();
-```
-
-### 步骤5：进入已有会议
-
-参与者可以通过调用 `conference.join` 接口，填写对应的 roomId 参数，来加入由会议主持人在 步骤4 中发起的会议。
-
-> **注意：**
->
-
-> 请参考步骤 3 在用户登录成功后调用 `conference.join `接口加入会议。
->
-
-``` typescript
-import { conference } from '@tencentcloud/roomkit-web-vue3';
-const joinConference = async () => {
-  await conference.join({
-    roomId: '123456',   // 请替换为您真实的 roomId
-  });
-}
-joinConference();
-```
-
-## 启动项目
-
-【npm】
-``` bash
-npm run dev
-```
-
-【pnpm】
-``` bash
-pnpm run dev
-```
-
-【yarn】
-``` bash
-yarn run dev
-```
-
-启动成功后，请在浏览器中打开调试地址（通常为 http://localhost:5173）访问应用。您将看到如下所示的会议界面：
-
-## UI 快速自定义
-
-### 主题及语言
-
-通过配置 App.vue 中 `UIKitProvider` 的入参，修改主题及语言的默认值。
-| UIKitProvider 参数 | 可选值 | 默认值 |
-| --- | --- | --- |
-| theme | "light" \\| "dark" | "light" |
-| language | "zh-CN" \\| "en-US" | "en-US" |
-
-``` typescript
-<UIKitProvider theme="light" language="zh-CN">
-  <router-view />
-</UIKitProvider>
-
-<script setup lang="ts">
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-```
-
-### 配置用户联系人列表
-
-TUIRoomKit 预定会议用户选择列表和会中呼叫用户选择列表默认展示用户关系链列表，批量导入用户关系链请参考以下步骤：
-
-步骤1：使用 [账号管理 > 导入多个账号](https://cloud.tencent.com/document/product/269/4919) REST API 接口批量导入用户账号；
-
-步骤2：使用 [好友管理 > 导入好友](https://cloud.tencent.com/document/product/269/8301) REST API 接口批量导入用户关系链；
-
-## TUIRoomKit 界面定制
-
-### 源码导出
-
-【Vue3】
-1. 执行源码导出脚本，默认拷贝路径为 `./src/components/RoomKit`
-
-``` bash
-  node ./node_modules/@tencentcloud/roomkit-web-vue3/scripts/eject.js
-```
-2. 根据脚本提示确认是否要将 TUIRoomKit 源码拷贝到 `./src/components/RoomKit` 目录。如您需要自定义拷贝目录请输入 'y', 否则输入'n'。
-
-3. 源码导出后，在您指定的项目路径中会新增 TUIRoomKit 源码。此时，您需要手动将 ConferenceMainView 组件，ConferenceMainViewH5 组件的 conference 对象的引用从 npm 包地址更改为 TUIRoom 源码的相对路径地址。
-
-``` typescript
-- import { ConferenceMainView, conference } from '@tencentcloud/roomkit-web-vue3';
-// 替换引用路径为 TUIRoomKit 源码的真实路径
-+ import { ConferenceMainView, ConferenceMainViewH5, conference } from './components/RoomKit/index.ts';
-```
-4. 配置 ESLint 校验
-
-如果您导出 TUIRoomKit 源码后运行项目出现 ESLint 报错，您可以在`.eslintignore`文件中添加 RoomKit 文件夹忽略 ESLint 检测。
-``` javascript
-// 请替换为 TUIRoomKit 源码真实路径
-src/components/RoomKit
-```
-
-### 自定义房间流布局
-
-TUIRoomKit 目前支持九宫格、侧边栏及顶部栏三种流布局，默认为九宫格布局。
-``` typescript
-// RoomKit/views/ConferenceMainView/index.vue
-import { RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
-// 修改默认视频流布局为侧边栏布局
-const participantViewLayout = ref(RoomLayoutTemplate.SidebarLayout);
-function handleLayoutUpdate(layout: RoomLayoutTemplate) {
-  participantViewLayout.value = layout;
-}
-
-// 修改默认视频流布局为顶部栏布局
-const participantViewLayout = ref(RoomLayoutTemplate.CinemaLayout);
-function handleLayoutUpdate(layout: RoomLayoutTemplate) {
-  participantViewLayout.value = layout;
-}
-```
-
-### 自定义视频流挂件
-
-TUIRoomKit 默认视频流挂件如图所示，如需自定义视频流挂件请修改 `RoomKit/components/RoomLayoutView/ParticipantViewUI/ParticipantViewUI.vue` 组件。
-
-## 常见问题
-
-#### **TUIRoomKit 在本地开发时使用正常，但部署到线上环境后无法**正常采集用户的摄像头或麦克风设备**？**
-- **原因分析：**浏览器出于安全和隐私保护的考虑，对音视频设备（麦克风、摄像头）的采集有着严格限制。只有在安全环境下，采集操作才会被允许。安全环境协议包括：https://、localhost、file:// 等。HTTP 协议被视为不安全，浏览器会默认禁止访问媒体设备。
-
-- **解决方案：**若您在本地（localhost）测试一切正常，但部署后出现采集失败，请立即检查您的网页是否部署在 HTTP 协议上。您必须使用 HTTPS 协议部署您的网页，并确保具备有效的安全证书。
-
-- **相关资源：**更多关于 URL 域名及协议的限制详情，请参见 [URL 域名及协议限制说明](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)。
-
-#### **TUIRoomKit 是否支持使用 iframe 集成?**
-
-支持。使用 iframe 集成 TUIRoomKit 时, 需要在 iframe 标签中配置 allow 属性以授予必要的浏览器权限（麦克风、摄像头、屏幕共享、全屏等），示例如下:
-``` typescript
-// 开启麦克风、摄像头、屏幕分享、全屏权限
-<iframe allow="microphone; camera; display-capture; display; fullscreen;">
-```
-
-#### TUIRoomKit 是否支持设置内网代理？
-
-支持。请参考如下指引设置内网代理参数。更多内网代理信息请参考 [应对防火墙受限](https://web.sdk.qcloud.com/trtc/webrtc/doc/zh-cn/tutorial-34-advanced-proxy.html)。
-``` typescript
-// 请在进房前设置内网代理参数
-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',
-    },
-  }));
-});
-```