据统计，声网Agora 平均每月提供长达 500 亿分钟的视频通话服务。
我们新发布了社区驱动的开源 Web UIKit，它可以最大程度的简化创建自定义视频聊天 app 及发布直播推流服务的步骤，简单到只需 5 行代码。声网Agora Web UIKit 可以帮你在几分钟内搭建一个新项目并投入市场，燥起来！
声网Agora Web UIKit 里封装了访问高级组件的所有视频通话逻辑
声网Agora Web UIKit 是在 Agora Web SDK 的基础上使用 React 搭建的。我们可以通过它访问高级 React 组件或非 React 项目的 web 组件，然后把这些组件添加到网站用来提供视频通话或直播推流服务。
操作方法
首先，注册一个声网Agora 开发者账户——点击这里免费注册!
进入声网Agora 控制台后，创建一个新项目，然后复制声网Agora 的 App ID，我们随后会在创建的 App 中使用这个 App ID。
方法一：使用 Web 组件
Web 组件非常好用，声网Agora Web UIKit 如果配置了 Web 组件，就可以在任何 Web 应用中使用。如果你的网站是用原生 JavaScript、Angular、Vue.js 和 Svelte 等框架搭建的，可以使用 Web 组件，如果使用的是 React 框架，可以直接看下文的方法二。
<body>
<script src="agora-uikit.js"></script>
<agora-react-web-uikit
style="width: 100%; height: 100vh; display: flex;"
appId='<YourAgoraAppIDHere>'
channel='test'
/>
</body>
使用 Web 框架的具体操作步骤为：首先，输入 web 组件脚本。然后，传入声网Agora App ID 和频道名作为属性来使用这个 web 组件。我们可以使用这些属性对 UIKit 进行自定义设置，例如：开启说话人检测、改变布局、观众加入等功能。可以点击这里查看更多信息。
在网站上添加视频会议功能就是这么简单！下面是一个基础版直播 demo，你可以试试看~
方法二：使用 React
创建声网Agora Web UIKit 就是为了实现自定义和扩展。我们可以用它实现自定义 UI，还可以根据需要添加下列功能：说话人检测、双推流模式、以及通过传递传递道具作为观众加入。它用 Typescript 语言编写，由模块化的功能组件搭建而成，所以我们可以挑选其中的单个部分自由搭建。
我们也可以把自己的声网Agora App ID 和频道名作为道具传入，对<AgoraUIKit>组件进行渲染。
import AgoraUIKit from 'agora-react-uikit'
const Videocall = () => {
const rtcProps = { appId: '<Your Agora App ID>', channel: 'test' }
return <AgoraUIKit rtcProps={rtcProps} />
}
export default Videocall
以上就是所有步骤啦！
你可以通过使用不同的道具来自定义功能（点击文档了解不同的道具）。
你也可以点击这里查看完整示例。
如果你想有更深入的了解，可以查看这个博客，里面这个示例的更多信息。
这是一个开源项目，可以在GitHub Repo和API Reference上查看。期待大家的反馈和建议~~
我们还有可用于安卓、iOS、React Native和Flutter的 UIKit。欢迎查看哦~
欢迎随时在GitHub repo提出功能需求或报告 bug~
原文作者：Ekaansh Arora
原文链接：https://www.agora.io/en/blog/building-a-raise-your-hand-feature-for-live-streams-using-the-agora-web-sdk/
