flutter 慢慢退出了嗎？

看點(diǎn)：Flutter 的爭(zhēng)議

創(chuàng)新互聯(lián)公司是一家成都做網(wǎng)站、網(wǎng)站建設(shè)，提供網(wǎng)頁(yè)設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，建網(wǎng)站，按需網(wǎng)站開(kāi)發(fā)，網(wǎng)站開(kāi)發(fā)公司，自2013年起是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶(hù)品牌價(jià)值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計(jì)制作，前端開(kāi)發(fā)，后臺(tái)程序制作以及后期項(xiàng)目運(yùn)營(yíng)并提出專(zhuān)業(yè)建議和思路。

InfoQ：我們?cè)诳吹揭恍┍容^比較消極的看法，他們認(rèn)為 Flutter 正在被悄悄放棄，怎么看待這些聲音？

宗心：Gartner 將每個(gè)技術(shù)成熟度曲線(xiàn)都將技術(shù)的生命周期劃分為五個(gè)關(guān)鍵階段。技術(shù)萌芽期：潛在的技術(shù)突破即將開(kāi)始。早期的概念驗(yàn)證報(bào)道和媒體關(guān)注引發(fā)廣泛宣傳。通常不存在可用的產(chǎn)品，商業(yè)可行性未得到證明。期望膨脹期：早期宣傳產(chǎn)生了許多成功案例 — 通常也伴隨著多次失敗。某些公司會(huì)采取行動(dòng)，但大多數(shù)不會(huì)。泡沫破裂谷底期：隨著實(shí)驗(yàn)和實(shí)施失敗，人們的興趣逐漸減弱。技術(shù)創(chuàng)造者被拋棄或失敗。只有幸存的提供商改進(jìn)產(chǎn)品，使早期采用者滿(mǎn)意，投資才會(huì)繼續(xù)。穩(wěn)步爬升復(fù)蘇期：有關(guān)該技術(shù)如何使企業(yè)受益的更多實(shí)例開(kāi)始具體化，并獲得更廣泛的認(rèn)識(shí)。技術(shù)提供商推出第二代和第三代產(chǎn)品。更多企業(yè)投資試驗(yàn)；保守的公司依然很謹(jǐn)慎。生產(chǎn)成熟期：主流采用開(kāi)始激增。評(píng)估提供商生存能力的標(biāo)準(zhǔn)更加明確。該技術(shù)的廣泛市場(chǎng)適用性和相關(guān)性明顯得到回報(bào)。基于這個(gè)理論，F(xiàn)lutter 應(yīng)該處于期望膨脹和泡沫破裂之間，一方面看好的人還會(huì)繼續(xù)大力宣傳和投入解決問(wèn)題，同時(shí)在嘗試落地失敗后的公司和個(gè)人會(huì)極力唱衰，因此我們應(yīng)該回歸本質(zhì)去看，跨平臺(tái)技術(shù)本身有其特定場(chǎng)景下存在的價(jià)值，多平臺(tái)的研發(fā)效能收益是真實(shí)的公司需求，目前行業(yè)的龍頭企業(yè)都仍然在持續(xù)投入和改進(jìn)中，談被放棄為之尚早。

所謂原生級(jí)別的流暢，但實(shí)際很卡，體驗(yàn)差，而且有些跨端項(xiàng)目一開(kāi)始用 Flutter，結(jié)果性能卡脖子，無(wú)奈又回到 Android 和 iOS 分開(kāi)搞的局面嵌套之美，難以欣賞Flutter 是 KPI 項(xiàng)目，負(fù)責(zé)人升職完了，華麗轉(zhuǎn)身，留下一地爛攤子……

Flutter音視頻裁剪flutter_ffmpeg踩坑筆記

ffmpeg是一個(gè)音視頻處理庫(kù)，通過(guò)命令行的形式，對(duì)音視頻進(jìn)行處理，而MobileFFmpeg

則是ffmpeg在移動(dòng)端的實(shí)現(xiàn)，flutter_ffmpeg是對(duì)MobileFFmpeg的封裝，是的在flutter下能夠輕松的使用ffmpeg對(duì)音視頻進(jìn)行處理。flutter_ffmpeg包括兩部分FFmpeg和FFprobe,其中FFmpeg負(fù)責(zé)音視頻處理，而FFprobe主要負(fù)責(zé)查詢(xún)音視頻的媒體信息。

flutter_ffmpeg地址

android工程下的配置

上面配置中的”full-lts” 是flutter__ffmpeg各個(gè)發(fā)布版本的報(bào)名，可以查看官方文檔的說(shuō)明。有一個(gè)值得說(shuō)明的地方是，flutter_ffmpeg有中發(fā)行包，一種是 Main Release,一種是LTS Release 發(fā)行包，而他們兩者支持的 Android API Level/iOS SDK和硬件架構(gòu)是不一樣的，總的來(lái)說(shuō)，LTS版本支持的更廣泛，LTS支持度大于MAIN,所以我們最好使用LTS版本。

這里我遇到一個(gè)問(wèn)題，使用full-lts編碼格式，會(huì)出現(xiàn)上傳到服務(wù)器無(wú)法播放視頻的情況。

所以我這里是用的：

另外在使用flutter_ffmpeg的時(shí)候出現(xiàn)類(lèi)似問(wèn)題：

通過(guò)clean可以解決

使用gpl保證裁剪視頻默認(rèn)使用x264(不然會(huì)出現(xiàn)上傳視頻無(wú)法播放的問(wèn)題)，具體可以查看flutter_ffmpeg封裝編碼

flutter_ffmpge是ffmpeg在flutter上的一個(gè)實(shí)現(xiàn)，ffmpeg是通過(guò)命令行還進(jìn)行音視頻編輯的工具，因此我們使用fluter_ffmpeg自然也是運(yùn)行一些命令來(lái)實(shí)現(xiàn)我們的功能。具體使用方法可以直接看 ffluter_ffmpeg官方文檔 和 ffmpeg官方文檔 ，或者看一下更加通俗易懂的 阮一峰文檔 。接下來(lái)我們主要看看flutter_ffmpeg能干什么？

做音視頻處理，首先我們肯定想知道我們的處理是否成功，或者效果好不好，那么我們只能通過(guò)處理的視頻前后的參數(shù)進(jìn)行對(duì)比，因此第一步我們要求這個(gè)視頻處理庫(kù)詳細(xì)的給我們提供音視頻的信息,flutter_ffmpeg的FFProde能夠很好的實(shí)現(xiàn)這一點(diǎn)，而且使用很方便：

-r 20：表示幀率設(shè)置為 20fps

fs 20 : 表示文件大小最大值為15MB

把視頻截了一部分 --- 這種方法不推薦

-s vga : 指定分辨率， vga 代表 600*480，也可以換成其他的值

-b:v 1.5M : 指定碼率

-b:v :指定視頻的碼率

-b:a : 指定音頻的碼率

1.5M：碼率的值 1.5M 表示 1.5Mb/s

比如我在項(xiàng)目里用到上傳到服務(wù)器的視頻時(shí)長(zhǎng)需要控制在60s以?xún)?nèi)的功能，我們就可以這樣：

從n開(kāi)始，裁剪m秒長(zhǎng)度的視頻

從n秒開(kāi)始，裁剪到m秒的視頻

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ā)?？梢灶A(yù)想的是未Flutter發(fā)展的好的話(huà)，會(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ú)法滿(mǎn)足性能要求，尤其是在音視頻這種性能要求幾乎苛刻的場(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)就稱(chēng)之為混合棧。閑魚(yú)在混合棧上也有一些比較好的輸出，例如FlutterBoost。

外接紋理

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

Flutter渲染一幀屏幕數(shù)據(jù)首先要做的是，GPU發(fā)出的VC信號(hào)在Flutter的UI線(xiàn)程，通過(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線(xiàn)程，在GPU線(xiàn)程內(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線(xiàn)程將圖片讀取或者從網(wǎng)絡(luò)上拉取之后，通過(guò)解碼能夠在IO線(xiàn)程上加載出紋理，交給GPU線(xiàn)程將圖片渲染到屏幕上。但是由于音視頻場(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è)和上線(xiàn)文息息相關(guān)的概念：線(xiàn)程。

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

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

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

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

Platform線(xiàn)程是主線(xiàn)程，F(xiàn)lutter中有一個(gè)很奇怪的設(shè)定，GPU線(xiàn)程和主線(xiàn)程共用一個(gè)Context。并且在主線(xiàn)程也有很多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主線(xiàn)程的Context就是GPU的Context，所以在音視頻端主線(xiàn)程中有一些OpenGL操作的話(huà)，很有可能使Flutter整個(gè)OpenGL被破壞掉。所以需要將所有的OpenGL操作都限制在子線(xiàn)程中。

通過(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)線(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音視頻框架抽象分為管線(xiàn)和數(shù)據(jù)的抽象、模塊的抽象、線(xiàn)程統(tǒng)一管理和上下文同一管理四部分。

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

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

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

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

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

從Flutter端修改Flutter引擎將Context取出后，根據(jù)Context創(chuàng)建上下文的統(tǒng)一管理模塊，每一個(gè)模塊在初始化的時(shí)候會(huì)獲取它的線(xiàn)程，獲取之后會(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)建視頻管線(xiàn)后使用已配置的參數(shù)創(chuàng)建模塊

4：最后管線(xiàn)搭載模塊，開(kāi)啟管線(xiàn)就可以實(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)。

Flutter開(kāi)發(fā)--視頻播放器

目前Flutter平臺(tái)主流的兩個(gè)播放器是video_player和fijkplayer

pub

github

1、Flutter平臺(tái)官方插件，作者是國(guó)外的，有問(wèn)題溝通比較困難，只能通過(guò)提交issue

2、硬解碼

4、UI封裝： better_player

基于video_player和Chewie的高級(jí)視頻播放器。它解決了許多典型的用例，并且易于運(yùn)行。

5、播放器寬高比例與視頻內(nèi)容寬高比例不一致時(shí)，會(huì)出現(xiàn)圖像壓縮變形的問(wèn)題

6、調(diào)用原生內(nèi)核播放器：iOS--AVPlayer， Android--ExoPlayer

7、對(duì)于分段源 m3u8 的播放不友好，如果一個(gè)切片播放超時(shí)，會(huì)導(dǎo)致整個(gè)播放都失敗

8、better_player可以緩存視頻，但不能自定義緩存的地址，只能指定key，和緩存的最大內(nèi)存量（還未研究超出最大的話(huà)是不能緩存新的，還是刪除最舊的）

9、better_player不能完全自定義UI，只能修改類(lèi)中的一些開(kāi)放屬性，比如說(shuō)icon圖標(biāo)，文字顏色啥的

10、無(wú)網(wǎng)絡(luò)有緩存時(shí)，封面可以正常展示

11、better_player播放失敗有手動(dòng)retry的設(shè)計(jì)

pub

github

1、fijkplayer 是一個(gè) Flutter 生態(tài)的媒體播放器，是對(duì) ijkplayer 的 Flutter 封裝，支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作為播放器內(nèi)核，ijkplayer 使用 ffmpeg 進(jìn)行音視頻解封裝和解碼，同時(shí)添加了 Android 和 iOS 平臺(tái)特有的硬件加速解碼能力。

2 、國(guó)內(nèi)有QQ群，但是活躍度也是不高。

3、可以緩存視頻，可以自定義緩存的地址，方便后續(xù)的內(nèi)存維護(hù)。

4、可以通過(guò)FijkPanelWidgetBuilder較大程度上自定義UI。

5、無(wú)網(wǎng)絡(luò)有緩存視頻時(shí)，無(wú)法展示封面，因?yàn)閮?nèi)部是通過(guò)imageProvider去加載網(wǎng)絡(luò)圖片的。

7、播放失敗無(wú)手動(dòng)retry的設(shè)計(jì)

1、兩種播放器都是通過(guò)外接紋理方案 (Texture)，將播放器視頻畫(huà)面渲染接入 flutter 中，性能上優(yōu)于 PlatformView 的接入方法。

如何自己實(shí)現(xiàn)？

下面以video_palyer的iOS源碼部分解釋?zhuān)?/p>

iOS用CVPixelBufferRef將渲染出來(lái)的數(shù)據(jù)存在內(nèi)存中，F(xiàn)lutter engine會(huì)將Texture的數(shù)據(jù)在內(nèi)存中直接進(jìn)行映射無(wú)需通過(guò)Channel傳輸，然后Texture Widget就可以把你提供的這些數(shù)據(jù)顯示出來(lái)。在我們傳輸數(shù)據(jù)的時(shí)候會(huì)需要將其與 TextureID 綁定，綁定的過(guò)程通過(guò)BasicMessageChannel實(shí)現(xiàn)數(shù)據(jù)流的傳輸，以做到實(shí)時(shí)展示的效果

分享文章：flutter媒體,Flutter App
瀏覽地址：http://chinadenli.net/article16/hohodg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、定制網(wǎng)站、電子商務(wù)、建站公司、品牌網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)

廣告

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