QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

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

评论

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

人工智能,应该如何测试?(三)数据构造与性能测试篇

霍格沃兹测试开发学社

提升团队工程交付能力,从“看见”工程活动和研发模式开始

阿里云云效

阿里云 云原生 云效

提升团队工程交付能力,从“看见”工程活动和研发模式开始

阿里巴巴云原生

阿里云 云原生 云效

我们是如何测试人工智能的(六)推荐系统拆解

测试人

人工智能 软件测试 自动化测试 测试开发

支付系统概述(五):结算系统

agnostic

支付系统设计与实现

行云防水堡-打造企业数据安全新防线

行云管家

网络安全 数据安全 防水堡

【荣誉】第七在线出席ToB商业头条行业大会 斩获创新力产品奖

第七在线

广州等级保护测评公司一览表2024

行云管家

等保 堡垒机 等级保护 等保测评

云服务器干嘛的?带你掌握云计算的优势

一只扑棱蛾子

云服务器

企业智能体(Agent)来袭!拥有“无限可能”的数智化AI底座

行云创新

AI 智能体 agent

日志系统:一条SQL更新语句是如何执行的?

TimeFriends

OpenAI Sora:60s超长长度、超强语义理解、世界模型。浅析文生视频模型Sora以及技术原理简介

蓉蓉

openai GPT-4 人工智

人工智能,应该如何测试?(二)数据挖掘篇

霍格沃兹测试开发学社

阿里巴巴中国站按关键字搜索商品 API接口使用指南:快速获取商品ID、名称、描述、价格

技术冰糖葫芦

API Explorer API 文档

天翼云超大规模高性能云基础底座、“息壤”获国资委权威认可!

编程猫

Overlay网络与Underlay网络:深入探索与全面对比

GousterCloud

网络 #Kubernetes#

2024年LED显示屏租赁屏市场

Dylan

商业 LED显示屏 全彩LED显示屏 led显示屏厂家 舞台表演

DACI决策框架,给低效能企业一个机会

填空时光

项目管理 效能提升 效能工具 决策管理

思考-使用JSON结构映射业务数据与数据库表结构

alexgaoyh

json 数据库 系统设计 映射

人工智能,应该如何测试?(八)企业级智能客服测试大模型 RAG

霍格沃兹测试开发学社

解锁ETLCloud中Kettle的用法

RestCloud

kettle 数据同步 ETL 数据集成

5个为什么要做外贸网站推广的理由

九凌网络

基于开源IM即时通讯框架MobileIMSDK:RainbowChat-iOS端v9.0版已发布

JackJiang

网络编程 即时通讯 IM

人工智能,应该如何测试?(四)模型全生命周期流程与测试图

霍格沃兹测试开发学社

人工智能,应该如何测试?(七)大模型客服系统测试

霍格沃兹测试开发学社

做跨境电商,为什么要建独立站

Noah

教你如何使用Zig实现Cmpp协议

华为云开发者联盟

云计算 华为云 华为云开发者联盟 华为云短信服务 企业号2024年4月PK榜

IT外包服务助推企业产业融通

Ogcloud

IT IT外包 IT外包公司 IT外包服务 IT外包企业

BSN-DID研究--主题二:发证方函数

BSN研习社

区块链 BSN did

人工智能,应该如何测试?(六)推荐系统拆解

霍格沃兹测试开发学社

去哪儿完成鸿蒙原生应用Beta版本开发,带来一站式在线旅行体验

最新动态

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