腾讯云实时音视频Web & H5 (Vue2/Vue3)_音视频解决方案_同尘科技

TUIRoomKit 是腾讯云推出的多人音视频 UI 组件。组件提供房间管理，音视频控制，屏幕共享，成员管理，麦位管理，即时聊天，自定义布局切换等丰富的功能交互，同时支持中英文切换，一键换肤等能力。

本文介绍 TUIRoomKit (Web & H5) 的接入指引，助力您快速上线企业会议、在线教育、医疗问诊、在线巡视、远程定损等业务场景。您可以单击 TUIRoomKit 在线体验链接 体验 TUIRoomKit 更多功能。
您可以单击 Github/Gitee 下载 TUIRoomKit 代码，并参考代码仓库 README.md 文档跑通 TUIRoomKit Web 示例工程。

步骤一：开通服务

在使用 TUIRoomKit 发起会议前，您需要开通 TUIRoomKit 专属的多人音视频互动服务，详细步骤如下：1. 登录 实时音视频 TRTC 控制台，单击左侧应用管理页面，找到需要开通 TUIRoomKit 的应用（SDKAppID），点击详情按钮，进入应用概览界面。
2. 在应用概览页面找到含 UI 低代码集成接入 卡片，选择多人音视频（TUIRoomKit），点击领取体验按钮，领取7天体验版 TUIRoomKit 进行接入测试。注意：领取体验版后仅开通 TUIRoomKit 7天的体验资格，测试过程中所产生的音视频时长等资源消耗，仍会按照实时音视频 TRTC 标准计费规则计费；新账号首次可前往 试用中心 免费领取10000分钟音视频时长；如果所选 SDKAppID 体验版领取次数已达上限，需要购买 TUIRoomKit 包月套餐才能开通服务，请点击场景套餐订阅按钮或前往 购买页 购买；

3. 领取完成后，可以看到体验版的基本信息，包括服务状态、版本信息和功能详情、到期时间。
4. 单击集成指南，即可参照集成指南开始集成。至此 TUIRoomKit 服务开通完成。

步骤二：准备 Vue 工程代码

打开您已有 Vue 工程，可跳过该步骤。如果无 Vue 项目，可选择以下方式生成模版工程。 生成 Vue3 + Vite + TS 模版工程生成 Vue3 + Webpack + TS 模版工程生成 Vue2 + Webpack + JS 模版工程注意：Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当您的包管理器发出警告时，请注意升级您的 Node 版本。

# npm 6.xnpm create vite@latest TUIRoom-demo --template vue-ts
# npm 7+, extra double-dash is needed:npm create vite@latest TUIRoom-demo -- --template vue-ts
# yarnyarn create vite TUIRoom-demo --template vue-ts
# pnpmpnpm create vite TUIRoom-demo --template vue-ts

说明：以 npm6.x 的创建方式为例，生成模板工程操作流程图如下：（其中标记高亮区域为需要输入或选择）
成功生成 Vue3 + Vite + TS 模板工程后，执行以下脚本：

cd TUIRoom-demonpm installnpm run dev

// 安装 vue-cli，注意 Vue CLI 4.x 要求 Node.js 为 v10 以上版本npm install -g @vue/cli// 创建 Vue3 + Webpack + TS 模版工程vue create tuiroomkit-demo

注意：执行生成模板工程脚本的过程中，生成模版的方式选择 Manually select features，其余配置选项参考图片。
成功生成 Vue3 + Webpack + TS 模板工程后，执行以下脚本：

cd tuiroomkit-demonpm run serve

// 安装 vue-cli，注意 Vue CLI 4.x 要求 Node.js 为 v10 以上版本npm install -g @vue/cli// 创建 Vue2 + Webpack + Js 模版工程vue create tuiroomkit-demo

注意：执行生成模版工程脚本的过程中，生成模版的方式选择 Default ([Vue 2] babel, eslint)。
成功生成 Vue2 + Webpack + JS 模版工程后，执行以下脚本：

cd tuiroomkit-demonpm run serve

步骤三：下载并引用 TUIRoom 组件

1. 下载 TUIRoom 组件代码
单击 Github , 克隆或下载 TUIRoomKit 仓库代码。2. 引用 TUIRoom 组件Vue3 项目引入 TUIRoom 组件Vue2 项目引入 TUIRoom 组件复制 TUIRoomKit/Web/vue3/src/TUIRoom 文件夹到已有项目 src/ 目录下，引用成功后目录结果如图所示。
在页面中引用 TUIRoom 组件。例如：在 App.vue 组件中引入 TUIRoom 组件。TUIRoom 组件将用户分为主持人角色及普通成员角色。组件对外提供了 init、createRoom、enterRoom 方法。主持人及普通成员可通过 init 方法向 TUIRoom 组件初始化应用及用户数据，主持人可通过 createRoom 方法创建并加入房间，普通成员可通过 enterRoom 方法加入主持人已经创建好的房间。注意：在页面中复制以下代码之后，需要修改 TUIRoom 接口的参数为实际数据。

  
import { ref, onMounted } from 'vue';// 引入 TUIRoom 组件，注意确认引入路径是否正确import Room from './TUIRoom/index.vue';// 获取 TUIRoom 组件元素，用于调用 TUIRoom 组件的方法const TUIRoomRef = ref();
onMounted(async () => {  // 初始化 TUIRoom 组件  // 主持人在创建房间前需要先初始化 TUIRoom 组件  // 普通成员在进入房间前需要先初始化 TUIRoom 组件  await TUIRoomRef.value.init({    // 获取 sdkAppId 请您参考 步骤一    sdkAppId: 0,    // 用户在您业务中的唯一标示 Id    userId: '',    // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系    userSig: '',    // 用户在您业务中使用的昵称    userName: '',    // 用户在您业务中使用的头像链接    avatarUrl: '',    // 用户在您业务中需要的皮肤主题颜色及是否支持切换皮肤主题    theme: {      defaultTheme:'black',      isSupportSwitchTheme: true     }  })  // 默认执行创建房间，实际接入可按需求择机执行 handleCreateRoom 方法  await handleCreateRoom();})
// 主持人创建房间，该方法只在创建房间时调用async function handleCreateRoom() {  // roomId 为用户进入的房间号, 要求 roomId 类型为 string  // roomMode 包含'FreeToSpeak'(自由发言模式) 和'SpeakAfterTakingSeat'(上台发言模式) 两种模式，默认为'FreeToSpeak'，注意目前仅支持自由发言模式  // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)  const roomId = '123456';  const roomMode = 'FreeToSpeak';  const roomParam = {    isOpenCamera: true,    isOpenMicrophone: true,  }  try {    await TUIRoomRef.value.createRoom({ roomId, roomName: roomId, roomMode, roomParam });  } catch (error: any) {    alert('TUIRoomKit.createRoom error: ' + error.message);  }}
// 普通成员进入房间，该方法在普通成员进入已创建好的房间时调用async function handleEnterRoom() {  // roomId 为用户进入的房间号, 要求 roomId 类型为 string  // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)  const roomId = '123456';  const roomParam = {    isOpenCamera: true,    isOpenMicrophone: true,  }  try {    await TUIRoomRef.value.enterRoom({ roomId, roomParam });  } catch (error: any) {    alert('TUIRoomKit.enterRoom error: ' + error.message);  }}
html, body {    width: 100%;    height: 100%;    margin: 0;}
#app {  width: 100%;  height: 100%;}

复制 TUIRoomKit/Web/vue2/src/TUIRoom 文件夹到已有项目 src/ 目录下，引用成功后目录结果如图所示：
在页面中引用 TUIRoom 组件。例如：在 App.vue 组件中引入 TUIRoom 组件。TUIRoom 组件将用户分为主持人角色及普通成员角色。组件对外提供了 init、createRoom、enterRoom 方法。主持人及普通成员可通过 init 方法向 TUIRoom 组件初始化应用及用户数据，主持人可通过 createRoom 方法创建并加入房间，普通成员可通过 enterRoom 方法加入主持人已经创建好的房间。注意：在页面中复制以下代码之后，需要修改 TUIRoom 接口的参数为实际数据。

  
      

import RoomContainer from '@/TUIRoom/index.vue';export default {  name: 'App',  components: { RoomContainer },  data() {    return {};  },  async mounted() {    // 初始化 TUIRoom 组件    // 主持人在创建房间前需要先初始化 TUIRoom 组件    // 普通成员在进入房间前需要先初始化 TUIRoom 组件    await this.$refs.TUIRoomRef.init({      // 获取 sdkAppId 请您参考 步骤一      sdkAppId: 0,      // 用户在您业务中的唯一标示 Id      userId: '',      // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系      userSig: '',      // 用户在您业务中使用的昵称      userName: '',      // 用户在您业务中使用的头像链接      avatarUrl: '',    });    // 默认执行创建房间，实际接入可按需求择机执行 handleCreateRoom 方法    await this.handleCreateRoom();  },  methods: {    // 主持人创建房间，该方法只在创建房间时调用    async handleCreateRoom() {      // roomId 为用户进入的房间号, 要求 roomId 类型为 string      // roomMode 包含'FreeToSpeak'(自由发言模式) 和'SpeakAfterTakingSeat'(上台发言模式) 两种模式，默认为'FreeToSpeak'，注意目前仅支持自由发言模式      // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)      const roomId = '123456';      const roomMode = 'FreeToSpeak';      const roomParam = {          isOpenCamera: true,          isOpenMicrophone: true,      }      try {        await this.$refs.TUIRoomRef.createRoom({ roomId, roomName: roomId, roomMode, roomParam });      } catch (error) {        alert('TUIRoomKit.createRoom error: ' + error.message);      }    },    // 普通成员进入房间，该方法在普通成员进入已创建好的房间时调用    async handleEnterRoom() {      // roomId 为用户进入的房间号, 要求 roomId 类型为 string      // roomParam 指定了用户进入房间的默认行为（是否默认开启麦克风，是否默认开启摄像头，默认媒体设备Id)      const roomId = '123456';      const roomParam = {          isOpenCamera: true,          isOpenMicrophone: true,      }      try {        await this.$refs.TUIRoomRef.enterRoom({ roomId, roomParam });      } catch (error) {        alert('TUIRoomKit.enterRoom error: ' + error.message);      }    }  },};

html, body {  width: 100%;  height: 100%;  margin: 0;}
#app {  width: 100%;  height: 100%;}

步骤四：配置开发环境

TUIRoom 组件引入之后，为了确保项目可以正常运行，需要进行以下配置：配置 Vue3 + Vite + TS 开发环境配置 Vue3 + Webpack + TS 开发环境配置 Vue2 + Webpack + TS 开发环境1. 安装依赖安装开发环境依赖：

npm install sass typescript -S -D

安装生产环境依赖：

npm install mitt pinia @tencentcloud/tuiroom-engine-js vue-i18n -S

2. 注册 PiniaTUIRoom 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia，项目入口文件为 src/main.ts 文件。

// src/main.ts 文件import { createPinia } from 'pinia';
const app = createApp(App);// 注册 piniaapp.use(createPinia()); app.mount('#app');

3. 配置中英文切换TUIRoom 目前支持中英文语言切换，需要您在 main.ts 文件中注册 i18n 实例。

// src/main.ts// 引入 locales/index.ts 文件，请确认引入路径是否正确import VueI18n from './TUIRoom/locales/index';
app.use(VueI18n);

4. 配置 esLint 校验如果您不希望 TUIRoomKit 组件的 esLint 规则和您本地的规则出现冲突，您可以在.eslintignore中添加忽略 TUIRoom 文件夹。

src/TUIRoom

1. 安装依赖安装开发环境依赖：

npm install sass sass-loader typescript -S -D

安装生产环境依赖：

npm install mitt pinia @tencentcloud/tuiroom-engine-js vue-i18n rtc-detect -S

2. 注册 Pinia
TUIRoom 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia，项目入口文件为 src/main.ts 文件。

// src/main.ts 文件import { createPinia } from 'pinia';
const app = createApp(App);// 注册 piniaapp.use(createPinia()); app.mount('#app');

3. 配置中英文切换 TUIRoom 目前支持中英文语言切换，需要您在 main.ts 文件中注册 i18n 实例。

// src/main.ts// 引入 locales/index.ts 文件，请确认引入路径是否正确import VueI18n from './TUIRoom/locales/index';
app.use(VueI18n);

4.配置 esLint 校验如果您不希望 TUIRoomKit 组件的 esLint 规则和您本地的规则出现冲突，您可以在.eslintignore中配置忽略 TUIRoom 相关文件。

src/TUIRoomsrc/App.vuesrc/main.ts

说明：TUIRoomKit 组件要求 vue2 项目工程安装 vue2.7 版本并支持 typescript 环境。如您当前项目为 vue2.6 + js 环境，按照以下步骤执行，可升级为 vue2.7 + ts 环境。vue2.6 升级到 vue2.7 是平滑升级的，对已有代码无影响。配置 ts 环境之后，对已有 js 代码无影响。请放心升级。1. 配置 typescript, 支持 TUIRoom 组件加载

vue add typescript

配置 TS 开发环境的选项可参考图片：
2. 安装依赖安装开发环境依赖：

npm install sass sass-loader -S -D

安装生产环境依赖：

npm install vue@^2.7 pinia @tencentcloud/tuiroom-engine-js vue-i18n@^8 vue-i18n-bridge rtc-detect mitt -S

3. 注册 Pinia
TUIRoom 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia，项目入口文件为 src/main.ts 或者src/main.js 文件。

import { createPinia, PiniaVuePlugin } from 'pinia';
Vue.use(PiniaVuePlugin);const pinia = createPinia();
new Vue({  pinia,  render: h => h(App),}).$mount('#app');

4. 配置中英文切换TUIRoom 目前支持中英文语言切换，需要您在 main.ts 文件中注册 i18n 实例。

import i18n from './TUIRoom/locales/';
Vue.use(i18n);

5. 配置 esLint 校验如果您不希望 TUIRoomKit 组件的 esLint 规则和您本地的规则出现冲突，您可以在.eslintignore中配置忽略 TUIRoom 相关文件。

src/TUIRoom

步骤五：开发环境运行

在控制台执行开发环境运行脚本，使用浏览器打开包含 TUIRoomKit 的页面，即可在页面中使用 TUIRoomKit 组件。Vue3 + Vite + TS 项目Vue3 + Webpack + TS 项目Vue2 + Webapck + TS 项目1. 执行开发环境命令。

npm run dev

2. 在浏览器中打开页面 http://localhost:3000/。注意：因 TUIRoom 按需引入 element-plus 组件，会导致开发环境路由页面第一次加载时反应较慢，等待 element-plus 按需加载完成即可正常使用。element-plus 按需加载不会影响打包之后的页面加载。
1. 执行开发环境命令

npm run serve

2. 在浏览器中打开页面 http://localhost:8080/注意：运行过程中若 src/TUIRoom 目录中有 eslint 报错，可在 .eslintignore 文件中添加 /src/TUIRoom/ 路径屏蔽 eslint 检查。3. 体验 TUIRoom 组件功能1. 执行开发环境命令

npm run serve

2. 在浏览器中打开页面 http://localhost:8080/注意：运行过程中若 src/TUIRoom 目录中有 eslint 报错，可在 .eslintignore 文件中添加 /src/TUIRoom/ 路径屏蔽 eslint 检查。

步骤六：开始您的第一场会议

1.项目启动后，点击下方邀请成员。2.拷贝房间链接，在新的浏览器标签页打开链接进入房间。Web 端 “开始您的第一场会议” 具体步骤示例：
H5 端 “开始您的第一场会议” 具体步骤示例：


步骤七：生产环境部署

1. 打包 dist 文件

npm run build

说明：实际打包命令请查看 package.json 文件2. 部署 dist 文件到服务器上生产环境要求使用 HTTPS 域名：

常见问题

常见问题

其他文档

TUIRoomKitTUIRoom demo 快速跑通界面定制 (TUIRoomKit)

联系我们

如果您在接入或使用过程中有任何需要或者反馈，欢迎加入 TUIRoomKit 技术交流群 进行技术交流和问题反馈。

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案