Agora Flutter SDK -- 使用 Flutter 开发的高性能音视频 SDK

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

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

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

准备工作

在正式体验 Agora Flutter SDK 之前，需要：

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

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

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