從 Flutter 的視訊渲染到 App 落地經驗

3月23日週六，由 RTC 開發者社群主辦的 “RTC Dev Meetup 北京站”如約舉行，超過100位求知若渴的開發者參加了活動。來自 LeanCloud、聲網 Agora、阿里、美團點評的資深工程師，與他們共同分享了 Flutter 開發中的實踐經驗。

我們在這裡回顧一下每個演講中的部分乾貨。想進一步瞭解更多內容細節？請看到文末，那裡會有你想要的。

鄭鵬：淺談跨平臺方案的適用場景

LeanCloud iOS 高階開發工程師鄭鵬從框架特點、實現原理與現狀角度對比分析了 React Native 與 Flutter。

React Native 是 Facebook 在2015年推出的一套開源跨平臺方案，這個方案可以說在移動平臺上一個真正意義上的跨平臺方案，因為它能夠達到技術原生應用的一個體驗。它有三個主要特性：

• 能使⽤ JavaScript 和 React 在移動平臺構建原⽣應用
• 支援熱加?載(Hot Reloading)
• 同一套程式碼可以運行在 iOS、Android 以及其它平臺

在 React Native 的官方專案作品展裡面有這樣一個應用叫做 Discord。2018年的時候，Discord發表了一篇博文，聊了聊他們眼中 React Native 的優缺點，總結如下：

談及 React Native 的現狀，鄭鵬表示，大家對於 React Native 已經形成了比較統一的認識，它沒有效能方面的問題，並且能快速地構建UI以及原型等。但互動場景太過複雜，或者需要大量的計算資源的話，React Native 就會遇到瓶頸。同時在跨平臺的相容性上也表現的差強人意。儘管有這樣多的問題，Facebook也是宣告瞭他們會對於React Native的底層進行改造以此提升效能，雖然官方沒有給出一個具體的時間點，但是這似乎意味著React Native的未來還是可以期待的。

在跨平臺方案經過了 React Native 這波浪潮之後，Google 在2018年年底正式推出了一個看起來更有野心的一個方案，就是 Flutter。Flutter 的特點主要有四點：

• 能使用 Dart 以及 React 風格的元件在移動平臺構建原生應用
• 支援熱加?載(Hot Reloading)
• 同一套程式碼可以運行在 iOS、Android 以及其它平臺
• 比 React Native 更好的效能表現

Flutter雖然看似解決了React Native要面臨的很棘手的一些問題，但是Flutter畢竟推出的時間還沒有那麼長，還沒有經過市場的考驗，所以Flutter本身還是有一些問題的：

1. 如何相容應用層的一些特性。例如 密碼自動填充功能，如果想要實現這個特性，那麼 flutter 可能要採用 RN 類似的方案，或者使用者自己在這部分直接使用原生的介面。
2. flutter 底層的渲染引擎仍然是 OpenGL，但是 iOS 已經遷移到了 Metal，廢除了 OpenGL，那麼從這種緊急態度來看，Flutter 什麼時候遷移。
3. Google 以往推出過很多技術、產品，但最後都慢慢消失或被併入某個新專案，而Flutter 未來是否會進入這個“怪圈”也是一個問題。

張乾澤：Flutter實時音視訊技術實踐

聲網 Agora 高階架構師張乾澤分享了在 Flutter 上的實時音視訊技術實踐。聲網在上個月應開發者的要求，釋出了聲網 Agora Flutter SDK，一個封裝了聲網 Agora SDK 的Flutter 外掛，能讓開發者在 Flutter 上實現實時視訊通話。那麼如何通過 Flutter 來開發一個視訊通話應用？會遇到什麼問題？從這個演講中你會找到答案，他分享了可以實現該場景的兩種方法，以及 Flutter 渲染的原理。

首先，他介紹了一下 Flutter 的架構邏輯。如果比較熟悉 Flutter 的朋友可能知道，Flutter 的渲染方式與 React Native 最不一樣的地方就是它自己的一些原生控制元件上沒有利用系統本身提供的一些介面、控制元件，比如說 UI View 或 Android 上的一些 View。它自己裡面會建立一個 Layer Tree，Flutter 自己來進行渲染，它把這些資料或者渲染結果發到 Skia，由 Skia 引擎渲染處理為 GPU 資料，最後通過 GL 或 Vulkan 發給 GPU。

圖：Flutter 渲染機制

當我們在實現一個視訊通話應用的時候，我們可以利用 Flutter 自身元件來實現很多基本的功能，比如App 的一個腳手架，還有利用元件來畫出介面上的按鈕、選單欄。而視訊的編解碼、實時傳輸我們可以交給 Agora SDK 來解決。那麼關鍵的問題在於如何在 Flutter 上渲染視訊。

在 Flutter 裡有一個元件叫 Video Player，其中有一個 Texture Widget，我們可以通過 Native 端來提供視訊資料給這個 Texture，然後通過它來進行渲染。以 iOS 為例，iOS需要提供CVPixelBufferRef，它可以將渲染出來的資料供給Texture Widget，然後Texture Widget就可以把你提供的這些資料顯示出來。在我們傳輸資料的時候會需要將其與 TextureID 繫結，這樣一來，可以在同一個介面上出現多個 Texture，也就是說能顯示多個視訊通話視窗。在其中，聲網 SDK 的 AgoraVideoSink 介面裡可以提供一個回撥，這個回撥會把它收到的所有視訊資料通過你想要的格式傳給 Texture。

圖：iOS 的渲染

在 Flutter 1.0中新增的 PlatformView 也可以實現這個場景。PlatformView 在 iOS 和 Android 上分別叫做 UIKitView 和 AndroidView，它可以讓你直接建立一個 UIView。我們在Plugin 中有一個ViewFactory，它可以針對不同平臺返回一個你需要的 View。最後，在一個解析度設定較低的狀態下進行了視訊通話，分別對比了兩種實現方法的效能。結果顯示PlatformView的效能消耗跟直接用Native接我們SDK的效能比較相近。

王璟瑤：Flutter B端落地和高可用——票務APP應用實踐

阿里現娛無線端基礎線負責人王璟瑤來自大麥網。大麥網採用Flutter在一個獨立的APP上進行了落地。他的分享主要分成四個部分，一是大麥網的落地情況，二就是元件化整合，包括整合、編譯構建、除錯方面的經驗，第三是Flutter作為開發的基礎能力，第四是高可用部分。他重點講解了元件化整合部分。

大麥的 App 分為 B 端和 C 端。他們首先選擇了在使用者量相對小一些的 B 端落地了 Flutter。隨後也在 C 端的進行了落地。

如上圖是元件化的結構圖。中間 Flutter Container 相當於跟原有 Native Bundle 平行的業務單元。因為我們要單獨地編譯Flutter大的程式碼，所以還有一個 Flutter Host 模組。下面還有很龐大的 Common 層。Flutter 內部有一些基礎的網路聯網、圖片顯示或一些常有的儲存元件，但是用的時候可能你們會需要做增強、網路、圖片，像我們用的二維碼，基於一些增強的元件來實現的，我們以 Common 層作為承載。

工程依賴可以看到兩個工程元件化的形式，我們的根工程基於上面安卓叫 Portal，iOS是 DMPortal，分別有對應的 Common 和 Flutter container、Flutter Host，外面是這個 Host 編譯完成之後把相關的產物打包提交到 Flutter Container 去。iOS 是基於軟連結跟原來的工程做並聯，Android 則相對複雜一些，都是在命令列裡完成的。

圖：優化後的編譯構建

如上圖是我們優化之後的編譯構建模型。因為我們要解決能執行的問題，所以我們需要編譯Engine。以Android這邊舉例子的話就是我們可能會改變原有標準工程上依賴於Gradal的實現，大量的邏輯會通過指令碼的方式做構建，然後做Engine的拷貝，最終我們會打包出一個Bundle AAR，然後再完成整個工程的構建。

除此之外，王璟瑤分享了包括Engin適配、混合頁面棧、UI程式碼組織等方面的乾貨內容，由於篇幅有限，我們在這裡不一一細說。

嚴濤：美團外賣商家Flutter混合工程實踐

美團點評iOS高階開發工程師嚴濤從工程管理、基礎設施建設、業務實踐等方面，分享了Flutter在美團外賣商家端上的落地經驗。

從工程管理來講，總共有四類工程：

• Flutter Application：標準的Flutter App工程，包含Dart層和Native平臺層
• Flutter Plugin：Flutter外掛工程，包含Dart層與Native平臺層的實現
• Flutter Module：Flutter元件工程，僅Dart層，Native平臺層為隱藏工程
• Flutter Package：純Dart元件工程，僅包含Dart層實現

美團外賣需要將Flutter整合到現有的Native工程中。對於這類需求，Flutter官方提供了一套通用方案：

Android端

• 在settings.gradle中注 include_flutter.groovy 指令碼
• 在需要依賴的module中build.gradle新增project(‘:flutter’) 依賴

iOS端

• Podfile中注 podhelper.rb指令碼，在pod install時會執 該指令碼
• 在iOS構建階段Build Phases中注入構建時需要執 的Xcode_backend.sh指令碼

但這個方案並不適用於美團，因為在第一階段中，Flutter只是App中的一小部分，並不需要全部人員都做Flutter開發，所以他們希望少改或不改工程配置。另一方面，在當時公司的打包機器上還未配置Flutter的環境。所以官方的方法並不完全使用。他們的解決方案是將Flutter產物元件化，原 程調整為通過Pod對Flutter元件依賴。

美團在Flutter 1.0之前就開始著手開發。從他們的經驗來看，Flutter頁面首次建立時間較長，對頁面啟動時間要求比較高的業務，可以考慮整合 flutter 1.0 及其以後版本。

美團看中Flutter就是看中了它的效能，它有自己的一些UI執行緒和GPU的執行緒，它有自己獨立一套的渲染邏輯，它脫離了Native這一側的侷限。

花絮

1. 這次活動感受到開發者滿滿的熱情，活動前被一波一波的要求增開名額直至再次滿額。而後，又有許多開發者聯絡，表示：“是自己喜歡的技術，即使是站著也希望可以來聽”！

2. 現場5、60歲的大叔參加，咳咳，當然是一位資深的技術總監啦，真的炒想點贊！

3. 自己不能來的開發者，妻子來幫忙聽了全場，然後幫忙要PPT等現場資料，超感人有沒有！

由於篇幅有限，我們沒有詳細回顧每一個演講的內容細節。想了解更多，可以下載演講 PDF（只提供演講人允許公開的內容）。你還可以在這裡回帖提問，我們會請演講人幫助解答。