集成

功能预览
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：安装依赖
npm
pnpm
yarn
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 - 开通服务时获取的 SDKAppID
      userID: '',         // UserID   - 用户 ID
      userSig: '',        // userSig  - 用户签名，详细获取方式请参照下文参数说明
    });
  } catch (error) {
    console.error('登录失败:', error);
  }
}
﻿
注意：
安全提醒: 出于安全考虑，强烈建议将 userSig 的计算逻辑放在您的服务端进行，避免将 SecretKey 暴露在前端代码中。您可以使用 控制台辅助工具 生成临时 userSig 进行调试。
登录接口参数说明
参数
类型
说明
SDKAppID
Int
从 TRTC 控制台 > 应用管理 获取。
UserID
String
当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。
userSig
String
用于腾讯云鉴权的票据。请注意：
开发环境：您可以采用本地 GenerateTestUserSig.genTestSig 函数生成 UserSig 或者通过 UserSig 辅助工具 生成临时的 UserSig。
生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参见 服务端生成 UserSig。
更多信息请参见 如何计算及使用 UserSig。
下一步
完成登录后，您就可以开启集成 TUILiveKit 的直播功能了，可以参照下表链接，接入直播观看、直播列表等功能。
功能
描述
体验链接
观众观看
实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能
﻿观众观看（React）﻿
直播列表
展示直播列表界面和功能，包含直播列表，房间信息展示功能
﻿直播列表（React）﻿
主播开播
主播开播全流程功能，包括开播前的准备和开播后的各种互动
﻿主播开播（Vue3）（暂不支持 React）
常见问题
每次进房都需要调用登录吗？
不需要。通常您只需要调用一次 useLoginState() 返回的 login 函数，我们强烈推荐您将 useLoginState() 返回的 login() 和 logout() 响应式函数， 与您自己的登录业务关联。
为什么接入 TUILiveKit 后，必须使用 HTTPS 协议部署？
如果您需要部署项目打包的 dist 文件，生产环境下必须使用 HTTPS 域名。TUILiveKit 底层依赖 WebRTC 功能，也可能访问用户的摄像头、麦克风、扬声器等物理设备，浏览器厂商为了保护用户数据安全和隐私安全，要求必须使用 HTTPS 协议。
注意：
URL 域名协议限制
由于浏览器安全策略的限制，使用 WebRTC 能力对页面的访问协议有严格的要求，请参照以下表格进行开发和部署应用。
应用场景
协议
接收（播放）
发送（上麦）
屏幕分享
备注
生产环境
HTTPS 协议
支持
支持
支持
推荐
生产环境
HTTP 协议
支持
不支持
不支持
-
本地开发环境
http://localhost
支持
支持
支持
推荐
本地开发环境
http://127.0.0.1
支持
支持
支持
-
本地开发环境
http://[本机IP]
支持
不支持
不支持
-
本地开发环境
file:///
支持
支持
支持
-
﻿

参数	类型	说明
SDKAppID	Int	从 TRTC 控制台 > 应用管理获取。
UserID	String	当前用户的唯一 ID，仅包含英文字母、数字、连字符和下划线。
userSig	String	用于腾讯云鉴权的票据。请注意：开发环境：您可以采用本地 `GenerateTestUserSig.genTestSig` 函数生成 UserSig 或者通过 UserSig 辅助工具生成临时的 UserSig。生产环境：为了防止密钥泄露，请务必采用服务端生成 UserSig 的方式。详细信息请参见服务端生成 UserSig。更多信息请参见如何计算及使用 UserSig。

功能	描述	体验链接
观众观看	实现观众进入主播的直播间后观看直播，实现观众连麦、直播间信息、在线观众、弹幕显示等功能	观众观看（React）
直播列表	展示直播列表界面和功能，包含直播列表，房间信息展示功能	直播列表（React）
主播开播	主播开播全流程功能，包括开播前的准备和开播后的各种互动	主播开播（Vue3）（暂不支持 React）

应用场景	协议	接收（播放）	发送（上麦）	屏幕分享	备注
生产环境	HTTPS 协议	支持	支持	支持	推荐
生产环境	HTTP 协议	支持	不支持	不支持	-
本地开发环境	http://localhost	支持	支持	支持	推荐
本地开发环境	http://127.0.0.1	支持	支持	支持	-
本地开发环境	http://[本机IP]	支持	不支持	不支持	-
本地开发环境	file:///	支持	支持	支持	-