使用 Agora SDK 开发 React Native 视频通话 App

原创

于 2021-04-19 18:47:41 发布 · 3.5w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#react native #rtc #声网 #视频通话 #SDK

本文介绍如何使用AgoraVideoSDK快速搭建一个具备视频通话功能的ReactNative应用。通过几个简单步骤，即可实现跨平台的视频通话。文章详细解释了如何设置项目、配置SDK以及实现视频通话的核心逻辑。

在 React Native 的应用中，从头开始添加视频通话功能是很复杂的。要保证低延迟、负载平衡，还要注意管理用户事件状态，非常繁琐。除此之外，还必须保证跨平台的兼容性。

当然有个简单的方法可以做到这一点。在本次的教程中，我们将使用 Agora Video SDK 来构建一个 React Native 视频通话 App。在深入探讨程序工作之前，我们将介绍应用的结构、设置和执行。你可以在几分钟内，通过几个简单的步骤，让一个跨平台的视频通话应用运行起来。

我们将使用 Agora RTC SDK for React Native 来做例子。在这篇文章中，我使用的版本是 v3.1.6。

创建一个Agora账户

在声网官网注册并登录后台。

声网 Agora 后台中的项目管理

找到 "项目管理 "下的 "项目列表 "选项卡，点击蓝色的 "创建 "按钮，创建一个项目。(当提示使用 App ID+证书时，选择只使用 App ID。）记住你的 App ID，它将在开发App时用于授权你的请求。

注意：本文没有采用 Token 鉴权，建议在生产环境中运行的所有RTE App 都采用Token鉴权。有关Agora平台中基于Token的身份验证的更多信息，请在声网文档中心搜索关键词「Token」，参考相关文档。

示例项目结构

这就是我们正在构建的应用程序的结构：

.

├── android

├── components

│ └── Permission.ts

│ └── Style.ts

├── ios

├── App.tsx

.

让我们来运行这个应用

需要安装 LTS 版本的 Node.js 和 NPM。
确保你有一个 Agora 账户，设置一个项目，并生成 App ID。
从主分支下载并解压 ZIP 文件。
运行 npm install 来安装解压目录中的 App 依赖项。
导航到 ./App.tsx，将我们之前生成的 App ID 填入 appId: "<YourAppId>"
如果你是为 iOS 构建，打开终端，执行 cd ios && pod install
连接你的设备，并运行 npx react-native run-android / npx react-native run-ios来启动应用程序。等待几分钟来构建和启动应用程序。
一旦你看到手机（或模拟器）上的主屏幕，点击设备上的开始通话按钮。(iOS模拟器不支持摄像头，所以要用实体设备代替)。

通过以上操作，你应该可以在两个设备之间进行视频聊天通话。该应用默认使用 channel-x 作为频道名称。

应用工作原理

App.tsx

这个文件包含了 React Native 视频通话App中视频通话的所有核心逻辑。

import React, {Component} from 'react'
import {Platform, ScrollView, Text, TouchableOpacity, View} from 'react-native'
import RtcEngine, {RtcLocalView, RtcRemoteView, VideoRenderMode} from 'reac