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 的自定义功能开发。