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

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

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

接下来&＃xff0c;就跟着我一起体验吧。

准备工作

在正式体验 Agora Flutter SDK 之前&＃xff0c;需要&＃xff1a;

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

1. 安装 Flutter 的开发环境

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

2. 注册 Agora SDK 的账号

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

按照提示注册好账号。

3. 创建项目

进入自己的控制台&＃xff0c;如下的样子&＃xff1a;

点击创建项目&＃xff0c;输入名字就可以创建了。

4. 查看项目信息

创建完项目之后&＃xff0c;在项列表里点击项目的名字查看信息&＃xff1a;

这里的 App ID 很重要&＃xff0c;待会会用到。

运行 Agora Flutter SDK 的 Demo 工程

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

可以在 GitHub 上下载 Agora Flutter SDK 的 Demo 工程&＃xff0c;地址为&＃xff1a;github.com/AgoraIO-Com…

将工程 clone 到本地&＃xff1a;

git clone git&＃64;github.com:AgoraIO-Community/Agora-Flutter-Quickstart.git


在 VS Code 中打开工程

在 VS Code 中&＃xff0c;File -> Open ...

选择 Agora-Flutter-Quickstart 的文件夹&＃xff0c;然后打开。

在 setting.dart 里添加 App ID

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

代码由&＃xff1a;

// Agora AppId
const APP_ID &＃61; "";


变为&＃xff1a;

// Agora AppId
const APP_ID &＃61; "******";//此处是你的 App ID


打开模拟器或连接真机

你可以先使用 Android Stuido 打开 Android 的模拟器&＃xff0c;或者打开 iOS 的模拟器&＃xff0c;或者连接真机&＃xff08;Android、iOS都行&＃xff09;。

运行工程

我这里打开的是 Android 的模拟器&＃xff0c;你可以在 VS Code 的右下角&＃xff0c;看到如下的标志&＃xff1a;

说明模拟器打开成功。

然后在 VS Code 里&＃xff0c;Debug -> Start Without Debugging&＃xff0c;就可以运行成功&＃xff1a;

这里你如果连接的是真机&＃xff0c;可能会出现安装完&＃xff0c;闪退的问题&＃xff0c;如果出现这样的问题&＃xff0c;可以将&＃xff1a;

android/app/build.gradle 里的

ndk {abiFilters &＃39;armeabi-v7a&＃39;, &＃39;x86&＃39;
}


改为&＃xff1a;

ndk {abiFilters &＃39;armeabi-v7a&＃39;, &＃39;x86&＃39; ,&＃39;arm64-v8a&＃39;
}


打开视频流

输入房间号&＃xff08;自己随便输入一串数字&＃xff09;&＃xff0c;点击按钮 Join 就可以打开视频流&＃xff1a;

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

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

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

Agora Flutter SDK 的使用

看完实际运行效果后&＃xff0c;我们在看 Agora Flutter SDK 的使用。

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

Agora Flutter SDK 也是 Flutter 的一个库&＃xff0c;所以要在 pubspec.yaml 里添加依赖&＃xff1a;

agora_rtc_engine: ^0.9.4


添加完之后运行&＃xff1a;

flutter packages get


初始化 AgoraRtcEngine

初始化 AgoraRtcEngine 的时候需要传入 App ID&＃xff1a;

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 的性能&＃xff0c;我打开了视频&＃xff0c;对 CPU和GPU 进行监控&＃xff0c;下面是监控的视频&＃xff1a;

下面是 CPU 和 GPU 刷新的数据&＃xff1a;

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

在录制视频的同时&＃xff0c;使用 Android Profile 监测性能&＃xff1a;

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

总结

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