本文引导您跑通 TUIRoomKit Web 端 Demo，并在标准会议中体验多人会议、屏幕共享、成员管理、聊天、云端录制、AI 实时字幕等核心功能。
Demo 效果预览
下图为标准会议会中界面示意，展示了核心功能及各项能力入口。
前提条件
开通服务
SDKAppID：应用标识，腾讯云基于
SDKAppID 完成计费统计。SDKSecretKey：应用密钥，用于初始化配置文件的密钥信息。
环境准备
Node.js：≥ 18.19.1 (推荐使用官方 LTS 版本)。
现代浏览器：支持 WebRTC APIs 的现代浏览器。
设备：摄像头、麦克风、扬声器。
跑通步骤
步骤1：下载源码
访问 GitHub 仓库，克隆项目源码到本地。
git clone https://github.com/Tencent-RTC/TUIRoomKit.git --depth=1
步骤2：进入项目目录
cd TUIRoomKit/Web/example/vite-vue3-ts
步骤3：安装依赖
在项目目录下，安装项目所需的依赖包。
npm install
pnpm install
yarn
步骤4：配置应用信息
在项目目录中找到
TUIRoomKit/Web/example/vite-vue3-ts/src/config/basic-info-config.js 配置文件，并将您在腾讯云控制台获取的 SDKAppID 和 SDKSecretKey 填入对应的变量中。
警告：
本文的 Demo 示例中通过在客户端代码中配置
SDKSecretKey 进行鉴权，但 SDKSecretKey 很容易被反编译逆向破解，一旦密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。在正式的生产环境中，建议在您的服务端生成 UserSig，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig 来进行鉴权。详见 正式运行阶段如何计算 UserSig?
步骤5：启动项目
运行下列命令来启动开发服务器。
npm run dev
pnpm run dev
yarn run dev
启动成功后，浏览器将自动打开调试地址（通常为
http://localhost:5173）。步骤6：登录并进入标准会议
1. 在登录页输入体验用户 A 的用户 ID（自定义字符串即可，如
user_a）并点击登录。2. 体验用户 A 进入会前准备页后，确认浏览器已授权摄像头、麦克风权限。
3. 体验用户 A 点击 新建房间 > 会议房间，创建标准会议并自动入会。体验用户 A 为房主，拥有房间内的最高权限。
4. 打开新的浏览器页面加载调试地址
http://localhost:5173，输入体验用户 B 的用户 ID（如 user_b）并点击登录 。5. 体验用户 B 在会前准备页点击 加入房间，输入房间号后加入。房间号可在体验用户 A 会中页顶部房间标题展开的面板中查看。
多人能力体验提示
会中呼叫、成员管理、聊天、屏幕共享等能力，至少需要 2 个客户端同时在线。建议使用两个浏览器窗口 + 两个不同用户 ID 进行体验。
功能体验指引
完成步骤 6 进入标准会议后，建议优先体验下列核心能力，无需按顺序逐项完成。布局切换、基础美颜、虚拟背景、主题换肤可按需体验。
功能 | 如何体验 | 说明 |
屏幕共享、批注与白板 | 底部：屏幕分享 > 选择标签页共享；共享后在画面左下角点击批注可标注。展开菜单选择白板可开启协作画布。 | 白板与屏幕共享互斥；建议共享标签页，避免无限镜像。 |
云端录制 | 以房主身份入会，底部工具栏点击录制，确认开启云端录制。 | |
AI 实时字幕 | 点击 AI 工具 > 开启 AI 实时字幕，发言内容将实时转写显示。 | |
成员管理与聊天 | 点击成员：管理参会者（静音、移出等）； 点击聊天：发送文字消息，另一客户端可实时收到。 | 需 2 个客户端在线；仅房主/管理员可管理他人。 |
下一步
恭喜您！您已经成功跑通了 TUIRoomKit 的 Vue3 项目。您可以根据业务需求，参考以下集成指引将对应功能集成到您的项目中：
页面 | 文档链接 |
快速接入 |
常见问题
配置 SDKAppID 和 SDKSecretKey 后仍无法登录或进房？
核对配置项：确认
src/config/basic-info-config.js 中的 SDKAppID 和 SDKSecretKey 与 TRTC 控制台 应用信息一致，保存文件后需重启 npm run dev。核对开通状态：确认已完成 开通服务，体验版应用未过期。
核对进房方式：加入房间时请确认房间号与创建方完全一致；两个客户端须使用不同用户 ID。房间号可在房主会中页顶部房间标题展开面板中复制。
录制或 AI 实时字幕按钮不可用？
确认操作身份：云端录制需房主（创建房间的体验用户 A）发起；成员端无录制权限。
AI 实时字幕：前往 TRTC 控制台 对应应用功能配置 > 增值功能，开启 AI 智能识别 的语音转文字能力。体验版未包含时，可领取含 AI 智能语音的体验版或购买对应套餐后再试。
页面提示无法使用麦克风或摄像头设备？
检查浏览器权限：确认地址栏已允许当前页访问摄像头、麦克风。Chrome 可点击地址栏左侧图标，将摄像头和麦克风设为允许后刷新页面。
检查设备占用：关闭其他正在使用摄像头的应用（如视频会议软件、浏览器其他标签页），然后刷新 Demo 页面重试。
检查浏览器兼容性：请使用支持 WebRTC APIs 的现代浏览器（推荐最新版 Chrome）。
屏幕共享时出现无限镜像？
原因：共享了整个屏幕或整个浏览器窗口时，会议画面本身也被纳入共享区域，浏览器会呈现画面套进画面的无限镜像效果。
解决方案：发起屏幕共享时，选择单个标签页或独立应用窗口，不要选择整个屏幕或整个浏览器窗口。Demo 会中也会弹出同类提示，按提示调整共享范围即可。
必须共享整个屏幕时：如有外接显示器，可采用以下任一方式避免共享画面包含会议窗口本身，从而避免无限镜像：
（1）将会议页面拖到外接屏上操作，在本机主屏共享整个屏幕；
（2）发起屏幕共享时直接选择外接显示器桌面进行共享。
