如何用 React Native 开发实时音视频应用

欢迎访问 RTC 开发者社区，与更多实时音视频开发者交流经验。 

对于 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 在这里：github.com/syanbo/reac…

当他在 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。

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

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 代码。

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

渲染视图

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

render（）{ 
  ... 
  return（
    ... 
  ）; 
}
复制代码

在渲染以前，咱们须要先建立 RTC Engine。在以下代码中填写你的 App ID。

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

建立完成以后，启用视频与音频

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

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

AgoraRtcEngine.setVideoProfileDetail（360,640,15,300）; 
    AgoraRtcEngine.setChannelProfile（AgoraRtcEngine.AgoraChannelProfileCommunication）;
复制代码

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

return（
     <View style = {styles.container}> 
     <AgoraRendererView 
         ref = {component => this._localView = component} 
         style = {{width：360，height：240}} 
     /> 
 
     <AgoraRendererView 
         ref = {component => this ._remoteView = component} 
        style = {{width：360，height：240}} 
    /> 

    ... 

    </ View> 
）;
复制代码

而后在return()添加UI按钮元素让用户可以加入频道、离开频道、切换摄像头、切换音频线路。详细代码请见文末连接。

加入频道

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

_joinChannel（）{ 
    ... 
}
复制代码

在_joinChannel()方法中，如下方法执行其余任务：

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

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

AgoraRtcEngine.setLocalVideoView（this._localView，AgoraRtcEngine.AgoraVideoRenderModeFit）;
复制代码

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

AgoraRtcEngine.setVideoProfile（AgoraRtcEngine.AgoraVideoProfileDEFAULT，false）;
复制代码

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

AgoraRtcEngine.startPreview（）; 
AgoraRtcEngine.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()。

_leaveChannel（）{ 
    AgoraRtcEngine.stopPreview（）; 
    AgoraRtcEngine.leaveChannel（）; 
}
复制代码

切换相机

Sample App 中，咱们经过AgoraRtcEngine.switchCamera()切换摄像头。

switchCamera（）{ 
    AgoraRtcEngine.switchCamera（）; 
}
复制代码

切换 Audio Route

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

_switchAudio（）{ 
    AgoraRtcEngine.setEnableSpeakerphone（isSpeakerPhone）; 
    isSpeakerPhone =！isSpeakerPhone; 
}
复制代码

添加事件监听器

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

事件监听器的名称是RemoteDidJoinedChannel。触发时，它会执行如下操做：

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

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

• 保证视频内容所有显示

remoteDidJoineChannelNoti = agoraKitEmitter.addListener（
    'RemoteDidJoinedChannel'，
    （notify）=> { 
        AgoraRtcEngine.setRemoteVideoView（this._remoteView，notify.uid，AgoraRtcEngine.AgoraVideoRenderModeFit）; 
    } 
  ）;
复制代码

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

以上代码详见 Github AgoraIO

与更多 RTC 开发者交流开发经验，欢迎访问 RTC 开发者社区​​​​​​​