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. 建立專案

進入自己的控制檯，如下的樣子：

Agora Flutter SDK -- 使用 Flutter 開發的高效能音視訊 SDK | 掘金技術徵文

點選建立專案，輸入名字就可以建立了。

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 | 掘金技術徵文