专为以下场景打造：REACT
使用 Tencent RTC 的 React Live Streaming UI Kit 添加直播视频观看功能。组合观众端组件、观众评论和直播间列表，打造可自定义的观看体验。
开发者资源
探索 React 直播 UI Kit 组件。
安装 React 直播 UI Kit 并连接用户。
查看产品的实际运行效果并了解其实现方式。
让观众观看创作者的商品演示并参与对话。您的应用负责管理商品目录和购买体验。
将演示及其观众带入您的 React 应用。把观看界面连接到房间，让用户能够观看直播活动。
REACT LIVE 功能
在 React 组件布局中整合视频画面、观众评论和房间发现功能。
将直播视频组件嵌入 React 布局，并将其连接到现有直播。此集成为观众提供观看体验。
import { LiveView } from 'tuikit-atomicx-react'; export function VideoPanel() { return <LiveView />; }
将观众评论放在 React 直播视频视图旁，并让对话和视频始终关联到同一个直播间。
import { BarrageList, BarrageInput } from 'tuikit-atomicx-react'; export function Comments() { return <><BarrageList /><BarrageInput /></>; }
将房间发现功能连接到应用中的观看页面。
import { LiveList } from 'tuikit-atomicx-react'; <LiveList columnCount={3} onLiveRoomClick={openLiveRoom} />
个性化定制
在您的 React 应用中围绕直播体验组织视频、观众互动和导航。
使用平台提供的自定义选项调整视觉呈现。
组合对观众至关重要的直播体验要素。
开始使用
为应用和测试用户启用 Live。
按照平台指南连接您的项目。
让观众登录并打开现有主播创建的房间。
npm install tuikit-atomicx-react \ @tencentcloud/uikit-base-component-react
import { useLoginState } from 'tuikit-atomicx-react'; const { login } = useLoginState(); await login({ SDKAppID, userID, userSig });
React Live Streaming UI Kit 目前支持观众观看和直播房间列表。React 主播开播功能标记为即将推出；如需现有的 Web 开播界面，请使用 Vue 主播端实现。
UI Kit 在底层服务之上提供界面组件。如果需要更灵活地控制自己的应用界面，请选择 SDK。
启用 Live 服务，验证观众身份，并加入主播创建的房间。使用不同账号测试 React 观众端界面，并按照平台指南完成配置。
在您的服务器上创建 UserSig，并在您自己的登录流程完成后将其传递给客户端。应用密钥应始终保存在服务器上。
该界面与托管式 Live 服务承担不同的职责。请为您的应用开通该服务，并查看当前套餐、功能可用性和使用费用。
初始化文档所述的 provider 并组合已连接的组件。让订阅及清理操作与 React 生命周期一致，再在实际应用中测试导航和重复挂载。
测试主播与观众角色、支持的推流或播放事件及重连行为。
用 UIKitProvider 包裹 React 观众端组件，选择浅色或深色主题。例如，渲染 LiveList 时设置 columnCount={5}，并通过 onLiveRoomClick 处理函数打开你的观众路由。处理函数需要将所选房间连接到观看流程；仅改变列表列数不会加入直播。本页的 React 集成用于构建观众观看体验，主播开播需通过单独的主播端集成实现。
获取 React 直播 UI Kit 的配置帮助。
讨论您的产品、预期用量和集成需求。
将观众与直播视频、评论和房间发现功能连接起来。
