Archsummit 2019重磅分享｜閑魚(yú)Flutter＆FaaS云端一體化架構(gòu)

作者：閑魚(yú)技術(shù)－國(guó)有

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),德江企業(yè)網(wǎng)站建設(shè),德江品牌網(wǎng)站建設(shè),網(wǎng)站定制,德江網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,德江網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

國(guó)有，閑魚(yú)架構(gòu)團(tuán)隊(duì)負(fù)責(zé)人。在7月13號(hào)落幕的2019年Archsummit峰會(huì)上就近一年來(lái)閑魚(yú)在FlutterFaaS一體化項(xiàng)目上的 探索 和實(shí)踐進(jìn)行了分享。

隨著無(wú)線，IoT的發(fā)展，5G的到來(lái)，移動(dòng)研發(fā)越發(fā)向多端化發(fā)展。傳統(tǒng)的基于Native＋Web＋服務(wù)端的開(kāi)發(fā)方式，研發(fā)效率低下，顯然已經(jīng)無(wú)法適應(yīng)發(fā)展需要。

我們希望 探索 閑魚(yú)這樣規(guī)模的獨(dú)立APP的高效研發(fā)架構(gòu)。主要思路是圍繞Flutter解決多端問(wèn)題，并使Flutter與FaaS等無(wú)服務(wù)容能力打通，形成云端一體化的研發(fā)能力，支持一云多端的發(fā)展需要。在某些場(chǎng)景已經(jīng)取得效果，希望分享過(guò)程中的思考，與大家交流。

閑魚(yú)選擇Flutter主要是出于高性能的考慮。Flutter高性能主要來(lái)源于2個(gè)原因：

更多比較：

沒(méi)有銀彈的解決方案，F(xiàn)lutter與RN各有優(yōu)點(diǎn)。如何選擇因素很多，關(guān)鍵看如何取舍，舉個(gè)例子：

云端技術(shù)棧的打通，是減少協(xié)同的不錯(cuò)的解法。以往前端＋Node.js的一體化方案大家應(yīng)該不會(huì)陌生，然而如果端側(cè)使用了Flutter，那云側(cè)Dart自然是第一選擇。

FaaS的本質(zhì)是運(yùn)行在云端，那Dart適合用在云/Server上嗎？

Dart語(yǔ)言早于Flutter，在最初的設(shè)計(jì)上，Dart就可以用于Web、Server。Dart具備一些服務(wù)端語(yǔ)言的特點(diǎn)：

閑魚(yú)首先嘗試將Dart作為普通的Server，替代傳統(tǒng)的Java　Server，然后再將Dart容器嵌入到FaaS容器中。建立Dart Server能力是第一步，也是主要的工作量所在。

閑魚(yú)在Dart　Server方面的建設(shè)思路：

開(kāi)發(fā)期：

運(yùn)行期：

上述內(nèi)容實(shí)現(xiàn)了FlutterDart FaaS的技術(shù)棧的統(tǒng)一，但僅技術(shù)棧統(tǒng)一還遠(yuǎn)遠(yuǎn)不夠，端、云的同學(xué)仍然無(wú)法真正互補(bǔ)和一體化打通，原因在于還有更多深入問(wèn)題需要考慮：

面向這些問(wèn)題，閑魚(yú)的解法思路：

案例一，一體化在資源均衡方面的體現(xiàn)。在近期的一個(gè)項(xiàng)目中，云端一體化使原本2個(gè)月的項(xiàng)目時(shí)間，減少了20天。

案例二，一體化在業(yè)務(wù)閉環(huán)方面的體現(xiàn)。負(fù)責(zé)增長(zhǎng)的一位開(kāi)發(fā)同學(xué)，專注在增長(zhǎng)業(yè)務(wù)上，在合適的情況下為合適的人投放合適的內(nèi)容，以此帶來(lái)用戶的增長(zhǎng)和活躍效果。一體化的方式下，可以統(tǒng)一云、端的切面，業(yè)務(wù)研發(fā)不再受云、端的限制。

一體化是建設(shè)高效研發(fā)框架的方向，并不是所有場(chǎng)景都需要一體化的開(kāi)發(fā)，但一體化的Flutter、FaaS等技術(shù)組件，可以獨(dú)立使用，也會(huì)帶來(lái)效率提升，并且與原有的開(kāi)發(fā)模式兼容。從一體化的思路去建設(shè)，可以使整體架構(gòu)體系更加一致，也有機(jī)會(huì)做一體的架構(gòu)沉淀。

未來(lái)閑魚(yú)希望在一體化上做更多嘗試和深入 探索 ，包括一體化工具、一體化業(yè)務(wù)平臺(tái)、數(shù)據(jù)化智能化等方向。

flutter_inappbrowser和h5交互

需求，app中使用webview和h5交互，根據(jù)h5發(fā)過(guò)來(lái)的消息，在屏幕上展示flutter組件，并且可以發(fā)送消息給h5。

首先使用的組件是flutter_WebView_plugin，這個(gè)組件不能嵌套flutter組件,所以放棄這個(gè)組件。

flutter_inappbrowser 可以實(shí)現(xiàn)組合布局, 所以選用了此庫(kù), GitHub鏈接

[

閑魚(yú)前端基于serverless的一種多端開(kāi)發(fā)解決方案

前端的發(fā)展太快了，前端框架和技術(shù)的發(fā)展也層出不窮，還包括不同智能設(shè)備的出現(xiàn)，對(duì)前端開(kāi)發(fā)同學(xué)來(lái)說(shuō)是個(gè)很大的跳轉(zhuǎn)，簡(jiǎn)單列舉下：

這樣就滋生了一些問(wèn)題，比如我要開(kāi)發(fā)一個(gè)通用的頁(yè)面，兼容不同的端側(cè)和 小程序 ，顯然目前是做不到的，我們只能開(kāi)發(fā)多套頁(yè)面去適配不同的場(chǎng)景，這樣的話成本就太高了。

很多同學(xué)都在嘗試解決這個(gè)問(wèn)題，也催生了類似taro這樣的多端統(tǒng)一開(kāi)發(fā)框架，這是一個(gè)好的解決方案，但是比較被動(dòng)，缺乏一定的擴(kuò)展性。

這篇文章我們要探討的是，看能不能換個(gè)角度去解決這個(gè)問(wèn)題，提升開(kāi)發(fā)效率。

ViewModel

當(dāng)我們?cè)陂_(kāi)發(fā)一個(gè)頁(yè)面的時(shí)候，不管用的是哪一種框架，通常都會(huì)抽象出一層viewmodel層，它主要有2個(gè)作用

從上圖中我們可以看出，viewmodel是一段獨(dú)立的通用代碼邏輯，起到了承前啟后的作用。它和view層關(guān)系更加緊密，因此通常會(huì)放在前端測(cè)。

既然viewmodel是獨(dú)立的，那我們能不能把它放在后端呢？這樣一個(gè)最大的好處就是viewmodel可以進(jìn)行復(fù)用，不需要在重復(fù)編寫(xiě)，而且只需要改動(dòng)一個(gè)viewmodel，就可以全量生效。

似乎是一個(gè)很美好的想法，但是這部分代碼由誰(shuí)去開(kāi)發(fā)呢，總不可能寄希望于后端同學(xué)吧，當(dāng)然只能是我們自己，也感謝于serverless架構(gòu)的出現(xiàn)，讓這件事情變成了可能。

有些同學(xué)可能會(huì)問(wèn)，既然viewmodel后移了，那view呢？后續(xù)會(huì)考慮結(jié)合我們的ui2code技術(shù)，那真的就比較完美了。

什么是serverless

架構(gòu)上，我們可以把serverless分為FaaS和BaaS。

FaaS是用于創(chuàng)建、運(yùn)行、管理函數(shù)服務(wù)的計(jì)算平臺(tái)，它支持多種開(kāi)發(fā)語(yǔ)言，比如java、nodejs、dart等，這有利于不同端側(cè)的開(kāi)發(fā)同學(xué)介入開(kāi)發(fā)。FaaS是基于事件驅(qū)動(dòng)的思想，只有當(dāng)一個(gè)函數(shù)被事件觸發(fā)時(shí)才會(huì)占用服務(wù)器資源執(zhí)行，不然都是無(wú)需占用服務(wù)器資源的。

BaaS提供了用于函數(shù)調(diào)用的第三方基礎(chǔ)服務(wù)，比如身份校驗(yàn)、日志、數(shù)據(jù)庫(kù)等，它是由服務(wù)商直接提供，開(kāi)發(fā)者無(wú)需關(guān)系實(shí)現(xiàn)，直接調(diào)用即可。

業(yè)務(wù)落地

我們是通過(guò)gaia平臺(tái)開(kāi)發(fā)后端接口，gaia可以理解為上文提到的FaaS平臺(tái)。

日常開(kāi)發(fā)中有這樣一個(gè)需求，下面是這個(gè)需求的一個(gè)頁(yè)面。

因?yàn)檫@個(gè)頁(yè)面上的數(shù)據(jù)比較多，先把它切分成一個(gè)個(gè)小的模塊，后臺(tái)返回?cái)?shù)據(jù)的時(shí)候也根據(jù)模塊來(lái)返回?cái)?shù)據(jù)。

我們是根據(jù)viewmodel來(lái)設(shè)計(jì)接口，首先肯定有一個(gè)首屏數(shù)據(jù)接口；然后是頁(yè)面上的交互，比如切換卡片、切換芝麻信用按鈕，切換會(huì)引起頁(yè)面數(shù)據(jù)變化，我們可以統(tǒng)一封裝一個(gè)頁(yè)面更新的接口；最后是一個(gè)開(kāi)通的接口。

后端接口

前后端交互最重要的數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)，我們省略了中間的業(yè)務(wù)邏輯處理，看下接口的數(shù)據(jù)結(jié)構(gòu)。

首屏接口返回的數(shù)據(jù)主要有幾個(gè)特征：

更新接口的返回?cái)?shù)據(jù)結(jié)構(gòu)和首屏接口類似，但是入?yún)⒂兴煌饕?個(gè)字段：

前端處理

從后端返回的數(shù)據(jù)可以看到，數(shù)據(jù)是及其詳細(xì)的，無(wú)需我們做任何的業(yè)務(wù)邏輯處理，直接映射到頁(yè)面即可。這樣，前端已經(jīng)變成了很薄的一層數(shù)據(jù)，沒(méi)有任務(wù)的業(yè)務(wù)邏輯處理，變的很簡(jiǎn)單，當(dāng)需要遷移到其他端時(shí)，只需要遷移視圖層即可。當(dāng)有任何的業(yè)務(wù)變動(dòng)時(shí)，只需要修改后端的接口，就能生效。

收益與總結(jié)

通過(guò)具體的實(shí)踐，我們發(fā)現(xiàn)，對(duì)于前端開(kāi)發(fā)同學(xué)來(lái)說(shuō)，變的簡(jiǎn)單了，開(kāi)發(fā)效率有很大的提升，前端同學(xué)甚至都不需要去理解具體的業(yè)務(wù)邏輯，就能完成頁(yè)面的開(kāi)發(fā)。而且，提取的viewmodel可以復(fù)用到不同的端側(cè)，設(shè)置還包括native端。我們還可以將viewmodel拆分成更小粒度的viewmodel，方便在不同的頁(yè)面接口中進(jìn)行復(fù)用。我們有同學(xué)還在FaaS側(cè)基于redux的思想封裝了一個(gè)通用的狀態(tài)管理框架，規(guī)范了前后端的交互。

后面， 還有一些問(wèn)題待我們?nèi)ソ鉀Q，比如開(kāi)發(fā)成本、viewmodel的邏輯拆分、具體接口問(wèn)題定位等。

閑魚(yú)團(tuán)隊(duì)是Flutter+Dart FaaS前后端一體化新技術(shù)的行業(yè)領(lǐng)軍者，就是現(xiàn)在！ 客戶端／服務(wù)端java／架構(gòu)／前端／質(zhì)量工程師 面向 社會(huì) 招聘，base杭州阿里巴巴西溪園區(qū)，一起做有創(chuàng)想空間的社區(qū)產(chǎn)品、做深度頂級(jí)的開(kāi)源項(xiàng)目，一起拓展技術(shù)邊界成就極致！

*投喂簡(jiǎn)歷給小閑魚(yú)→ guicai.gxy@alibaba-inc .com

開(kāi)源項(xiàng)目、峰會(huì)直擊、關(guān)鍵洞察、深度解讀

請(qǐng)認(rèn)準(zhǔn) 閑魚(yú)技術(shù)

Flutter浪潮下的音視頻研發(fā)探索

文/陳爐軍

整理/LiveVideoStack

大家好，我是阿里巴巴閑魚(yú)事業(yè)部的陳爐軍，本次分享的主題是Flutter浪潮下的音視頻研發(fā)探索，主要內(nèi)容是針對(duì)閑魚(yú)APP在當(dāng)下流行的跨平臺(tái)框架Flutter的大規(guī)模實(shí)踐，介紹其在音視頻領(lǐng)域碰到的一些困難以及解決方案。

分享內(nèi)容主要分為四個(gè)方面，首先會(huì)對(duì)Flutter有一個(gè)簡(jiǎn)單介紹以及選擇Flutter作為跨平臺(tái)框架的原因，其次會(huì)介紹Flutter中與音視頻關(guān)系非常大的外接紋理概念，以及對(duì)它做出的一些優(yōu)化。之后會(huì)對(duì)閑魚(yú)在音視頻實(shí)踐過(guò)程中碰到的一些Flutter問(wèn)題提出了一些解決方案——TPM音視頻框架。最后是閑魚(yú)Flutter多媒體開(kāi)源組件的介紹。

Flutter

Flutter是一個(gè)跨平臺(tái)框架，以往的做法是將音頻、視頻和網(wǎng)絡(luò)這些模塊都下沉到C++層或者ARM層，在其上封裝成一個(gè)音視頻的SDK，供UI層的PC、iOS和Android調(diào)用。

而Flutter做為一個(gè)UI層的跨平臺(tái)框架，顧名思義就是在UI層也實(shí)現(xiàn)了一個(gè)跨平臺(tái)開(kāi)發(fā)。可以預(yù)想的是未Flutter發(fā)展的好的話，會(huì)逐漸變?yōu)橐粋€(gè)從底層到UI層的一個(gè)全鏈路的跨平臺(tái)開(kāi)發(fā)，技術(shù)人員分別負(fù)責(zé)SDK和UI層的開(kāi)發(fā)。

在Flutter之前已經(jīng)有很多跨平臺(tái)UI解決方案，那為什么選擇Flutter呢？

我們主要考慮性能和跨平臺(tái)的能力。

以往的跨平臺(tái)方案比如Weex，ReactNative，Cordova等等因?yàn)榧軜?gòu)的原因無(wú)法滿足性能要求，尤其是在音視頻這種性能要求幾乎苛刻的場(chǎng)景。

而諸如Xamarin等，雖然性能可以和原生App一致，但是大部分邏輯還是需要分平臺(tái)實(shí)現(xiàn)。

我們可以看一下，為什么Flutter可以實(shí)現(xiàn)高性能：

原生的native組件渲染以IOS為例，蘋(píng)果的UIKit通過(guò)調(diào)用平臺(tái)自己的繪制框架QuaztCore來(lái)實(shí)現(xiàn)UI的繪制，圖形繪制也是調(diào)用底層的API,比如OpenGL、Metal等。

而Flutter也是和原生API邏輯一致，也是通過(guò)調(diào)用底層的繪制框架層SKIA實(shí)現(xiàn)UI層。這樣相當(dāng)于Flutter他自己實(shí)現(xiàn)了一套UI框架，提供了一種性能超越原生API的跨平臺(tái)可能性。

但是我們說(shuō)一個(gè)框架最終性能怎樣，其實(shí)取決于設(shè)計(jì)者和開(kāi)發(fā)者。至于現(xiàn)在到底是一個(gè)什么狀況：

在閑魚(yú)的實(shí)踐中，我們發(fā)現(xiàn)在正常的開(kāi)發(fā)沒(méi)有特意的去優(yōu)化UI代碼的情況下，在一些低端機(jī)上，F(xiàn)lutter界面的流暢性是比Native界面要好的。

雖然現(xiàn)在閑魚(yú)某些場(chǎng)景下會(huì)有卡頓閃退等情況，但是這是一個(gè)新事物發(fā)展過(guò)程中的必然問(wèn)題，我們相信未來(lái)性能肯定不會(huì)成為限制Flutter發(fā)展的瓶頸的。

在閑魚(yú)實(shí)踐Flutter的過(guò)程中，混合棧和音視頻是其中比較難解決的兩個(gè)問(wèn)題，混合棧是指一個(gè)APP在Flutter過(guò)程中不可能一口氣將所有業(yè)務(wù)全部重寫(xiě)為Flutter，所以這是一個(gè)逐步迭代的過(guò)程，這期間原生native界面與Flutter界面共存的狀態(tài)就稱之為混合棧。閑魚(yú)在混合棧上也有一些比較好的輸出，例如FlutterBoost。

外接紋理

在講音視頻之前需要簡(jiǎn)要介紹一下外接紋理的概念，我們將它稱之為是Flutter和Frame之間的橋梁。

Flutter渲染一幀屏幕數(shù)據(jù)首先要做的是，GPU發(fā)出的VC信號(hào)在Flutter的UI線程，通過(guò)AOT編譯的機(jī)器碼結(jié)合當(dāng)前Dart Runtime，生成Layer Tree UI樹(shù)，Layer Tree上每一個(gè)葉子節(jié)點(diǎn)都代表了當(dāng)前屏幕上所需要渲染的每一個(gè)元素，包含了這些元素渲染所需要的內(nèi)容。將Layer Tree拋給GPU線程，在GPU線程內(nèi)調(diào)用Skia去完成整個(gè)UI的渲染過(guò)程。Layer Tree中有PictureLayer和TextureLayer兩個(gè)比較重要的節(jié)點(diǎn)。PictureLayer主要負(fù)責(zé)屏幕圖片的渲染，F(xiàn)lutter內(nèi)部實(shí)現(xiàn)了一套圖片解碼邏輯，在IO線程將圖片讀取或者從網(wǎng)絡(luò)上拉取之后，通過(guò)解碼能夠在IO線程上加載出紋理，交給GPU線程將圖片渲染到屏幕上。但是由于音視頻場(chǎng)景下系統(tǒng)API太過(guò)繁多，業(yè)務(wù)場(chǎng)景過(guò)于復(fù)雜。Flutter沒(méi)有一套邏輯去實(shí)現(xiàn)跨平臺(tái)的音視頻組件，所以說(shuō)Flutter提出了一種讓第三方開(kāi)發(fā)者來(lái)實(shí)現(xiàn)音視頻組件的方式，而這些音視頻組件的視頻渲染出口，就是TextureLayer。

在整個(gè)Layer Tree渲染的過(guò)程中，TextureLayer的數(shù)據(jù)紋理需要由外部第三方開(kāi)發(fā)者來(lái)指定，可以把視頻數(shù)據(jù)和播放器數(shù)據(jù)送到TextureLayer里，由Flutter將這些數(shù)據(jù)渲染出來(lái)。

TextureLayer渲染過(guò)程：首先判斷Layer是否已經(jīng)初始化，如果沒(méi)有就創(chuàng)建一個(gè)Texture，然后將Texture Attach到一個(gè)SufaceTexture上。

這個(gè)SufaceTexture是音視頻的native代碼可以獲取到的對(duì)象，通過(guò)這個(gè)對(duì)象創(chuàng)建的Suface，我們可以將視頻數(shù)據(jù)、攝像頭數(shù)據(jù)解碼放到Suface中，然后Flutter端通過(guò)監(jiān)聽(tīng)SufaceTexture的數(shù)據(jù)更新就可以順利把剛才創(chuàng)建的數(shù)據(jù)更新到它的紋理中，然后再將紋理交給SKIA渲染到屏幕上。

然而我們?nèi)绻枰肍lutter實(shí)現(xiàn)美顏，濾鏡，人臉貼圖等等功能，就需要將視頻數(shù)據(jù)讀取出來(lái)，更新到紋理中，再將GPU紋理經(jīng)過(guò)美顏濾鏡處理后生成一個(gè)處理后的紋理。按Flutter提供的現(xiàn)有能力，必須先將紋理中的數(shù)據(jù)從GPU讀出到CPU中，生成Bitmap后再寫(xiě)入Surface中，這樣在Flutter中才能順利的更新到視頻數(shù)據(jù)，這樣做對(duì)系統(tǒng)性能的消耗很大。

通過(guò)對(duì)Flutter渲染過(guò)程分析，我們知道Flutter底層需要渲染的數(shù)據(jù)就是GPU紋理，而我們經(jīng)過(guò)美顏濾鏡處理完成以后的結(jié)果也是GPU紋理，如果可以將它直接交給Flutter渲染，那就可以避免GPU-CPU-GPU這樣的無(wú)用循環(huán)。這樣的方法是可行的，但是需要一個(gè)條件，就是OpenGL上下文共享。

OpenGL

在說(shuō)上下文之前，得提到一個(gè)和上線文息息相關(guān)的概念：線程。

Flutter引擎啟動(dòng)后會(huì)啟動(dòng)四個(gè)線程：

第一個(gè)線程是UI線程，這是Flutter自己定義的UI線程，主要負(fù)責(zé)GPU發(fā)出的VSync信號(hào)時(shí)候用當(dāng)前Dart編譯的機(jī)器碼和當(dāng)前運(yùn)行環(huán)境創(chuàng)建出Layer Tree。

還有就是IO線程和GPU線程。和大部分OpenGL處理解決方案中一樣，F(xiàn)lutter也采取一個(gè)線程責(zé)資源加載，一部分負(fù)責(zé)資源渲染這種思路。

兩個(gè)線程之間紋理共享有兩種方式。一種是EGLImage(IOS是 CVOpenGLESTextureCache)。一種是OpenGL Share Context。Flutter通過(guò)Share Context來(lái)實(shí)現(xiàn)紋理共享，將IO線程的Context和GPU線程的Context進(jìn)行Share，放到同一個(gè)Share Group下面，這樣兩個(gè)線程下資源是互相可見(jiàn)可以共享的。

Platform線程是主線程，F(xiàn)lutter中有一個(gè)很奇怪的設(shè)定，GPU線程和主線程共用一個(gè)Context。并且在主線程也有很多OpenGL 操作。

這樣的設(shè)計(jì)會(huì)給音視頻開(kāi)發(fā)帶來(lái)很多問(wèn)題，后面會(huì)詳細(xì)說(shuō)。

音視頻端美顏處理完成的OpenGL紋理能夠讓Flutter直接使用的條件就是Flutter的上下文需要和平臺(tái)音視頻相關(guān)的OpenGL上下文處在一個(gè)Share Group下面。

由于Flutter主線程的Context就是GPU的Context，所以在音視頻端主線程中有一些OpenGL操作的話，很有可能使Flutter整個(gè)OpenGL被破壞掉。所以需要將所有的OpenGL操作都限制在子線程中。

通過(guò)上述這兩個(gè)條件的處理，我們就可以在沒(méi)有增加GPU消耗的前提下實(shí)現(xiàn)美顏和濾鏡等等功能。

TPM

在經(jīng)過(guò)demo驗(yàn)證之后，我們將這個(gè)方案應(yīng)用到閑魚(yú)音視頻組件中，但改造過(guò)程中發(fā)現(xiàn)了一些問(wèn)題。

上圖是攝像頭采集數(shù)據(jù)轉(zhuǎn)換為紋理的一段代碼，其中有兩個(gè)操作：首先是切進(jìn)程，將后面的OpenGL操作都切到cameraQueue中。然后是設(shè)置一次上下文。然后這種限制條件或者說(shuō)是潛規(guī)則往往在開(kāi)發(fā)過(guò)程中容易被忽略的。而這個(gè)條件一旦忽略后果就是出現(xiàn)一些莫名其妙的詭異問(wèn)題極難排查。因此我們就希望能抽象出一套框架，由框架本身實(shí)現(xiàn)線程的切換、上下文和模塊生命周期等的管理，開(kāi)發(fā)者接入框架以后只需要安心實(shí)現(xiàn)自己的算法，而不需要關(guān)心這些潛規(guī)則還有其他一些重復(fù)的邏輯操作。

在引入Flutter之前閑魚(yú)的音視頻架構(gòu)與大部分音視頻邏輯一樣采用分層架構(gòu)：

1：底層是一些獨(dú)立模塊

2：SDK層是對(duì)底層模塊的封裝

3：最上層是UI層。

引入Flutter之后，通過(guò)分析各個(gè)模塊的使用場(chǎng)景，我們可以得出一個(gè)假設(shè)或者說(shuō)是抽象：音視頻應(yīng)用在終端上可以歸納為視頻幀解碼之后視頻數(shù)據(jù)幀在各個(gè)模塊之間流動(dòng)的過(guò)程，基于這種假設(shè)去做Flutter音視頻框架的抽象。

咸魚(yú)Flutter多媒體開(kāi)源組件

整個(gè)Flutter音視頻框架抽象分為管線和數(shù)據(jù)的抽象、模塊的抽象、線程統(tǒng)一管理和上下文同一管理四部分。

管線，其實(shí)就是視頻幀流動(dòng)的管道。數(shù)據(jù)，音視頻中涉及到的數(shù)據(jù)包括紋理、Bit Map以及時(shí)間戳等。結(jié)合現(xiàn)有的應(yīng)用場(chǎng)景我們定義了管線流通數(shù)據(jù)以Texture為主數(shù)據(jù)，同時(shí)可以選擇性的添加Bit Map等作為輔助數(shù)據(jù)。這樣的數(shù)據(jù)定義方式，避免重復(fù)的創(chuàng)建和銷毀紋理帶來(lái)的性能開(kāi)銷以及多線程訪問(wèn)紋理帶來(lái)的一些問(wèn)題。也滿足一些特殊模塊對(duì)特殊數(shù)據(jù)的需求。同時(shí)也設(shè)計(jì)了紋理池來(lái)管理管線中的紋理數(shù)據(jù)。

模塊：如果把管線和數(shù)據(jù)比喻成血管和血液，那框架音視頻的場(chǎng)景就可以比喻成器官，我們根據(jù)模塊所在管線的位置抽象出采集、處理和輸出三個(gè)基類。這三個(gè)基類里實(shí)現(xiàn)了剛才說(shuō)的線程切換，上下文切換，格式轉(zhuǎn)換等等共同邏輯，各個(gè)功能模塊通過(guò)集成自這些基類，可以避免很多重復(fù)勞動(dòng)。

線程：每一個(gè)模塊初始化的時(shí)候，初始化函數(shù)就會(huì)去線程管理的模塊去獲取自己的線程，線程管理模塊可以決定給初始化函數(shù)分配新的線程或者已經(jīng)分配過(guò)其他模塊的線程。

這樣有三個(gè)好處：

一是可以根據(jù)需要去決定一個(gè)線程可以掛載多少模塊，做到線程間的負(fù)載均衡。第二，多線程并發(fā)式能夠保證模塊內(nèi)的OpenGL操作是在當(dāng)前線程內(nèi)而不會(huì)跑到主線程去，徹底避免Flutter的OpenGL 環(huán)境被破壞。第三，多線程并行可以充分利用CPU多核架構(gòu)，提升處理速度。

從Flutter端修改Flutter引擎將Context取出后，根據(jù)Context創(chuàng)建上下文的統(tǒng)一管理模塊，每一個(gè)模塊在初始化的時(shí)候會(huì)獲取它的線程，獲取之后會(huì)調(diào)用上下文管理模塊獲取自己的上下文。這樣可以保證每一個(gè)模塊的上下文都是與Flutter的上下文進(jìn)行Share的，每個(gè)模塊之間資源都是共享可見(jiàn)的，F(xiàn)lutter和音視頻native之間也是互相共享可見(jiàn)的。

基于上述框架如果要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的場(chǎng)景，比如畫(huà)面實(shí)時(shí)預(yù)覽和濾鏡處理功能，

1：需要選擇功能模塊，功能模塊包括攝像頭模塊、濾鏡處理模塊和Flutter畫(huà)面渲染模塊，

2：需要配置模塊參數(shù)，比如采集分辨率、濾鏡參數(shù)和前后攝像頭設(shè)置等，

3：在創(chuàng)建視頻管線后使用已配置的參數(shù)創(chuàng)建模塊

4：最后管線搭載模塊，開(kāi)啟管線就可以實(shí)現(xiàn)這樣簡(jiǎn)單的功能。

上圖為整個(gè)功能實(shí)現(xiàn)的代碼和結(jié)構(gòu)圖。

結(jié)合上述音視頻框架，閑魚(yú)實(shí)現(xiàn)了Flutter多媒體開(kāi)源組件。

組要包含四個(gè)基本組件分別是：

1：視頻圖像拍攝組件

2：播放器組件

3：視頻圖像編輯組件

4：相冊(cè)選擇組件

現(xiàn)在這些組件正在走內(nèi)部開(kāi)源流程。預(yù)計(jì)9月份，相冊(cè)和播放器會(huì)實(shí)現(xiàn)開(kāi)源。

后續(xù)展望和規(guī)劃

1：實(shí)現(xiàn)開(kāi)頭所說(shuō)的從底層SDK到UI的全鏈路的跨端開(kāi)發(fā)。目前底層框架層和模塊層都是各個(gè)平臺(tái)各自實(shí)現(xiàn)，反而是Flutter的UI端進(jìn)行了跨平臺(tái)的統(tǒng)一，所以后續(xù)會(huì)將底層也按照音視頻常用做法把邏輯下沉到C++層，盡可能的實(shí)現(xiàn)全鏈路跨平臺(tái)。

2：第二部分內(nèi)容為開(kāi)源共建，閑魚(yú)開(kāi)源的內(nèi)容不僅包括拍攝、編輯組件，還包括了很多底層模塊，希望有開(kāi)發(fā)者在基于Flutter開(kāi)發(fā)音視頻應(yīng)用時(shí)可以充分利用閑魚(yú)開(kāi)源出的音視頻模塊能力，搭建APP框架，開(kāi)發(fā)者只要去負(fù)責(zé)實(shí)現(xiàn)特殊需求模塊就可以，盡可能的減少重復(fù)勞動(dòng)。

移動(dòng)開(kāi)發(fā)還有未來(lái)嗎？

有。只要你的學(xué)習(xí)的能力強(qiáng)，有比較強(qiáng)的技術(shù)，如果你是在讀大學(xué)，一定要認(rèn)真學(xué)習(xí)，需要有比較好的基礎(chǔ)，在未來(lái)的很長(zhǎng)一段時(shí)間，移動(dòng)開(kāi)發(fā)都站的比較多的位置。因?yàn)楝F(xiàn)在是智能手機(jī)的時(shí)代。移動(dòng)開(kāi)發(fā)包含移動(dòng)端app，還有移動(dòng)的端的游戲等

像美團(tuán)外賣(mài)這樣的APP用一種開(kāi)發(fā)語(yǔ)言，能開(kāi)發(fā)得出來(lái)嗎？

像美團(tuán)外賣(mài)這樣的APP用一種開(kāi)發(fā)語(yǔ)言，能開(kāi)發(fā)得出來(lái)嗎？答案是不能。

美團(tuán)發(fā)展到現(xiàn)在可以說(shuō)已經(jīng)是一個(gè)【巨無(wú)霸】了，里面集成了很多很多功能，除了核心的外賣(mài)，還有 旅游 、 娛樂(lè) 、購(gòu)物、出行，金融等等業(yè)務(wù)線，那么這么多復(fù)雜的業(yè)務(wù)根本不可能用同一種開(kāi)發(fā)語(yǔ)言實(shí)現(xiàn)。

那么美團(tuán)都用到哪些開(kāi)發(fā)語(yǔ)言和技術(shù)了呢？下面就根據(jù)我的理解詳細(xì)說(shuō)一下。

前端是把產(chǎn)品的核心服務(wù)交給用戶的呈現(xiàn)者，它的表述方式、展示形式以及交互邏輯都跟用戶息息相關(guān)，都影響著用戶使用產(chǎn)品的體驗(yàn)，也就是說(shuō)直接影響產(chǎn)品的用戶留存。

前端開(kāi)發(fā)主要分為三大類型：Andriod、IOS和PC（H5） ,Android開(kāi)發(fā)語(yǔ)言是Kotlin和Java，IOS開(kāi)發(fā)語(yǔ)言是Object-c和Swift，PC（H5）開(kāi)發(fā)語(yǔ)言就比較雜了，有JS、CSS、HTML，還有很多第三方的前端框架，比如Angular.js、vue.js、Bootstrap、JQuery等等。

關(guān)于后端的功能，這一點(diǎn)可以說(shuō)是眾說(shuō)紛紜，主要需要考慮的是如何實(shí)現(xiàn)功能、數(shù)據(jù)的交互流程和存取、平臺(tái)的穩(wěn)定性與性能等。

那么后端都用到哪些開(kāi)發(fā)語(yǔ)言和技術(shù)呢？

根據(jù)后端技術(shù)選型的標(biāo)準(zhǔn)，后端可選的開(kāi)發(fā)語(yǔ)言和技術(shù)是非常多的。

比如Java體系的話，可以選用SpringMVC、Spring cloud、Hibernate，Mybatis、Mysql、Redis、Memcache、zookeeper、Kafka......；

比如Python體系的話，可以選用Django、Flask、Tarnado、Web2py等，中間件都是通用的，Redis，MQ、MySQL、Kafka等都可以用在python體系中；

當(dāng)然還有PHP、C、Perl等開(kāi)發(fā)語(yǔ)言。

綜上所述，美團(tuán)這個(gè)巨無(wú)霸公司，隨著業(yè)務(wù)線的擴(kuò)展用到的技術(shù)肯定會(huì)越來(lái)越多，而且越來(lái)越復(fù)雜，技術(shù)快速變革的時(shí)代，適者生存的競(jìng)爭(zhēng)性也會(huì)越來(lái)越激烈。

俗話說(shuō)：羅馬不是一日建成的，任何事都不可能一蹴而就，包含技術(shù)。在以后的發(fā)展中美團(tuán)也會(huì)逐步更新自己的技術(shù)和開(kāi)發(fā)語(yǔ)言的。

至少三種語(yǔ)言。后端一種語(yǔ)言（比如Java丶Go丶Python丶PHP等），后端語(yǔ)言及生態(tài)比較成熟。下面重點(diǎn)聊前端App開(kāi)發(fā)。

前臺(tái)兩種語(yǔ)言（Android和iOS是不同的開(kāi)發(fā)環(huán)境。比如Android用Java或者Kotlin，iOS采用Object C++或Swift），稱之為Native開(kāi)發(fā)。

當(dāng)然創(chuàng)業(yè)公司可以用一種前端語(yǔ)言寫(xiě)App前端，這樣就不需要Android和蘋(píng)果分兩種語(yǔ)言寫(xiě)，寫(xiě)一次代碼可以編譯成Android和iOS的App，現(xiàn)在通行的方案有Vue之類的DOM渲染模式，以及ReactNative方案（RN）。性能上RN優(yōu)于DOM渲染但低于用Native開(kāi)發(fā)的App。所以美團(tuán)這種公司，一定是Native方式寫(xiě)App，但RN是初創(chuàng)項(xiàng)目不錯(cuò)的選擇。

與RN競(jìng)爭(zhēng)的還有一種新貴flutter，是google推出來(lái)的，但設(shè)計(jì)原理與RN不同，性能方面優(yōu)于RN，只是目前生態(tài)不夠健全，國(guó)內(nèi)有閑魚(yú)app是采用此技術(shù)。未來(lái)可能會(huì)占一席之地。

最后，其實(shí)App開(kāi)發(fā)已經(jīng)是強(qiáng)努之末，我覺(jué)得主流應(yīng)該是朝PWA和小程序方向發(fā)展。

你好，開(kāi)發(fā)譬如美團(tuán)這種APP，用一種語(yǔ)言是實(shí)現(xiàn)不了的，一個(gè)APP有安卓和蘋(píng)果兩個(gè)操作系統(tǒng)，開(kāi)發(fā)能在安卓iOS端應(yīng)用的APP主流的開(kāi)發(fā)語(yǔ)言和技術(shù)是很多的，如后臺(tái)有JAVA、C++、PHP、Python等多種開(kāi)發(fā)語(yǔ)言，前端有kotlin、HTML、css、jquery、ajax、bootstrap、angular.js、react、vue.js、node.js、swift、object-c等多種語(yǔ)言和框架。

一個(gè)APP的開(kāi)發(fā)是需要前端技術(shù)和后臺(tái)技術(shù)共同配合完成，這樣的APP不論是功能還是性能都給用戶很好的體驗(yàn)，單一開(kāi)發(fā)語(yǔ)言畢竟技術(shù)支持有限，所以即使能開(kāi)發(fā)出來(lái)，APP的用戶體驗(yàn)也是不理想的。

一般APP有這幾種開(kāi)發(fā)組合模式：1、原生安卓iOS開(kāi)發(fā)，前端：JAVA、kotlin、swift、object-c后臺(tái)：JAVA、PHP、C++等后臺(tái)技術(shù)，這種模式開(kāi)發(fā)周期長(zhǎng)，成本高，性能好；2、混合APP開(kāi)發(fā)即hybrid app，前端以網(wǎng)頁(yè)技術(shù)為主，穿插原生開(kāi)發(fā)功能，兼具原生APP和web app的優(yōu)點(diǎn)，如淘寶、微信等應(yīng)用都是走的這個(gè)技術(shù)；3、web app，前端純網(wǎng)頁(yè)技術(shù)，后臺(tái)為主流開(kāi)發(fā)語(yǔ)言，這種模式開(kāi)發(fā)速度快，成本低，界面體驗(yàn)可能弱一些。

可見(jiàn)開(kāi)發(fā)一款A(yù)PP大多數(shù)都是多種語(yǔ)言配合完成，謝謝閱讀。

看完之前的評(píng)論，依然好奇為什么一個(gè)語(yǔ)言不能完全勝任。

前端跨平臺(tái)的方案有react native，cordova,flutter等，如果需要兼容開(kāi)發(fā)小程序，h5頁(yè)面，可以采用taro來(lái)開(kāi)發(fā)，一套代碼，所有平臺(tái)通吃。

后端的方案有服務(wù)端運(yùn)行時(shí)nodejs，大數(shù)據(jù)背景下運(yùn)用而生的數(shù)據(jù)庫(kù)mobgodb，緩存解決方案redis，搜索工具elasticsearch，負(fù)載均衡ngix，基本上是需要什么就有什么

所以總結(jié)下來(lái)，一句話，一種語(yǔ)言可以實(shí)現(xiàn)類似美團(tuán)這樣的app和小程序。為什么美團(tuán)使用的語(yǔ)言那么多，一大原因估計(jì)是美團(tuán)app開(kāi)發(fā)的早，當(dāng)時(shí)前端技術(shù)不成熟，工具沒(méi)現(xiàn)在這么多。

使用混合開(kāi)發(fā)與C++ 進(jìn)行跨平臺(tái)開(kāi)發(fā)，有好有壞。

C++ 進(jìn)行跨平臺(tái)開(kāi)發(fā)

編寫(xiě)一次，隨處運(yùn)行。早在 2013 年，Dropbox 就采用上述策略進(jìn)行移動(dòng)開(kāi)發(fā)，這背后的想法很簡(jiǎn)單：用 C++ 編寫(xiě)一次代碼，而不是用 Java 和 Objective-C 編寫(xiě)兩次。那時(shí)，整個(gè)移動(dòng)工程團(tuán)隊(duì)相對(duì)還比較小，但需要支持快速增長(zhǎng)的移動(dòng)路線圖。因此，公司希望找到一種方法，使這個(gè)小團(tuán)隊(duì)可以快速交付大量 Android 和 iOS 代碼。

如今，Dropbox 完全放棄了這個(gè)策略，轉(zhuǎn)而使用各個(gè)平臺(tái)的原生語(yǔ)言（主要是 Swift 和 Kotlin ，這兩種語(yǔ)言在剛開(kāi)始制定移動(dòng)策略時(shí)還不存在）。

Hybrid App混合開(kāi)發(fā)

Hybrid App主要以JS+Native兩者相互調(diào)用為主，從開(kāi)發(fā)層面實(shí)現(xiàn)“一次開(kāi)發(fā)，多處運(yùn)行”的機(jī)制，成為真正適合跨平臺(tái)的開(kāi)發(fā)。Hybrid App兼具了Native App良好用戶體驗(yàn)的優(yōu)勢(shì)，也兼具了Web App使用HTML5跨平臺(tái)開(kāi)發(fā)低成本的優(yōu)勢(shì)。

目前已經(jīng)有眾多Hybrid App開(kāi)發(fā)成功應(yīng)用，比如美團(tuán)、愛(ài)奇藝、支付寶等知名移動(dòng)應(yīng)用，都是采用Hybrid App開(kāi)發(fā)模式。

移動(dòng)應(yīng)用開(kāi)發(fā)的方式，目前主要有三種：

幾種模似都可以開(kāi)發(fā)出應(yīng)用，小應(yīng)用無(wú)所謂，但是大流量應(yīng)用，對(duì)圖形要求高的如 游戲 等原生開(kāi)發(fā)的效果還是最好

支付寶打開(kāi)很慢，就是因?yàn)椴捎没旌祥_(kāi)發(fā)，使用人多了不如原生開(kāi)發(fā)

不行的哦。任何你看到的應(yīng)用和網(wǎng)頁(yè)，都需要多個(gè)語(yǔ)言開(kāi)發(fā)的，大的分比如前端和后端，用的語(yǔ)言都是不一樣的

當(dāng)前名稱：閑魚(yú)放棄flutter,閑魚(yú)放棄fluttergo
路徑分享：http://chinadenli.net/article8/dseioop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站收錄、品牌網(wǎng)站建設(shè)、Google、靜態(tài)網(wǎng)站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)