如何基于 ZEGO SDK 實作 Flutter 一對一音視頻聊天應用?

之前的文章發布了ZEGO SDK實作Android端音視頻通話應用的開發教程，不少開發者反饋很實用，能不能也出一版Flutter的教程，

有求必應，這不小編來了～

我們封裝了ZEGO Flutter SDK，本文將引導你如何使用ZEGO Flutter SDK 快速輕松的構建一個跨平臺音視頻聊天應用,減少開發成本，

1 準備環境

在開始集成 ZEGO Express SDK 前，請確保開發環境滿足以下要求：

• Flutter 1.12 或以上版本，
• iOS 7.0 或以上版本，且支持音視頻的 iOS 設備或模擬器（推薦使用真機），
• Android4.4 或以上版本，且支持音視頻的 Android 設備或模擬器（推薦使用真機），如果為真機，請開啟“允許除錯”選項，
• iOS / Android 設備已經連接到 Internet，

請配置開發環境如下：

• Android Studio：“Preferences > Plugins”，搜索 “Flutter”插件進行下載，并在插件中配置已經下載好的 Flutter 的 SDK 路徑，
• VS Code: 在應用商店中搜索 “Flutter”擴展并下載，

以上任一開發環境配置好 Flutter 環境后，在終端執行 flutter doctor，根據提示內容補全相關未下載的依賴項，

2 專案準備

2.1 創建專案

進入 即構官網，在創建專案，【ZEGO控制臺】.并申請有效的 AppID，這一步很關鍵，appid為應用的唯一標識，如身份證號，是應用的身份證明，用于明確你的專案及組織身份，zego提供的服務也是基于APP ID；

App ID的獲取方式很簡單，只需3～5分鐘，在即構官網-我的專案-創建即可，創建的專案資訊可用于SDK的集成和配置；

2.2 Token 鑒權

登錄房間時必須 使用Token 鑒權 ，可參考 Token 鑒權 教程 ，
為了方便開發階段的除錯，開發者可直接在 ZEGO 控制臺獲取臨時 Token（有效期為 24 小時） 來使用，詳情請參考 控制臺（新版） - 專案管理 中的 “專案資訊”，.

3 集成

3.1 專案設定

開始集成前，請參考 Flutter 檔案 - Get Started.創建一個 Flutter 專案，
如已有專案，本步驟可忽略；

接下來我們需要對專案做一下簡單的配置，便于匯入和使用ZEGO Flutter SDK，

3.2 匯入 SDK

打開 “pubspec.yaml” 檔案，添加 “zego_express_engine” 依賴，有以下兩種形式：

• 以 “pub” 形式依賴（推薦）：

dependencies:
flutter:
sdk: flutter

zego_express_engine: ^2.0.0

• 以 “git” 形式依賴：

dependencies:
flutter:
sdk: flutter

zego_express_engine:
  git:
    url: git://github.com/zegoim/zego-express-flutter-sdk.git
    ref: master

2.添加完成并保存檔案后，在終端執行 flutter pub get，

4 設定權限

以上步驟集成已完成，為保證SDK運行效果更佳，需要在應用中根據實際應用需要，設定應用所需權限，步驟如下：

4.1 Android 添加權限

進入 “app/src/main” 目錄，打開 “AndroidManifest.xml” 檔案，添加權限，

<!-- Permissions required by the SDK -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- Permissions required by the Demo App -->
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

<uses-feature android:glEsVersion="0x00020000" android:required="true" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

因為 Android 6.0 在一些比較重要的權限上要求必須申請動態權限，不能只通過 “AndroidMainfest.xml” 檔案申請靜態權限，請在 Android 原生層參考執行如下代碼，其中 “requestPermissions” 是 “Activity” 的方法，

String[] permissionNeeded = {
    "android.permission.CAMERA",
    "android.permission.RECORD_AUDIO"};

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (ContextCompat.checkSelfPermission(this, "android.permission.CAMERA") != PackageManager.PERMISSION_GRANTED ||
        ContextCompat.checkSelfPermission(this, "android.permission.RECORD_AUDIO") != PackageManager.PERMISSION_GRANTED) {
        requestPermissions(permissionNeeded, 101);
    }
}

具體的權限說明如下：

4.2 iOS 添加權限

打開專案，選擇選單 “TARGETS > Info > Custom iOS Target Properties”，

單擊 “+” 按鈕，添加攝像頭和麥克風權限，

• Privacy - Camera Usage Description
• Privacy - Microphone Usage Description

權限添加完成后，如圖所示：

5 實作流程

如以下流程圖，用戶A與B通過 ZEGO Express SDK 進行視頻通話，以用戶 A 拉取用戶 B 的流為例：

為保證實時音視頻的通話質量，推拉流關鍵流程需按照API的正確呼叫時序進行，完整時序如下圖：

5.1 創建引擎

1. 引入 SDK

在專案中引入 SDK，

1import 'package:zego_express_engine/zego_express_engine.dart';

2. 創建引擎

呼叫 createEngineWithProfile 介面，將申請到的 AppID 傳入引數 “appID”，

ZegoEngineProfile profile = ZegoEngineProfile(
    appID, // 請通過官網注冊獲取，格式為：1234567890
    ZegoScenario.General, // 通用場景接入
    enablePlatformView: true);
// 創建引擎
ZegoExpressEngine.createEngineWithProfile(profile);

5.2 登錄房間

1. 登錄

傳入用戶 ID 引數 “userID” 創建 ZegoUser 用戶物件后，呼叫 loginRoom 介面，傳入房間 ID 引數 “roomID” 和用戶引數 “user”，登錄房間，

• 同一個 AppID 內，需保證 “roomID” 資訊的全域唯一，
• 同一個 AppID 內，需保證 “userID”全域唯一，建議開發者將其設定成一個有意義的值，可將 “userID” 與自己業務賬號系統進行關聯，
• “ZegoUser” 的構造方法ZegoUser.id 會將 “userName” 設為與傳的引數 “userID” 一樣，“userID” 與 “userName”不能為 “null”，否則會導致登錄房間失敗，

// 創建用戶物件
ZegoUser user = ZegoUser.id('user1');
// 只有傳入 “isUserStatusNotify” 引數取值為 “true” 的 ZegoRoomConfig，才能收到 onRoomUserUpdate 回呼，
ZegoRoomConfig config = ZegoRoomConfig.defaultConfig();
config.isUserStatusNotify = true;
// token 由用戶自己的服務端生成，為了更快跑通流程，也可以通過即構控制臺獲取臨時的音視頻 token
config.token = "xxxx";
// 開始登錄房間
ZegoExpressEngine.instance.loginRoom('room1', user, config: config);

2. 監聽登錄房間后的事件回呼
根據實際應用需要，在登錄房間后監聽想要關注的事件通知，比如房間狀態更新、用戶狀態更新、流狀態更新等，

• onRoomStateUpdate：房間狀態更新回呼，登錄房間后，當房間連接狀態發生變更（如出現房間斷開，登錄認證失敗等情況），SDK會通過該回呼通知， onRoomUserUpdate：用戶狀態更新回呼，登錄房間后，當房間內有用戶新增或洗掉時，SDK 會通過該回呼通知，
• 只有呼叫 loginRoom 介面登錄房間時傳入 ZegoRoomConfig 配置，且 “isUserStatusNotify”引數取值為 “true” 時，用戶才能收到 onRoomUserUpdate 回呼，
• onRoomStreamUpdate：流狀態更新回呼，登錄房間后，當房間內有用戶新推送或洗掉音視頻流時，SDK 會通過該回呼通知，

// 以下為常用的房間相關回呼
// 房間狀態更新回呼
ZegoExpressEngine.onRoomStateUpdate = (String roomID, ZegoRoomState state, int errorCode, Map<String, dynamic> extendedData) {
    // 根據需要實作事件回呼
};

// 用戶狀態更新
ZegoExpressEngine.onRoomUserUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoUser> userList) {
    // 根據需要實作事件回呼
};

// 流狀態更新
ZegoExpressEngine.onRoomStreamUpdate = (String roomID, ZegoUpdateType updateType, List<ZegoStream> streamList) {
    // 根據需要實作事件回呼
};

5.3 推流

1. 開始推流
呼叫 startPublishingStream 介面，傳入流 ID 引數 “streamID”，向遠端用戶發送本端的音視頻流，
同一個 AppID 內，需保證 “streamID” 全域唯一，如果同一個 AppID 內，不同用戶各推了一條 “streamID” 相同的流，會導致后推流的用戶推流失敗，

// 開始推流
ZegoExpressEngine.instance.startPublishingStream("streamID");

2. 啟用本地渲染和預覽
如果希望看到本端的畫面，可將畫面渲染后，呼叫 startPreview 介面啟動本地預覽，
Flutter 的渲染方式有兩種：PlatformView 與 TextureRenderer，與 TextureRenderer 相比，PlatformView占用資源稍高，且穩定性偏低，但隨著 Flutter 版本迭代，魯棒性不斷提高，開發者可根據實際情況通過任意一種方式實作渲染，

使用 TextureRenderer 方式渲染

開啟 TextureRenderer 后，在銷毀引擎之前，只能使用 TextureRenderer 而不能使用 PlatformView，
（1）創建預覽用的 “TextureRenderer”（外接紋理），

void createPreviewRenderer() {
    ZegoExpressEngine.instance.createTextureRenderer(widget.screenWidthPx, widget.screenHeightPx).then((textureID) {

        _previewViewID = textureID;

        setState(() {
            // Create a Texture Widget
            Widget previewViewWidget = Texture(textureId: textureID);
            // 將此 Widget 加入到頁面的渲染樹中以顯示預覽畫面
            _previewViewWidget = previewViewWidget;
        });

        // Start preview using texture renderer
        _startPreview(textureID);
    });
}

（2）使用 TextureRenderer 的 “textureID” 作為 “viewID” 創建一個 ZegoCanvas 物件，開始預覽，
void _startPreview(int viewID) {

  // Set the preview canvas
    ZegoCanvas previewCanvas = ZegoCanvas.view(viewID);

    // Start preview
    ZegoExpressEngine.instance.startPreview(canvas: previewCanvas);
}

3. 監聽推流后的事件回呼

根據實際應用需要，在推流后監聽想要關注的事件通知，比如推流狀態更新等，
onPublisherStateUpdate：推流狀態更新回呼，呼叫推流介面成功后，當推流狀態發生變更（如出現網路中斷導致推流例外等情況），SDK 在重試推流的同時，會通過該回呼通知，

// 常用的推流相關回呼
// 推流狀態更新回呼
ZegoExpressEngine.onPublisherStateUpdate = (String streamID, ZegoPublisherState state, int errorCode, Map<String, dynamic> extendedData) {
    // 根據需要實作事件回呼
};

5.4 拉流

呼叫 startPlayingStream 介面，根據傳入的流 ID 引數 “streamID”，拉取遠端推送的音視頻流，并根據需要渲染拉流畫面，

• 若僅需拉音頻流，不需要顯示拉流畫面，可直接呼叫 startPlayingStream 介面，
  ZegoExpressEngine.instance.startPlayingStream(streamID);
• 若需要在拉流的同時，渲染拉流畫面，Flutter 的渲染方式有兩種：PlatformView 與 TextureRenderer，與 TextureRenderer 相比，PlatformView占用資源稍高，且穩定性偏低，但隨著 Flutter 版本迭代，魯棒性不斷提高，開發者可根據實際情況通過任意一種方式實作渲染，

使用 TextureRenderer 方式渲染
（1）創建預覽用的 “TextureRenderer”（外接紋理），

ZegoExpressEngine.instance.createTextureRenderer(width.toInt(), height.toInt()).then((viewID) {
    _playViewID = viewID;
    // 將得到的 Widget 加入到頁面的渲染樹中以顯示拉流畫面
    setState(() => _playViewWidget = Texture(textureId: viewID));
    _startPlayingStream(viewID, streamID);
});

（2）使用 TextureRenderer 的 “textureID” 作為 “viewID” 創建一個 ZegoCanvas 物件，開始拉流并渲染拉流畫面，

void _startPlayingStream(int viewID, String streamID) {
    ZegoCanvas canvas = ZegoCanvas.view(viewID);
    ZegoExpressEngine.instance.startPlayingStream(streamID, canvas: canvas);
}

5.5 體驗實時音視頻功能

在真機中運行專案，運行成功后，可以看到本端視頻畫面，
為方便體驗，ZEGO 提供了一個 Web 端除錯示例，在該頁面下，輸入相同的 AppID、RoomID、Server 地址和 Token，即可加入同一房間與真機設備互通，當成功開始音視頻通話時，可以聽到遠端的音頻，看到遠端的視頻畫面，

5.6 停止推拉流

1. 停止推流/預覽/渲染
呼叫 stopPublishingStream 介面停止向遠端用戶發送本端的音視頻流，

// 停止推流
ZegoExpressEngine.instance.stopPublishingStream();

如果啟用了本地預覽，呼叫 stopPreview 介面停止預覽，

// 停止預覽
ZegoExpressEngine.instance.stopPreview();

如果預覽時創建了 TextureRenderer，需要呼叫 destroyTextureRenderer 介面銷毀 TextureRenderer，

// _previewViewID 為呼叫 createTextureRenderer 時得到的 viewID
ZegoExpressEngine.instance.destroyTextureRenderer(_previewViewID);

如果預覽時創建了 PlatformView，需要呼叫 destroyPlatformView 介面銷毀 PlatformView，

// _previewViewID 為呼叫 [createPlatformView] 時得到的 viewID
ZegoExpressEngine.instance.destroyPlatformView(_previewViewID);

2. 停止拉流/渲染

呼叫 stopPlayingStream 介面停止拉取遠端推送的音視頻流，

// 停止拉流
ZegoExpressEngine.instance.stopPlayingStream(streamID, canvas: _playCanvas);

如果拉流時創建了 TextureRenderer，需要呼叫 destroyTextureRenderer 介面銷毀 TextureRenderer，

// _playViewID 為呼叫 [createTextureRenderer] 時得到的 viewID
ZegoExpressEngine.instance.destroyTextureRenderer(_playViewID);

如果拉流時創建了 PlatformView，需要呼叫 destroyPlatformView 介面銷毀 PlatformView，

// _playViewID 為呼叫 [createPlatformView] 時得到的 viewID
ZegoExpressEngine.instance.destroyPlatformView(_playViewID);

5.7 退出房間

呼叫 logoutRoom 介面退出房間，

// 退出房間
ZegoExpressEngine.instance.logoutRoom('room1');

5.8 銷毀引擎

呼叫 destroyEngine 介面銷毀引擎，用于釋放 SDK 使用的資源，

// 銷毀引擎
ZegoExpressEngine.destroyEngine();

結尾

恭喜，你已經通過ZEGO Flutter SDK完成了自己的實時音視頻通話應用，Flutter為應用開發帶來了革新，帶著學習交流的態度，希望對于想要學習應用Flutter的同學有所幫助，

獲取Demo

獲取本文的Demo、開發檔案、技術支持，
獲取SDK的商務活動、熱門產品，
注冊即構ZEGO開發者帳號，快速開始，

標籤：其他

上一篇：常見Git命令匯總

下一篇：Hazelcast啟用rest-api