flutter直播流,Flutter直播

flutter中流式布局

流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調(diào)整，但整體布局不變。柵欄系統(tǒng)（網(wǎng)格系統(tǒng)），用戶標簽等。在Flutter中主要有Wrap和Flow兩種Widget實現(xiàn)。

專注于為中小企業(yè)提供網(wǎng)站設計制作、成都做網(wǎng)站服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)撫順免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

在介紹Row和Colum時，如果子widget超出屏幕范圍，則會報溢出錯誤，在Flutter中通過Wrap和Flow來支持流式布局，溢出部分則會自動折行。

上述有很多屬性和Row的相同，其意義其實也是相同的，這里我就不一一介紹了，主要介紹下不同的屬性：

我們一般很少會使用Flow，因為其過于復雜，需要自己實現(xiàn)子widget的位置轉(zhuǎn)換，在很多場景下首先要考慮的是Wrap是否滿足需求。Flow主要用于一些需要自定義布局策略或性能要求較高(如動畫中)的場景。Flow有如下優(yōu)點：

我們對六個色塊進行自定義流式布局：

實現(xiàn)TestFlowDelegate:

可以看到我們主要的任務就是實現(xiàn)paintChildren，它的主要任務是確定每個子widget位置。由于Flow不能自適應子widget的大小，我們通過在getSize返回一個固定大小來指定Flow的大小，實現(xiàn)起來還是比較麻煩的。

Flutter TextTrue ios 視頻渲染 YUV420 轉(zhuǎn)換 BGRA

網(wǎng)易云信播放器 Flutter 封裝

事情是這樣的 我們公司的業(yè)務是有 視頻播放這一塊業(yè)務 而且 是基于網(wǎng)易云信的 視頻服務的 做的開發(fā) 。公司的App開發(fā)框架是使用 Flutter , 那么問題來了 Flutter 怎么 實現(xiàn)視頻播放嘞 , 官方給出的解決方案 是 ### video_player 這個庫的 實現(xiàn) 是 原生端做視頻解碼 然后通過 Texture 的方式 映射到 Flutter 中 但是解碼器 IOS 使用的是 官方的 AVPlayer (蘋果官方提供的播放器 啥都好 就是不支持流媒體播放 ) Android 解碼器則是 exoplayer 很好很nice

但是

網(wǎng)易云信的視頻 是加密的 只有自己的 播放器sdk 在能解碼播放 android 和 ios 都支持流媒體 so 只能自己封裝

Android 使用 SurfaceTexture 銜接 視頻流 正常 但是 ios emmm 網(wǎng)易云信 播放器 返回 的 編碼格式 是 NELP_YUV420 就是 YUV420 直接映射到 Flutter 黑屏 但是有聲音

因為Skia 引擎底層只支持了 BGRA 格式的視頻數(shù)據(jù) 所以 和黑屏了

首先我們吧 YUV420 轉(zhuǎn)換成 CVPixelBufferRef 方法如下

該方法依賴 libyuv 請自行導入

然后是 pixelBuffer To SampleBuffer

最后吧 SmapleBuffer 轉(zhuǎn)換 BGRA

方法如何使用

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

目前Flutter平臺主流的兩個播放器是video_player和fijkplayer

pub

github

1、Flutter平臺官方插件，作者是國外的，有問題溝通比較困難，只能通過提交issue

2、硬解碼

4、UI封裝： better_player

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

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

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

7、對于分段源 m3u8 的播放不友好，如果一個切片播放超時，會導致整個播放都失敗

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

9、better_player不能完全自定義UI，只能修改類中的一些開放屬性，比如說icon圖標，文字顏色啥的

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

11、better_player播放失敗有手動retry的設計

pub

github

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

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

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

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

5、無網(wǎng)絡有緩存視頻時，無法展示封面，因為內(nèi)部是通過imageProvider去加載網(wǎng)絡圖片的。

7、播放失敗無手動retry的設計

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

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

下面以video_palyer的iOS源碼部分解釋：

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

flutter直播怎么實現(xiàn)？

flutter作為一個相對來說比較新興的框架，相比于其他框架來說避免不了存在生態(tài)不完善的問題。要想實現(xiàn)flutter直播，可以接入即構(gòu)科技的Express Flutter SDK，然后通過集成、初始化SDK、登錄房間服務器、用戶推送自己的本地音視頻、拉取遠端的音視頻流等簡單五個步驟實現(xiàn)簡單的實時音視頻場景進行直播。

Flutter動態(tài)化方案調(diào)研

騰訊課堂14M

今日頭條3M

閑魚22M

百度貼吧13M

螞蟻財富56.8M

百度網(wǎng)盤14M

手機淘寶15M

貝殼找房8M

由粗粒度小組件動態(tài)拼裝出頁面，Native端已經(jīng)有很多成熟的框架，如天貓的Tangram。

開發(fā)語言：iOS、Android

適用場景：快速迭代的活動營銷頁面

優(yōu)點：無侵入，更新簡單

缺點：提前預埋，擴展性差，靈活性差

以webview作為容器的app，歷史悠久，最早到2011年。

開發(fā)語言：HTML

適用場景：雙端嚴格一致的銀行類app，容器類的支付寶小程序等

優(yōu)點：動態(tài)更新，跨平臺

缺點：性能，加載速度

UI用Xml+JS表達，用Native View渲染。

開發(fā)語言：Xml+JS

適用場景：雙端嚴格一致的銀行類app，容器類的支付寶小程序等

優(yōu)點：native組件，生態(tài)成熟

缺點：三方庫crash，性能缺陷

UI用Dart表達，用Dart engine渲染。

Flutter官方不支持動態(tài)化。原因是Flutter在 Release 模式下構(gòu)建的是 AOT 編譯產(chǎn)物，在 Debug 模式下構(gòu)建的是 JIT ，AOT 依賴的 Dart VM 和 JIT 并不一樣， JIT Release 并不支持 iOS 設備?？尚械姆桨甘牵篈OT 需要一個編譯后的 “Dart VM”。抽離一份 DartVM 獨立編譯，再以動態(tài)庫的形式引入項目。

開發(fā)語言：Dart

適用場景：iOS、Android、Web、Desktop、Embed

優(yōu)點：性能最佳

缺點：增大包體積 20MB+

大廠的主流方案。UI用JS表達，用Dart engine渲染。

開發(fā)語言：JS、類JS

適用場景：iOS、Android

優(yōu)點：性能最佳

缺點：需要掌握JS、Dart兩個語言和框架

大廠的主流方案。UI用Dart表達，用Dart engineX渲染。

開發(fā)語言：Dart

適用場景：iOS、Android

優(yōu)點：性能最佳

缺點：需要改造Dart engine

1、 美團外賣Flutter動態(tài)化實踐

2、 攜程App 首頁動態(tài)化探索

3、 Flutter 動態(tài)化在最右 App 中的實踐

4、 Flutter 動態(tài)化熱更新的思考與實踐

5、 NOW直播Flutter動態(tài)搜索列表頁實現(xiàn)

6、 Flutter動態(tài)化的方案對比及最佳實現(xiàn)-閑魚

7、 基于JavaScript 的MXFlutter

Flutter視頻播放器，簡潔！

注：亮度調(diào)節(jié)和音量調(diào)節(jié)gif無法體現(xiàn)，功能是ok的，其次默認Icon鎖的close和open實在難以分辨。

環(huán)境：Flutter 2.8.1 channel stable ;Dart 2.15.1

需要音頻播放器的看這里： Flutter音樂播放器

重點說下這個工具類，因為視頻播放，涉及到狀態(tài)改變有很多，筆者剛開始選擇使用 InheritedWidget 來在眾多的widget之間共享數(shù)據(jù)。但是總感覺這樣有點繁瑣，且不很優(yōu)雅！

這里非廣告，如果是使用 GetX 就很簡單了，筆者也使用了 GetX 進行封裝了，一瀉千里的趕腳！，但是筆者還是那句話：剛開始接觸Flutter的開發(fā)者不是很建議使用 GetX ，可以先熟悉下Flutter狀態(tài)管理的基礎原理再行使用。而且為了盡量簡潔，還是不引入其他的第三方了。

我們選擇對第三方插件進行封裝的目的不外乎這幾個：

于是筆者就寫了一個工具類 VideoPlayerUtils ，專門且只用來處理播放器的所有業(yè)務。包括暫停、播放、跳轉(zhuǎn)、調(diào)節(jié)音量、調(diào)節(jié)亮度、切換視頻等操作。在所有的widget中不會引用關于 video_player 或其他第三方插件的任何信息， VideoPlayerUtils 負責widget與播放器之間的所有操作交互。后續(xù)優(yōu)化迭代或更換播放器插件時，只需針對這個工具類進行修改，對所有widget不會有任何的影響，大大的解耦合了。

其中 VideoPlayerState ：

提供以上的公共屬性，可以通過 VideoPlayerUtils 來獲取對應的值，使用 get 只讀，使外界不會誤修改這些屬性，以保證數(shù)值的安全性。開發(fā)者可根據(jù)自身需要自行添加屬性。

提供以上方法來處理播放器的所有業(yè)務。同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。

重點說下這個方法，是整個業(yè)務的核心方法，控制視頻的播放或暫停。開發(fā)者只要遇到播放或暫停是均可調(diào)用此方法，具體是播放或暫停，內(nèi)部根據(jù)傳入的 url 自行判斷，開發(fā)者不需要關心。

切換新視頻也是使用此方法，傳入的 url 與上次不一致，自動切換新視頻。筆者可根據(jù) statusListener 來監(jiān)聽播放狀態(tài)的改變，以此處理自身邏輯。

這個也需要提下，視頻播放器在播放新視頻時會異步初始化，一般我們的操作是在 initState() 初始化，成功后再 setState() 。這里筆者遇到一個讓人蛋疼的問題：

我們看 video_player 的使用：

VideoPlayer(controller) ：widget中已經(jīng)持有了controller。本來筆者封裝的目的就是為了讓widget與controller的之間解耦合。但此時的筆者。。。。

放棄不是不可能放棄的，這輩子都不會放棄的！

于是筆者取了巧，寫了一個初始化監(jiān)聽器 initializedListener ，包換2個參數(shù)： bool,Widget ，初始化是否成功；其中widget為初始化成功返回需要展示的播放器UI，失敗默認返回 const SizedBox() 。

到這里就可以簡單使用了：

沒看錯，視頻播放就是這么簡單。

如果有更多的業(yè)務功能，筆者也按照自己的需求寫了一套，同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。

VideoPlayerGestures 主要是處理手勢的，比如快進、快退等跳轉(zhuǎn)播放；左側(cè)上下滑動調(diào)節(jié)亮度；右側(cè)上下滑動調(diào)節(jié)音量；單擊是否開啟沉浸式播放，所有widget的隱藏與顯示；雙擊播放、暫停等。

哦，還有 PercentageWidget 也放到這個文件下了，就是這玩意：

因為顯示的百分比與手勢相關，隨著手勢移動而更新。開發(fā)者可自行處理。

筆者處出于簡單考慮，就按照整個UI的位置命名了。瞅一眼就知道是啥玩意。

同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。

就是這玩意：

同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。話說這個鎖的 Icon 的open和close是真的難分辨！

就是這玩意：

同樣的開發(fā)者可根據(jù)自身需要自行添加或修改。

這玩意是自定義的，別問，問就是跟產(chǎn)品干一架落了下風

主要就是自定義這玩意：

同樣的開發(fā)者可根據(jù)自身需要自定義。

注：這里沒有添加緩沖的進度，開發(fā)可查看 video_player 中的源碼 VideoProgressIndicator ，按業(yè)務自行定義。

這玩意就是整合以上的widget，再考慮下全屏的安全區(qū)域，沒啥東西。開發(fā)者可自行處理！

具體的實現(xiàn)監(jiān)聽器的思路， 看這里 。

自此一個漂亮的Flutter視頻播放器就已經(jīng)結(jié)束了。如果您覺得對您有些許幫助的話，歡迎 Star ！

標題名稱：flutter直播流,Flutter直播
網(wǎng)頁URL：http://muchs.cn/article36/pheepg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、營銷型網(wǎng)站建設、網(wǎng)站制作、品牌網(wǎng)站設計、、全網(wǎng)營銷推廣

廣告

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