React Native與Flutter App開(kāi)發(fā)中的視頻播放探索

一、React Native App開(kāi)發(fā)中的視頻播放組件

在React Native App開(kāi)發(fā)中，實(shí)現(xiàn)視頻播放功能至關(guān)重要，需要考慮全屏播放、APP最小化時(shí)的恢復(fù)播放等功能。開(kāi)發(fā)者通常會(huì)選擇使用React-Native-Video組件來(lái)完成這一任務(wù)。這個(gè)組件通過(guò)利用video標(biāo)簽并擴(kuò)展相關(guān)方法，結(jié)合不同設(shè)備（如Android、iOS或Windows）的播放器，實(shí)現(xiàn)了高效的視頻播放。在iOS系統(tǒng)中，該組件利用uiWebview和wkWebview進(jìn)行視頻播放，其中wkWebview還自帶AirPlay功能，能方便地將視頻投射到電視上觀看。而在Android平臺(tái)上，則是通過(guò)Native.js調(diào)用系統(tǒng)播放器來(lái)播放視頻，但需要注意的是，視頻狀態(tài)無(wú)法直接反饋到j(luò)s層。

二、Flutter App開(kāi)發(fā)中的視頻播放器

相較于React Native，F(xiàn)lutter并沒(méi)有自帶的視頻播放器，因此開(kāi)發(fā)者需要借助第三方插件來(lái)實(shí)現(xiàn)視頻播放功能。VideoPlayer和fijkplayer是常用的選擇。開(kāi)發(fā)者還可以考慮使用如餃子視頻播放器、GSYVideoPlayer、DKPlayer等開(kāi)源的Android端播放器。為了更方便地托管視頻，開(kāi)發(fā)者可以選擇使用Firebase Cloud Storage來(lái)存儲(chǔ)視頻文件。該服務(wù)提供安全、經(jīng)濟(jì)且易于使用的對(duì)象存儲(chǔ)功能，尤其適合大規(guī)模應(yīng)用的場(chǎng)景。結(jié)合Amazon S3和CloudFront，可以實(shí)現(xiàn)安全且可擴(kuò)展的點(diǎn)播觀看體驗(yàn)。

三、利用鏈接代碼調(diào)用設(shè)備播放器播放視頻

除了使用專門(mén)的視頻播放器組件外，開(kāi)發(fā)者還可以通過(guò)添加鏈接代碼來(lái)調(diào)用設(shè)備自帶的播放器播放視頻。例如，一些健身類APP會(huì)選擇使用YouTube作為視頻播放器。同樣，Vimeo也是一個(gè)值得考慮的平臺(tái)，它為用戶提供了上傳、分享和儲(chǔ)存視頻的服務(wù)，并且支持高清內(nèi)容的上傳，無(wú)片長(zhǎng)限制，符合中國(guó)用戶的使用習(xí)慣。

值得一提的是，Vimeo不僅提供了強(qiáng)大的視頻托管解決方案，還提供了教育視頻解決方案。通過(guò)Vimeo，教育者可以輕松分享知識(shí)，將影響力擴(kuò)展到課堂之外，并與社區(qū)建立聯(lián)系。Vimeo Record功能允許錄制屏幕或網(wǎng)絡(luò)攝像頭，以個(gè)性化的方式傳遞知識(shí)。它還與Final Cut Pro、Adobe、Dropbox等創(chuàng)意工具集成，提供了強(qiáng)大的安全控制功能，如指定訪問(wèn)權(quán)限、隱藏視頻、使用密碼鎖定等。Vimeo還支持在線免費(fèi)托管視頻，并提供定制播放器、隱私設(shè)置控制等功能，確保視頻僅限于合適用戶觀看。

四、受歡迎的十大視頻分享網(wǎng)站

在當(dāng)前的視頻分享市場(chǎng)中，有一些網(wǎng)站脫穎而出，成為了用戶分享和觀看視頻的首選。其中，OpenMyVideo、Facebook、Tubemogul、Posterous、Veoh等都是廣受歡迎的網(wǎng)站。特別是在全球范圍內(nèi)，YouTube和Vimeo以其強(qiáng)大的功能和優(yōu)質(zhì)的服務(wù)贏得了大量用戶的喜愛(ài)。

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

Flutter：閑魚(yú)的多媒體開(kāi)源組件之旅

Flutter是一個(gè)引人注目的跨平臺(tái)框架，以其出色的性能和跨平臺(tái)能力重塑了應(yīng)用開(kāi)發(fā)的世界。在音視頻和網(wǎng)絡(luò)等多媒體領(lǐng)域，F(xiàn)lutter為我們帶來(lái)了全新的開(kāi)發(fā)體驗(yàn)。不同于傳統(tǒng)的做法，F(xiàn)lutter打破了將音視頻和網(wǎng)絡(luò)模塊局限于底層如C++或ARM層的設(shè)計(jì)思路，而是在UI層實(shí)現(xiàn)了跨平臺(tái)開(kāi)發(fā)。這為我們構(gòu)建移動(dòng)應(yīng)用提供了全新的可能性。當(dāng)Flutter展現(xiàn)出蓬勃的發(fā)展勢(shì)頭時(shí)，我們有理由相信它將逐漸打通從底層到UI層的全鏈路跨平臺(tái)開(kāi)發(fā)。技術(shù)團(tuán)隊(duì)將負(fù)責(zé)從SDK到UI層的全面開(kāi)發(fā)。那么，為什么我們選擇了Flutter呢？答案在于它的性能和跨平臺(tái)能力。

在眾多跨平臺(tái)UI解決方案中，F(xiàn)lutter因其出色的性能脫穎而出。相較于Weex、React Native等解決方案，F(xiàn)lutter的架構(gòu)設(shè)計(jì)滿足了音視頻等高性能場(chǎng)景的需求。相較于Xamarin等解決方案，雖然其性能接近原生App，但Flutter能實(shí)現(xiàn)更多的跨平臺(tái)邏輯統(tǒng)一。那么，為什么Flutter能夠?qū)崿F(xiàn)高性能呢？原因在于它的渲染機(jī)制。Flutter的渲染方式與原生組件的渲染方式類似，通過(guò)調(diào)用底層的繪制框架如SKIA來(lái)實(shí)現(xiàn)UI層。這使得Flutter具有超越原生API的跨平臺(tái)性能潛力。在實(shí)際應(yīng)用中，我們發(fā)現(xiàn)在正常開(kāi)發(fā)情況下，在一些低端機(jī)上，F(xiàn)lutter界面的流暢性甚至超過(guò)了Native界面。雖然目前閑魚(yú)在某些場(chǎng)景下還存在卡頓和閃退等問(wèn)題，但我們相信隨著技術(shù)的發(fā)展，這些問(wèn)題都將得到解決。性能問(wèn)題不會(huì)成為限制Flutter發(fā)展的瓶頸。

Flutter為應(yīng)用開(kāi)發(fā)帶來(lái)了全新的機(jī)遇和挑戰(zhàn)。在閑魚(yú)的實(shí)踐中我們積累了豐富的經(jīng)驗(yàn)和成果也為未來(lái)的發(fā)展打下了堅(jiān)實(shí)的基礎(chǔ)我們相信隨著技術(shù)的不斷進(jìn)步和社區(qū)的不斷壯大Flutter將會(huì)在多媒體領(lǐng)域發(fā)揮更大的作用為我們構(gòu)建更出色的移動(dòng)應(yīng)用體驗(yàn)。

Flutter渲染機(jī)制詳解：從幀屏幕數(shù)據(jù)到音視頻集成

一、Flutter渲染一幀屏幕數(shù)據(jù)的基礎(chǔ)流程

當(dāng)GPU發(fā)出VC信號(hào)時(shí)，F(xiàn)lutter的UI線程開(kāi)始工作。通過(guò)AOT編譯的機(jī)器碼結(jié)合當(dāng)前Dart Runtime，生成Layer Tree UI樹(shù)。每一個(gè)葉子節(jié)點(diǎn)代表屏幕上需要渲染的元素，包含其渲染內(nèi)容。Layer Tree被傳遞給GPU線程，調(diào)用Skia完成整個(gè)UI的渲染。

二、PictureLayer與TextureLayer的關(guān)鍵作用

PictureLayer負(fù)責(zé)屏幕圖片的渲染，F(xiàn)lutter內(nèi)部擁有圖片解碼邏輯，能在IO線程上加載并解碼紋理。而TextureLayer則是音視頻組件的渲染出口，對(duì)于第三方開(kāi)發(fā)者實(shí)現(xiàn)的音視頻組件，其數(shù)據(jù)紋理需要由外部指定，然后交由Flutter渲染。

三、TextureLayer的渲染過(guò)程與挑戰(zhàn)

TextureLayer的渲染涉及判斷Layer是否初始化，創(chuàng)建Texture并Attach到SufaceTexture上。這個(gè)SufaceTexture是音視頻native代碼可獲取的對(duì)象，用于存放視頻數(shù)據(jù)。實(shí)現(xiàn)美顏、濾鏡等功能時(shí)，需將處理后的GPU紋理直接交給Flutter渲染，避免GPU到CPU再到GPU的無(wú)用循環(huán)。這需要一個(gè)條件——OpenGL上下文共享。

四、OpenGL上下文及其與Flutter的關(guān)系

Flutter引擎啟動(dòng)時(shí)會(huì)啟動(dòng)多個(gè)線程，其中之一是UI線程，負(fù)責(zé)創(chuàng)建Layer Tree。OpenGL上下文的共享是實(shí)現(xiàn)GPU紋理直接處理的關(guān)鍵。兩個(gè)線程之間的紋理共享有兩種方式。

五、Flutter音視頻渲染的挑戰(zhàn)與未來(lái)展望

當(dāng)前，F(xiàn)lutter在音視頻處理上主要依賴第三方開(kāi)發(fā)者實(shí)現(xiàn)音視頻組件。實(shí)現(xiàn)美顏、濾鏡等功能時(shí)，需要將數(shù)據(jù)從GPU讀出到CPU，再寫(xiě)入Surface，這樣的流程對(duì)系統(tǒng)性能消耗較大。未來(lái)，隨著OpenGL上下文共享技術(shù)的成熟，F(xiàn)lutter有望更高效地處理音視頻數(shù)據(jù)，提升用戶體驗(yàn)。

一、Flutter中的紋理共享：EGLImage與OpenGL Share Context

Flutter通過(guò)Share Context實(shí)現(xiàn)了紋理共享機(jī)制，巧妙地將IO線程與GPU線程的Context整合至同一Share Group內(nèi)。在這種設(shè)計(jì)下，兩個(gè)線程下的資源相互可見(jiàn)且可共享，其中涉及到的技術(shù)包括EGLImage和OpenGL Share Context。

二、Flutter的特定設(shè)定：GPU線程與主線程的Context共享

在Flutter中，有一個(gè)獨(dú)特的設(shè)定：GPU線程和主線程共用一個(gè)Context。主線程中亦有不少OpenGL操作。這種設(shè)計(jì)在為音視頻開(kāi)發(fā)帶來(lái)便利的也潛藏著諸多問(wèn)題，后面我們將詳細(xì)探討。

三、OpenGL紋理與Flutter的互操作性挑戰(zhàn)

音視頻端完成的美顏處理OpenGL紋理要想被Flutter直接使用，其前提是Flutter的上下文須與平臺(tái)音視頻相關(guān)的OpenGL上下文處于同一Share Group。由于Flutter主線程的Context即是GPU的Context，若在音視頻端主線程執(zhí)行OpenGL操作，極可能破壞Flutter的整個(gè)OpenGL環(huán)境。所有OpenGL操作應(yīng)嚴(yán)格限制在子線程。

四、策略應(yīng)用：實(shí)現(xiàn)美顏與濾鏡功能

通過(guò)上述兩個(gè)條件的精細(xì)處理，我們可以在不增加GPU消耗的前提下實(shí)現(xiàn)美顏、濾鏡等功能。這一策略在demo驗(yàn)證后，被成功應(yīng)用于閑魚(yú)的音視頻組件中。

五、開(kāi)發(fā)過(guò)程中的挑戰(zhàn)與解決方案

在將策略應(yīng)用于閑魚(yú)音視頻組件的改造過(guò)程中，我們遇到了一些問(wèn)題。如圖示，攝像頭采集數(shù)據(jù)轉(zhuǎn)換為紋理的代碼執(zhí)行過(guò)程中，涉及到進(jìn)程切換和上下文設(shè)置。這些限制條件或潛規(guī)則在開(kāi)發(fā)過(guò)程中往往容易被忽略，一旦忽視可能導(dǎo)致難以排查的問(wèn)題。我們期望能抽象出一套框架，自動(dòng)管理線程的切換、上下文及模塊生命周期，使開(kāi)發(fā)者能專注于算法實(shí)現(xiàn)，無(wú)需關(guān)心這些潛規(guī)則和其他重復(fù)邏輯操作。

在引入Flutter之前，閑魚(yú)的音視頻架構(gòu)采用分層架構(gòu)，而現(xiàn)在我們需要基于新的假設(shè)去做Flutter音視頻框架的抽象。我們認(rèn)識(shí)到音視頻應(yīng)用在終端上的運(yùn)行可歸納為視頻數(shù)據(jù)幀在各模塊間的流動(dòng)過(guò)程?；诖思僭O(shè)，我們進(jìn)行了Flutter音視頻框架的抽象設(shè)計(jì)。整個(gè)框架包括管線與數(shù)據(jù)的抽象、模塊的抽象、線程的統(tǒng)一管理以及上下文的統(tǒng)一管理四部分。其中管線即視頻幀流動(dòng)的管道；數(shù)據(jù)則包括紋理、Bit Map以及時(shí)間戳等音視頻中涉及的信息。

通過(guò)這樣的設(shè)計(jì)，我們旨在提供一個(gè)更加友好、高效的Flutter多媒體開(kāi)源組件，以滿足日益增長(zhǎng)的開(kāi)發(fā)需求。一、數(shù)據(jù)定義與紋理管理

管線流通數(shù)據(jù)定義

在我們的應(yīng)用中，管線流通的數(shù)據(jù)核心定義為以Texture為主數(shù)據(jù)。這種數(shù)據(jù)定義方式，有效避免了頻繁創(chuàng)建和銷毀紋理所帶來(lái)的性能損耗，以及多線程訪問(wèn)紋理時(shí)可能出現(xiàn)的問(wèn)題。我們也有選擇性地添加Bit Map等作為輔助數(shù)據(jù)，以滿足特殊模塊對(duì)特殊數(shù)據(jù)的獨(dú)特需求。

為了高效管理這些紋理數(shù)據(jù)，我們?cè)O(shè)計(jì)了紋理池，它能夠在管線中輕松管理各類紋理數(shù)據(jù)。

二、模塊與基類抽象

模塊與框架類比

如果把管線比作血管，數(shù)據(jù)比作血液，那么我們的音視頻框架可以類比為器官。在這個(gè)框架下，我們根據(jù)模塊在管線中的位置，抽象出了采集、處理和輸出三個(gè)基類。這些基類包含了線程切換、上下文切換、格式轉(zhuǎn)換等共性邏輯。

線程管理策略

每個(gè)模塊在初始化時(shí)，都會(huì)從線程管理模塊獲取自己的線程。這種設(shè)計(jì)帶來(lái)了三個(gè)顯著好處：一是實(shí)現(xiàn)線程間的負(fù)載均衡；二是確保模塊內(nèi)的OpenGL操作在當(dāng)前線程內(nèi)進(jìn)行，避免Flutter的OpenGL環(huán)境被破壞；三是充分利用CPU多核架構(gòu)，大幅提升處理速度。

三、Context管理與資源共享

Context的提取與管理

從Flutter端修改Flutter引擎，提取Context后，我們創(chuàng)建了上下文的統(tǒng)一管理模塊。每個(gè)模塊在初始化時(shí)都會(huì)獲取其線程和對(duì)應(yīng)的上下文。這保證了每個(gè)模塊的上下文都與Flutter的上下文相互共享，使得資源在模塊間共享可見(jiàn)，F(xiàn)lutter和音視頻native之間也實(shí)現(xiàn)互相共享。

四、功能實(shí)現(xiàn)流程

實(shí)時(shí)預(yù)覽與濾鏡處理

要實(shí)現(xiàn)如實(shí)時(shí)預(yù)覽和濾鏡處理這樣的功能，需經(jīng)歷以下步驟：選擇功能模塊（包括攝像頭模塊、濾鏡處理模塊和Flutter畫(huà)面渲染模塊）、配置模塊參數(shù)（如采集分辨率、濾鏡參數(shù)及前后攝像頭設(shè)置等）、創(chuàng)建視頻管線并使用配置參數(shù)創(chuàng)建模塊、最后搭載模塊并啟動(dòng)管線。

五、音視頻框架的應(yīng)用實(shí)踐

閑魚(yú)實(shí)現(xiàn)的Flutter多媒體開(kāi)源組件

基于上述音視頻框架，閑魚(yú)實(shí)現(xiàn)了Flutter多媒體開(kāi)源組件，主要包括視頻圖像拍攝組件、播放器組件、視頻圖像編輯組件和相冊(cè)選擇組件。目前，這些組件正在走內(nèi)部開(kāi)源流程，預(yù)計(jì)9月份，相冊(cè)和播放器組件將實(shí)現(xiàn)開(kāi)源。這些組件的開(kāi)源將為開(kāi)發(fā)者提供更為豐富和便捷的多媒體處理工具。后續(xù)展望和規(guī)劃

一、全鏈路跨端開(kāi)發(fā)的實(shí)現(xiàn)

我們計(jì)劃實(shí)現(xiàn)從底層SDK到UI的全鏈路的跨端開(kāi)發(fā)。目前，各個(gè)平臺(tái)在框架層和模塊層各自為政，而Flutter的UI端已經(jīng)實(shí)現(xiàn)了跨平臺(tái)的統(tǒng)一。我們的后續(xù)目標(biāo)是將底層邏輯下沉到C++層，參考音視頻行業(yè)的常用做法，實(shí)現(xiàn)全鏈路跨平臺(tái)開(kāi)發(fā)，以期提高效率并優(yōu)化用戶體驗(yàn)。

二、開(kāi)源共建的推進(jìn)

我們致力于推動(dòng)開(kāi)源共建。閑魚(yú)開(kāi)源的內(nèi)容不僅包括拍攝、編輯組件，更涵蓋了眾多底層模塊。我們期望開(kāi)發(fā)者在基于Flutter開(kāi)發(fā)音視頻應(yīng)用時(shí)，能充分利用閑魚(yú)的開(kāi)源音視頻模塊，從而搭建APP框架，使開(kāi)發(fā)者只需專注于實(shí)現(xiàn)特殊需求模塊，減少重復(fù)勞動(dòng)。

有哪些大廠使用flutter開(kāi)發(fā)app

在軟件開(kāi)發(fā)領(lǐng)域，由于Flutter的跨平臺(tái)能力及高效性能，它深受各大企業(yè)青睞。以下是一些使用Flutter開(kāi)發(fā)應(yīng)用的大廠實(shí)例：

一、騰訊

騰訊利用Flutter開(kāi)發(fā)了微信小程序、QQ音樂(lè)等多個(gè)應(yīng)用。Flutter的跨平臺(tái)特性為騰訊提升了開(kāi)發(fā)效率與用戶體驗(yàn)。

二、阿里巴巴

阿里巴巴集團(tuán)在內(nèi)部使用Flutter，為淘寶、支付寶等旗艦產(chǎn)品提供技術(shù)支持。這顯示了其在電商、金融領(lǐng)域的創(chuàng)新力。

三、谷歌

作為Flutter的倡導(dǎo)者之一，谷歌不僅使用Flutter開(kāi)發(fā)自家應(yīng)用，還積極推廣其在開(kāi)發(fā)者社區(qū)的使用，推動(dòng)整個(gè)技術(shù)生態(tài)的發(fā)展。

四、字節(jié)跳動(dòng)

字節(jié)跳動(dòng)利用Flutter開(kāi)發(fā)了抖音、今日頭條等應(yīng)用。其高效的開(kāi)發(fā)流程和優(yōu)質(zhì)的用戶體驗(yàn)吸引了大量用戶。

除此之外，還有貝恩資本、IBM、微軟和PayPal等知名企業(yè)也在使用Flutter。這些企業(yè)利用Flutter的跨平臺(tái)優(yōu)勢(shì)，在各自的領(lǐng)域里提供了靈活、安全的解決方案，提升了企業(yè)競(jìng)爭(zhēng)力、用戶體驗(yàn)和開(kāi)發(fā)效率。

以上只是部分使用Flutter的大廠實(shí)例，實(shí)際上，F(xiàn)lutter的應(yīng)用范圍遠(yuǎn)超此列。各大企業(yè)通過(guò)采用Flutter技術(shù)，不僅加速了應(yīng)用開(kāi)發(fā)進(jìn)程，更展示了其在技術(shù)領(lǐng)域的前瞻性與創(chuàng)新力。