從 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. 現場五、60歲的大叔參加，咳咳，固然是一位資深的技術總監啦，真的炒想點贊！

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

因爲篇幅有限，咱們沒有詳細回顧每個演講的內容細節。想了解更多，能夠下載演講 PDF（只提供演講人容許公開的內容）。你還能夠在這裏回帖提問，咱們會請演講人幫助解答。