HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

如何在 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:071560

评论

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

低代码平台,用拖拽让开发变得更简单

互联网工科生

私有化部署,支持局域网使用的im即时通讯软件

WorkPlus

低代码与数字化转型:重塑企业技术生态的新引擎

不在线第一只蜗牛

低代码 数字化

XPath攻略:从入门到精通,告别查找困难!

测吧(北京)科技有限公司

测试

Illustrator 2023 for mac(ai2023) v27.9中文激活版

iMac小白

SnapGene 5 for Mac(DNA序列分析软件) v5.3.1中文永久激活版

iMac小白

请查收!一份Go代码优化实用指南

伤感汤姆布利柏

成都晨云信息技术完成阿里云PolarDB数据库产品生态集成认证

阿里云数据库开源

数据库 阿里云 polarDB PolarDB-PG

WPF自定义Panel:让拖拽变得更简单

快乐非自愿限量之名

大数据 WPF

iOS系统下最佳的3款HTTP抓包工具:Thor、克魔助手和Http Catcher

低代码与移动办公平台开发:重塑企业生产力

快乐非自愿限量之名

低代码 移动办公

JetBrains GoLand 2023 for Mac GO语言集成开发工具环境

iMac小白

低代码开发:助力企业实现数字化运维体系搭建

EquatorCoco

运维 低代码

Typora for Mac(Markdown文本编辑器) 1.7.6中文版

iMac小白

JetBrains pycharm pro 2023 for mac(Python编辑开发) v2023.3.5中文激活版

iMac小白

一步一步搭建,功能最全的权限管理系统之动态路由菜单

不在线第一只蜗牛

Java vue.js 前端

如何做好信息化和数字化建设,看这一篇就够了

同道说

架构 职场 数字化 信息化 CIO

泛娱乐出海利器:即构Web端1v1方案

ZEGO即构

企业出海 出海社交 音视频开发 音视频通话 直播间

Kubernetes生产集群部署指南

俞凡

Kubernetes 云原生

2024最新最全Java和Go面经,面试了30多场,终于上岸了!

王中阳Go

Java Go 面经 跳槽 后端面试题

GraphPad Prism 10 for Mac(统计分析绘图软件) v10.1.1注册版

iMac小白

Dynamic Wallpaper for Mac(视频动态壁纸) 17.1免激活版

iMac小白

Radio Silence for mac(简单好用的防火墙) v3.2激活版

iMac小白

Go高级构建指南

俞凡

golang

从雏鹰到雄鹰:vivo张开折叠屏的羽翼

脑极体

AIPC

关于Java代码混淆技术,看这篇就够了

雪奈椰子

AI能代替软件工程师吗?

小齐写代码

如何使用Java代码混淆技术保护您的应用程序

软件测试学习笔记丨HttpRunnerV4 用例转换

测试人

软件测试

发现数据异常波动怎么办?别慌,指标监控和归因分析来帮你

袋鼠云数栈

指标体系 指标监控 指标 指标管理 归因分析

观测云产品更新 | 监控、场景图表、链路、查看器、工单管理等

观测云

监控 链路

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