快速接入（Web & H5(Vue2/Vue3)）

最近更新时间：2024-04-10 17:39:41
我的收藏
本页目录：

本文介绍 Web 端项目快速接入 TUIRoomKit 组件的方式。参考本文档，您可快速实现多人音视频房间中的房间管理、音视频控制、屏幕共享、成员管理、即时聊天等功能。
﻿
﻿
﻿
﻿
﻿
﻿
您可以单击 TUIRoomKit 在线体验链接 体验 TUIRoomKit 更多功能。
您可以单击 Github 下载 TUIRoomKit 代码，并参考 TUIRoomKit Web 示例工程快速跑通 文档跑通 TUIRoomKit Web 示例工程。
步骤一：开通服务
在使用 TUIRoomKit 发起会议前，您需要前往控制台开通 TUIRoomKit 专属的多人音视频互动服务，具体步骤请参见 开通服务。
步骤二：准备 Vue 工程代码
打开您已有 Vue 项目，支持使用 Vite 打包方式。如果无 Vue 项目，可选择以下方式生成模板工程。 
生成 Vue3 + Vite + TS 模板工程
生成 Vue3 + Webpack + TS 模板工程
生成 Vue2 + Webpack + JS 模板工程
# npm 6.x
npm create vite@latest TUIRoom-demo --template vue-ts
﻿
# npm 7+, extra double-dash is needed:
npm create vite@latest TUIRoom-demo -- --template vue-ts
﻿
# yarn
yarn create vite TUIRoom-demo --template vue-ts
﻿
# pnpm
pnpm create vite TUIRoom-demo --template vue-ts
注意：
执行生成模板工程脚本的过程中，第一步直接回车，第二步选择 Vue，第三步选择 vue-ts。
成功生成 Vue3 + Vite + TS 模板工程后，执行以下脚本：
cd TUIRoom-demo
npm install
npm 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-demo
npm 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-demo
npm run serve
步骤三：下载并引用 TUIRoom 组件
1. 下载 TUIRoom 组件代码
单击 Github，克隆或下载 TUIRoomKit 仓库代码。
2. 引用 TUIRoom 组件
Vue3 项目引入 TUIRoom 组件
Vue2 项目引入 TUIRoom 组件
复制 TUIRoom/Web/vue3/src/TUIRoom 文件夹到已有项目 src/ 目录下。
在页面中引用 TUIRoom 组件。例如：在 App.vue 组件中引入 TUIRoom 组件。
TUIRoom 组件将用户分为主持人角色及普通成员角色。组件对外提供了 init、createRoom、enterRoom 方法。
主持人及普通成员可通过 init 方法向 TUIRoom 组件初始化应用及用户数据，主持人可通过 createRoom 方法创建并加入房间，普通成员可通过 enterRoom 方法加入主持人已经创建好的房间。
注意：
在页面中复制以下代码之后，需要修改 TUIRoom 接口的参数为实际数据。
<template>
  <room ref="TUIRoomRef"></room>
</template>
﻿
<script setup lang="ts">
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: '',
  })
  // 默认执行创建房间，实际接入可按需求择机执行 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);
  }
}
</script>
﻿
<style lang="scss">
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}
﻿
#app {
  width: 100%;
  height: 100%;
  * {
    box-sizing: border-box;
  }
}
</style>
复制 TUIRoomKit/Web/vue2/src/TUIRoom 文件夹到已有项目 src/ 目录下。
在页面中引用 TUIRoom 组件。例如：在 App.vue 组件中引入 TUIRoom 组件。
TUIRoom 组件将用户分为主持人角色及普通成员角色。组件对外提供了 init、createRoom、enterRoom 方法。
主持人及普通成员可通过 init 方法向 TUIRoom 组件初始化应用及用户数据，主持人可通过 createRoom 方法创建并加入房间，普通成员可通过 enterRoom 方法加入主持人已经创建好的房间。
注意：
在页面中复制以下代码之后，需要修改 TUIRoom 接口的参数为实际数据。
<template>
  <div id="app">
    <room-container ref="TUIRoomRef"></room-container>
  </div>
</template>
﻿
<script>
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);
      }
    }
  },
};
﻿
</script>
﻿
<style lang="scss">
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
﻿
#app {
  width: 100%;
  height: 100%;
  * {
    box-sizing: border-box;
  }
}
</style>
步骤四：配置开发环境
TUIRoom 组件引入之后，为了确保项目可以正常运行，需要进行以下配置：
配置 Vue3 + Vite + TS 开发环境
配置 Vue3 + Webpack + TS 开发环境
配置 Vue2 + Webpack + TS 开发环境
1. 安装依赖
安装开发环境依赖：
npm install sass typescript unplugin-auto-import unplugin-vue-components -S -D
安装生产环境依赖：
npm install element-plus events mitt pinia @tencentcloud/tuiroom-engine-js vue-i18n -S
2. 注册 Pinia
TUIRoom 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia，项目入口文件为 src/main.ts 文件。
// src/main.ts 文件
import { createPinia } from 'pinia';
﻿
const app = createApp(App);
// 注册 pinia
app.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. 配置 element-plus 按需引入
TUIRoom 使用 element-plus UI 组件，为避免引入所有 element-plus组件，需要您在 vite.config.ts 中配置 element-plus 组件按需加载。
注意：
以下配置项为增量配置，不要删除已经存在的 Vite 配置项。
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
﻿
export default defineConfig({
 // ...
 plugins: [
  AutoImport({
      resolvers: [ElementPlusResolver()],
  }),
  Components({
      resolvers: [ElementPlusResolver({
          importStyle: 'sass',
      })],
  }),
 ],
 css: {
  preprocessorOptions: {
      scss: {
          // ...
          additionalData: `
              @use "./src/TUIRoom/assets/style/element.scss" as *;
          `,
      },
  },
 },
});
同时为了保证 element-plus 带 UI 组件能够正常显示样式，需要您在入口文件 src/main.ts 中加载 element-plus 组件样式。
// src/main.ts
import 'element-plus/theme-chalk/el-message.css';
import 'element-plus/theme-chalk/el-message-box.css';
5. 配置 esLint 校验
如果您不希望 TUIRoomKit 组件的 esLint 规则和您本地的规则出现冲突，您可以在.eslintignore中添加忽略 TUIRoom 文件夹。
src/TUIRoom
1. 安装依赖
安装开发环境依赖：
npm install sass sass-loader typescript unplugin-auto-import unplugin-vue-components unplugin-element-plus -S -D
安装生产环境依赖：
npm install element-plus mitt pinia @tencentcloud/tuiroom-engine-js vue-i18n -S
2. 注册 Pinia
TUIRoom 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia，项目入口文件为 src/main.ts 文件。
// src/main.ts 文件
import { createPinia } from 'pinia';
﻿
const app = createApp(App);
// 注册 pinia
app.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. 配置 element-plus 按需引入
TUIRoom 使用 element-plus UI 组件，为避免引入所有 element-plus组件，需要您在 vue.config.js 中配置 element-plus 组件按需加载。
注意：
以下配置项为增量配置，不要删除已经存在的 vue.config.js 配置项。
// vue.config.js
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const ElementPlus = require('unplugin-element-plus/webpack')
﻿
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      scss: {
        additionalData: '@use "./src/TUIRoom/assets/style/element.scss" as *;'
      }
    }
  },
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
      }),
      Components({
        resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
      }),
      // 在按需导入时自定义主题颜色
      ElementPlus({
        useSource: true
      })
    ]
  }
})
同时为了保证 element-plus 带 UI 组件能够正常显示样式，需要您在入口文件 src/main.ts 中加载 element-plus 组件样式。
// src/main.ts
import 'element-plus/theme-chalk/el-message.css';
import 'element-plus/theme-chalk/el-message-box.css';
5. 配置 vue.config.js，解决 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. 的报错：
// vue.config.js
module.exports = defineConfig({
  // ...
  configureWebpack: {
    // ...
    resolve: {
      fallback: {
        url: false,
        path: false,
        fs: false,
        crypto: false
      }
    }
  }
})
6. 配置 esLint 校验
如果您不希望 TUIRoomKit 组件的 esLint 规则和您本地的规则出现冲突，您可以在.eslintignore中添加忽略 TUIRoom 文件夹。
src/TUIRoom
1. 配置 typescript, 支持 TUIRoom 组件加载：
vue add typescript
配置 TS 开发环境的选项可参考图片：
﻿
﻿
2. 安装依赖
安装开发环境依赖：
npm install sass sass-loader -S -D
安装生产环境依赖：
npm install vue@^2.7 element-ui pinia @tencentcloud/tuiroom-engine-js vue-i18n@^8 vue-i18n-bridge -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. 配置 element-ui
为了保证 element-ui 带 UI 组件能够正常显示样式，需要您在入口文件 src/main.ts 或src/main.js中注册 element-ui 组件并引用其样式文件。
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
﻿
Vue.use(ElementUI);
5. 配置中英文切换
TUIRoom 目前支持中英文语言切换，需要您在 main.ts 文件中注册 i18n 实例。
import i18n from './TUIRoom/locales/';
﻿
Vue.use(i18n);
6. 配置 ts 声明文件
在 src/shims-vue.d.ts 文件中添加以下配置：
declare module '*'
7. 配置 vue.config.js，解决 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. 的报错：
// vue.config.j
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  // ...
  configureWebpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      url: false,
      path: false,
      fs: false,
      crypto: false,
    };
  },
});
8. 配置 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 按需加载不会影响打包之后的页面加载。
3. 体验 TUIRoom 组件功能。
1. 执行开发环境命令。
npm run serve
2. 在浏览器中打开页面 http://localhost:8080/。
注意：
运行过程中若 src/TUIRoom 目录中有 eslint 报错，可在 .eslintignore 文件中添加 /src/TUIRoom/ 路径屏蔽 eslint 检查；若没有该文件，可在src/TUIRoom 目录下新建 .eslintignore 文件，屏蔽 eslint 检查。
3. 体验 TUIRoom 组件功能。
1. 执行开发环境命令。
npm run serve
2. 在浏览器中打开页面 http://localhost:8080/。
注意：
运行过程中若 src/TUIRoom 目录中有 eslint 报错，可在 .eslintignore 文件中添加 /src/TUIRoom/ 路径屏蔽 eslint 检查；若没有该文件，可在 src/TUIRoom 目录下新建 .eslintignore 文件，屏蔽 eslint 检查。
3. 体验 TUIRoom 组件功能。
步骤六：生产环境部署
1. 打包 dist 文件。
npm run build
说明：
实际打包命令请查看 package.json 文件。
2. 部署 dist 文件到服务器上。
注意：
生产环境要求使用 HTTPS 域名，参见下图：
﻿
﻿
﻿
其他文档
﻿TUIRoomKit﻿
﻿TUIRoom Demo 快速跑通﻿
﻿界面定制 (TUIRoomKit)﻿
﻿常见问题﻿
交流与反馈
您在接入或使用过程有任何需要或者反馈，欢迎加入 腾讯云实时音视频 TRTC 技术交流群 进行技术交流和问题反馈。
﻿
上一篇: 发布日志下一篇: 快速接入（Android）