使用Agora Web UIKit在5行代码中为您的网站添加视频聊天或直播功能

当你用Agora建立一个视频直播或视频会议网站时，一些技术步骤可能会拖累你。现在有了Agora Web UIKit，你只需用五行代码就可以轻松地在你的网站上添加视频通话功能！它功能齐全，可以让你的网站更有吸引力。它的功能很齐全，而且它带有简单的定制功能，是可以进行扩展的。

功能介绍

• 支持视频会议和流媒体直播
• 即插即用，开箱即用，没有水印或品牌效应
• 桌面和移动的响应式布局
• 可使用React属性定制UI和功能
• 自动管理令牌（使用双击服务器部署）。
• 双流模式和主动检测扬声器
• 使用可重新组合的模块化功能组件构建
• 支持TypeScript，没有第三方的依赖性
• 支持作为网络组件使用
• 每个月有10,000分钟的免费时间

Agora Web UIKit是建立在React之上的。如果您的网站使用普通的JavaScript或不同的框架，如Svelte、Vue或Angular，您可以将UIKit作为一个网络组件使用你可以跳到最后一节来了解更多。

前提条件

• 一个Agora开发者账户（在这里免费注册！）。
• Node.js LTS版本
• 一个使用React构建的网站
• 一个现代网络浏览器

设置

你可以在GitHub上获得这个例子的代码。要用Typescript创建一个React项目，你可以打开一个终端并执行。

npx create-react-app demo --template typescriptcd demo

或者你可以使用你自己的项目。从NPM安装Agora Web UIKit。

npm i agora-react-uikit

注意：在写这篇文章的时候，当前的 agora-react-uikit版本是 *v0.0.5*，而当前的 agora-rtc-sdk-ng版本是 *v4.8.1*.

这就是设置了。现在你可以运行npm start 来启动React服务器并访问localhost:3000 上的hello world应用。

添加视频流

这个UIKit很容易设置，包含一个高级组件，叫做AgoraUIKit 。该组件为我们的实时视频体验处理逻辑和UI。我们可以向该组件传递道具以定制行为和功能。让我们清除App.tsx 文件并开始编写代码，以建立一个视频聊天应用程序。

我们要从agora-react-uikit 包中导入AgoraUIKit 组件。在App组件内，我们有一个状态变量videoCall 。当它被设置为 "true "时，我们将渲染UIKit组件，当它被设置为 "false "时，我们将卸载它。我们在rtcProps 对象中定义Agora App ID和频道名称以及我们的角色。同一频道的用户可以相互交流。你可以使用任何字母数字的字符串作为通道名称。

*注意：*如果你的应用程序是在安全模式下，你可以从Agora控制台生成一个令牌并传入测试。我们稍后会进一步讨论如何使用令牌。

callbacks 对象包含RTC事件作为键，回调函数作为其值--我们使用EndCall 事件来更新状态，并卸载AgoraUIKit 组件。

在返回语句中，我们用rtcProps 和callbacks 对象渲染AgoraUIKit 组件。(卸载AgoraUIKit组件会自动执行所需的清理工作)。

UIKit组件还接受第三个道具，称为styleProps ，它可以通过编写React样式来定制应用程序的外观。你可以用你自己的样式覆盖UIKit每一块的默认样式（如按钮、视频和容器）。

关于实时流媒体呢？

我们已经有一个视频会议网站准备发货了。但现在让我们来看看如何将其转换为一个直播应用程序，用户可以作为主持人或观众加入。主持人可以向频道中的所有人分享他们的音频和视频，而观众成员只能接收来自其他主持人的视频和音频。

让我们添加两个新的状态变量：isHost 和isPinned 。isHost 变量将跟踪用户是主持人还是观众，而isPinned 变量用于在两种预建的布局之间切换。

我们可以使用我们的状态来定义我们的rtcProps 。我们将角色道具添加到rtcProps ，在主持人和观众之间切换（默认情况下，角色是主持人）。UIKit的道具是动态的。如果你更新了作为道具传递的状态，UIKit会对它做出反应（就像标准的React设计模式）。我们正在使用styleProps 来改变底栏的背景颜色，这样我们也可以看到它是如何工作的。

我们将更新我们的用户界面，增加切换我们状态的按钮。我们还将在UIKit中添加styleProps 。当我们的视频通话状态为false时，不要返回null，让我们添加一个<h3> 标签，一旦通话结束，更新我们的状态，就开始通话。

如果你想跟随的话，这里是更新后的样式。

使用RtcProps定制功能

RtcProps对象可以让你自定义UIKit的工作方式。你可以选择功能和布局。而且，使用RtcProps定制的东西越来越多。该对象类型的定义可以在这里找到。

代币管理

如果你在生产中使用Agora Web UIKit，我们强烈建议使用令牌来保护你的应用程序。有两种方法来使用它们。如果你已经设置了一个令牌服务器，你可以通过令牌属性向UIKit手动提供一个令牌。

如果你没有一个令牌服务器，你可以使用tokenUrl属性。这可以用来为通道自动获取一个新的访问令牌，如果它很快就会过期，则可以更新它。请求新令牌的功能希望令牌遵循GitHub上预建的Golang令牌服务器中的URL方案。AgoraIO-Community/agora-token-service。你可以使用这个链接在两次点击中把它部署到Heroku。

在没有React的情况下使用Web UIKit

Agora Web UIKit也可以作为一个Web组件，用于用vanilla JavaScript或Angular、Vue或Avelte等框架构建的网站。要在你的网站上添加视频通话，只需将网络组件作为脚本导入。然后，你可以通过传递你的Agora应用ID和频道名称，在你的DOM中使用该网络组件。

你可以在JS中访问网络组件元素并更新对象属性。这可以让你以编程方式更新道具，这在建立你的按钮以更新直播流中的用户角色时很有用，例如。你可以为结束通话按钮添加事件监听器，以处理用户点击该按钮时发生的事情。我们期待着你的反馈，你可以打开一个功能请求，让我们在网络组件发布时添加更多的RTC事件。

目前，网络组件有一些限制。到目前为止，我们所谈到的一切都被支持，但下一节是针对React的。我们会根据你的反馈，在react发布的同时，不断增加功能和支持这个版本的UIKit。

高级。重构UIKit

如果你需要更精细的控制，或者想为你的应用程序建立一个AgoraUIKit 组件还不支持的自定义布局，你可以提取和使用构成UIKit的各个组件，并将它们重新组合在一起，建立你自己的自定义解决方案，而不必担心管理SDK。

UIKit并不限于使用AgoraUIKit 组件。它是一个由其他几个模块化组件组成的高级组件，这使得它很容易上手。你可以导入并使用各个部分来组成你的应用程序。

RtcConfigure

RtcConfigure 组件包含视频通话的所有逻辑。它处理所有的SDK事件并维护应用程序的状态。你可以将其他UIKit组件封装在RtcConfigure 组件中，以获得对用户对象的访问。

它还设置了RtcContext ，可用于访问Web SDK客户端对象和mediaStore ，其中包含了远程轨道和本地轨道（以及用于突变状态的调度函数）。

轨道配置（TracksConfigure

TrackConfigure 组件处理为应用程序创建音频和视频轨道。

控件

UIKit导出了一个LocalControls 组件，该组件封装了LocalAudioMute 、LocalVideoMute 和EndCall 按钮组件。该库有一个RemoteAudioMute ，一个RemoteVideoMute ，和一个SwapUser （将用户与maxUser交换）按钮。这些组件接受用户对象作为一个道具。

*注意：*远程控制只在本地对远程用户的音频和视频进行静音。这个变化不会反映给通话中的其他人。

视频视图

为了渲染一个用户的视频，我们有两个组件：MaxVideoView 和MinVideoView 。两者都需要一个用户对象作为道具。用户数据被分为两个不同的数组：MaxUser 和MinUser 。MaxUser 数组始终只包含一个用户；其他用户则包含在MinUser 数组中。在夹层布局的情况下，我们可以用一个数组来渲染大视图，另一个数组来渲染视频列表。你不必直接与状态互动。例如，如果你想交换一个用户，你可以使用SwapUser 按钮，这将在内部改变状态。

如果你不想使用视图建立你自己的布局，我们还有gridLayout 和pinnedLayout 组件可用。

Props Context

PropsContext 使用ReactContext API，它让你可以访问提供者和消费者组件。这些让你可以访问我们在组件树的其他地方传递给这个组件的道具。该库使用它来传递 , , 和 在组件树中。rtcProps styleProps callbacks

用户上下文

MaxUidContext 可以让你访问一个数组，其中包含了MaxView （浮动布局中的主视图）中的用户对象。MinUidContext 可以让你访问MinView （浮动布局中的顶部浮动视图）中的用户对象数组。LocalUserContext 让你可以访问本地用户的状态。

重构的例子

让我们通过建立我们自己的高层组件来看看所有这些组件的作用。下面的例子省略了一些琐碎的细节，以便于解释（比如定义道具和样式）。如果你需要更多的信息，你可以看一下AgoraUIKit 组件。

我们用<PropsProvider> 来包装我们的应用程序，以便让其他组件访问道具。如果用户是主机，我们将<VideoCallUI> 包裹在<TracksConfigure> 组件中，该组件创建并传递麦克风和摄像机轨道。

<VideoCallUI> 被<RtcConfigure> 包裹，它包含了我们视频通话或直播流的所有逻辑，也设置了本地或远程用户状态。我们使用<LocalControls> ，在访问用户上下文的<RenderVideos> 组件旁边渲染控制底栏，并使用<MaxVideoView> 组件对每个用户进行映射，渲染视频。

总结

我们期待着你的贡献。如果你有一个功能请求，请打开一个拉动请求。如果你发现了一个bug，请在GitHub问题上报告它。我们也有类似的Android、iOS、React Native和Flutter的UIKits，所以也请务必查看这些。

如果你在使用Web UIKit时有问题，我邀请你加入Agora开发者Slack社区，在那里你可以在#web-help-me channel 。 随时可以在 GitHub Repo上为功能请求打开问题或报告错误。或者你可以在Twitter上与我联系。