文档概览/
Conference/
Web/
开始集成/
集成/

集成

本文将指导您快速集成 TUIRoomKit 组件。您将在 10 分钟内完成几个关键步骤，最终获得具有完整用户界面的多人会议功能。




TUIRoomKit Demo 体验

您可以单击 TUIRoomKit 在线体验链接 体验 TUIRoomKit 更多功能。 您可以单击 Github 下载 TUIRoomKit 代码，并参考代码仓库 README.md 文档跑通 TUIRoomKit Web 示例工程。

环境准备

Node.js 版本：Node.js ≥ 16.19.1（推荐使用官方 LTS 版本，npm 版本请与 node 版本匹配）。
Modern browser, supporting WebRTC APIs.

集成 TUIRoomKit 组件

说明：
如果您当前尚无 Vue 项目，您可以直接参见 Demo 体验 跑通 Github 示例项目。
如果需要在已有项目中集成，请按照以下步骤进行接入。

步骤一：安装依赖

Vue3
Vue2
npm install @tencentcloud/roomkit-web-vue3 pinia --save
# 注意此处要求 vue版本 >= 2.7.16，如安装失败请检查您的 vue 版本是否支持
npm install @tencentcloud/roomkit-web-vue2.7 pinia
Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia。项目入口文件为 src/main.ts 文件。
说明：
TUIRoomKit npm 包提供了会前预览组件、会中组件以及发起会议、加入会议和界面微调的方法。如需了解更多，请参考 TUIRoomKit API。若这些 API 无法满足您的业务需求，您可以参考 TUIRoomKit 源码导出 方案接入 TUIRoomKit 源码。

步骤二：项目工程配置

注册 pinia：TUIRoom 使用 Pinia 进行房间数据管理，您需要在项目入口文件中注册 Pinia。项目入口文件为 src/main.ts 文件。
Vue3
Vue2
// src/main.ts 文件
import { createPinia } from 'pinia';

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

Vue.use(PiniaVuePlugin);
const pinia = createPinia();

new Vue({
  pinia,
  render: h => h(App),
}).$mount('#app');

步骤三：引用 TUIRoomKit 组件

说明：
引入 ConferenceMainView 组件，组件默认处于 常驻模式（组件始终显示，内部不控制组件的显示与隐藏，若业务端不进行控制，则组件一直保持显示状态）。
Vue3
Vue2
<template>
  <ConferenceMainView></ConferenceMainView>
</template>
<script setup>
import { ConferenceMainView } from '@tencentcloud/roomkit-web-vue3';
</script>
<template>
  <ConferenceMainView></ConferenceMainView>
</template>
<script>
import { ConferenceMainView } from '@tencentcloud/roomkit-web-vue2.7';
export default {
  components: {
    ConferenceMainView,
  },
};
</script>

步骤四：登录 TUIRoomKit 组件

开启会议前需要调用 login 接口进行登录。获取 SDKAppID, userId，userSig可参见 开通服务。
import { conference } from '@tencentcloud/roomkit-web-vue3';
await conference.login({    
  sdkAppId: 0,  // 替换为您的 sdkAppId
  userId: '',  // 替换为您的 userId
  userSig: '',  // 替换为您的 userSig
});
参数
类型
说明
userID
String
用户的唯一标识符，由您定义，只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。
SDKAppID
Number
在 Tencent RTC 控制台 创建的音视频应用的唯一标识。
SDKSecretKey
String
在 Tencent RTC 控制台 创建的音视频应用的 SDKSecretKey。
userSig
String
一种安全保护签名，用于对用户进行登录鉴权认证，确认用户是否真实，阻止恶意攻击者盗用您的云服务使用权。
userSig 说明：
开发环境：如果您正在本地跑通 Demo、开发调试，可以采用 debug 文件中的 genTestUserSig（参考步骤3.2）函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。
生产环境：如果您的项目要发布上线，请采用 服务端生成 UserSig 的方式。

步骤五：发起新的会议

会议主持人可以通过调用 start 接口来发起一场新的会议，其他参会者可以参见 步骤六 的描述，调用 join 接口加入该会议。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
const startConference = async () => {
    await conference.login({    
      sdkAppId: 0,  // 替换为您的 sdkAppId
      userId: '',  // 替换为您的 userId
      userSig: '',  // 替换为您的 userSig
    });
    await conference.start('123456', {
      roomName: 'TestRoom',
      isSeatEnabled: false,
      isOpenCamera: false,
      isOpenMicrophone: false,
    });
}
startConference()

步骤六：进入已有会议

参与者可以通过调用 join 接口，填写对应的 roomId 参数，来加入由会议主持人在 步骤五 中发起的会议。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
const joinConference = async () => {
    await conference.login({    
      sdkAppId: 0,  // 替换为您的 sdkAppId
      userId: '',  // 替换为您的 userId
      userSig: '',  // 替换为您的 userSig
    });
    await conference.join('123456', {
      isOpenCamera: false,
      isOpenMicrophone: false,
    });
}
joinConference()

开发环境运行

1. 执行开发环境命令。（此处以 vue3 + vite 默认项目为例，不同项目 dev 指令可能不同，请根据您自己的项目进行调整）
npm run dev
2. 根据控制台提示，在浏览器中打开页面 ，如：http://localhost:3000/。
3. 体验 TUIRoomKit 组件功能。

生产环境部署

1. 打包 dist 文件。
npm run build
2. 部署 dist 文件到服务器上。
注意：
生产环境要求使用 HTTPS 域名。

其他文档

TUIRoomKit
TUIRoom Demo 快速跑通
界面定制 (TUIRoomKit)
常见问题

交流与反馈

您在接入或使用过程有任何疑问或者建议，欢迎联系：info_rtc@tencent.com 。