React Native與Flutter App開發(fā)中的視頻播放探索
一、React Native App開發(fā)中的視頻播放組件
在React Native App開發(fā)中，實現(xiàn)視頻播放功能至關(guān)重要，需要考慮全屏播放、APP最小化時的恢復播放等功能。React Native社區(qū)中的React-Native-Video組件是完成這一任務(wù)的主要工具。它通過利用video標簽并擴展方法，結(jié)合各設(shè)備（Android、iOS或Windows）的播放器，輕松實現(xiàn)視頻播放。在iOS上，該組件利用uiWebview和wkWebview，其中wkWebview還自帶AirPlay功能，可直接將視頻投放到電視上觀看。而在Android平臺上，它則通過Native.js調(diào)用系統(tǒng)播放器進行視頻播放，盡管無法直接將視頻狀態(tài)反饋到j(luò)s層，但其功能表現(xiàn)依然出色。
二、Flutter APP開發(fā)中的視頻播放器選擇
Flutter本身并未自帶視頻播放器，因此開發(fā)者需要借助第三方插件如VideoPlayer或fijkplayer來實現(xiàn)視頻播放功能。VideoPlayer插件設(shè)計簡潔，能夠迅速實現(xiàn)自定義的視頻播放功能。對于Android端，開發(fā)者可以選擇如餃子視頻播放器、GSYVideoPlayer、DKPlayer等開源播放器。Firebase Cloud Storage提供了安全、經(jīng)濟且易于使用的對象存儲服務(wù)，非常適合大規(guī)模應(yīng)用的視頻托管。結(jié)合Amazon S3和CloudFront，開發(fā)者可以實現(xiàn)安全且可擴展的點播服務(wù)。
三、利用鏈接代碼調(diào)用設(shè)備播放器播放視頻
在App開發(fā)過程中，開發(fā)者可以通過添加鏈接代碼來調(diào)用設(shè)備（Android、iOS或Windows）的播放器播放視頻。一些國際健身類App傾向于使用YouTube作為視頻播放器，而Vimeo也是值得考慮的平臺。Vimeo不僅為用戶提供上傳、分享、儲存視頻的服務(wù)，還支持高清內(nèi)容上傳并且無片長限制，深受中國用戶喜愛。其教育視頻解決方案更是一大亮點，幫助教育者分享知識，將影響力擴展到課堂之外，并為社區(qū)建立聯(lián)系。通過Vimeo的Record功能，用戶可以輕松錄制屏幕或網(wǎng)絡(luò)攝像頭，以個人風格傳遞知識。Vimeo還提供了定制播放器、隱私設(shè)置控制等功能，確保視頻的安全播放。
四、受歡迎的Video Sharing網(wǎng)站
當前市場上有很多受歡迎的視頻分享網(wǎng)站，如OpenMyVideo、Facebook、Tubemogul、Posterous、Veoh等。這些網(wǎng)站為視頻分享提供了便捷的平臺，使得用戶可以輕松地上傳、觀看和分享視頻。其中，Vimeo和YouTube是最受歡迎的兩大視頻分享網(wǎng)站，它們擁有龐大的用戶群體和豐富的視頻資源。
Flutter浪潮下的音視頻研發(fā)探索
隨著Flutter的流行，音視頻研發(fā)在跨平臺框架中得到了廣泛的關(guān)注。阿里巴巴閑魚事業(yè)部的陳爐軍先生將為我們分享Flutter浪潮下的音視頻研發(fā)探索。他將詳細介紹閑魚APP在采用Flutter跨平臺框架后，在音視頻領(lǐng)域遇到的一些困難以及解決方案。分享內(nèi)容將包括Flutter的簡介、選擇原因、與音視頻緊密相關(guān)的外接紋理概念及其優(yōu)化方法，以及閑魚在音視頻實踐過程中針對Flutter提出的一些解決方案——TPM音視頻框架。這將為我們深入了解Flutter在音視頻研發(fā)領(lǐng)域的應(yīng)用提供寶貴的參考。
無論是React Native還是Flutter，在App開發(fā)中實現(xiàn)視頻播放功能都是一項重要的任務(wù)。開發(fā)者需要根據(jù)具體需求選擇合適的工具和插件，充分利用各平臺的優(yōu)勢，為用戶提供流暢、安全的視頻播放體驗。
閑魚Flutter多媒體開源組件介紹
一、Flutter跨平臺框架概述
Flutter是一個強大的跨平臺開發(fā)框架，它允許開發(fā)者使用單一代碼庫來構(gòu)建美觀且性能出色的應(yīng)用程序。傳統(tǒng)的做法是將音視頻和網(wǎng)絡(luò)等模塊下沉到更低層次如C++或ARM層，再封裝成SDK供上層調(diào)用。Flutter作為一個UI層的跨平臺框架，在UI層實現(xiàn)了跨平臺開發(fā)。如果Flutter能夠持續(xù)發(fā)展，它可能會逐漸成為一個從底層到UI層的全鏈路跨平臺解決方案。技術(shù)人員將分別負責SDK和UI層的開發(fā)。
二、為什么選擇Flutter
在選擇Flutter之前，市場上已經(jīng)存在許多跨平臺UI解決方案。我們主要關(guān)注其性能和跨平臺能力。盡管一些解決方案如Weex和ReactNative擁有廣泛的用戶群體，但它們由于架構(gòu)原因無法滿足音視頻等高性能場景的需求。而像Xamarin這樣的解決方案雖然性能出色，但大部分邏輯仍需要針對各個平臺分別實現(xiàn)。Flutter因其獨特的渲染機制，能夠?qū)崿F(xiàn)高性能的跨平臺UI。其通過調(diào)用底層的繪制框架SKIA實現(xiàn)UI層，提供了一種超越原生API的跨平臺可能性。
三. Flutter的高性能實現(xiàn)原理
Flutter的高性能實現(xiàn)主要得益于其調(diào)用底層繪制框架SKIA的方式。與原生組件渲染類似，F(xiàn)lutter通過調(diào)用這些底層繪制API來實現(xiàn)高性能的UI繪制。在閑魚的實踐中，我們發(fā)現(xiàn)在未特意優(yōu)化UI代碼的情況下，F(xiàn)lutter在低端機上的界面流暢性甚至優(yōu)于Native界面。雖然目前還存在一些卡頓和閃退的問題，但這是一個新事物發(fā)展過程中的必然問題，我們相信未來的性能優(yōu)化將使Flutter的發(fā)展不再受瓶頸限制。
四、混合棧與音視頻挑戰(zhàn)
在閑魚的Flutter實踐中，混合棧和音視頻是兩大難點?；旌蠗Ｊ侵冈谝粋€APP中，F(xiàn)lutter和原生native界面共存的狀態(tài)。這是一個逐步迭代的過程，要求我們在實踐中尋找最佳實踐和創(chuàng)新解決方案。例如，閑魚在混合棧上已經(jīng)有了不錯的輸出，如FlutterBoost等。而音視頻方面的挑戰(zhàn)則需要借助外接紋理的概念來解決，它是Flutter和Frame之間的橋梁。
五、外接紋理與音視頻處理
在解決音視頻問題之前，我們需要了解外接紋理的概念。它是Flutter處理音視頻的關(guān)鍵技術(shù)之一，作為Flutter和Frame之間的橋梁，它使得Flutter能夠更有效地處理音視頻數(shù)據(jù)。通過外接紋理技術(shù)，我們可以實現(xiàn)高性能的音視頻處理，為閑魚的多媒體應(yīng)用提供強大的支持。
閑魚的Flutter多媒體開源組件實踐為我們展示了Flutter在跨平臺開發(fā)中的潛力和挑戰(zhàn)。我們相信隨著技術(shù)的不斷發(fā)展和優(yōu)化，F(xiàn)lutter將成為未來的主流開發(fā)框架之一。
Flutter渲染機制詳解：從GPU到屏幕的一幀之旅
一、Layer Tree的生成與GPU的交互
在Flutter應(yīng)用中，當GPU發(fā)出VC信號時，這標志著渲染過程的開始。結(jié)合AOT編譯的機器碼和當前的Dart Runtime環(huán)境，一個Layer Tree UI樹得以生成。每一個葉子節(jié)點都代表屏幕上需要渲染的元素，包含了這些元素的所有渲染信息。Layer Tree被傳遞給GPU線程，由Skia完成整個UI的渲染。二、PictureLayer與TextureLayer的重要性
在Layer Tree中，PictureLayer和TextureLayer扮演著重要角色。PictureLayer負責屏幕圖片的渲染，它內(nèi)部實現(xiàn)了一套圖片解碼邏輯。而TextureLayer則是音視頻組件的渲染出口。三、TextureLayer的渲染流程與挑戰(zhàn)
對于TextureLayer，其數(shù)據(jù)紋理通常由外部第三方開發(fā)者提供。視頻數(shù)據(jù)和播放器數(shù)據(jù)被送到TextureLayer，由Flutter進行渲染。在渲染過程中，首先判斷Layer是否已經(jīng)初始化，如果沒有則創(chuàng)建一個Texture并Attach到一個SufaceTexture上。這個SufaceTexture是音視頻native代碼可以獲取的對象，開發(fā)者可以通過它更新視頻數(shù)據(jù)到紋理中。四、美顏、濾鏡功能的實現(xiàn)難題與解決方案
若想在Flutter中實現(xiàn)美顏、濾鏡等功能，需要將視頻數(shù)據(jù)更新到紋理中，再經(jīng)過美顏濾鏡處理生成新的紋理?，F(xiàn)有能力需先將紋理數(shù)據(jù)從GPU讀出到CPU，生成Bitmap后再寫入Surface，這樣的操作對系統(tǒng)性能消耗較大。理想情況下，如果能將處理后的GPU紋理直接交給Flutter渲染，就能避免不必要的循環(huán)。這需要OpenGL上下文共享。五、OpenGL上下文共享與Flutter線程概述
一、紋理共享技術(shù)概述
Flutter通過Share Context實現(xiàn)了紋理共享技術(shù)，將IO線程的Context和GPU線程的Context進行Share，置于同一Share Group之下，使得兩個線程下的資源能夠互相可見、共享。在Flutter中，有一種是EGLImage（在IOS上是CVOpenGLESTextureCache），另一種是OpenGL Share Context。這種設(shè)計給音視頻開發(fā)帶來了一些挑戰(zhàn)，但也為實現(xiàn)高效的美顏、濾鏡功能提供了可能。
二、Flutter中的主線程與GPU線程
在Flutter中，存在一個獨特的設(shè)定：GPU線程和主線程共用一個Context。主線程中也有很多OpenGL操作。這種設(shè)計給音視頻開發(fā)帶來了一系列問題，特別是在美顏處理方面。為了確保Flutter的上下文與平臺音視頻相關(guān)的OpenGL上下文處于同一Share Group下，我們需要對主線程的OpenGL操作進行嚴格管理。
三、挑戰(zhàn)與解決方案
由于Flutter主線程的Context就是GPU的Context，因此在音視頻端主線程中進行OpenGL操作可能會破壞Flutter整個OpenGL環(huán)境。為此，我們必須將所有的OpenGL操作限制在子線程中。通過這兩個條件的處理，我們可以在不增加GPU消耗的前提下實現(xiàn)美顏和濾鏡功能。
四、在閑魚音視頻組件中的應(yīng)用與挑戰(zhàn)
在將上述方案應(yīng)用于閑魚音視頻組件后，我們遇到了一些問題。其中，攝像頭采集數(shù)據(jù)轉(zhuǎn)換為紋理的過程涉及到進程切換和上下文設(shè)置。這些限制條件或潛規(guī)則在開發(fā)過程中往往容易被忽略，一旦忽略可能導致難以排查的問題。我們希望能抽象出一套框架，由框架本身實現(xiàn)線程的切換、上下文和模塊生命周期等的管理，以簡化開發(fā)者的操作。
五、音視頻框架的抽象與架構(gòu)
在引入Flutter之前，閑魚的音視頻架構(gòu)采用分層架構(gòu)，包括底層獨立模塊、SDK層對底層模塊的封裝以及最上層的UI層。引入Flutter后，我們通過分析各模塊的使用場景，提出了一個假設(shè)或抽象：音視頻應(yīng)用在終端上可歸納為視頻數(shù)據(jù)幀在各模塊間流動的過程。基于此假設(shè)，我們對Flutter音視頻框架進行了抽象，分為管線與數(shù)據(jù)的抽象、模塊的抽象、線程統(tǒng)一管理和上下文統(tǒng)一管理四部分。通過這樣的框架抽象，我們期望能更好地管理音視頻應(yīng)用中的各個模塊，提高開發(fā)效率和軟件性能。
六、咸魚Flutter多媒體開源組件
在Flutter音視頻框架的抽象過程中，我們特別關(guān)注咸魚Flutter多媒體開源組件的應(yīng)用。這些組件為我們的音視頻開發(fā)提供了強大的支持，幫助我們更好地實現(xiàn)各種功能，提升用戶體驗。通過不斷優(yōu)化和改進這些組件，我們期望為Flutter開發(fā)者提供更豐富、更高效的多媒體開發(fā)體驗。
一、數(shù)據(jù)定義與紋理管理
在當前的管線流通數(shù)據(jù)中，我們主要依賴Texture作為核心數(shù)據(jù)。為了更好地管理這些紋理數(shù)據(jù)，我們定義了一種數(shù)據(jù)定義方式，即通過選擇性添加Bit Map等輔助數(shù)據(jù)，以優(yōu)化性能并避免多線程訪問紋理引發(fā)的問題。這種策略不僅降低了因重復創(chuàng)建和銷毀紋理而產(chǎn)生的性能開銷，還滿足了特殊模塊對特殊數(shù)據(jù)的獨特需求。我們還設(shè)計了專門的紋理池來集中管理這些紋理數(shù)據(jù)。
二、模塊與基類設(shè)計
如果將管線比作血管，數(shù)據(jù)為血液，那么音視頻框架中的角色便是各個模塊。根據(jù)模塊在管線中的位置和作用，我們抽象出了采集、處理和輸出三個基類。這些基類包含了線程切換、上下文切換、格式轉(zhuǎn)換等共性邏輯。通過讓功能模塊繼承自這些基類，我們有效避免了大量的重復開發(fā)工作。
三、線程管理與優(yōu)勢
每個模塊在初始化時，都會從線程管理模塊獲取自己的線程。線程管理模塊具備智能分配功能，可以為初始化函數(shù)分配新線程，或復用已分配給其他模塊的線程。這種設(shè)計帶來了三大優(yōu)勢：
1. 可根據(jù)需求決定一個線程掛載的模塊數(shù)量，實現(xiàn)負載均衡；
2. 多線程并發(fā)保證模塊內(nèi)的OpenGL操作在當前線程內(nèi)進行，避免Flutter的OpenGL環(huán)境被破壞；
3. 充分利用CPU多核架構(gòu)，通過多線程并行提升處理速度。
四、上下文管理與資源共享
從Flutter端修改Flutter引擎后，我們創(chuàng)建了上下文的統(tǒng)一管理模塊。每個模塊在初始化時都會獲取其線程和上下文。這樣確保了每個模塊的上下文都與Flutter的上下文共享，實現(xiàn)了模塊間資源的互相可見性，以及Flutter和音視頻native之間的資源共享。
五、功能實現(xiàn)與組件開源
基于上述框架，要實現(xiàn)如畫面實時預覽和濾鏡處理這樣的簡單功能，只需：
1. 選擇功能模塊，包括攝像頭、濾鏡處理和Flutter畫面渲染模塊；
2. 配置模塊參數(shù)，如采集分辨率、濾鏡參數(shù)及攝像頭設(shè)置；
3. 使用已配置參數(shù)創(chuàng)建模塊并加入視頻管線；
4. 啟動管線即可。
結(jié)合音視頻框架，閑魚成功實現(xiàn)了Flutter多媒體開源組件，包括視頻圖像拍攝、播放器、視頻圖像編輯和相冊選擇等四個基本組件。目前，這些組件正在走內(nèi)部開源流程，預計9月份，相冊和播放器組件將實現(xiàn)開源。未來規(guī)劃與展望
隨著技術(shù)的不斷發(fā)展，我們的項目也在不斷前進，面臨著新的機遇與挑戰(zhàn)。以下是我們的后續(xù)展望和規(guī)劃：
一、全鏈路跨端開發(fā)實現(xiàn)
目前，我們的開發(fā)主要集中在各個平臺的獨立實現(xiàn)上，而Flutter的UI端已經(jīng)實現(xiàn)了跨平臺的統(tǒng)一。為了進一步提高效率和實現(xiàn)全平臺的兼容，我們計劃將底層邏輯下沉到C++層，按照音視頻領(lǐng)域的常規(guī)做法，實現(xiàn)從底層SDK到UI的全鏈路跨端開發(fā)。
二、開源共建，共享成果
閑魚一直致力于開源建設(shè)，不僅開放了拍攝、編輯組件，還開放了許多底層模塊。我們期望開發(fā)者在基于Flutter開發(fā)音視頻應(yīng)用時，能夠充分利用這些開源的音視頻模塊，快速搭建APP框架，從而專注于實現(xiàn)特殊需求模塊，減少重復勞動。
使用Flutter開發(fā)app的大廠有哪些
隨著跨平臺開發(fā)的需求不斷增長，越來越多的企業(yè)開始采用Flutter進行應(yīng)用開發(fā)。以下是一些使用Flutter開發(fā)app的大廠：
騰訊：利用Flutter開發(fā)了微信小程序、QQ音樂等多個應(yīng)用，充分發(fā)揮其跨平臺特性，提升了開發(fā)效率和用戶體驗。
阿里巴巴：在內(nèi)部使用Flutter為淘寶、支付寶等應(yīng)用提供技術(shù)支持，展示了其在電商、金融領(lǐng)域的創(chuàng)新力。
谷歌：作為Flutter的倡導者之一，不僅自家應(yīng)用使用了Flutter，還積極推動其在開發(fā)者社區(qū)的使用，推動技術(shù)生態(tài)的發(fā)展。
字節(jié)跳動：開發(fā)了抖音、今日頭條等應(yīng)用，利用Flutter實現(xiàn)高效開發(fā)流程和優(yōu)質(zhì)用戶體驗。
還有貝恩資本、IBM、微軟和PayPal等企業(yè)也在使用Flutter進行應(yīng)用開發(fā)。這些企業(yè)利用Flutter的跨平臺優(yōu)勢和高效性能，提升了產(chǎn)品性能和用戶體驗，展示了它們在技術(shù)領(lǐng)域的前瞻性和創(chuàng)新力。
這些大廠的實踐案例證明了Flutter在軟件開發(fā)領(lǐng)域的廣泛應(yīng)用和深受歡迎。我們相信，隨著技術(shù)的不斷進步和開發(fā)者社區(qū)的不斷壯大，F(xiàn)lutter將會有更廣泛的應(yīng)用和更廣闊的發(fā)展空間。
