功能预览
TUILiveKit React 是一个功能丰富的 Web 直播组件，集成后可快速实现以下功能模块：
准备工作
开通服务
环境要求
现代浏览器: 支持 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：安装依赖
npm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react --save
pnpm install tuikit-atomicx-react @tencentcloud/uikit-base-component-react
yarn 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 - 开通服务时获取的 SDKAppIDuserID: '', // UserID - 用户 IDuserSig: '', // userSig - 用户签名，详细获取方式请参照下文参数说明});} catch (error) {console.error('登录失败:', error);}}
注意：
安全提醒: 出于安全考虑，强烈建议将
userSig 的计算逻辑放在您的服务端进行，避免将 SecretKey 暴露在前端代码中。您可以使用 控制台辅助工具 生成临时 userSig 进行调试。 更多信息参见 如何计算及使用 UserSig。GitHub 中的示例代码使用了 genTestUserSig 函数在本地计算 userSig 是为了更快地让您跑通当前的接入流程，但该方案会将您的 SecretKey 暴露在代码当中，这并不利于您后续升级和保护您的 SecretKey。参数说明如下表所示：参数 | 类型 | 说明 |
SDKAppID | int | |
UserID | String | 当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。为避免多端登录导致的账号互踢，请勿使用 1、123 等简单 ID。 |
userSig | String | 用于腾讯云鉴权的票据。请注意： 开发环境：您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 userSig 或者 通过 UserSig 辅助工具 生成临时的 UserSig。生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参考 服务端生成 UserSig。 |
下一步
完成登录后，您就可以开启集成 TUILiveKit 的直播功能了，可以参照下表链接，接入：直播观看、直播列表等功能。
功能 | 描述 | 体验链接 |
观众观看 | 实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能 | |
直播列表 | 展示直播列表界面和功能，包含直播列表，房间信息展示功能 | |
主播开播 | 主播开播全流程功能，包括开播前的准备和开播后的各种互动 |
常见问题
每次进房都需要调用登录吗？
不需要。通常您只需要调用一次 useLoginState() 返回的 login 函数，我们强烈推荐您将 useLoginState() 返回的 login() 和 logout() 响应式函数， 与您自己的登录业务关联。
为什么接入 TUILiveKit 后，必须使用 HTTPS 协议部署？
如果您需要部署项目打包的 dist 文件，生产环境下必须使用 HTTPS 域名。TUILiveKit 底层依赖 WebRTC 功能，也可能访问用户的摄像头、麦克风、扬声器等物理设备，浏览器厂商为了包含用户数据安全和隐私安全，要求必须使用 HTTPS 协议。
注意：
