Conference
  • 产品概述
  • Web
    • 跑通 Demo
    • 集成
    • UI 定制
    • Conference Control
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 虚拟背景
    • 更多功能
      • 悬浮窗
      • 文字水印
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomEvents
        • TUIRoomEngine 定义
    • 常见问题
  • iOS
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • Android
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • Electron
    • 跑通 Demo
    • 集成
    • UI 定制
    • Conference Control
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
      • 文字水印
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine 定义
    • 常见问题
  • Flutter
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • In-Conference Chat
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • 产品概述
    • 产品概述
  • 开通服务
  • 价格中心
    • 免费时长
    • TRTC 多人音视频 Conference 包月套餐
    • 订阅套餐时长计费说明
    • 现收现付
      • 音视频时长计费说明
      • 云端录制计费说明
      • 混流转码与旁路转推计费说明
  • 服务器 API
    • REST 接口
      • RESTful 接口概述
      • RESTful 接口列表
      • Room Management
        • Create a Room
        • Destroy a Room
        • Update the Room Information
        • Get the Room Information
      • 用户管理
        • Get the Room Member List
        • Update the Room Member Information
        • Change the Room Ownership
        • Mark Room Members
        • Ban Room Members
        • Unban Room Members
        • Get the Banned Room Member List
        • Remove Room Member
      • Seat Management
        • Get the Seat List
        • Pick User on the Seat
        • Kick User off the Seat
        • Lock the Seat
    • Third-Party Callback
      • Callback Overview
      • Callback Command List
      • Callback Configuration
        • Query Callback Configuration
        • Create Callback Configuration
        • Update Callback Configuration
        • Delete Callback Configuration
      • Room Related
        • After a Room Is Created
        • After a Room Is Destroyed
        • After the Room Information Is Updated
      • User Related
        • After a Room Is Entered
        • After a Room Is Left
      • Seat Connection Related
        • After the Seat List Is Changed
  • 错误码
Conference

跑通 Demo

本文档主要介绍如何快速跑通 TUIRoomKit 示例工程,体验高质量多人视频会议。跟随本文档,您可以在 10 分钟内跑通 Demo,并最终体验一个包含完备 UI 界面的多人视频会议功能。




环境准备

Node.js 版本:Node.js ≥ 16.19.1(推荐使用官方 LTS 版本,npm 版本请与 node 版本匹配)。
Modern browser, supporting WebRTC APIs.

下载 Demo

1. 打开终端复制输入示例命令克隆仓库。
2. 安装依赖
Vue3
Vue2
cd ./TUIRoomKit/Web/example/vite-vue3-ts
cd ./TUIRoomKit/Web/example/webpack-vue2.7-ts
npm install

配置 Demo

1. 激活 TUIRoomKit 服务,获取 SDKAppIDSDKSecretKey



2. 打开 TUIRoomKit/Web/example/vite-vue3-ts/src/config/basic-info-config.js 文件,并输入激活服务时获得的 SDKAppIDSDKSecretKey



注意:
Vue2 项目请打开 TUIRoomKit/Web/example/webpack-vue2.7-ts/src/config/basic-info-config.js 文件,并输入激活服务时获得的 SDKAppIDSDKSecretKey 即可

跑通 Demo

1. 在终端中输入命令,运行 Demo。
Vue3
Vue2
# cd TUIRoomKit/Web/example/vite-vue3-ts
npm run dev
# cd TUIRoomKit/Web/example/webpack-vue2.7-ts
npm run serve
注意:
本地环境请在 localhost 协议下访问,具体参见 网络访问协议说明
2. 打开浏览器页面输入相对应的 URL。




创建您的第一个会议

单击 New Room 创建您的第一个会议房间,房间类型分别为举手发言房间自由发言房间
1. 自由发言房间



2. 举手发言房间




加入会议

参与者可以通过填写对应的 RoomId,来加入由会议主持人创建的会议。