Flutter如何調(diào)用原生代碼
我們要做的是在Flutter上實(shí)現(xiàn)實(shí)時(shí)音視頻。那么在開(kāi)始具體的工作之前，首先需要了解Flutter是如何調(diào)用諸如“獲取媒體設(shè)備”這類原生平臺(tái)API的。
上方來(lái)自官方的架構(gòu)圖已經(jīng)足夠清晰了，F(xiàn)lutter通過(guò)MethodChannel發(fā)起某一方法的調(diào)用，然后原生平臺(tái)收到消息后執(zhí)行相應(yīng)的實(shí)現(xiàn)（Java/Kotlin/Swift/Object-C）并異步地返回結(jié)果，以getUserMedia為示例，首先在Flutter層中聲明這一方法，具體實(shí)現(xiàn)則是通過(guò)MethodChannel發(fā)送一條攜帶調(diào)用方法名和相應(yīng)參數(shù)的信息。
Future表示一個(gè)異步的調(diào)用，類似Javascript的Promise；async/await類似，在一個(gè)async函數(shù)中，會(huì)類似同步地按順序去執(zhí)行await方法，盡管await后面的是異步方法。
當(dāng)平臺(tái)在MainActivity中同樣注冊(cè)MethodChannel，通過(guò)MethodChannel收到方法調(diào)用的消息和參數(shù)后，基于本平臺(tái)實(shí)現(xiàn)相應(yīng)邏輯，并返回執(zhí)行結(jié)果，此處僅以Android平臺(tái)為例：
更多詳細(xì)的信息可以參考Flutter官方示例與解釋：
https://flutter.io/docs/development/platform-integration/platform-channels
實(shí)現(xiàn)音視頻SDK的思路
了解上述Flutter調(diào)用原生平臺(tái)方法的原理后，我們就有兩種思路來(lái)實(shí)現(xiàn)一個(gè)音視頻SDK。
1.先在原生平臺(tái)實(shí)現(xiàn)音視頻SDK，后Flutter通過(guò)MethodChannel直接調(diào)用SDK提供的方法。
具體的方案為直接通過(guò)MethodChannel調(diào)用已有的聲網(wǎng)AgoraSDK，并在Flutter層抹去可能存在的差異，諸如參數(shù)不同、部分方法名不同。
這種做法的主要優(yōu)點(diǎn)在于可以最大程度復(fù)用已有的SDK，類似于建立了一層橋接。
2.先基于原生平臺(tái)實(shí)現(xiàn)WebRTC標(biāo)準(zhǔn)，然后在Flutter層通過(guò)MethodChannel調(diào)用WebRTC接口，再實(shí)現(xiàn)音視頻SDK邏輯。
這種方案先利用原生平臺(tái)實(shí)現(xiàn)WebRTC標(biāo)準(zhǔn)（前一節(jié)實(shí)現(xiàn)的getUserMedia就是此標(biāo)準(zhǔn)的一部分），然后在Flutter層注冊(cè)為WebRTCPlugin。在這個(gè)FlutterWebRTCPlugin的基礎(chǔ)上參照聲網(wǎng)音視頻SDK，連接到AgoraSD-RTN?全球虛擬通訊網(wǎng)絡(luò)。
這種方案相比前一點(diǎn)，相當(dāng)于實(shí)現(xiàn)一個(gè)全新的Dart語(yǔ)言的SDK，需要用到更多Dart的標(biāo)準(zhǔn)庫(kù)（諸如math、io、convert之類）與第三方生態(tài)（如（flutter_webrtc）。假設(shè)要支持更多的平臺(tái)時(shí)（比如Windows），只需要該平臺(tái)實(shí)現(xiàn)WebRTC標(biāo)準(zhǔn)就可以直接使用。
熟悉WebRTC的同學(xué)們可能知道在實(shí)現(xiàn)瀏覽器WebRTC應(yīng)用的時(shí)候有一個(gè)Adapter的概念，目的就是為了掩藏幾大主流瀏覽器WebRTC接口的些許差異，和本方案的思路是類似的，只不過(guò)適配的平臺(tái)從Firefox/Chrome/Safari變?yōu)榱薟indows/iOS/Android等。
最終出于調(diào)研的目的，同時(shí)也是為了更加迎合Flutter一套代碼，多平臺(tái)通用的思想（理論上SDK就是一層設(shè)計(jì)完備的客戶端邏輯，在WebRTC受良好支持的情況下，工作的內(nèi)容就變?yōu)椋喝绾问褂肈art語(yǔ)言在WebRTC的標(biāo)準(zhǔn)上實(shí)現(xiàn)音視頻通信邏輯），我們選擇采用這個(gè)方案，因此讀者可能會(huì)發(fā)現(xiàn)這個(gè)FlutterSDK整體上不少概念上更接近于聲網(wǎng)Web平臺(tái)的音視頻SDK一些。
3.SDK的結(jié)構(gòu)
SDK的主要功能大致包含了音視頻采集與播放，與AgoraGateway建立P2P連接并管理，以及與Gateway之間的消息交換和處理。
雖然Flutter社區(qū)相對(duì)較新，但是Dart的標(biāo)準(zhǔn)庫(kù)可以算得上是非常完備了，同時(shí)也已經(jīng)有不少優(yōu)秀的第三方Plugin。
代碼可以主要拆分為以下模塊：
基于dart:io中Websocket相關(guān)的方法實(shí)現(xiàn)與Gateway之間的消息通信（比如publish/subscribe這類消息和回復(fù)）
基于開(kāi)源社區(qū)的flutter_webrtc項(xiàng)目實(shí)現(xiàn)音視頻采集以及p2p連接等WebRTC相關(guān)功能
基于dartStream對(duì)象或是簡(jiǎn)單的Map來(lái)實(shí)現(xiàn)EventEmitter這些SDK所需的輔助類（當(dāng)然也可以直接采用Dart的Stream/Sink概念進(jìn)行替代）。
這些模塊完成后，在此之上就可以實(shí)現(xiàn)類似聲網(wǎng)WebSDK中的Client與Stream對(duì)象。
其中值得一說(shuō)的是視頻流的播放，可以借助flutter_webrtcplugin中的RTCVideoView對(duì)象來(lái)實(shí)現(xiàn)，想要深入了解具體原理的可以學(xué)習(xí)一下Flutter外接紋理(Texture)相關(guān)概念。
到此SDK就已經(jīng)基本形成了，之后便是UI層的開(kāi)發(fā)，F(xiàn)lutter這一部分很大程度上受到了React框架的啟發(fā)，熟悉該框架的Web開(kāi)發(fā)者可以基于此SDK輕松的實(shí)現(xiàn)一個(gè)可運(yùn)行在Android/iOS平臺(tái)的視頻通話App。我們此前分享過(guò)的demo已經(jīng)成功和已有的聲網(wǎng)Android/iOS/WebSDK進(jìn)行互通，相應(yīng)的代碼也許將在不久未來(lái)進(jìn)行開(kāi)源。
4.總結(jié)
盡管Flutter社區(qū)仍然很年輕，但是已經(jīng)逐漸有不少優(yōu)秀的第三方插件涌現(xiàn)出來(lái)，加上Dart相對(duì)全面的標(biāo)準(zhǔn)庫(kù)，實(shí)現(xiàn)這樣一個(gè)音視頻SDK或是類似的功能并不需要自己大量地去造輪子，加上Flutter本身環(huán)境搭建/構(gòu)建/調(diào)試都非常的方便，因此整個(gè)開(kāi)發(fā)過(guò)程中幾乎沒(méi)有遇到什么坑。
此外在應(yīng)用層的開(kāi)發(fā)過(guò)程中，風(fēng)格非常接近于使用React進(jìn)行Web開(kāi)發(fā)，加上Flutter亞秒級(jí)的HotReload等特性，在開(kāi)發(fā)體驗(yàn)與效率上相比原生開(kāi)發(fā)確實(shí)有著不小的優(yōu)勢(shì)。
再考慮到逐漸完善的跨平臺(tái)特性（桌面端的flutter-desktop-embedding項(xiàng)目與瀏覽器端的hummingbird項(xiàng)目）以及可能會(huì)到來(lái)的谷歌新操作系統(tǒng)Fuchsia，對(duì)于無(wú)論是想要接觸到原生開(kāi)發(fā)的Web開(kāi)發(fā)者，還是追求更高的開(kāi)發(fā)效率和更好的開(kāi)發(fā)體驗(yàn)的原生開(kāi)發(fā)者來(lái)說(shuō)，F(xiàn)lutter都是一個(gè)非常適宜的切入角度，值得在新的一年里加入自己的技術(shù)棧中。
