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 的自定義功能開發。