跨平臺技術(shù)：H5與Flutter，誰將主導(dǎo)未來？
前言
隨著移動應(yīng)用的普及與多元化發(fā)展，跨平臺技術(shù)逐漸成為企業(yè)與開發(fā)者關(guān)注的焦點(diǎn)。本文將探討為何跨平臺是未來的發(fā)展趨勢，并從技術(shù)原理、優(yōu)缺點(diǎn)等方面深入分析H5與Flutter兩種主流的跨平臺技術(shù)。
一、跨平臺技術(shù)的興起
隨著移動互聯(lián)網(wǎng)的快速發(fā)展，移動應(yīng)用的需求日益多樣化，各個平臺（如iOS、Android等）的獨(dú)立開發(fā)面臨著開發(fā)周期長、人員成本高等問題?？缙脚_技術(shù)應(yīng)運(yùn)而生，旨在提高開發(fā)效率、降低成本，并滿足多樣化的用戶需求。
二、H5跨平臺技術(shù)解析
H5以其跨平臺的特性，在移動端開發(fā)中占據(jù)重要地位。無論在哪種平臺，只要有瀏覽器，H5應(yīng)用就能運(yùn)行。
1.瀏覽器架構(gòu)
瀏覽器是H5的載體，其架構(gòu)包括渲染引擎、網(wǎng)絡(luò)請求、JS引擎等七個部分。其中，渲染引擎是性能優(yōu)化的關(guān)鍵。
2.渲染引擎原理
渲染引擎是瀏覽器的核心組件之一，負(fù)責(zé)解析HTML、CSS和JavaScript，并將內(nèi)容呈現(xiàn)給用戶。不同的瀏覽器內(nèi)核渲染過程有所不同，但主要流程是一致的。
3.JSBridge原理
JSBridge是JS和Native之間的橋梁，用于實(shí)現(xiàn)兩者之間的通信。它通過定義一系列接口，使JS能夠調(diào)用Native的功能，同時Native也能通過JSBridge調(diào)用JS的函數(shù)。
4.App打開H5過程
當(dāng)App打開H5頁面時，會經(jīng)歷加載HTML、CSS和JS資源，構(gòu)建DOM和渲染頁面等步驟。這個過程可以分為多個階段，每個階段都有相應(yīng)的性能優(yōu)化手段。
5.優(yōu)缺點(diǎn)分析
H5的優(yōu)點(diǎn)包括跨平臺、開發(fā)成本低、易于維護(hù)等；缺點(diǎn)則包括性能可能不如原生應(yīng)用、某些功能受限等。但隨著PWA（Progressive Web App）、WebAssembly等技術(shù)的進(jìn)步，H5的未來發(fā)展前景廣闊。
三、小程序跨平臺技術(shù)解析（以微信小程序?yàn)槔?/h3>
小程序是近年來快速發(fā)展的跨平臺技術(shù)之一，以微信小程序?yàn)槔?，其技術(shù)架構(gòu)包括View視圖層和App Service邏輯層兩部分。小程序基于Webview實(shí)現(xiàn)，具有與H5相似的跨平臺特性。
四、Flutter跨平臺技術(shù)解析
Flutter是近年來備受矚目的跨平臺開發(fā)框架，它使用Dart語言開發(fā)，并擁有一套完整的開發(fā)工具和UI組件庫。Flutter通過一套統(tǒng)一的API，讓開發(fā)者能夠使用同一套代碼在多個平臺上開發(fā)應(yīng)用。
五、未來展望
H5和Flutter作為當(dāng)前主流的跨平臺技術(shù)，各有優(yōu)勢。隨著技術(shù)的不斷進(jìn)步和需求的不斷變化，未來的跨平臺技術(shù)將更加注重性能、用戶體驗(yàn)和開發(fā)者體驗(yàn)。H5憑借其開放的Web標(biāo)準(zhǔn)和廣泛的瀏覽器支持，將繼續(xù)在跨平臺領(lǐng)域發(fā)揮重要作用。而Flutter則憑借其高效的開發(fā)體驗(yàn)和出色的性能表現(xiàn)，成為越來越多開發(fā)者的選擇。
跨平臺技術(shù)是未來的發(fā)展趨勢，它將為開發(fā)者帶來更高效的開發(fā)體驗(yàn)，為用戶帶來更豐富的應(yīng)用選擇。
深入了解技術(shù)架構(gòu)：WebView、React Native 與 Flutter的對比解析===============================
一、WebView技術(shù)解析
1. View
在數(shù)字化時代，View可理解為提供UI渲染的h5頁面。具體到WebView技術(shù)，它通過WAWebview.js提供底層功能支持。每個窗口都擁有一個獨(dú)立的WebView進(jìn)程，這種設(shè)計(jì)保障了用戶體驗(yàn)，限制了頁面層級的打開數(shù)量，確保微信平臺上的流暢運(yùn)行。
2. App Service
App Service主要負(fù)責(zé)邏輯處理、數(shù)據(jù)請求和接口調(diào)用。WAService.js是其底層技術(shù)支持。其運(yùn)行環(huán)境僅有一個WebView進(jìn)程，高效且穩(wěn)定。
3. View與App Service的通信
視圖層和邏輯層通過JSBridage（系統(tǒng)層機(jī)制）進(jìn)行通信。邏輯層將數(shù)據(jù)變化通知視圖層，觸發(fā)頁面更新；視圖層將觸發(fā)的通知邏輯層進(jìn)行業(yè)務(wù)處理，形成流暢的交互體驗(yàn)。
二、優(yōu)缺點(diǎn)分析
-
優(yōu)點(diǎn)
WebView技術(shù)成熟，跨平臺性好。
開發(fā)成本低，學(xué)習(xí)曲線平緩。
缺點(diǎn)
性能可能不如原生應(yīng)用，尤其在復(fù)雜交互和大型應(yīng)用上。
三、React Native技術(shù)解析
RN的理念與工作原理
React Native（RN）的理念是“Learn once, write anywhere”，即一次學(xué)習(xí)，處處應(yīng)用。它允許開發(fā)者使用React編寫代碼，實(shí)現(xiàn)跨平臺應(yīng)用。Virtual DOM存在于內(nèi)存中，通過不同的渲染引擎生成不同平臺下的UI。JS和Native之間通過Bridge通信。在RN框架中，JSX源碼與Native原生的UI組件進(jìn)行映射，用原生代替DOM元素來渲染，使得UI渲染接近Native App的體驗(yàn)。
React Native與Native平臺通信
React Native通過與原生平臺的橋接技術(shù)，實(shí)現(xiàn)了JS層與原生層的無縫對接，使得開發(fā)者能夠充分利用原生平臺的功能和性能優(yōu)勢。
優(yōu)缺點(diǎn)分析
優(yōu)點(diǎn)
接近原生的性能體驗(yàn)。
可以使用原生功能，同時保持React的開發(fā)體驗(yàn)。
缺點(diǎn)
對于不熟悉React的開發(fā)者，學(xué)習(xí)曲線可能較陡峭。
在某些特定場景下，可能還需要處理JS與Native之間的兼容性問題。
四、RN展望與Flutter介紹
雖然React Native在某些方面還有不足，但其新版本已經(jīng)進(jìn)行了諸多改進(jìn)。RN團(tuán)隊(duì)也在積極進(jìn)行大版本重構(gòu)，其未來發(fā)展值得期待。與此另一種技術(shù)Flutter逐漸進(jìn)入人們的視野。Flutter是Google開發(fā)的跨平臺UI框架，支持iOS和Android系統(tǒng)開發(fā)。其依賴系統(tǒng)的只有圖形繪制相關(guān)的接口，最大程度上保證了不同平臺、不同設(shè)備的體驗(yàn)一致性。使用Skia圖形庫作為渲染引擎，并且采用支持AOT的Dart語言進(jìn)行邏輯處理，執(zhí)行效率遠(yuǎn)高于JavaScript。這使得Flutter在性能上有了更大的優(yōu)勢，特別是在自制引擎渲染方面。這兩種技術(shù)各有優(yōu)勢，未來發(fā)展如何，我們拭目以待。Flutter架構(gòu)原理與Dart語言優(yōu)勢探索
===========================
一、Flutter架構(gòu)原理
Flutter是一個由Google開發(fā)的跨平臺移動應(yīng)用開發(fā)框架。其架構(gòu)原理主要依賴于Dart語言特性和自身的組件化設(shè)計(jì)。通過Dart語言編寫的代碼，編譯成原生應(yīng)用，實(shí)現(xiàn)跨平臺運(yùn)行。其獨(dú)特的架構(gòu)使得開發(fā)者可以高效地進(jìn)行移動應(yīng)用開發(fā)，同時保持應(yīng)用的原生性能和用戶體驗(yàn)。
二、Dart語言的優(yōu)勢
Dart作為Flutter開發(fā)的后端語言，有著諸多優(yōu)勢。其強(qiáng)類型特性保證了代碼的健壯性，減少了運(yùn)行時錯誤的可能性。Dart語言具有高效的性能表現(xiàn)，能夠支持大型應(yīng)用的開發(fā)。Dart語言豐富的庫和框架，使得開發(fā)者能夠輕松應(yīng)對各種開發(fā)需求。相對于JavaScript等語言，Dart在一些特定的應(yīng)用場景下，表現(xiàn)出了更高的效率和穩(wěn)定性。
三、優(yōu)缺點(diǎn)分析
Flutter作為一種新興的移動應(yīng)用開發(fā)框架，自然有其獨(dú)特的優(yōu)點(diǎn)和缺點(diǎn)。優(yōu)點(diǎn)在于其跨平臺開發(fā)的特性，使得開發(fā)者可以一套代碼適配多個平臺，大大提高了開發(fā)效率和降低了開發(fā)成本。Flutter豐富的組件庫和強(qiáng)大的性能表現(xiàn)，使得開發(fā)者可以輕松地構(gòu)建出高質(zhì)量的移動應(yīng)用。缺點(diǎn)也不可忽視。由于Flutter的火熱程度，其技術(shù)生態(tài)中的競爭也異常激烈，各種技術(shù)框架層出不窮，對于開發(fā)者來說，選擇適合的技術(shù)棧是一項(xiàng)重要的挑戰(zhàn)。隨著技術(shù)的快速發(fā)展，F(xiàn)lutter的架構(gòu)和工具鏈也在不斷變化中，對于一些開發(fā)者來說，這無疑增加了學(xué)習(xí)成本和維護(hù)成本。不過從整體上看，F(xiàn)lutter依然是一個值得學(xué)習(xí)和掌握的技術(shù)框架。
關(guān)于uniapp是否會成為未來的趨勢這一問題，我們可以從多個角度進(jìn)行分析。從跨平臺開發(fā)的角度來看，uniapp作為一種基于Vue的跨平臺開發(fā)框架，確實(shí)滿足了當(dāng)前移動應(yīng)用開發(fā)的剛需。隨著技術(shù)的不斷發(fā)展和競爭的加劇，uniapp是否能夠保持其領(lǐng)先地位，還需要看其是否能夠持續(xù)創(chuàng)新和完善自身技術(shù)生態(tài)。從技術(shù)趨勢的角度來看，當(dāng)前的技術(shù)趨勢是多元化和快速變化的。我們不能確定uniapp是否會成為未來的趨勢。重要的是，我們應(yīng)該關(guān)注技術(shù)的發(fā)展和變化，不斷學(xué)習(xí)新的技術(shù)和知識，以適應(yīng)不斷變化的市場需求和技術(shù)環(huán)境。最后提醒廣大開發(fā)者朋友在選擇技術(shù)棧時應(yīng)該充分考慮自身需求和實(shí)際情況做出明智的選擇。
關(guān)于uniapp的具體內(nèi)容和使用體驗(yàn)這里不再贅述各位開發(fā)者朋友自然會有自己的判斷和體驗(yàn)。但可以肯定的是隨著移動應(yīng)用市場的不斷發(fā)展和變化跨平臺開發(fā)依然是一個重要的趨勢而uniapp作為其中的一種解決方案自然會繼續(xù)發(fā)揮其作用和價值。同時我們也期待看到更多的技術(shù)和解決方案的出現(xiàn)共同推動移動應(yīng)用開發(fā)的進(jìn)步和發(fā)展。探究Uniapp的發(fā)展與未來趨勢
一、引言
隨著移動互聯(lián)網(wǎng)的飛速發(fā)展，前端技術(shù)不斷更新迭代。從最初的非自定義組件到如今的v3架構(gòu)，每一次升級都伴隨著無數(shù)的挑戰(zhàn)與機(jī)遇。正是這樣的時代變遷，讓uniapp這類框架嶄露頭角。今天，我們來深入探究uniapp的成長與未來趨勢。
二、uniapp的成長歷程
從當(dāng)初的非自定義組件到自定義組件，再到如今的v3架構(gòu)，每一步都凝聚著開發(fā)者的智慧與汗水。對于我們這些使用者而言，深刻感受到的是它的日益成熟與穩(wěn)定。起初，我們公司項(xiàng)目使用的是h5+的那一套技術(shù)，后來也嘗試了uniapp。在要求不高的情況下，效果還不錯。但真正要完全適配安卓、蘋果等系統(tǒng)時，面臨的挑戰(zhàn)仍然不少。
三、uniapp的優(yōu)勢與挑戰(zhàn)
uniapp目前確實(shí)很火，它代表了前端進(jìn)軍移動互聯(lián)網(wǎng)的一種趨勢。前端技術(shù)近幾年的更新速度達(dá)到了頂峰，這得益于開放繁榮的生態(tài)。uniapp這類框架正是前端開發(fā)者進(jìn)軍移動互聯(lián)網(wǎng)的利器。雖然移動互聯(lián)網(wǎng)看似有所“過時”，但實(shí)際上，它正在以新的形態(tài)進(jìn)軍PC領(lǐng)域。未來幾年，uniapp這類框架仍然會保持繁榮。
四、uniapp的發(fā)展趨勢與未來
隨著前端與移動的界限越來越模糊，我們可以看到uniapp這類框架的未來發(fā)展趨勢。serverless是未來的趨勢，而unicloud整合了阿里云與騰訊云的力量，為開發(fā)者提供了強(qiáng)大的后端支持。更重要的是，unicloud開始走向標(biāo)準(zhǔn)化，如uni-id、unicloud-admin等，都是這一趨勢的明顯體現(xiàn)。雖然目前它還在不斷完善中，功能也越來越多，但一旦穩(wěn)定下來，我們可以期待它在細(xì)節(jié)上做到極致。對于初創(chuàng)團(tuán)隊(duì)或個人創(chuàng)業(yè)者來說，免費(fèi)的服務(wù)器和框架能大大節(jié)省成本。uniapp的開發(fā)者工具也在不斷進(jìn)步，使得開發(fā)效率大大提高。它已經(jīng)成功助力多個項(xiàng)目上架各大應(yīng)用商店和平臺小程序，證明了它的實(shí)際應(yīng)用價值。
五、關(guān)于uniapp的思考與展望
我們不能否認(rèn)h5類的優(yōu)勢，它在開發(fā)簡單、周期短等方面有著明顯的優(yōu)勢。任何一個成熟的產(chǎn)品在達(dá)到一定規(guī)模后，都會考慮回歸原生或者混合開發(fā)。這是由性能、用戶體驗(yàn)、安全等多方面的因素決定的。而對于uniapp來說，它的優(yōu)勢在于一套代碼可以適配多平臺，真正做到了跨平臺開發(fā)。這正是它的價值所在，也是它未來的發(fā)展方向。隨著整個業(yè)內(nèi)開發(fā)者的用戶數(shù)越來越多，這樣一個高效、便捷的開發(fā)平臺勢必會取代一些不合時宜的開發(fā)方式。從目前的使用廣度和市場反饋來看，uniapp已經(jīng)展現(xiàn)出了強(qiáng)大的競爭力。未來，我們期待它在更多方面實(shí)現(xiàn)突破和創(chuàng)新。
uniapp作為前端進(jìn)軍移動互聯(lián)網(wǎng)的一種重要手段，其未來的發(fā)展趨勢是明朗的。隨著技術(shù)的不斷進(jìn)步和市場的認(rèn)可，我們有理由相信它會走得更遠(yuǎn)。uniapp在小程序開發(fā)中的現(xiàn)狀與應(yīng)用前景分析
一、uniapp的普及現(xiàn)狀
如今，uniapp在小程序開發(fā)領(lǐng)域仍然受到廣泛關(guān)注與使用。其簡潔易學(xué)的特性和跨多個平臺的優(yōu)勢使得它在眾多編碼工具中脫穎而出。尤其對于小型項(xiàng)目或交互要求不高的項(xiàng)目，uniapp憑借其成本效益和開發(fā)效率得到了廣泛認(rèn)可。雖然在一些高端或復(fù)雜項(xiàng)目中可能有所不足，但對于大多數(shù)普通應(yīng)用而言，uniapp已經(jīng)足夠滿足需求。
關(guān)于大家感覺討論不多的問題，原因在于：有影響力的開發(fā)者大多專注于更高端的技術(shù)，而uniapp的用戶群體主要是普通開發(fā)者，他們的聲音相對較弱。uniapp的技術(shù)上限相對較低，因此在技術(shù)社區(qū)中可能不引起過多討論。但這并不影響它在普通開發(fā)者中的受歡迎程度。
二、uniapp的優(yōu)勢與應(yīng)用前景
在國內(nèi)，uniapp的生態(tài)發(fā)展良好，得益于大前端趨勢的推動。其優(yōu)勢包括簡單易學(xué)、跨平臺能力、流暢的運(yùn)行體驗(yàn)和良好的兼容性。尤其是對于那些缺乏原生客戶端工程師、只有web團(tuán)隊(duì)的創(chuàng)業(yè)團(tuán)隊(duì)來說，uniapp是一個非常好的選擇。像“小時尚”這樣的應(yīng)用就是一個很好的例子，它已經(jīng)成功在各大應(yīng)用商店上線，證明了uniapp的實(shí)際應(yīng)用能力。
三、Flutter浪潮下的音視頻研發(fā)探索
主講人：陳爐軍（阿里巴巴閑魚事業(yè)部）
大家好，我是來自阿里巴巴閑魚事業(yè)部的陳爐軍。本次分享的主題是Flutter浪潮下的音視頻研發(fā)探索。我將為大家介紹閑魚APP在當(dāng)下流行的跨平臺框架Flutter的大規(guī)模實(shí)踐中，在音視頻領(lǐng)域遇到的一些困難及解決方案。
1. Flutter簡介及選擇原因
Flutter是一個跨平臺框架，它的出現(xiàn)打破了傳統(tǒng)的音視頻SDK調(diào)用模式。在過去，音頻、視頻和網(wǎng)絡(luò)模塊通常下沉到C++層或ARM層，然后封裝成SDK供UI層的各個平臺調(diào)用。而Flutter則是一個在UI層實(shí)現(xiàn)跨平臺開發(fā)的框架。如果Flutter發(fā)展得好，未來可能會實(shí)現(xiàn)從底層到UI層的全鏈路跨平臺開發(fā)。我們選擇Flutter主要是看中了它的性能和跨平臺能力。
2. Flutter在音視頻領(lǐng)域的挑戰(zhàn)與解決方案
在Flutter中，音視頻研發(fā)面臨的最大挑戰(zhàn)是如何處理好與外接紋理的關(guān)系。針對這一問題，我們進(jìn)行了一系列優(yōu)化和探索。閑魚在音視頻實(shí)踐中也遇到了一些問題，為此我們提出了TPM音視頻框架，這一框架有效地解決了這些問題。我們還會介紹閑魚開源的Flutter多媒體組件，這些組件為開發(fā)者提供了更多的選擇和可能性。
無論是uniapp還是Flutter，它們都在小程序開發(fā)領(lǐng)域扮演著重要的角色。隨著技術(shù)的不斷發(fā)展，這些工具的前景將更加廣闊。Flutter高性能跨平臺方案的優(yōu)勢與挑戰(zhàn)
一、傳統(tǒng)跨平臺方案的局限性
以往的跨平臺解決方案，如Weex、ReactNative、Cordova等，因架構(gòu)原因無法滿足高性能要求，尤其在音視頻等性能要求極為嚴(yán)苛的場景下表現(xiàn)尤為突出。盡管某些方案如Xamarin性能接近原生App，但大部分邏輯仍需要分平臺實(shí)現(xiàn)，增加了開發(fā)成本與復(fù)雜性。
二、Flutter實(shí)現(xiàn)高性能的原理
Flutter能夠?qū)崿F(xiàn)高性能的秘訣在于其調(diào)用底層繪制框架的方式。以iOS的UIKit為例，它通過調(diào)用QuaztCore來實(shí)現(xiàn)UI的繪制。而Flutter則通過調(diào)用底層的SKIA框架來實(shí)現(xiàn)UI層，與原生API邏輯一致。這種設(shè)計(jì)使得Flutter提供了一種性能超越原生API的跨平臺可能性。
三、實(shí)際應(yīng)用的性能表現(xiàn)
在閑魚的實(shí)踐中，我們發(fā)現(xiàn)Flutter在界面流暢性方面表現(xiàn)優(yōu)異。在正常的開發(fā)中，如果沒有特意優(yōu)化UI代碼，在一些低端機(jī)上，F(xiàn)lutter界面的流暢性甚至超過Native界面。雖然目前仍存在卡頓閃退等問題，但這是新事物發(fā)展中的必然問題，我們相信未來這些問題會得到解決，性能不會成為限制Flutter發(fā)展的瓶頸。
四、混合棧與音視頻的挑戰(zhàn)
五、外接紋理與TextureLayer的作用
在講音視頻之前，需要了解外接紋理的概念，它是Flutter和Frame之間的橋梁。在Flutter的渲染過程中，TextureLayer起到了重要的作用。這些紋理數(shù)據(jù)可以由外部第三方開發(fā)者指定，例如視頻數(shù)據(jù)和播放器數(shù)據(jù)。這些音視頻組件的視頻渲染出口就是TextureLayer，F(xiàn)lutter負(fù)責(zé)將這些數(shù)據(jù)渲染出來。這一機(jī)制為開發(fā)者在Flutter中實(shí)現(xiàn)音視頻功能提供了可能性和靈活性。
Flutter以其獨(dú)特的架構(gòu)和調(diào)用底層API的方式，展現(xiàn)出了在跨平臺開發(fā)中的高性能優(yōu)勢。盡管在實(shí)踐中面臨一些挑戰(zhàn)，如混合棧和音視頻處理，但隨著技術(shù)的不斷進(jìn)步和社區(qū)的發(fā)展，我們相信這些問題將得到妥善解決。TextureLayer渲染過程詳解
一、Layer初始化與Texture創(chuàng)建
在渲染過程中，首要判斷Layer是否已經(jīng)初始化。若尚未初始化，則創(chuàng)建一個Texture，并將其Attach到一個SufaceTexture上。這一步是音視頻渲染的基礎(chǔ)。
二、音視頻數(shù)據(jù)與Flutter的交互
SufaceTexture是音視頻的native代碼可訪問的對象。通過此對象創(chuàng)建的Suface，我們可以將解碼后的視頻數(shù)據(jù)、攝像頭數(shù)據(jù)放入其中。Flutter端通過監(jiān)聽SufaceTexture的數(shù)據(jù)更新，將更新后的數(shù)據(jù)反映到其紋理中。隨后，這些紋理由SKIA渲染至屏幕上。
三、美顏與濾鏡功能的挑戰(zhàn)
要實(shí)現(xiàn)美顏、濾鏡、人臉貼圖等功能，需對視頻數(shù)據(jù)進(jìn)行讀取、更新至紋理，并經(jīng)過美顏濾鏡處理生成新的紋理。在Flutter現(xiàn)有機(jī)制下，數(shù)據(jù)需從GPU讀出至CPU，生成Bitmap后再寫入Surface。這不僅流程繁瑣，而且對系統(tǒng)性能消耗較大。
四、優(yōu)化方案：直接渲染GPU紋理
若能將處理后的GPU紋理直接交給Flutter渲染，則可避免GPU到CPU再到GPU的無用循環(huán)。此方案的關(guān)鍵是OpenGL上下文共享。
五、關(guān)于OpenGL上下文共享的細(xì)節(jié)
在探討上下文共享之前，需理解與之緊密相關(guān)的線程概念。Flutter引擎啟動后，會啟動四個線程：UI線程、IO線程、GPU線程和Platform（主）線程。其中，UI線程主要負(fù)責(zé)基于GPU的VSync信號的Layer Tree創(chuàng)建。而IO線程和GPU線程則負(fù)責(zé)資源的加載和渲染。
紋理共享在Flutter中通過Share Context實(shí)現(xiàn)。IO線程的Context和GPU線程的Context被置于同一Share Group內(nèi)，使兩個線程間的資源互相可見、可共享。對于音視頻開發(fā)而言，若要在Flutter中使用處理完成的OpenGL紋理，必須確保Flutter的OpenGL上下文與平臺音視頻相關(guān)的OpenGL上下文處于同一Share Group。
由于Flutter的特殊設(shè)定，GPU線程和主線程共享一個Context。這為主線程中的OpenGL操作帶來了潛在問題，可能破壞整個OpenGL環(huán)境。為確保穩(wěn)定性，所有OpenGL操作應(yīng)限制在子線程進(jìn)行。
實(shí)現(xiàn)音視頻美顏功能在Flutter中的優(yōu)化涉及復(fù)雜的渲染和OpenGL上下文管理。只有在充分了解并恰當(dāng)處理這些技術(shù)細(xì)節(jié)后，才能確保功能的流暢實(shí)現(xiàn)與系統(tǒng)的穩(wěn)定運(yùn)行。
實(shí)現(xiàn)美顏濾鏡功能而不增加GPU消耗
經(jīng)過對兩個條件的處理，我們成功在不影響GPU消耗的前提下，實(shí)現(xiàn)了美顏和濾鏡等功能。這一技術(shù)突破為我們打開了新的應(yīng)用前景。
關(guān)于TPM的問題
我們將這一方案應(yīng)用于閑魚的音視頻組件中，但在改造過程中遇到了一些挑戰(zhàn)。經(jīng)過demo驗(yàn)證后，我們發(fā)現(xiàn)了一些在開發(fā)過程中容易被忽略的限制條件或潛規(guī)則。這些潛規(guī)則一旦忽略，可能導(dǎo)致難以排查的詭異問題。我們希望通過抽象出一套框架，幫助開發(fā)者更好地管理線程切換、上下文以及模塊生命周期等，讓開發(fā)者能夠更專注于實(shí)現(xiàn)自己的算法，而無需關(guān)心這些潛規(guī)則和其他重復(fù)的邏輯操作。
閑魚音視頻架構(gòu)的演變
在引入Flutter之前，閑魚的音視頻架構(gòu)與其他大部分音視頻邏輯一樣，采用分層架構(gòu)。底層是獨(dú)立模塊，SDK層則是對這些底層模塊的封裝，最上層是UI層。但隨著Flutter的引入，我們需要重新思考音視頻框架的抽象方式。
Flutter音視頻框架的抽象
通過對各個模塊的使用場景進(jìn)行分析，我們提出一個假設(shè)：音視頻應(yīng)用在終端上可以看作是視頻幀解碼后，視頻數(shù)據(jù)幀在各個模塊之間流動的過程?；谶@一假設(shè)，我們開始抽象Flutter音視頻框架。整個框架分為管線、數(shù)據(jù)、模塊以及線程的統(tǒng)一管理和上下文的統(tǒng)一管理四部分。
咸魚Flutter多媒體開源組件
在Flutter音視頻框架的抽象中，管線其實(shí)就是視頻幀流動的管道。數(shù)據(jù)則包括紋理、Bit Map以及時間戳等。我們定義管線流通數(shù)據(jù)以Texture為主數(shù)據(jù)，這樣可以避免重復(fù)創(chuàng)建和銷毀紋理帶來的性能開銷以及多線程訪問紋理的問題。我們也設(shè)計(jì)了紋理池來管理管線中的紋理數(shù)據(jù)。
在模塊方面，我們把管線和數(shù)據(jù)比作血管和血液，那么框架音視頻的場景就可以看作器官。我們根據(jù)模塊在管線中的位置，抽象出采集、處理和輸出三個基類。這三個基類包含了線程切換、上下文切換、格式轉(zhuǎn)換等共同邏輯，各個功能模塊通過繼承這些基類，可以避免很多重復(fù)勞動。
在線程管理方面，每個模塊在初始化時，都會從線程管理模塊獲取自己的線程。線程管理模塊可以根據(jù)需要決定是分配新線程還是已使用過的線程給初始化函數(shù)。這種方式有三個好處：
1. 可以根據(jù)需要去決定一個線程可以掛載多少模塊，做到線程間的負(fù)載均衡；
2. 多線程并發(fā)式能夠保證模塊內(nèi)的OpenGL操作在當(dāng)前線程內(nèi)進(jìn)行，避免Flutter的OpenGL環(huán)境被破壞；
3. 多線程并行可以充分利用CPU多核架構(gòu)，提升處理速度。
通過這樣的框架設(shè)計(jì)，我們希望能夠?yàn)殚_發(fā)者提供一個更簡潔、高效的音視頻開發(fā)體驗(yàn)，推動Flutter在音視頻領(lǐng)域的應(yīng)用發(fā)展。從Flutter端改造Flutter引擎：構(gòu)建上下文統(tǒng)一管理模塊
一、上下文管理模塊概述
在Flutter應(yīng)用中，我們通過修改Flutter引擎以提取Context，并創(chuàng)建一個統(tǒng)一的上下文管理模塊。每個模塊在初始化時都會獲取其專屬線程，并通過調(diào)用此管理模塊來獲取其上下文。這樣，每個模塊的上下文都能與Flutter的上下文共享，確保模塊間的資源可見性，包括Flutter與音視頻native之間的資源共享。
二、實(shí)現(xiàn)實(shí)時預(yù)覽與濾鏡處理功能
要實(shí)現(xiàn)畫面實(shí)時預(yù)覽和濾鏡處理功能，需遵循以下步驟：
1. 選擇功能模塊：包括攝像頭模塊、濾鏡處理模塊和Flutter畫面渲染模塊。
2. 配置模塊參數(shù)：如采集分辨率、濾鏡參數(shù)及前后攝像頭設(shè)置等。
3. 創(chuàng)建視頻管線并使用配置參數(shù)初始化模塊。
4. 將模塊搭載至管線，啟動管線即可實(shí)現(xiàn)功能。
上圖展示了整個功能實(shí)現(xiàn)的代碼及結(jié)構(gòu)。
三、閑魚實(shí)現(xiàn)的Flutter多媒體開源組件
基于上述音視頻框架，閑魚開發(fā)了Flutter多媒體開源組件，主要包含以下四個基本組件：
1. 視頻圖像拍攝組件
2. 播放器組件
3. 視頻圖像編輯組件
4. 相冊選擇組件
目前，這些組件正進(jìn)行內(nèi)部開源流程，預(yù)計(jì)9月份，相冊和播放器組件將實(shí)現(xiàn)開源。
四、后續(xù)展望與規(guī)劃
我們的未來規(guī)劃與展望如下：
1. 實(shí)現(xiàn)從底層SDK到UI的全鏈路跨端開發(fā)。為改變目前各平立實(shí)現(xiàn)框架層和模塊層的現(xiàn)狀，我們計(jì)劃將音視頻邏輯下沉到C++層，以實(shí)現(xiàn)全鏈路的跨平臺開發(fā)。
2. 開源共建。閑魚的開源內(nèi)容不僅包括拍攝、編輯組件，還涵蓋眾多底層模塊。我們希望能為基于Flutter開發(fā)音視頻應(yīng)用的開發(fā)者提供助力，使開發(fā)者能更專注于實(shí)現(xiàn)特殊需求模塊，減少重復(fù)勞動。我們真誠地邀請開發(fā)者共同參與開源項(xiàng)目，共同搭建APP框架，充分利用閑魚的音視頻模塊能力。
通過上述規(guī)劃與展望，我們期望為開發(fā)者提供更高效、更便捷的Flutter音視頻開發(fā)體驗(yàn)，并推動Flutter在音視頻領(lǐng)域的廣泛應(yīng)用。
