本文档主要介绍如何快速跑通 TUIRoomKit 示例工程,体验高质量多人视频会议。跟随本文档,您可以在 10 分钟内跑通 Demo,并最终体验一个包含完备 UI 界面的多人视频会议功能。
![](https://qcloudimg.tencent-cloud.cn/image/document/3b278b9c5275998cf8a45cd63401a449.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/3b278b9c5275998cf8a45cd63401a449.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/13503a876b9c8c1765c00c67ca2a356a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/13503a876b9c8c1765c00c67ca2a356a.png)
环境准备
Node.js 版本:Node.js ≥ 16.19.1(推荐使用官方 LTS 版本,npm 版本请与 node 版本匹配)。
现代浏览器,支持 WebRTC APIs.
下载 Demo
1. 打开终端复制输入示例命令克隆仓库。
2. 安装依赖
cd ./TUIRoomKit/Web/example/vite-vue3-ts
cd ./TUIRoomKit/Web/example/webpack-vue2.7-ts
npm install
配置 Demo
1. 激活 TUIRoomKit 服务,获取 SDKAppID 和 SDKSecretKey。
![](https://qcloudimg.tencent-cloud.cn/image/document/1c88989de66f3405319abee0039323c7.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/1c88989de66f3405319abee0039323c7.png)
2. 打开 TUIRoomKit/Web/example/vite-vue3-ts/src/config/basic-info-config.js 文件,并输入激活服务时获得的 SDKAppID 和 SDKSecretKey:
![](https://qcloudimg.tencent-cloud.cn/image/document/b2ac5ac63c49b3218b646b49da07b64e.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/b2ac5ac63c49b3218b646b49da07b64e.png)
注意:
webpack-vue2.7-ts 项目请打开 TUIRoomKit/Web/example/webpack-vue2.7-ts/src/config/basic-info-config.js 文件,并输入激活服务时获得的 SDKAppID 和 SDKSecretKey 即可。
跑通 Demo
1. 在终端中输入命令,运行 Demo。
# cd TUIRoomKit/Web/example/vite-vue3-tsnpm run dev
# cd TUIRoomKit/Web/example/webpack-vue2.7-tsnpm run serve
注意:
2. 打开浏览器页面输入相对应的 URL。
![](https://qcloudimg.tencent-cloud.cn/image/document/cae06529266d363ee7d98b7bdba43458.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/cae06529266d363ee7d98b7bdba43458.png)
创建您的第一个会议
单击新建房间创建您的第一个会议房间,房间类型分别为举手发言房间和自由发言房间。
1. 自由发言房间
![](https://qcloudimg.tencent-cloud.cn/image/document/5ef4d7c6c0df60df1a85682766303f13.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/5ef4d7c6c0df60df1a85682766303f13.png)
2. 举手发言房间
![](https://qcloudimg.tencent-cloud.cn/image/document/eac760637a831a08fe430d46848248e8.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/eac760637a831a08fe430d46848248e8.png)
加入会议
参与者可以通过填写对应的
RoomId
,来加入由会议主持人创建的会议。![](https://qcloudimg.tencent-cloud.cn/image/document/9ed4369fd5ac02b80afadd2f23f84ba0.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/9ed4369fd5ac02b80afadd2f23f84ba0.png)