本章节主要指导你完成TUILiveKit UI 组件库接入的环境配置。
注意：集成方案说明：
注意：这篇档提供的是 UI 组件库接入方案，包含视频直播、语聊房的完整 UI 界面与全套业务逻辑。如果你有极高的 UI 定制需求，需要采用 无 UI（Core SDK） 集成方式，请直接参考 Core SDK 快速开始。
一、功能预览
TUILiveKit React 是一个功能丰富的 Web 直播组件，集成后可快速实现以下功能模块：
二、开通服务
在使用 TUILiveKit 前，请先参考 开通服务，领取 TUILiveKit 体验版或者开通付费版。
三、环境要求
·现代浏览器: 支持 WebRTC APIs 的现代浏览器
·设备：摄像头、麦克风、扬声器
四、配置要求
·Node.js: ≥ 18.19.1（推荐使用 LTS 版本，可通过 `node -v` 命令查看当前版本）
·react: ≥ 18.2.0 且 < 19.0.0
·vite: ≥ 5.4.0
·typescript：≥ 5.8.3
·sass：≥ 1.77.0
五、步骤 1：安装依赖
npmpnpmyarnnpm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react –savepnpm install tuikit-atomicx-react @tencentcloud/uikit-base-component-reactyarn install tuikit-atomicx-react @tencentcloud/uikit-base-component-react
六、步骤 2：完成登录
完成登录是使用 TUILiveKit 的基础，只有在登录成功后才能正常使用 TUILiveKit 的各项功能，故请你耐心检查相关参数是否配置正确：
注意：说明：
注意：在示例代码中，直接进行了登录接口的调用。但在实际项目场景下，强烈推荐你在完成自己的用户身份验证等相关登录操作后，再调用 TUILiveKit 的登录服务。这样可以避免因过早调用登录服务，导致业务逻辑混乱或数据不一致的问题，同时也能更好地适配你项目中现有的用户管理和权限控制体系。
// 强烈建议：在你的业务系统完成登录后，立刻执行以下登录逻辑import { useLoginState } from 'tuikit-atomicx-react';const { login, logout } = useLoginState();async function initLogin() { try { await login({ SDKAppID: 0, // SDKAppID – 开通服务时获取的 SDKAppID userID: '', // UserID – 用户 ID userSig: '', // userSig – 用户签名，详细获取方式请参照下文参数说明 }); } catch (error) { console.error('登录失败:', error); }}
注意：安全提醒: 出于安全考虑，强烈建议将 userSig 的计算逻辑放在你的服务端进行，避免将 SecretKey 暴露在前端代码中。你可以使用 控制台辅助工具 生成临时 userSig 进行调试。 更多信息参见 如何计算及使用 UserSig。GitHub 中的示例代码使用了 genTestUserSig 函数在本地计算 userSig 是为了更快地让你跑通当前的接入流程，但该方案会将你的 SecretKey 暴露在代码当中，这并不利于你后续升级和保护你的 SecretKey。参数说明如下表所示：
七、下一步
完成登录后，你就可以开启集成 TUILiveKit 的直播功能了，可以参照下表链接，接入：直播观看、直播列表等功能。
| 功能 | 描述 | 体验链接 |
| 观众观看 | 实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能 | 观众观看（React） |
| 直播列表 | 展示直播列表界面和功能，包含直播列表，房间信息展示功能 | 直播列表（React） |
| 主播开播 | 主播开播全流程功能，包括开播前的准备和开播后的各种互动 | 主播开播（Vue3）（暂不支持 React） |
八、每次进房都需要调用登录吗？
不需要。通常你只需要调用一次 useLoginState() 返回的 login 函数，我们强烈推荐你将 useLoginState() 返回的 login() 和 logout() 响应式函数， 与你自己的登录业务关联。
九、为什么接入 TUILiveKit 后，必须使用 HTTPS 协议部署？
如果你需要部署项目打包的 dist 文件，生产环境下必须使用 HTTPS 域名。TUILiveKit 底层依赖 WebRTC 功能，也可能访问用户的摄像头、麦克风、扬声器等物理设备，浏览器厂商为了包含用户数据安全和隐私安全，要求必须使用 HTTPS 协议。
注意：
注意：