直播 SDK 跑通示例项目（Web）

本文将指导您如何在 10 分钟内快速跑通 TUILiveKit Web 端 API 示例项目（api-example-vue3），通过交互式卡片体验各 State Hook 的 API 调用效果。
注意：
欢迎点击 在线体验链接，即可立即体验完整的 Demo。
﻿
﻿
﻿
准备工作
开通服务
在接入之前，请先参考 开通服务 ，领取 TUILiveKit 体验版或者开通付费版。
环境准备
现代浏览器: 支持 WebRTC API 的现代浏览器。
设备：摄像头、麦克风、扬声器。
配置要求
要求
说明
Node.js
≥ 18
包管理器
npm 9.x（推荐）
浏览器
Chrome 90+、Safari 15+、Edge 90+（现代浏览器即可）
开发工具
VSCode / Cursor / Trae / CodeBuddy 等任意 IDE
操作步骤
获取 Demo 并安装依赖
您可以从 Github 下载 api-example-vue3 源码，或者直接在命令行运行以下命令：
git clone https://github.com/Tencent-RTC/TUIKit_Vue3.git
cd TUIKit_Vue3/demos/live/api-example-vue3
npm install
配置 Demo
打开 src/config/basic-info-config.js，填入您开通服务时获取的 SDKAPPID 和 SDKSECRETKEY：
export const SDKAPPID = 0;        // ← 替换为您的 SDKAPPID
export const SDKSECRETKEY = '';   // ← 替换为您的 SDKSECRETKEY
注意：
客户端硬编码 SDKSECRETKEY 仅用于本地调试。正式上线前，必须将 UserSig 生成逻辑迁移到您的业务后端，避免密钥泄露导致被盗用。详见 服务端生成 UserSig。
编译并运行
npm run dev
功能概览
登录
在页面顶部输入框或左侧菜单 登录与用户信息 → Login 卡片中输入 UserID，点击登录，系统自动生成 UserSig 并登录。建议在两个浏览器标签页分别以不同 UserID 登录（一主播一观众），体验完整互动流程。
角色分配
角色由 SDK 状态自动推导，无需手动切换：
角色
获取方式
未进房
登录后默认状态。
主播
调用 startLive 创建直播间。
观众
调用 joinLive 加入直播间。
管理员
主播调用 setAdministrator 提升。
API 模块说明
左侧菜单按功能分组，每组对应一个 State Hook：
模块
Hook
说明
登录与用户信息
useLoginState
登录、登出、设置用户资料。
直播间生命周期
useLiveListState
创建/加入/离开/结束直播、拉取直播列表。
播放控制
useLivePlayerState
暂停、恢复、刷新、音量、全屏、画中画、分辨率切换。
设备控制
useDeviceState
摄像头/麦克风开关、设备列表、屏幕分享、音量调节。
观众管理
useLiveAudienceState
观众列表、设置/撤销管理员、踢人、禁言。
麦位管理
useLiveSeatState
上麦/下麦、锁定/解锁麦位、踢人下麦、移动麦位、远端设备控制。
连麦
useCoGuestState
申请上麦、邀请上麦、审批、断开连麦。
跨房连麦
useCoHostState
跨房间主播连线、邀请/接受/拒绝/退出。
PK 对战
useBattleState
发起/接受/拒绝/退出 PK 对战。
弹幕
useBarrageState
发送文本弹幕、自定义消息、本地提示。
礼物与点赞
useLiveGiftState
刷新礼物列表、发送礼物、发送点赞、设置语言。
卡片交互
每张 API 卡片包含：参数输入表单、Run 按钮、JSON 输出面板、可复制代码片段、使用须知（前置条件与注意事项）。页面底部 EventLog 面板实时展示 SDK 事件回调，支持按模块过滤。
部分卡片会根据当前状态自动禁用并提示原因（例如“已在麦位上”、“未在直播间中”、“仅限主播/管理员”）。
完整体验流程
主播端
﻿
﻿
﻿
观众端
﻿
﻿
﻿
连麦流程
﻿
﻿
﻿
说明：
如果您想了解具体 API 内容或通过 API 调用的方式搭建您的直播产品，请查阅 API 文档。
联系我们
售前咨询
当您需要购买咨询时，您可以直接通过 售前咨询  进行提问，会有专属客户经理在线为您解答，为您提供专业的上云方案。同时，您也可以直接致电销售人员，咨询热线：4009100100转1（工作日9:00 - 18:00）。 
售后支持
当您遇到问题需要处理时，您可以直接通过 售后支持 进行提问，腾讯云工程师7 × 24小时在线为您提供服务。同时，您也可以直接致电客服人员，寻求相应的帮助，客服咨询：4009100100（7 × 24小时）。

要求	说明
Node.js	≥ 18
包管理器	npm 9.x（推荐）
浏览器	Chrome 90+、Safari 15+、Edge 90+（现代浏览器即可）
开发工具	VSCode / Cursor / Trae / CodeBuddy 等任意 IDE

角色	获取方式
未进房	登录后默认状态。
主播	调用 `startLive` 创建直播间。
观众	调用 `joinLive` 加入直播间。
管理员	主播调用 `setAdministrator` 提升。

模块	Hook	说明
登录与用户信息	`useLoginState`	登录、登出、设置用户资料。
直播间生命周期	`useLiveListState`	创建/加入/离开/结束直播、拉取直播列表。
播放控制	`useLivePlayerState`	暂停、恢复、刷新、音量、全屏、画中画、分辨率切换。
设备控制	`useDeviceState`	摄像头/麦克风开关、设备列表、屏幕分享、音量调节。
观众管理	`useLiveAudienceState`	观众列表、设置/撤销管理员、踢人、禁言。
麦位管理	`useLiveSeatState`	上麦/下麦、锁定/解锁麦位、踢人下麦、移动麦位、远端设备控制。
连麦	`useCoGuestState`	申请上麦、邀请上麦、审批、断开连麦。
跨房连麦	`useCoHostState`	跨房间主播连线、邀请/接受/拒绝/退出。
PK 对战	`useBattleState`	发起/接受/拒绝/退出 PK 对战。
弹幕	`useBarrageState`	发送文本弹幕、自定义消息、本地提示。
礼物与点赞	`useLiveGiftState`	刷新礼物列表、发送礼物、发送点赞、设置语言。

跑通示例项目（Web）

本页目录：

准备工作

开通服务

环境准备

配置要求

操作步骤

获取 Demo 并安装依赖

配置 Demo

编译并运行

功能概览

登录

角色分配

API 模块说明

卡片交互

完整体验流程

主播端

观众端

连麦流程

联系我们

售前咨询

售后支持