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

栏目: 服务器 · 发布时间: 5年前

内容简介:点击阅读原文了解更多

对于 Web、iOS、Android 开发者来讲,React Native 给跨平台开发工作带来了很大的帮助。仅用 JavaScript 就可以创建运行于移动端的应用。同时,你也可以将 React Native 代码与 Native 代码结合,不论你是用 Objective C、 Java 还是用 Swift 开发。

有一位 Agora 开发者,同时也是 React Native 爱好者(Github:syanbo)采用 Agora SDK 写了一个 React Native 封装模块,可实现直播、多人语音或视频会议,当然,同时支持 Android、iOS 平台。

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

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

  1. 在 Agora.io 注册一个开发者账号,每个账号每个月有10000分钟的免费通话,可以满足大家日常开发与测试

  2. 进入 Dashboard ,选择左侧边栏的 项目->项目列表

  3. 复制页面中的 App ID

更新并运行 Sample App

  1. 打开 App.js 文件。在 render() 中,将里面的 App ID 更新为你刚刚复制的 App ID。

1render() {
2    AgoraRtcEngine.createEngine('YOUR APP ID');
3}
  1. 使用终端或Command Prompt, cd 进入你的项目目录,然后输入 npm install ,生成项目文件。

  2. 添加适当的 SDK,连接设备,然后按如下所述步骤运行项目:

Android:

  1. 下载 Agora Video SDK。

  2. 解压缩下载的 SDK 包并将 libs/agora-rtc-sdk.jar 文件复制到该 android/app/libs 文件夹中。

  3. 然后将 libs/arm64-v8a/x86/armeabi-v7a 文件夹复制到该 android/app/src/main/jniLibs 文件夹中。

  4. 在 Android Studio 中,打开 Android 项目文件夹并连接 Android 设备。

  5. 同步并运行项目。

iOS:

  1. 下载 Agora Video SDK。

  2. 解压缩下载的 SDK 包并将 libs/AograRtcEngineKit.framework 文件复制到该 ios/RNapi 文件夹中。

  3. 打开 RNapi.xcodeproj 并连接iPhone或iPad设备。

  4. 应用有效的配置文件并运行该项目。

为已有 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);

return() 方法为 Sample App 显示视图。 AgoraRendererView 是用来显示音频/视频的 UI 元素。示例应用程序创建了两个 AgoraRendererView 元素,即 _localView _remoteView

 1return(
 2    <View style = {styles.container}> 
 3    <AgoraRendererView 
 4        ref = {component => this._localView = component} 
 5        style = {{width:360,height:240}} 
 6    /> 
 7
 8    <AgoraRendererView 
 9        ref = {component => this ._remoteView = component} 
10        style = {{width:360,height:240}} 
11    /> 
12
13    ... 
14
15    </ View> 
16);

然后在 return() 添加UI按钮元素让用户能够加入频道、离开频道、切换摄像头、切换音频线路。详细代码请见「阅读原文」。

加入频道

使用 _joinChannel() 方法将用户加入特定频道。

1_joinChannel(){ 
2    ... 
3}

_joinChannel() 方法中,以下方法执行其他任务:

AgoraRtcEngine.setLocalVideoView() 设置本地视频 view。

Sample App 将本地视频 view 应用于在 render() 中创建的 _localView UI 元素。

1AgoraRtcEngine.setLocalVideoView(this._localView,AgoraRtcEngine.AgoraVideoRenderModeFit);

AgoraRtcEngine.setVideoProfile() 将视频配置文件设置为默认的 Agora 配置文件,且不更改 orientation 属性。

1AgoraRtcEngine.setVideoProfile(AgoraRtcEngine.AgoraVideoProfileDEFAULT,false);

AgoraRtcEngine.startPreview() 启动 Agora SDK 预览,并让 AgoraRtcEngine.joinChannel() 加入频道。

1AgoraRtcEngine.startPreview(); 
2AgoraRtcEngine.joinChannel(null,“rnchannel01”,“React Native for Agora RTC SDK”,0);

上述代码中 joinChannel 的参数设置是这样的:

  • token为null。加入通道后,Agora Engine将设置token为新值。

  • 频道名为 rnchannel01

  • info 记录了关于频道的信息“React Native for Agora RTC SDK”

  • uid 为0,这是通用用户ID值

离开频道

Sample App 应用了 _leaveChannel() ,会调用 AgoraRtcEngine.stopPreview() AgoraRtcEngine.leaveChannel() 。需要注意的是, _leaveChannel() 不会自动停止预览,因此需要先调用 stopPreview()

1_leaveChannel(){ 
2    AgoraRtcEngine.stopPreview(); 
3    AgoraRtcEngine.leaveChannel(); 
4}

切换相机

Sample App 中,我们通过 AgoraRtcEngine.switchCamera() 切换摄像头。

1switchCamera(){ 
2    AgoraRtcEngine.switchCamera(); 
3}

切换 Audio Route

调用 AgoraRtcEngine.setEnableSpeakerphone() 打开或关闭扬声器。这里需要注意由于 isSpeakerPhone 用于全局检测用户是否处于扬声器模式,所以在 setEnableSpeakerphone 后必须更改。

1_switchAudio(){ 
2    AgoraRtcEngine.setEnableSpeakerphone(isSpeakerPhone); 
3    isSpeakerPhone =!isSpeakerPhone; 
4}

添加事件监听器

通过 agoraKitEmitter.addListener() 添加 remoteDidJoineChannelNoti 事件侦听器来检测远程用户加入频道的动作。

事件监听器的名称是 RemoteDidJoinedChannel 。触发时,它会执行以下操作:

  • 将远程视频视图添加到 _remoteView

  • 为用户应用远程视频视图, notify.uid

  • 保证视频内容全部显示

1remoteDidJoineChannelNoti = agoraKitEmitter.addListener(
2    'RemoteDidJoinedChannel',
3    (notify)=> { 
4        AgoraRtcEngine.setRemoteVideoView(this._remoteView,notify.uid,AgoraRtcEngine.AgoraVideoRenderModeFit); 
5    } 
6  );

在 React Native 视图移除后,调用 remoteDidJoineChannelNoti.remove() 来移除事件侦听器。

点击

阅读原文

了解更多


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

黑客攻防技术宝典(第2版)

黑客攻防技术宝典(第2版)

[英] Dafydd Stuttard、[英] Marcus Pinto / 石华耀、傅志红 / 人民邮电出版社 / 2012-6-26 / 99.00元

内容简介: Web应用无处不在,安全隐患如影随形。承载着丰富功能与用途的Web应用程序中布满了各种漏洞,攻击者能够利用这些漏洞盗取用户资料,实施诈骗,破坏其他系统等。近年来,一些公司的网络系统频频遭受攻击,导致用户信息泄露,造成不良影响。因此,如何确保Web应用程序的安全,已成为摆在人们眼前亟待解决的问题。 本书是Web安全领域专家的经验结晶,系统阐述了如何针对Web应用程序展开攻击与......一起来看看 《黑客攻防技术宝典(第2版)》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

随机密码生成器
随机密码生成器

多种字符组合密码