阅读 775

Agora Flutter SDK -- 使用 Flutter 开发的高性能音视频 SDK | 掘金技术征文

Flutter 是当前最火的跨平台开发技术,而 Agora 是音视频的 SDK,当这两者结合起来,就是 Agora Flutter SDK。

Agora Flutter SDK 可以让你很轻松的使用 Flutter 来开发音视频应用,并且视频的渲染效率和 Native 几乎没有差别,效率一样,但是开发量减半,而且还是跨平台的,有没有觉得很兴奋呢(搓手)。

接下来,就跟着我一起体验吧。

准备工作

在正式体验 Agora Flutter SDK 之前,需要:

  1. 安装好 Flutter 的开发环境
  2. 注册 Agora SDK 的账号
  3. 创建项目
  4. 查看项目信息

1. 安装 Flutter 的开发环境

Flutter 开发环境的安装,我这里就不说了,不熟悉的同学可以去搜索相关文章。

2. 注册 Agora SDK 的账号

点击这个 网址 进入注册页面。

按照提示注册好账号。

3. 创建项目

进入自己的控制台,如下的样子:

点击创建项目,输入名字就可以创建了。

4. 查看项目信息

创建完项目之后,在项列表里点击项目的名字查看信息:

这里的 App ID 很重要,待会会用到。

运行 Agora Flutter SDK 的 Demo 工程

从 Github 上下载 Agora Flutter SDK 的 Demo 工程

可以在 GitHub 上下载 Agora Flutter SDK 的 Demo 工程,地址为:github.com/AgoraIO-Com…

将工程 clone 到本地:

git clone git@github.com:AgoraIO-Community/Agora-Flutter-Quickstart.git
复制代码

在 VS Code 中打开工程

在 VS Code 中,File -> Open ...

选择 Agora-Flutter-Quickstart 的文件夹,然后打开。

在 setting.dart 里添加 App ID

在 lib/src/utils/settings.dart 里添加 App ID。

代码由:

// Agora AppId
const APP_ID = "";
复制代码

变为:

// Agora AppId
const APP_ID = "******";//此处是你的 App ID
复制代码

打开模拟器或连接真机

你可以先使用 Android Stuido 打开 Android 的模拟器,或者打开 iOS 的模拟器,或者连接真机(Android、iOS都行)。

运行工程

我这里打开的是 Android 的模拟器,你可以在 VS Code 的右下角,看到如下的标志:

说明模拟器打开成功。

然后在 VS Code 里,Debug -> Start Without Debugging,就可以运行成功:

这里你如果连接的是真机,可能会出现安装完,闪退的问题,如果出现这样的问题,可以将:

android/app/build.gradle 里的

ndk {
    abiFilters 'armeabi-v7a', 'x86' 
}
复制代码

改为:

ndk {
    abiFilters 'armeabi-v7a', 'x86' ,'arm64-v8a'
}
复制代码

打开视频流

输入房间号(自己随便输入一串数字),点击按钮 Join 就可以打开视频流:

因为我用的是模拟器,所以这里的视频流是这样子的,如果你用的真机,就可以看到视频了

使用另一个手机加入视频房间

在另一台手机上也安装上 App,然后输入相同的房间号,就可以看到两路视频,相当于视频通话:

Agora Flutter SDK 的使用

看完实际运行效果后,我们在看 Agora Flutter SDK 的使用。

为 Flutter 工程添加 Agora Flutter SDK 的依赖

Agora Flutter SDK 也是 Flutter 的一个库,所以要在 pubspec.yaml 里添加依赖:

agora_rtc_engine: ^0.9.4
复制代码

添加完之后运行:

flutter packages get
复制代码

初始化 AgoraRtcEngine

初始化 AgoraRtcEngine 的时候需要传入 App ID:

AgoraRtcEngine.create(APP_ID);
复制代码

开启视频的开关

AgoraRtcEngine.enableVideo();
复制代码

打开本地预览并且将视频添加到屏幕上

AgoraRtcEngine.createNativeView(uid,(viewId) {
      AgoraRtcEngine.setupLocalVideo(viewId, VideoRenderMode.Hidden);
      AgoraRtcEngine.startPreview();
      ....
})
复制代码

将远程的视频添加到屏幕上

AgoraRtcEngine.createNativeView(uid,(viewId) {
      AgoraRtcEngine.setupRemoteVideo(viewId, VideoRenderMode.Hidden, uid);
      ....
})
复制代码

Agora Flutter SDK 的性能检测

为了看 Agora Flutter SDK 的性能,我打开了视频,对 CPU和GPU 进行监控,下面是监控的视频:

下面是 CPU 和 GPU 刷新的数据:

上面的是 GPU 的数据,一帧最大的渲染耗时 25.5 ms,平均耗时为 10.2 ms,FPS > 60 帧,非常流畅 下面的是 CPU 的数据,一帧渲染平均耗时才为 6.3 ms,FPS 远大于 60

在录制视频的同时,使用 Android Profile 监测性能:

发现 CPU 的使用率一直维持在个位数,而内存的使用也不是太多,可见 Agora Flutter SDK 显示视频的性能也很好,几乎和 Native 的没有差别。

总结

Agora Flutter SDK 不仅具有和 Native 一样的性能,而且开发速度更快,下次讲解 Agora Flutter SDK 的自定义功能开发。

关注下面的标签,发现更多相似文章
评论