跨平臺(tái)技術(shù)：H5與Flutter，誰(shuí)將領(lǐng)跑未來(lái)？

前言

隨著技術(shù)的發(fā)展，跨平臺(tái)開(kāi)發(fā)逐漸成為趨勢(shì)。獨(dú)立開(kāi)發(fā)每個(gè)平臺(tái)的應(yīng)用程序不僅耗時(shí)耗力，而且成本高昂。在這一背景下，跨平臺(tái)技術(shù)受到廣泛關(guān)注。

本文將深入探討跨平臺(tái)技術(shù)，特別是H5和Flutter，從原理、優(yōu)缺點(diǎn)等方面進(jìn)行分析，助你了解這兩種技術(shù)的魅力。

一、H5的跨平臺(tái)魅力

說(shuō)到跨平臺(tái)，H5無(wú)疑是當(dāng)下的熱門(mén)技術(shù)。無(wú)論是Mac、Windows，還是iOS、Android，只要有一個(gè)瀏覽器，H5都能輕松運(yùn)行。

1. 瀏覽器架構(gòu)探秘

瀏覽器由多個(gè)部分組成，其中渲染引擎是核心。了解瀏覽器的架構(gòu)，有助于我們深入理解H5的渲染原理。

2. 渲染引擎原理

不同的瀏覽器內(nèi)核有所不同，但渲染流程基本一致。掌握渲染原理，有助于我們進(jìn)行性能優(yōu)化。

3. JSBridge：JS與Native的橋梁

JSBridge實(shí)現(xiàn)了JS與Native之間的通信，是H5作為跨平臺(tái)技術(shù)載體的關(guān)鍵。

4. App打開(kāi)H5的過(guò)程

打開(kāi)H5涉及到多個(gè)階段，每個(gè)階段都有對(duì)應(yīng)的性能優(yōu)化點(diǎn)。

5. H5優(yōu)缺點(diǎn)分析

H5具有諸多優(yōu)點(diǎn)，如跨平臺(tái)、開(kāi)發(fā)成本低等。也存在一些缺點(diǎn)，但隨著技術(shù)的進(jìn)步，相信H5的未來(lái)會(huì)更加光明。

二、小程序的崛起

小程序，以微信小程序?yàn)榇?，近年?lái)發(fā)展迅速，已成為一種重要的應(yīng)用形式。

小程序的技術(shù)架構(gòu)解析

小程序基于Webview實(shí)現(xiàn)，包含視圖層和邏輯層兩部分。了解其技術(shù)架構(gòu)，有助于我們更好地開(kāi)發(fā)和使用小程序。

三、Flutter：谷歌的跨平臺(tái)解決方案

Flutter是谷歌推出的跨平臺(tái)開(kāi)發(fā)框架，可一套代碼同時(shí)生成iOS和Android應(yīng)用。它究竟有何魔力，能否成為未來(lái)的主流技術(shù)？我們將進(jìn)行深入的探討。

Flutter的原理與特點(diǎn)

Flutter使用Dart語(yǔ)言開(kāi)發(fā)，通過(guò)一套完整的UI工具集實(shí)現(xiàn)高效跨平臺(tái)開(kāi)發(fā)。其獨(dú)特的熱重載特性，大大提高了開(kāi)發(fā)效率和體驗(yàn)。

Flutter與其他跨平臺(tái)技術(shù)的對(duì)比

我們將從開(kāi)發(fā)效率、性能、社區(qū)支持等方面，將Flutter與其他跨平臺(tái)技術(shù)進(jìn)行對(duì)比，幫助你更好地了解Flutter的優(yōu)勢(shì)和劣勢(shì)。

四、未來(lái)的趨勢(shì)與預(yù)測(cè)

跨平臺(tái)開(kāi)發(fā)是未來(lái)的發(fā)展趨勢(shì)。H5、小程序、Flutter等技術(shù)將持續(xù)演進(jìn)，為企業(yè)和開(kāi)發(fā)者提供更多選擇。未來(lái)的跨平臺(tái)技術(shù)將更加注重性能、用戶(hù)體驗(yàn)和開(kāi)發(fā)者體驗(yàn)。

結(jié)語(yǔ)

H5、小程序和Flutter都是當(dāng)下熱門(mén)的跨平臺(tái)技術(shù)。它們各有優(yōu)點(diǎn)，也面臨一些挑戰(zhàn)。未來(lái)，這些技術(shù)將如何發(fā)展，我們拭目以待。

一、View與WAWebview.js

在數(shù)字化時(shí)代，View可理解為H5頁(yè)面，主要負(fù)責(zé)提供UI渲染。WAWebview.js作為底層技術(shù)支持，為每一個(gè)窗口創(chuàng)建一個(gè)獨(dú)立的WebView進(jìn)程。為了確保用戶(hù)體驗(yàn)，微信限制了不能打開(kāi)超過(guò)5個(gè)層級(jí)的頁(yè)面。這種架構(gòu)為用戶(hù)提供了一個(gè)穩(wěn)定且高效的Web應(yīng)用體驗(yàn)。

二、App Service與WAService.js

App Service是邏輯處理、數(shù)據(jù)請(qǐng)求和接口調(diào)用的核心部分。WAService.js作為其底層技術(shù)支撐，運(yùn)行環(huán)境僅在一個(gè)WebView進(jìn)程中。這一部分主要負(fù)責(zé)處理復(fù)雜的業(yè)務(wù)邏輯，與View層協(xié)同工作，為用戶(hù)提供完整的應(yīng)用體驗(yàn)。

三、View與App Service通信

視圖層（View）和邏輯層（App Service）之間的通信是通過(guò)系統(tǒng)層的JSBridage實(shí)現(xiàn)的。邏輯層將數(shù)據(jù)的變動(dòng)通知給視圖層，觸發(fā)頁(yè)面更新；視圖層將觸發(fā)的通知給邏輯層進(jìn)行業(yè)務(wù)處理。這種交互方式確保了數(shù)據(jù)流動(dòng)的高效性和準(zhǔn)確性。

四、React Native：跨平臺(tái)的解決方案

面對(duì)WebView性能的挑戰(zhàn)，React Native應(yīng)運(yùn)而生。它的理念是在不同平臺(tái)上編寫(xiě)基于React的代碼，實(shí)現(xiàn)“Learn once, write anywhere”。通過(guò)Virtual DOM在內(nèi)存中的操作，JS和Native之間通過(guò)Bridge通信，React Native框架編譯JSX源碼并與Native原生的UI組件進(jìn)行映射，用原生替代DOM元素進(jìn)行渲染，使得UI渲染接近Native App的體驗(yàn)。

五、Flutter：自制引擎渲染的新選擇

盡管React Native在某些方面有所改進(jìn)，但仍存在不足。這時(shí)，F(xiàn)lutter作為Google開(kāi)發(fā)的跨平臺(tái)UI框架，為我們帶來(lái)了新的選擇。Flutter依靠Skia圖形庫(kù)作為渲染引擎，只依賴(lài)系統(tǒng)的圖形繪制接口。它可以在最大程度上保證不同平臺(tái)、不同設(shè)備的體驗(yàn)一致性。使用支持AOT的Dart語(yǔ)言進(jìn)行邏輯處理，執(zhí)行效率遠(yuǎn)超JavaScript。這種直接操控GPU的自制引擎渲染方式，為開(kāi)發(fā)者提供了更高效、更穩(wěn)定的應(yīng)用開(kāi)發(fā)體驗(yàn)。

1. Flutter架構(gòu)原理

Flutter，一個(gè)跨平臺(tái)的移動(dòng)應(yīng)用開(kāi)發(fā)框架，以其高效、高性能和靈活的特性受到廣大開(kāi)發(fā)者的喜愛(ài)。其架構(gòu)原理是構(gòu)建在Dart語(yǔ)言基礎(chǔ)上的，通過(guò)一套高效的渲染引擎和豐富的組件庫(kù)，實(shí)現(xiàn)了快速開(kāi)發(fā)和高效運(yùn)行的目標(biāo)。

2. Dart的優(yōu)勢(shì)

Dart是一種面向?qū)ο蟮木幊陶Z(yǔ)言，它在Flutter中的使用有著獨(dú)特的優(yōu)勢(shì)。相比JavaScript，Dart具有以下特點(diǎn)：

性能優(yōu)勢(shì)：Dart編譯后運(yùn)行在虛擬機(jī)上，具有更高的執(zhí)行效率。

語(yǔ)言特性：Dart提供豐富的語(yǔ)言特性，如異步編程、集合庫(kù)等，使得開(kāi)發(fā)更加便捷。

熱重載技術(shù)：Flutter結(jié)合Dart的熱重載技術(shù)，實(shí)現(xiàn)了開(kāi)發(fā)過(guò)程中的實(shí)時(shí)預(yù)覽和調(diào)試，大大提高了開(kāi)發(fā)效率。

3. 優(yōu)缺點(diǎn)分析

優(yōu)點(diǎn)：

跨平臺(tái)性：Flutter支持iOS和Android平臺(tái)開(kāi)發(fā)，一套代碼即可實(shí)現(xiàn)多平臺(tái)應(yīng)用。

豐富的組件庫(kù)：Flutter提供了豐富的UI組件和動(dòng)畫(huà)效果，滿(mǎn)足開(kāi)發(fā)者的各種需求。

高性能渲染：Flutter使用高效的渲染引擎，實(shí)現(xiàn)流暢的用戶(hù)界面。

缺點(diǎn)：

學(xué)習(xí)曲線：對(duì)于初學(xué)者來(lái)說(shuō)，F(xiàn)lutter的學(xué)習(xí)曲線可能較為陡峭，需要一定的時(shí)間掌握其開(kāi)發(fā)方法和原理。

第三方庫(kù)集成：由于Flutter的生態(tài)系統(tǒng)還在不斷發(fā)展中，某些第三方庫(kù)的集成可能會(huì)遇到挑戰(zhàn)。

Flutter 開(kāi)發(fā)筆記

注意事項(xiàng)：

InkWell的splashColor設(shè)置不生效問(wèn)題：需要配合Material組件去除背景色，并將顏色設(shè)置在InkWell外部。

Dialog builder中的WillPopScope使用：使用WillPopScope會(huì)禁用返回鍵返回，同時(shí)也可能禁用iOS手勢(shì)滑動(dòng)返回功能，建議根據(jù)平臺(tái)判斷使用。

復(fù)選框狀態(tài)修改：推薦使用StatefulBuilder，在Dialog中調(diào)用setState方法。需注意在Dialog關(guān)閉后再調(diào)用setState會(huì)造成錯(cuò)誤，可通過(guò)標(biāo)志位解決。

開(kāi)發(fā)技巧：

網(wǎng)絡(luò)圖片加載：遇到跨域問(wèn)題時(shí)，嘗試使用HTML渲染加載而非CanvasKit，解決圖片加載失敗問(wèn)題。

ScrollBar與ListView：Flutter中的list默認(rèn)無(wú)ScrollBar，需使用ScrollBar組件。該組件通過(guò)監(jiān)聽(tīng)ScrollView的ScrollNotification來(lái)刷新位置，要求List長(zhǎng)度固定。

內(nèi)容截?cái)鄦?wèn)題：使用WebView等高度不定的組件時(shí)，可能出現(xiàn)內(nèi)容被截?cái)嗟那闆r。此時(shí)可以嘗試NestedScrollView，將SingleChildScrollView嵌套在WebView外部解決。

圖片重新加載問(wèn)題：在滑動(dòng)屏幕后，圖片短暫消失并重新加載的問(wèn)題可能是由于超出屏幕范圍的組件被重新渲染導(dǎo)致的?？稍贚istView上設(shè)置cacheExtent參數(shù)，擴(kuò)大緩存范圍以解決。

使用IntrinsicHeight組件：該組件可用于Dialog或BottomSheet中，根據(jù)內(nèi)容動(dòng)態(tài)調(diào)整高度，避免元素因約束不顯示或高度過(guò)高的問(wèn)題。關(guān)于Uri queryParameters獲取中的異常問(wèn)題及插件使用注意事項(xiàng)

章節(jié)一：Uri queryParameters獲取異常的原因與解決方案

在通過(guò)Uri獲取queryParameters時(shí)，有時(shí)會(huì)遇到異常。原因是Uri默認(rèn)使用utf-8編碼解碼超鏈接字符串。若鏈接中包含非utf-8字符，則會(huì)產(chǎn)生異常。相關(guān)issue為：issue31621。當(dāng)前此issue仍處于開(kāi)放狀態(tài)，臨時(shí)解決方案是在使用queryParameters的地方使用try..catch捕獲可能拋出的異常。

章節(jié)二：Flutter插件應(yīng)用問(wèn)題與解決方法

Flutter開(kāi)發(fā)依賴(lài)于眾多官方及第三方插件，使用這些插件時(shí)難免會(huì)遇到問(wèn)題。大部分問(wèn)題可通過(guò)搜索和查找issue解決。這里記錄了一些我在使用部分插件時(shí)遇到的問(wèn)題及其解決方法。

章節(jié)三：關(guān)于圖片加載回調(diào)與WebView插件的功能介紹

目前某庫(kù)沒(méi)有圖片加載完成的回調(diào)（見(jiàn)issue545），但我們可以通過(guò)imageBuilder添加回調(diào)。還有一個(gè)功能強(qiáng)大的WebView插件，基本滿(mǎn)足移動(dòng)端網(wǎng)頁(yè)加載需求，且可定制化程度高。

章節(jié)四：Cookie管理與UserAgent設(shè)置的注意事項(xiàng)

一般通過(guò)CookieManager修改Cookie，但攔截請(qǐng)求并修改請(qǐng)求對(duì)象的Header可能不生效。對(duì)于InAppWebViewOptions的userAgent，僅在iOS上生效，而applicationNameForUserAgent僅在Android上生效。最佳實(shí)踐是分平臺(tái)設(shè)置InAppWebViewOptions。設(shè)置userAgent會(huì)覆蓋默認(rèn)UserAgent，需注意在默認(rèn)UserAgent上添加參數(shù)的方法。

章節(jié)五：特定問(wèn)題與解決策略

若圖片源或請(qǐng)求為http，在Android上加載請(qǐng)求時(shí)，必須將mixedContentMode設(shè)置為AndroidMixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW。設(shè)置全屏圖片時(shí)，需調(diào)整LaunchScreen.storyboard中的設(shè)置。集成某些三方庫(kù)后，運(yùn)行iOS模擬器可能會(huì)遇到報(bào)錯(cuò)，原因是iOS模擬器未來(lái)會(huì)兼容arm64架構(gòu)但目前不支持，需修改Build Setting以在x86_64模擬器上運(yùn)行。解決步驟詳見(jiàn)相關(guān)指南。Flutter浪潮下的音視頻研發(fā)探索

======================

作者：陳爐軍，阿里巴巴閑魚(yú)事業(yè)部

整理：LiveVideoStack

--

大家好，我是阿里巴巴閑魚(yú)事業(yè)部的陳爐軍。今天我將與大家分享的是關(guān)于Flutter浪潮下的音視頻研發(fā)探索。這次分享將重點(diǎn)關(guān)注閑魚(yú)APP在當(dāng)下流行的跨平臺(tái)框架Flutter的大規(guī)模實(shí)踐，以及音視頻領(lǐng)域遇到的挑戰(zhàn)和解決方案。

一、Flutter簡(jiǎn)介與選擇原因

--

Flutter概述

Flutter是一個(gè)跨平臺(tái)框架，它打破了傳統(tǒng)的開(kāi)發(fā)模式，將音頻、視頻和網(wǎng)絡(luò)模塊整合到UI層。在過(guò)去，這些模塊大多獨(dú)立于UI層進(jìn)行開(kāi)發(fā)，但Flutter打破了這一界限，使得音視頻開(kāi)發(fā)更加便捷。這種跨平臺(tái)特性使得開(kāi)發(fā)者能夠更高效地開(kāi)發(fā)出高質(zhì)量的移動(dòng)應(yīng)用。它的性能強(qiáng)大，尤其是在音視頻領(lǐng)域表現(xiàn)尤為突出。Flutter擁有強(qiáng)大的跨平臺(tái)能力，意味著開(kāi)發(fā)者只需要編寫(xiě)一次代碼就可以覆蓋多個(gè)平臺(tái)，大大減少了開(kāi)發(fā)成本和時(shí)間。它結(jié)合了原生開(kāi)發(fā)的優(yōu)勢(shì)和跨平臺(tái)開(kāi)發(fā)的便利性，是一種真正意義上的跨平臺(tái)解決方案。Flutter的設(shè)計(jì)理念使得它未來(lái)有可能成為從底層到UI層的全鏈路跨平臺(tái)開(kāi)發(fā)框架。這將使得技術(shù)人員能夠?qū)Ｗ⒂赟DK和UI層的開(kāi)發(fā)，提高整體開(kāi)發(fā)效率和質(zhì)量。我們選擇了Flutter作為我們的跨平臺(tái)框架。我們選擇Flutter的原因主要有兩點(diǎn)：性能和跨平臺(tái)能力。其強(qiáng)大的性能可以滿(mǎn)足音視頻領(lǐng)域的苛刻要求；而高效的跨平臺(tái)能力則可以大大減少我們的開(kāi)發(fā)成本和時(shí)間。至于為什么Flutter能擁有如此強(qiáng)大的性能呢？這是因?yàn)镕lutter的渲染機(jī)制與原生組件的渲染機(jī)制類(lèi)似，它通過(guò)調(diào)用底層的繪制框架來(lái)實(shí)現(xiàn)高性能的UI渲染。這使得Flutter在某些場(chǎng)景下的性能甚至超越了原生應(yīng)用。雖然目前在一些低端機(jī)上還存在卡頓等問(wèn)題但這些都是新事物發(fā)展過(guò)程中的必然問(wèn)題我們相信未來(lái)這些問(wèn)題都將得到解決。隨著Flutter的發(fā)展和完善這些問(wèn)題也將逐漸得到解決我們相信未來(lái)的音視頻研發(fā)將在Flutter的幫助下迎來(lái)新的突破和發(fā)展機(jī)遇。我們?cè)谝粢曨l實(shí)踐中積極探索與運(yùn)用Flutter同時(shí)對(duì)其中的問(wèn)題提出了相應(yīng)的解決方案例如通過(guò)引入TPM音視頻框架解決音視頻同步問(wèn)題通過(guò)優(yōu)化Flutter中的外接紋理技術(shù)提高音視頻的處理效率等。這些解決方案將有助于我們?cè)谝粢曨l領(lǐng)域?qū)崿F(xiàn)更高的效率和更好的用戶(hù)體驗(yàn)我們相信在未來(lái)的音視頻研發(fā)中我們會(huì)看到更多有趣且富有挑戰(zhàn)性的工作將展開(kāi)在Flutter這個(gè)充滿(mǎn)活力的平臺(tái)上?？偟膩?lái)說(shuō)我們認(rèn)為Flutter是一個(gè)非常有潛力的跨平臺(tái)框架它的出現(xiàn)為音視頻研發(fā)帶來(lái)了新的機(jī)遇和挑戰(zhàn)我們相信隨著不斷的研究和探索我們將在這個(gè)平臺(tái)上實(shí)現(xiàn)更多的創(chuàng)新和突破為音視頻領(lǐng)域的發(fā)展做出更大的貢獻(xiàn)。這就是我們今天的分享內(nèi)容希望大家對(duì)Flutter有更深入的了解和認(rèn)識(shí)一起探討音視頻研發(fā)的未來(lái)發(fā)展共同推動(dòng)技術(shù)的進(jìn)步和創(chuàng)新！閑魚(yú)在Flutter實(shí)踐中的挑戰(zhàn)與創(chuàng)新：混合棧、音視頻及OpenGL的探索

一、混合棧的挑戰(zhàn)與實(shí)踐

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

在音視頻領(lǐng)域，我們需要了解一個(gè)概念——外接紋理。它是Flutter和Frame之間的橋梁，它在Flutter渲染過(guò)程中起著至關(guān)重要的作用。紋理是Flutter渲染屏幕數(shù)據(jù)的關(guān)鍵部分，特別是在Layer Tree渲染中，TextureLayer扮演著重要角色。

三、音視頻渲染與TextureLayer的挑戰(zhàn)

音視頻場(chǎng)景下，系統(tǒng)API繁多，業(yè)務(wù)場(chǎng)景復(fù)雜，F(xiàn)lutter沒(méi)有一套邏輯去實(shí)現(xiàn)跨平臺(tái)的音視頻組件。Flutter提出了一種讓第三方開(kāi)發(fā)者來(lái)實(shí)現(xiàn)音視頻組件的方式。這些音視頻組件的視頻渲染出口，就是TextureLayer。在整個(gè)Layer Tree渲染的過(guò)程中，TextureLayer的數(shù)據(jù)紋理需要由外部第三方開(kāi)發(fā)者來(lái)指定。

四、美顏濾鏡與GPU紋理的挑戰(zhàn)

如果需要用Flutter實(shí)現(xiàn)美顏、濾鏡、人臉貼圖等功能，就需要將視頻數(shù)據(jù)讀取出來(lái)，更新到紋理中，再將GPU紋理經(jīng)過(guò)美顏濾鏡處理后生成一個(gè)處理后的紋理。按照Flutter現(xiàn)有的能力，這個(gè)過(guò)程需要將紋理中的數(shù)據(jù)從GPU讀出到CPU中，生成Bitmap后再寫(xiě)入Surface中，這樣在Flutter中才能順利更新視頻數(shù)據(jù)。這種處理方式對(duì)系統(tǒng)性能的消耗很大。

五、OpenGL上下文共享：解決GPU與CPU之間的數(shù)據(jù)轉(zhuǎn)移問(wèn)題

為了避免GPU到CPU再到GPU的無(wú)用循環(huán)，我們需要一個(gè)解決方案：OpenGL上下文共享。這是一個(gè)將經(jīng)過(guò)美顏濾鏡處理完成的GPU紋理直接交給Flutter渲染的方法。在此之前，我們需要了解與上線文息息相關(guān)的概念：線程。OpenGL上下文共享為我們提供了一個(gè)新的思路，它可能幫助我們解決當(dāng)前面臨的數(shù)據(jù)轉(zhuǎn)移問(wèn)題，從而進(jìn)一步提高系統(tǒng)的性能與效率。

閑魚(yú)的Flutter實(shí)踐在混合棧、音視頻和OpenGL等方面面臨著諸多挑戰(zhàn)，但他們也在不斷探索和創(chuàng)新，尋求最佳解決方案，以提供更好的用戶(hù)體驗(yàn)和更高的系統(tǒng)性能。Flutter引擎啟動(dòng)后的線程架構(gòu)與多媒體處理機(jī)制解析

===========================

一、Flutter的線程架構(gòu)概覽

Flutter引擎啟動(dòng)后，會(huì)啟動(dòng)四個(gè)核心線程：UI線程、IO線程、GPU線程以及Platform線程（主線程）。每個(gè)線程都有其獨(dú)特的職責(zé)，共同構(gòu)成了Flutter的高效運(yùn)行體系。

二、UI線程

UI線程是Flutter獨(dú)有的，主要負(fù)責(zé)響應(yīng)GPU發(fā)出的VSync信號(hào)。在接收到信號(hào)時(shí)，它會(huì)利用當(dāng)前Dart編譯的機(jī)器碼和當(dāng)前運(yùn)行環(huán)境創(chuàng)建Layer Tree。這個(gè)線程是Flutter圖形渲染的核心。

三、IO線程與GPU線程

Flutter采用了一種常見(jiàn)的架構(gòu)理念，即一個(gè)線程負(fù)責(zé)資源加載，另一個(gè)負(fù)責(zé)資源渲染。IO線程主要負(fù)責(zé)加載資源，而GPU線程則負(fù)責(zé)處理與圖形相關(guān)的任務(wù)。這種設(shè)計(jì)有助于實(shí)現(xiàn)資源的高效利用和并行處理。

四、紋理共享機(jī)制

在Flutter中，紋理共享是關(guān)鍵。它主要通過(guò)OpenGL Share Context實(shí)現(xiàn)，將IO線程的Context和GPU線程的Context進(jìn)行共享，確保兩個(gè)線程間的資源互相可見(jiàn)、可共享。這大大提高了多線程間的數(shù)據(jù)交互效率。

五、Platform線程與多媒體處理挑戰(zhàn)

Platform線程作為主線程，在Flutter中卻有一個(gè)獨(dú)特的設(shè)定：它與GPU線程共享一個(gè)Context。這種設(shè)計(jì)在為音視頻開(kāi)發(fā)帶來(lái)便利的也帶來(lái)了一系列問(wèn)題。特別是在音視頻端美顏處理中，若主線程包含OpenGL操作，可能會(huì)破壞Flutter的OpenGL環(huán)境。所有OpenGL操作需被限制在子線程中。

為了滿(mǎn)足音視頻端美顏處理的需求，F(xiàn)lutter的上下文需要與平臺(tái)音視頻相關(guān)的OpenGL上下文處于同一Share Group下。這樣，完成的OpenGL紋理才能被Flutter直接使用。在實(shí)現(xiàn)美顏和濾鏡功能時(shí)，我們需要在不增加GPU消耗的前提下，滿(mǎn)足這些條件。

六、在閑魚(yú)音視頻組件中的應(yīng)用與挑戰(zhàn)

我們將上述方案應(yīng)用于閑魚(yú)的音視頻組件中，但改造過(guò)程中遇到了一些問(wèn)題。我們希望通過(guò)抽象出一套框架，自動(dòng)管理線程的切換、上下文以及模塊生命周期等，讓開(kāi)發(fā)者能更專(zhuān)注于實(shí)現(xiàn)自己的算法，而無(wú)需關(guān)心這些潛規(guī)則和其他重復(fù)的邏輯操作。

七、閑魚(yú)的音視頻架構(gòu)

在引入Flutter之前，閑魚(yú)的音視頻架構(gòu)采用分層架構(gòu)，包括底層獨(dú)立模塊、SDK層的模塊封裝以及最上層的UI層。這種架構(gòu)在引入Flutter后，需要結(jié)合Flutter的特性和多線程機(jī)制進(jìn)行重新調(diào)整和優(yōu)化。

Flutter的多線程架構(gòu)和紋理共享機(jī)制為音視頻處理提供了強(qiáng)大的支持，但在實(shí)際開(kāi)發(fā)中也需要關(guān)注各種規(guī)則和限制，以確保多媒體處理的效率和穩(wěn)定性。我們?cè)陂e魚(yú)音視頻組件的實(shí)踐過(guò)程中，不斷探索和優(yōu)化，希望能為開(kāi)發(fā)者提供更好的開(kāi)發(fā)體驗(yàn)和更高效的多媒體處理能力。Flutter音視頻框架深度解析：從抽象到實(shí)現(xiàn)

一、框架抽象與假設(shè)

引入Flutter后，我們通過(guò)對(duì)音視頻模塊的使用場(chǎng)景進(jìn)行分析，形成了一個(gè)關(guān)于終端上音視頻應(yīng)用的假設(shè)。這個(gè)過(guò)程可以抽象理解為：視頻幀在解碼后，其數(shù)據(jù)幀在各個(gè)模塊間流動(dòng)?；谶@一假設(shè)，我們開(kāi)始對(duì)Flutter音視頻框架進(jìn)行抽象。

二、關(guān)于“咸魚(yú)”Flutter多媒體開(kāi)源組件

我們的Flutter音視頻框架抽象主要包括四個(gè)方面：管線與數(shù)據(jù)抽象、模塊抽象、線程統(tǒng)一管理和上下文統(tǒng)一管理。

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

管線，如同視頻幀的流通管道。而數(shù)據(jù)，則包括紋理、Bit Map和時(shí)間戳等音視頻相關(guān)的重要信息。在我們的設(shè)計(jì)中，管線流通的數(shù)據(jù)主要以Texture為主，同時(shí)可根據(jù)需要選擇性加入Bit Map等輔助數(shù)據(jù)。這種設(shè)計(jì)有效避免了頻繁創(chuàng)建和銷(xiāo)毀紋理所帶來(lái)的性能損耗，以及多線程訪問(wèn)紋理可能出現(xiàn)的問(wèn)題。為了滿(mǎn)足特殊模塊的需求，我們還設(shè)計(jì)了紋理池來(lái)管理這些紋理數(shù)據(jù)。

四、模塊抽象

如果把管線和數(shù)據(jù)比作血管和血液，那么我們的音視頻場(chǎng)景就如同器官一般。根據(jù)模塊在管線中的位置，我們抽象出了采集、處理和輸出三個(gè)基類(lèi)。這些基類(lèi)包含了線程切換、上下文切換、格式轉(zhuǎn)換等共性功能。各個(gè)功能模塊通過(guò)繼承這些基類(lèi)，可以大大避免重復(fù)勞動(dòng)。

五、線程與上下文管理

每個(gè)模塊在初始化時(shí)，都會(huì)從線程管理模塊獲取自己的線程。線程管理模塊可以根據(jù)需要分配新的線程或者復(fù)用已經(jīng)分配給其他模塊的線程。這樣做有三個(gè)好處：

1. 可以根據(jù)需求決定一個(gè)線程掛載的模塊數(shù)量，實(shí)現(xiàn)負(fù)載均衡；

2. 多線程并發(fā)保證模塊內(nèi)的OpenGL操作在當(dāng)前線程內(nèi)進(jìn)行，避免Flutter的OpenGL環(huán)境被破壞；

3. 多線程并行充分利用CPU多核架構(gòu)，提升處理速度。

我們還實(shí)現(xiàn)了上下文的統(tǒng)一管理。每個(gè)模塊在初始化時(shí)會(huì)獲取其線程和上下文。這樣，每個(gè)模塊的上下文都與Flutter的上下文共享，模塊間的資源互相可見(jiàn)，F(xiàn)lutter和音視頻native之間也是互相共享可見(jiàn)的。

六、功能實(shí)現(xiàn)

基于上述框架，要實(shí)現(xiàn)如畫(huà)面實(shí)時(shí)預(yù)覽和濾鏡處理這樣的功能，只需選擇相應(yīng)的功能模塊（如攝像頭模塊、濾鏡處理模塊和Flutter畫(huà)面渲染模塊），配置模塊參數(shù)（如采集分辨率、濾鏡參數(shù)和攝像頭設(shè)置等），創(chuàng)建視頻管線并搭載模塊，然后開(kāi)啟管線即可。

七、總結(jié)

一、四大核心組件概述

我們的項(xiàng)目包含四個(gè)核心組件，旨在打造全方位的音視頻體驗(yàn)。這四個(gè)組件分別是：視頻圖像拍攝組件、播放器組件、視頻圖像編輯組件以及相冊(cè)選擇組件。每個(gè)組件都有其獨(dú)特的功能和重要性，共同構(gòu)成了我們的音視頻應(yīng)用框架。

二、視頻圖像拍攝組件

視頻圖像拍攝組件是我們的應(yīng)用中的基礎(chǔ)部分。它為用戶(hù)提供了拍攝視頻和照片的功能，確保用戶(hù)可以輕松捕捉生活中的每一個(gè)瞬間。通過(guò)優(yōu)化拍攝功能，我們致力于為用戶(hù)提供更清晰、更流暢的視頻拍攝體驗(yàn)。

三、播放器組件

播放器組件為用戶(hù)提供了視頻播放的功能。我們的播放器不僅支持本地文件播放，還支持網(wǎng)絡(luò)視頻的流暢播放。我們還在播放器中加入了多種播放模式和個(gè)性化設(shè)置，以滿(mǎn)足用戶(hù)的不同需求。

四、視頻圖像編輯組件與相冊(cè)選擇組件

視頻圖像編輯組件和相冊(cè)選擇組件讓我們的應(yīng)用更加豐富多彩。通過(guò)編輯組件，用戶(hù)可以對(duì)拍攝或下載的視頻和照片進(jìn)行編輯和美化。而相冊(cè)選擇組件則為用戶(hù)提供了一個(gè)管理自己照片和視頻的地方，方便用戶(hù)隨時(shí)查看和選擇。

五、內(nèi)部開(kāi)源流程及未來(lái)展望

目前，我們的這些組件正在走內(nèi)部開(kāi)源流程。預(yù)計(jì)9月份，相冊(cè)和播放器將實(shí)現(xiàn)開(kāi)源。未來(lái)，我們有著更宏大的規(guī)劃。我們希望通過(guò)底層框架的優(yōu)化，實(shí)現(xiàn)全鏈路的跨端開(kāi)發(fā)。我們將借鑒音視頻行業(yè)的常用做法，將底層邏輯下沉到C++層，以盡可能實(shí)現(xiàn)全鏈路的跨平臺(tái)。我們還計(jì)劃開(kāi)源共建，分享更多的底層模塊給開(kāi)發(fā)者。我們希望開(kāi)發(fā)者在基于Flutter開(kāi)發(fā)音視頻應(yīng)用時(shí)，能夠充分利用我們開(kāi)源的音視頻模塊能力，搭建APP框架，從而減少重復(fù)勞動(dòng)，開(kāi)發(fā)者只需專(zhuān)注于實(shí)現(xiàn)特殊需求模塊即可。

通過(guò)不斷的創(chuàng)新和優(yōu)化，我們將為用戶(hù)提供更好的音視頻體驗(yàn)，同時(shí)也為開(kāi)發(fā)者提供更多的便利和可能性。我們期待與更多的開(kāi)發(fā)者共同合作，共同推動(dòng)音視頻行業(yè)的發(fā)展。