使用 Agora 创建 React Native 视频直播APP - 专栏

从直播购物到音乐会直播，直播的用途十分广泛。创建一个可扩展的、高质量的、实时视频流应用程序需要兼顾很多方面。例如，保持低延迟、加载平衡和管理观众中的数千名用户就已经很有压力，另外还要保持跨平台兼容性。

Agora React Native SDK 中有一个非常简单的方法可以处理这些情况。在本文中，我们将利用 Agora Video SDK 的魔力创建一个可以拥有多个主播并管理数千名用户的直播应用程序。在深入研究它的工作原理之前，我们将介绍应用程序的结构、设置和执行。你在几分钟内通过几个简单的步骤就能开始直播。

我们将在下面的示例中使用Agora RTC SDK for React Native。在撰写本文时，我所使用的是v3.4.6。

创建一个 Agora 账户

点击https://console.agora.io/创建一个帐户并登录到仪表板。你可以参考本指南：如何注册并开始使用声网Agora SDK

building-a-react-native-live-video-broadcasting-app-using-agora-1

导航到 Project Management 选项卡下的 Project List 选项卡，然后单击蓝色的 Create 按钮创建一个新项目。

创建一个新项目并检索 App ID。如果选择带有令牌的 App ID，需为你的项目获取一个临时令牌。你可以在编辑页面上找到生成临时令牌的链接。在开发应用程序时，临时令牌将用于授权你的请求。

注意： 建议对在生产环境中运行的所有 RTE 应用程序进行令牌身份验证。更多关于 Agora 平台基于令牌的认证信息，请参见本指南： 校验用户权限 (agora.io)

示例结构

以下是我们应用程序的结构：

.
├── android
├── components
│ └── Permission.ts
│ └── Style.ts
├── ios
├── App.tsx
├── index.js

运行应用程序

你需要安装 LTS 版本的 Node.js 和 NPM。

确保你已注册 Agora 帐户、设置项目并生成 App ID（和临时令牌）。
从master 分支下载并解压 ZIP 文件。
运行npm install 以在解压后的目录中安装应用程序依赖项。
导航到./App.tsx 并输入我们从 Agora Console ( appId: ‘<YourAppIDHere>’ )获取的 App ID 。如果你使用令牌，需要同时输入你的令牌和频道名称。
如果你正在为 iOS 创建程序，就要打开一个终端并执行cd ios && pod install . 然后，打开ios/<projectName>.xcworkspace 文件以在 XCode 中打开项目并创建应用程序。（iOS 模拟器不支持摄像头。需改用物理设备。）
如果你正在为 Android 创建，则需要连接设备并执行npm run android 以启动应用程序。等待几分钟以创建应用程序。
在手机或模拟器上看到主屏幕后，单击设备上的“开始通话”按钮。

就是这样，然后你就可以在两个设备之间进行视频通话。该应用程序将test 用作频道名称。

了解工作原理

权限.ts

我们正从 Android 上的操作系统导出函数来请求摄像头和麦克风权限。

应用程序.tsx

该App.tsx 文件包含我们视频通话的核心逻辑。

我们从编写导入语句开始。接下来，我们有一些用于APP ID、令牌和频道名称的常量。

我们为应用程序状态定义了一个接口，其中包含isHost （一个布尔值，用于在观众和主播之间切换；主机可以发送和接收流，而观众只能接收流），joinSucceed （如果我们已成功连接，则存储一个布尔值), 和peerIds (用于存储频道中其他用户的 UID 的数组)。

我们定义了一个基于类的组件，即_engine 变量，它将存储RtcEngine 类的实例，它提供可以被我们的应用程序调用来管理直播流的方法。

在构造函数中，我们设置状态变量并请求对 Android 上的相机和麦克风的许可。当组件被嵌入时，我们调用该init 函数，该函数使用 App ID 初始化 RTC 引擎。它还通过调用我们引擎实例上的enableVideo 方法来启用视频。

我们设置channelProfile 为直播以及基于我们的isHost 状态变量值设置clientRole 。

该init 函数还为直播中的各种事件添加了事件监听器。例如，该UserJoined 事件为我们提供了用户加入频道时的 UID。我们将此 UID 存储在我们的状态中。

（如果在我们加入之前有用户连接到频道，则他们在成功加入频道后将会触发一个UserJoined 事件。）

接下来，我们有函数toggleRole ，它改变了观众和主播之间的角色。我们利用startCall 和endCall 开始和结束通话。该toggleRole 函数更新状态并使用基于状态的角色参数调用setClientRole 函数。该joinChannel 方法接受令牌、频道名称、可选信息和可选 UID。（如果你将 UID 设置为 0，则 SDK 会自动分配一个 UID。）

我们定义了渲染功能，用于显示按钮以开始和结束通话，并显示我们的本地视频源以及远程用户的视频源。我们定义了_renderVideos 函数用于渲染我们的视频源。

为了显示本地用户的视频提要，我们使用了<RtcLocalView.SurfaceView> 组件，它接受channelId 和renderMode （可用于将视频放入视图中或缩放以填充视图）作为道具。为了显示远程用户的视频源，我们使用SDK 中的<RtcLocalView.SurfaceView> 组件，该组件接收远程用户的 UID 以及channelId 和renderMode 。我们使用peerIDs 数组映射远程用户的 UID 以显示每个用户的视频。

样式.ts

该Style.ts 文件包含组件的样式。

结论

这就是创建实时视频直播应用程序的步骤，很简单。你可以参考Agora React Native API参考来帮助你快速添加功能，例如静音摄像头和麦克风、设置视频配置文件、混音等。

如果想将应用程序部署到生产环境，你可以在此声网官方博客阅读有关如何使用令牌的更多信息。

欢迎你加入Agora 开发者 Slack 社区。方便你可以随时在#react-native-help-me 频道中提出任何 React Native 问题。

原文作者 Ekaansh Arora
原文链接 https://www.agora.io/en/blog/building-a-react-native-live-video-broadcasting-app-using-agora/