免费下载案例集|20+数字化领先企业人才培养实践经验 了解详情
写点什么

如何在 React Native 中实现视频通话(上)

  • 2019-11-30
  • 本文字数:1564 字

    阅读完需:约 5 分钟

如何在 React Native 中实现视频通话(上)

对于 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。


1render() {2    AgoraRtcEngine.createEngine('YOUR APP ID');3}
复制代码


使用终端或 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 代码。


1export default class App extends Component {2    ...3}
复制代码

渲染视图

该 render()方法在其 return 中生成 UI 元素。在 return 之前的代码中,根据需要来配置 Agora engine。


1render(){ 2  ... 3  return(4    ... 5  ); 6}
复制代码


在渲染之前,我们需要先创建 RTC Engine。在如下代码中填写你的 App ID。


1AgoraRtcEngine.createEngine('YOUR APP ID');
复制代码


创建完成之后,启用视频与音频


1AgoraRtcEngine.enableVideo();2AgoraRtcEngine.enableAudio();
复制代码


设置视频和频道配置文件。如下述代码中,视频被设定为宽度 360、高度 640,帧率为 15,比特率为 300:


1AgoraRtcEngine.setVideoProfileDetail(360,640,15,300); 2    AgoraRtcEngine.setChannelProfile(AgoraRtcEngine.AgoraChannelProfileCommunication);
复制代码


2019-11-30 22:071543

评论

发布
暂无评论
发现更多内容

什么是编译器中的常量传播?

华为云开发者联盟

开发 编译器 常量传播 基本块

如何开启企业数字化转型?

博文视点Broadview

海泰方圆政务信息系统密码应用解决方案 保障政务业务和数据安全

电子信息发烧客

Netty实战 -- 使用Netty实现分布式框架Dubbo RPC

Bug终结者

dubbo Netty RPC 网络通信 8月月更

TiFlash DeltaTree Index 的设计和实现分析

TiDB 社区干货传送门

前端监控系列1| 字节的前端监控SDK是怎样设计的

字节跳动终端技术

前端 监控 sdk

网易DBA团队出品“Mysql实用手册”正式开源,Github日下载破万

冉然学Java

Java MySQL 数据库 开源 架构

TiDB 查询优化及调优系列(五)调优案例实践

TiDB 社区干货传送门

达摩克利斯之剑:开源软件的合规风险及防控策略

SEAL安全

开源安全 软件供应链安全 开源合规 软件供应链攻击

「周大福」WeOps助力周大福开启IT运维数字化转型之路

嘉为蓝鲸

TiDB 论文引发的 HTAP 数据库再思考

TiDB 社区干货传送门

数据库架构选型

Linux面试最高频的5个基本问题

千锋IT教育

vue-i18n国际化语言在项目中的使用

CRMEB

【React源码系列】React Hydrate原理及源码剖析

爱切图的木子老师

React react源码 React服务端渲染原理 React Hydrate

Spark 性能调优

TiDB 社区干货传送门

性能调优

【等保小知识】过等保一定要买堡垒机吗?堡垒机有什么作用?

行云管家

网络安全 等保 堡垒机 等级保护 过等保

手写webpack tapable源码,官方tapable的性能真的就一定是好的吗?

爱切图的木子老师

前端 webpack 前端面试 webpack-tapable

Android技术分享|【Android踩坑】怀疑人生,主线程修改UI也会崩溃?

anyRTC开发者

android 音视频 UI 移动开发 主线程

使用 Spring Boot 构建 TiDB 应用程序

TiDB 社区干货传送门

【直播回顾】OpenHarmony知识赋能六期第五课—WiFi子系统

OpenHarmony开发者

OpenHarmony

Redis让我凉在美团一面,摸爬滚打3个月,二战逆袭成功斩获Offer

冉然学Java

Java redis 数据结构 面试 美团

元宇宙-原来挺简单

刘旭东

WebGL 数字孪生 元宇宙 blender Shapr3D

学习大数据课程后好找工作吗?

小谷哥

Oracle SQL Language Reference手册中的错误

我不吃六安茶

ANTLR

SpringMVC(六、声明式事务控制)

开源 springmvc 8月月更

TiSpark 如何扩展 Spark

TiDB 社区干货传送门

2022 CCF中国开源大会会议通知(第四轮)

CCF开源发展委员会

带你了解TensorFlow pb模型常用处理方法

华为云开发者联盟

人工智能 模型

使用 TiDB Cloud (DevTier) 构建 TiDB 集群

TiDB 社区干货传送门

TiSpark 原理之下推丨TiDB 工具分享

TiDB 社区干货传送门

Go-Excelize API源码阅读(八)——UngroupSheets()

Regan Yue

Go 开源 源码刨析 8月日更 8月月更

如何在 React Native 中实现视频通话(上)_文化 & 方法_声网_InfoQ精选文章