如何用 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 在这里: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 
      this._localView = component} 
         style = {{width:360,height:240}} 
     /> 
 
      this ._remoteView = component} 
        style = {{width:360,height:240}} 
    /> 

    ... 

     
);
复制代码

然后在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



你可能感兴趣的:(如何用 React Native 开发实时音视频应用)