React.js 集成 Agora.io 可用的预制UI组件包/UI Kit有哪些？

声网官方针对React技术栈提供了完全封装的UI Kit，可以直接实现类Zoom的标准化视频通话界面，不需要你手动绑定视频流、开发控制按钮。

核心特性 #

• 开箱自带全部常用通话控制功能：麦克风/摄像头开关、共享屏幕、挂断通话、视图切换、参会者列表、聊天弹窗等模块全部内置，默认UI和Zoom操作逻辑基本一致
• 不需要手动处理HTML video元素的流绑定逻辑，组件内部已经完成所有底层音视频渲染逻辑
• 支持自定义配置，你可以通过参数隐藏不需要的功能模块，也可以覆盖默认样式匹配你的产品设计规范

基础接入步骤 #

1. 安装官方UI Kit依赖：

npm install agora-react-uikit
# 或使用yarn
yarn add agora-react-uikit

2. 在你的业务组件中引入UI Kit，传入核心配置参数（Agora App ID、频道名、用户Token）即可直接渲染：

import AgoraUIKit from 'agora-react-uikit';

const App = () => {
  const rtcProps = {
    appId: '你的Agora App ID',
    channel: '你的频道名',
    token: '你的用户临时Token',
  };
  return <AgoraUIKit rtcProps={rtcProps} />
};

如果你需要额外扩展功能，比如虚拟背景、美颜滤镜、云端录制等，都可以直接基于这个UI Kit叠加Agora对应的扩展插件实现，不需要重构现有接入逻辑。

内容的提问来源于stack exchange，提问作者Ali Toshmatov