一、如何在現(xiàn)有App項目中集成React Native的混合開發(fā)

1. 引言

隨著移動應(yīng)用開發(fā)的不斷進(jìn)步，集成React Native（RN）到現(xiàn)有App項目中已成為一種常見需求。RN因其學(xué)習(xí)曲線相對較低，讓前端團(tuán)隊能利用熟悉的React進(jìn)行開發(fā)，并借助npm包庫的優(yōu)勢。其清晰的代碼結(jié)構(gòu)和對ES6/TypeScript的支持，使得項目初期實踐更為便捷，尤其適合項目時間緊迫的團(tuán)隊。

2. 項目實施與結(jié)構(gòu)

在項目實施過程中，RN負(fù)責(zé)自定義頁面的開發(fā)，而像地圖和路線規(guī)劃等復(fù)雜功能則交由原生處理。這樣的分工實現(xiàn)了原生與RN功能模塊的靈活切換。在項目結(jié)構(gòu)上，RN作為子模塊在iOS和Android項目中獨立開發(fā)，通過submodule分支保持同步更新，確保項目的順利進(jìn)行。

3. 關(guān)鍵步驟與注意事項

設(shè)置入口文件和導(dǎo)航欄：使用react-navigation和redux進(jìn)行管理，確保頁面間的流暢導(dǎo)航。

處理與原生通信：利用NativeModules和NativeEventEmitter實現(xiàn)雙向通信。特別注意處理RN調(diào)用Android時的回調(diào)問題，確保通信無誤。

圖片處理和打包適配：根據(jù)平臺差異進(jìn)行圖片處理，如iOS采用bundle命令打包，Android則打包為bundle文件，確保應(yīng)用的兼容性。

4. 成果與展望

通過以上的步驟，開發(fā)團(tuán)隊能夠在保持項目進(jìn)度的實現(xiàn)RN的高效集成，為用戶提供一致的用戶體驗。隨著技術(shù)的不斷進(jìn)步，我們期待RN與原生應(yīng)用的融合能更加完美，為用戶提供更豐富的移動應(yīng)用體驗。

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

1. Flutter簡介及選擇原因

大家好，我是阿里巴巴閑魚事業(yè)部的陳爐軍。本次分享的主題是Flutter浪潮下的音視頻研發(fā)探索。Flutter是當(dāng)下流行的跨平臺框架，其在音視頻領(lǐng)域的應(yīng)用也備受關(guān)注。我們選擇Flutter主要是考慮其性能和跨平臺能力。

2. Flutter中的音視頻挑戰(zhàn)與解決方案

在Flutter中，音視頻研發(fā)面臨一些挑戰(zhàn)，但也有一些解決方案。例如，F(xiàn)lutter中的外接紋理概念在音視頻領(lǐng)域非常重要，我們對此進(jìn)行了一些優(yōu)化。閑魚在音視頻實踐過程中碰到的一些Flutter問題，我們提出了TPM音視頻框架來解決。

3. Flutter與音視頻的結(jié)合

傳統(tǒng)做法是將音頻、視頻和網(wǎng)絡(luò)模塊下沉到C++層或ARM層，而Flutter作為一個UI層的跨平臺框架，在UI層實現(xiàn)了跨平臺開發(fā)?？梢灶A(yù)見的是，如果Flutter發(fā)展良好，它可能會逐漸變?yōu)橐粋€從底層到UI層的全鏈路跨平臺開發(fā)。技術(shù)人員將分別負(fù)責(zé)SDK和UI層的開發(fā)。

4. 閑魚在Flutter多媒體領(lǐng)域的實踐

閑魚在Flutter多媒體領(lǐng)域有一些開源組件的實踐。我們對Flutter的音視頻功能進(jìn)行了深入探索，并積累了一些經(jīng)驗和技巧。未來，我們將繼續(xù)探索Flutter在音視頻領(lǐng)域的更多可能性，為用戶提供更豐富的視聽體驗。

Flutter在音視頻領(lǐng)域具有巨大的潛力，我們期待其在未來的發(fā)展中能帶來更多的驚喜和突破。探究Flutter高性能實現(xiàn)的奧秘

一、Flutter與原生渲染的比較

原生的native組件渲染，以IOS為例，蘋果的UIKit通過調(diào)用QuaztCore繪制框架來實現(xiàn)UI的繪制。圖形繪制調(diào)用的是底層的API，如OpenGL、Metal等。而Flutter的渲染邏輯與原生API一致，也是通過調(diào)用底層的繪制框架層SKIA實現(xiàn)UI層。這種設(shè)計使得Flutter提供了一套性能卓越的UI框架，具有跨平臺的潛力。

二、Flutter在實際應(yīng)用中的性能表現(xiàn)

在閑魚的實踐中，我們發(fā)現(xiàn)Flutter界面的流暢性在某些低端機(jī)上甚至優(yōu)于Native界面。雖然目前閑魚在某些場景下面臨卡頓、閃退等問題，但這是新事物發(fā)展過程中的必然問題。我們堅信，未來的Flutter性能將得到進(jìn)一步優(yōu)化，不會成為限制其發(fā)展的瓶頸。

三、混合棧：Flutter與原生界面的共存

四、外接紋理：Flutter與Frame之間的橋梁

在音視頻處理之前，我們需要了解外接紋理的概念，它是Flutter和Frame之間的橋梁。Flutter的渲染過程包括GPU發(fā)出的VC信號在Flutter的UI線程生成Layer Tree UI樹，每一個葉子節(jié)點都代表當(dāng)前屏幕所需渲染的元素。Layer Tree中的PictureLayer負(fù)責(zé)屏幕圖片的渲染，而TextureLayer則負(fù)責(zé)音視頻等復(fù)雜場景下的渲染。

五、TextureLayer與音視頻渲染

在音視頻場景下，系統(tǒng)API繁多，業(yè)務(wù)場景復(fù)雜，F(xiàn)lutter沒有一套邏輯去實現(xiàn)跨平臺的音視頻組件。Flutter提出了讓第三方開發(fā)者實現(xiàn)音視頻組件的方式。這些音視頻組件的視頻渲染出口就是TextureLayer。在整個Layer Tree渲染過程中，TextureLayer的數(shù)據(jù)紋理由外部第三方開發(fā)者指定，可以將視頻數(shù)據(jù)和播放器數(shù)據(jù)送到TextureLayer里，由Flutter負(fù)責(zé)將這些數(shù)據(jù)渲染出來。這種設(shè)計使得Flutter在音視頻處理上更加靈活和高效。

Flutter通過底層繪制框架SKIA的實現(xiàn)，提供了一種性能超越原生API的跨平臺可能性。在實際應(yīng)用中，F(xiàn)lutter表現(xiàn)出優(yōu)異的性能，尤其在閑魚的實踐中，其界面流暢性在低端機(jī)上甚至優(yōu)于Native界面。雖然目前面臨一些挑戰(zhàn)，如混合棧和音視頻處理，但Flutter的未來發(fā)展前景廣闊，性能優(yōu)化將持續(xù)進(jìn)行。

解析Flutter音視頻渲染過程中的美顏處理優(yōu)化

一、SurfaceTexture與音視頻渲染概述

在Flutter應(yīng)用中，SurfaceTexture是音視頻播放過程中可以獲取到的關(guān)鍵對象。借助這個對象創(chuàng)建的Surface，我們可以將視頻數(shù)據(jù)、攝像頭數(shù)據(jù)解碼后放入其中。Flutter端通過監(jiān)聽SurfaceTexture的數(shù)據(jù)更新，能夠順利將解碼后的數(shù)據(jù)更新到紋理中，再交由SKIA渲染引擎渲染到屏幕上。為了實現(xiàn)美顏、濾鏡等功能，我們需要對現(xiàn)有的音視頻處理流程進(jìn)行優(yōu)化。

二、美顏功能實現(xiàn)面臨的挑戰(zhàn)

在實現(xiàn)美顏功能時，我們需要對視頻數(shù)據(jù)進(jìn)行讀取、更新到紋理中，再經(jīng)過美顏濾鏡處理生成新的紋理。按照Flutter現(xiàn)有的能力，我們必須先將紋理中的數(shù)據(jù)從GPU讀出到CPU中，生成Bitmap后再寫入Surface。這樣的流程導(dǎo)致了系統(tǒng)性能的消耗較大，影響了用戶體驗。

三、OpenGL上下文共享的重要性

為了避免GPU到CPU再到GPU的無用循環(huán)，我們需要探索新的解決方案。通過對Flutter渲染過程的分析，我們知道Flutter底層需要渲染的數(shù)據(jù)是GPU紋理。如果美顏濾鏡處理完成后的結(jié)果也能直接交給Flutter渲染，就可以避免上述的無用循環(huán)。而實現(xiàn)這一點的關(guān)鍵就在于OpenGL上下文共享。

四、關(guān)于OpenGL線程與共享機(jī)制

在談?wù)揙penGL上下文之前，需要了解與上下文息息相關(guān)的概念——線程。Flutter引擎啟動后會啟動四個線程，包括UI線程、IO線程、GPU線程和Platform線程（主線程）。為了讓音視頻端美顏處理完成的OpenGL紋理能夠讓Flutter直接使用，需要確保Flutter的上下文與平臺音視頻相關(guān)的OpenGL上下文處在一個Share Group下面。這就需要我們采用OpenGL Share Context來實現(xiàn)紋理共享，使IO線程的Context和GPU線程的Context能夠共享資源。這樣設(shè)計能夠極大地簡化音視頻開發(fā)的復(fù)雜性。

五、主線程與GPU線程的設(shè)計問題及其解決方案

在Flutter中，存在一個特殊的設(shè)定：GPU線程和主線程共用一個Context。如果在主線程中進(jìn)行過多的OpenGL操作，很可能會破壞整個OpenGL環(huán)境。為了確保音視頻美顏功能的穩(wěn)定實現(xiàn)，所有的OpenGL操作都應(yīng)該被限制在子線程中。通過上述的處理方式，我們可以在不增加GPU消耗的前提下實現(xiàn)美顏和濾鏡等功能，提升用戶體驗的同時保持系統(tǒng)的高效運行。

通過上述的改進(jìn)和優(yōu)化，我們可以更加高效地實現(xiàn)Flutter音視頻渲染過程中的美顏處理功能，提升應(yīng)用的性能和用戶體驗。閑魚音視頻組件的改造與Flutter音視頻框架的抽象

一、改造過程中的挑戰(zhàn)

在demo驗證之后，我們將方案應(yīng)用到閑魚的音視頻組件中，然而在實際改造過程中遇到了一些問題。這些問題的根源往往在于開發(fā)過程中容易忽略的一些限制條件或潛規(guī)則。為了解決這些問題，我們希望能夠抽象出一套框架，幫助開發(fā)者更高效地處理線程切換、上下文管理以及模塊生命周期等問題，從而專注于實現(xiàn)自己的算法。

二、原始的音視頻架構(gòu)

在引入Flutter之前，閑魚的音視頻架構(gòu)采用的是分層架構(gòu)，其中底層是獨立模塊，SDK層是對底層模塊的封裝，最上層是UI層。這種架構(gòu)在大多數(shù)音視頻邏輯場景下都是適用的。

三、Flutter音視頻框架的抽象

引入Flutter之后，我們開始重新思考音視頻框架的抽象方式。通過分析各個模塊的使用場景，我們意識到音視頻應(yīng)用在終端上可以歸納為視頻幀解碼后數(shù)據(jù)幀在各模塊間流動的過程。基于這一假設(shè)，我們開始構(gòu)建Flutter音視頻框架的抽象。

四、管線與數(shù)據(jù)的抽象

整個Flutter音視頻框架的抽象分為管線、數(shù)據(jù)、模塊、線程統(tǒng)一管理和上下文統(tǒng)一管理四部分。管線是視頻幀流動的管道，數(shù)據(jù)則包括紋理、Bit Map以及時間戳等。結(jié)合應(yīng)用場景，我們以Texture為主要數(shù)據(jù)，同時可以選擇性地添加Bit Map等作為輔助數(shù)據(jù)。這種數(shù)據(jù)定義方式避免了重復(fù)創(chuàng)建和銷毀紋理帶來的性能開銷以及多線程訪問紋理的問題，也滿足了特殊模塊對特殊數(shù)據(jù)的需求。我們還設(shè)計了紋理池來管理管線中的紋理數(shù)據(jù)。

五、模塊與線程管理

如果把管線和數(shù)據(jù)比作血管和血液，那么框架中的音視頻場景就可以比作器官。我們根據(jù)模塊在管線中的位置，抽象出采集、處理和輸出三個基類。這三個基類中實現(xiàn)了線程切換、上下文切換、格式轉(zhuǎn)換等共同邏輯。各個功能模塊通過繼承這些基類，可以大大減少重復(fù)勞動。線程管理方面，每個模塊在初始化時都會從線程管理模塊獲取自己的線程。線程管理模塊可以根據(jù)需要分配新的線程或使用已分配的線程，實現(xiàn)線程的負(fù)載均衡。多線程并發(fā)式能夠保證模塊內(nèi)的OpenGL操作在當(dāng)前線程內(nèi)進(jìn)行，避免Flutter的OpenGL環(huán)境被破壞。多線程并行可以充分利用CPU多核架構(gòu)，提升處理速度。

六、上下文的統(tǒng)一管理

從Flutter端修改Flutter引擎，將Context取出后，我們創(chuàng)建了上下文的統(tǒng)一管理模塊。每個模塊在初始化時都會獲取它的線程和上下文。這種管理方式確保了每個模塊都有自己獨立的上下文和線程，避免了上下文之間的沖突和干擾，提高了系統(tǒng)的穩(wěn)定性和性能。關(guān)于Flutter音視頻框架的應(yīng)用和實現(xiàn)

一、音視頻框架概述

Flutter音視頻框架為確保應(yīng)用間的上下文共享、資源互通提供了堅實的基礎(chǔ)。此框架保證了模塊間的共享可見性，包括Flutter與音視頻native之間的共享。這種架構(gòu)使得實現(xiàn)各種功能變得更為便捷。

二、實現(xiàn)畫面實時預(yù)覽和濾鏡處理功能

要實現(xiàn)畫面實時預(yù)覽和濾鏡處理功能，需遵循以下步驟：

1. 選擇功能模塊：包括攝像頭模塊、濾鏡處理模塊和Flutter畫面渲染模塊。

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

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

4. 搭載模塊并開啟管線，實現(xiàn)功能。

三、閑魚實現(xiàn)的Flutter多媒體開源組件

基于上述音視頻框架，閑魚已成功實現(xiàn)了Flutter多媒體開源組件，包含以下四個基本組件：

1. 視頻圖像拍攝組件

2. 播放器組件

3. 視頻圖像編輯組件

4. 相冊選擇組件

目前，相冊和播放器組件已預(yù)計9月份實現(xiàn)開源。

四、后續(xù)展望與規(guī)劃

1. 實現(xiàn)從底層SDK到UI的全鏈路的跨端開發(fā)，計劃將底層框架和模塊層按照音視頻常用做法，盡可能實現(xiàn)全鏈路跨平臺。

2. 開源共建，不僅開放拍攝、編輯組件，還開放底層模塊，希望開發(fā)者能充分利用這些模塊，只需負(fù)責(zé)實現(xiàn)特殊需求模塊，以減少重復(fù)勞動。

五、Webapp、混合app與套殼app的區(qū)別

1. Webapp：指使用HTML、CSS與JavaScript結(jié)合的傳統(tǒng)前端網(wǎng)頁項目，通過瀏覽器訪問特定網(wǎng)址即可使用。

2. 混合app（Hybrid App）：特點是呈現(xiàn)原生UI，其中大部分代碼為原生編寫，部分頁面則利用React Native、Weex或Flutter等技術(shù)實現(xiàn)。例如，閑魚安卓客戶端部分商品頁面使用Flutter技術(shù)實現(xiàn)。

3. 套殼app：指使用第三方框架或工具，將Web技術(shù)封裝成原生應(yīng)用的形式。這種方式的優(yōu)點是開發(fā)成本低，但可能會受到性能、兼容性等問題的影響。

三者各有優(yōu)勢，開發(fā)者應(yīng)根據(jù)實際需求選擇合適的技術(shù)路線。隨著技術(shù)的不斷發(fā)展，F(xiàn)lutter等跨平臺開發(fā)框架正逐步改變移動應(yīng)用的開發(fā)格局。探討移動應(yīng)用的不同形態(tài)：原生App、混合App、套殼App與mui的解析

隨著移動應(yīng)用的快速發(fā)展，多種應(yīng)用形態(tài)共存，每種形態(tài)都有其獨特的開發(fā)技術(shù)和呈現(xiàn)形式。讓我們深入探討原生App、混合App、套殼App以及mui的特點和差異。

一、套殼App的解析

套殼App是一種采用WebView與webapp結(jié)合的方式。在這種模式下，移動端的主要功能在webapp中實現(xiàn)，而展示層面則通過調(diào)用原生WebView來展現(xiàn)webapp內(nèi)容。這種形式的應(yīng)用具有開發(fā)周期短、成本較低的優(yōu)勢，但由于依賴于WebView，其性能和用戶體驗可能不如原生應(yīng)用。

二、原生平臺與混合App的界定

當(dāng)App主要在原生的平臺上實現(xiàn)，網(wǎng)頁內(nèi)容僅作為輔助功能時，它不能被歸類為混合App?；旌螦pp應(yīng)該主打原生UI的呈現(xiàn)形式，結(jié)合網(wǎng)頁技術(shù)與原生技術(shù)，以實現(xiàn)更好的用戶體驗和性能。這種形態(tài)的應(yīng)用結(jié)合了原生和網(wǎng)頁技術(shù)的優(yōu)勢，但開發(fā)難度和成本相對較高。

三、mui的特性探討

mui作為一種應(yīng)用形態(tài)，與webapp、混合app、套殼app都有所不同。從定義上來說，mui可能更偏向于高級的套殼app，它可能提供更豐富的功能和更優(yōu)秀的用戶體驗。mui通常致力于提供高效的用戶界面解決方案，同時兼容多種平臺和開發(fā)技術(shù)，幫助開發(fā)者快速構(gòu)建高質(zhì)量的應(yīng)用。

四、各形態(tài)之間的差異

webapp、混合app與套殼app之間的主要差異體現(xiàn)在開發(fā)技術(shù)和呈現(xiàn)形式上。webapp主要基于網(wǎng)頁技術(shù)，適用于簡單的信息展示；混合app結(jié)合原生和網(wǎng)頁技術(shù)，旨在提供更好的性能和用戶體驗；套殼app則更多是利用WebView來展示網(wǎng)頁內(nèi)容。而mui作為一種更高級別的解決方案，旨在提供更豐富的功能和更流暢的用戶體驗。

五、開發(fā)方式的選擇

開發(fā)者在選擇開發(fā)方式時，應(yīng)根據(jù)實際需求進(jìn)行考慮。對于簡單的信息展示，webapp可能是一個不錯的選擇；對于需要良好性能和豐富功能的應(yīng)用，混合App或mui可能是更合適的選擇。還需要考慮開發(fā)成本、周期以及目標(biāo)用戶的使用習(xí)慣等因素。

總結(jié)，移動應(yīng)用的不同形態(tài)各有優(yōu)勢和適用場景。開發(fā)者應(yīng)根據(jù)實際需求和資源，選擇最適合的開發(fā)方式，以構(gòu)建高質(zhì)量的應(yīng)用，滿足用戶需求。