对于 Web、iOS、Android 开发者来讲,React Native 给跨平台开发工作带来了很大的帮助。仅用 JavaScript 就可以创建运行于移动端的应用。同时,你也可以将 React Native 代码与 Native 代码结合,不论你是用 Objective C、Java 还是用 Swift 开发。
有一位 Agora 开发者,同时也是 React Native 爱好者(Github:syanbo)采用 Agora SDK 写了一个 React Native 封装模块,可实现直播、多人语音或视频会议,当然,同时支持 Android、iOS 平台。
Github 地址:https://github.com/syanbo/react-native-agora
当他在 Agora 的交流群里发出来时,我们也是稍感意外。感谢开发者们对我们的支持。如果你也默默地做了什么新鲜尝试,并用到了 Agora SDK,欢迎私信告诉我们,我们也很乐意帮你分享给更多开发者。
另一方面,现在声网 Agora SDK 已经支持 React Native,能帮助你利用 React Native 为应用增加实时音视频功能。我们之前也开源了一个 Demo,点击「阅读原文」可以查看详细代码,实现了基本的视频通话功能,与 @syanbo 的有些差别。为了方便大家开发,我们简单介绍一下,做一个 React Native 实时视频通话应用的接口调用逻辑,如果你也正在做 React Native 开发,会对你有帮助:
开发环境
首先需要你注册一个 Agora 开发者账号,并准备好 Node.js 6.9.1+开发环境。
Android 开发者还需要:
Android Studio 2.0+
编辑器,如 Sublime Text
Android 设备(不支持模拟器)
iOS 开发者则需要:
Xcode 8.0+
iPhone 或 iPad(不支持模拟器)
快速开始
下面我们来为应用创建 Agora React Native wrapper
注册账号,并获取一个 App ID
在 Agora.io 注册一个开发者账号,每个账号每个月有 10000 分钟的免费通话,可以满足大家日常开发与测试
进入 Dashboard ,选择左侧边栏的项目->项目列表
复制页面中的 App ID
更新并运行 Sample App
打开 App.js 文件。在 render() 中,将里面的 App ID 更新为你刚刚复制的 App ID。
使用终端或 Command Prompt,cd 进入你的项目目录,然后输入 npm install,生成项目文件。
添加适当的 SDK,连接设备,然后按如下所述步骤运行项目:
Android:
下载 Agora Video SDK。
解压缩下载的 SDK 包并将 libs/agora-rtc-sdk.jar 文件复制到该 android/app/libs 文件夹中。
然后将 libs/arm64-v8a/x86/armeabi-v7a 文件夹复制到该 android/app/src/main/jniLibs 文件夹中。
在 Android Studio 中,打开 Android 项目文件夹并连接 Android 设备。
同步并运行项目。
iOS:
下载 Agora Video SDK。
解压缩下载的 SDK 包并将 libs/AograRtcEngineKit.framework 文件复制到该 ios/RNapi 文件夹中。
打开 RNapi.xcodeproj 并连接 iPhone 或 iPad 设备。
应用有效的配置文件并运行该项目。
为已有 React Native 应用添加视频通话
以下要介绍的接口主要实现:
渲染视图
加入频道
离开频道
切换摄像头
切换 Audio Route
添加事件监听器
文件中的 App 类扩展 App.js 包含 React Native Android/iOS 示例应用程序的相关 Agora SDK 代码。
渲染视图
该 render()方法在其 return 中生成 UI 元素。在 return 之前的代码中,根据需要来配置 Agora engine。
在渲染之前,我们需要先创建 RTC Engine。在如下代码中填写你的 App ID。
创建完成之后,启用视频与音频
设置视频和频道配置文件。如下述代码中,视频被设定为宽度 360、高度 640,帧率为 15,比特率为 300:
评论