产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
Web&H5（Vue2/Vue3）
本文将指导您快速集成 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 组件
如果需要在已有项目中集成，请按照以下步骤进行接入。
步骤一：安装依赖
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 文件。// src/main.ts 文件import { createPinia } from 'pinia';const app = createApp(App);// 注册 piniaapp.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 组件
说明：
<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 组件
import { conference } from '@tencentcloud/roomkit-web-vue3';await conference.login({sdkAppId: 0, // 替换为您的 sdkAppIduserId: '', // 替换为您的 userIduserSig: '', // 替换为您的 userSig});
参数 | 类型 | 说明 |
userID | String | 用户的唯一标识符，由您定义，只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。 |
SDKAppID | Number | |
SDKSecretKey | String | |
userSig | String | 一种安全保护签名，用于对用户进行登录鉴权认证，确认用户是否真实，阻止恶意攻击者盗用您的云服务使用权。 |
userSig 说明：
开发环境：如果您正在本地跑通 Demo、开发调试，可以采用 debug 文件中的
genTestUserSig（参考步骤3.2）函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。生产环境：如果您的项目要发布上线，请采用 服务端生成 UserSig 的方式。
步骤五：发起新的会议
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { conference } from '@tencentcloud/roomkit-web-vue3';const startConference = async () => {await conference.login({sdkAppId: 0, // 替换为您的 sdkAppIduserId: '', // 替换为您的 userIduserSig: '', // 替换为您的 userSig});await conference.start('123456', {roomName: 'TestRoom',isSeatEnabled: false,isOpenCamera: false,isOpenMicrophone: false,});}startConference()
步骤六：进入已有会议
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { conference } from '@tencentcloud/roomkit-web-vue3';const joinConference = async () => {await conference.login({sdkAppId: 0, // 替换为您的 sdkAppIduserId: '', // 替换为您的 userIduserSig: '', // 替换为您的 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 域名。
其他文档
常见问题
交流与反馈
您在接入或使用过程有任何疑问或者建议，欢迎联系：info_rtc@tencent.com 。
文档反馈