REACT ROOM 功能
为应用构建的房间
房间生命周期
- 创建与加入房间
- 处理退出与结束操作
实时对话
- 接入参与者视频
- 控制摄像头与麦克风
参与者体验
- 显示房间成员
- 响应房间状态变化
应用身份
- 关联自己的用户 ID
- 用服务端签发的 UserSig 认证
平台接入
- 浏览器工作区
- 遵循原生或浏览器权限要求
产品流程
- 将房间接入导航
- 业务数据保留在应用内
了解 React 会议组件
体验房间及其背后的代码。
会议视图
每个人都有位置
使用 React 视频会议 UI Kit 挂载会议视图。应用提供已认证用户和房间 ID。
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { ConferenceMainView } from '@tencentcloud/roomkit-web-react';
export default function App() {
return (
<UIKitProvider theme="light" language="en-US">
<ConferenceMainView />
</UIKitProvider>
);
}开始使用
启用你的第一个房间
- 01
- 02
- 03
npm install @tencentcloud/roomkit-web-react tuikit-atomicx-react @tencentcloud/uikit-base-component-react @tencentcloud/universal-apiimport { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { ConferenceMainView } from '@tencentcloud/roomkit-web-react';
export default function App() {
return (
<UIKitProvider theme="light" language="en-US">
<ConferenceMainView />
</UIKitProvider>
);
}React 视频会议 UI Kit 常见问题
React 视频会议 UI Kit 包含什么？
React 视频会议 UI Kit 提供现成会议界面，含房间入口、视频视图和参与者控制。身份与业务流程由应用提供。
React 视频会议 UI Kit 用户如何登录？
使用 SDKAppID、用户 ID 和服务端生成的 UserSig。应用密钥不得进入浏览器或移动端代码。进入房间前处理认证失败。
可以自定义会议体验吗？
按文档适配组件与配置。原生 UI Kit 源码提供房间视图和工具栏；支持选项以平台指南为准。
这会替代课程或工作区系统吗？
课程内容、工作区权限、支付和业务记录仍由应用管理，会议组件为该流程添加实时通信。
如何自定义 React 视频会议 UI Kit 界面？
在 @tencentcloud/uikit-base-component-react 的 UIKitProvider 上设置 theme 和 language。需要调整视频布局时，可从 tuikit-atomicx-react/room 导入 RoomLayoutTemplate，然后调用 conference.setFeatureConfig({ layoutTemplate: RoomLayoutTemplate.SidebarLayout })。这会选择一种受支持的布局，不能任意替换所有房间组件。内置邀请选择器基于 IM 好友关系；如需使用业务联系人，请通过文档中的服务端 API 同步。