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 [email protected]: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 的自定义功能开发。