建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
Flutter 上字體的另類(lèi)玩法：FontFeature
在以前的 《Flutter 上默認(rèn)的文本和字體知識(shí)點(diǎn)》 和 《帶你深入理解 Flutter 中的字體“冷”知識(shí)》 中，已經(jīng)介紹了很多 Flutter 上關(guān)于字體有趣的知識(shí)點(diǎn)，而本篇講繼續(xù)介紹 Flutter 上關(guān)于 Text 的一個(gè)屬性： FontFeature ， 事實(shí)上相較于 Flutter ，本篇內(nèi)容可能和前端或者設(shè)計(jì)關(guān)系更密切 。
創(chuàng)新互聯(lián)是專(zhuān)業(yè)的歙縣網(wǎng)站建設(shè)公司，歙縣接單;提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行歙縣網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
什么是 FontFeature ？ 簡(jiǎn)單來(lái)說(shuō)就是影響字體形狀的一個(gè)屬性 ，在前端的對(duì)應(yīng)領(lǐng)域里應(yīng)該是 font-feature-settings ，它有別于 FontFamily ，是用于指定字體內(nèi)字的形狀的一個(gè)參數(shù)。
我們知道 Flutter 默認(rèn)在 Android 上使用的是 Roboto 字體，而在 iOS 上使用的是 SF 字體，但是其實(shí) Roboto 字體也是分很多類(lèi)型的，比如你去查閱手機(jī)的 system/fonts 目錄，就會(huì)發(fā)現(xiàn)很多帶有 Roboto 字樣的字體庫(kù)存在。
所以 Roboto 之類(lèi)的字體庫(kù)是一個(gè)很大的字體集，不同的 font-weight 其實(shí)對(duì)應(yīng)著不同的 ttf ，例如默認(rèn)情況下的 Roboto 是不支持 font-weight 為 600 的配置 ：
所以如下圖所示，如果我們?cè)O(shè)置了 w400 - w700 的 weight ，可以很明顯看到中間的 500 和 600 其實(shí)是一樣的粗細(xì)，所以在 設(shè)置 weight 或者設(shè)計(jì) UI 時(shí)，就需要考慮不同平臺(tái)上的 weight 是否支持想要的效果 。
回歸到 FontFeature 上，那 Roboto 自己默認(rèn)支持多少種 features 呢？ 答案是 26 種，它們的編碼如下所示，運(yùn)行后效果也如下圖所示，從日常使用上看，這 26 種 Feature 基本滿(mǎn)足開(kāi)發(fā)的大部分需求。
而 iOS 上的 SF pro 默認(rèn)支持 39 種 Features ， 它們的編碼如下所示，運(yùn)行后效果也如下圖所示，可以看到 SF pro 支持的 Features 更多。
所以可以看到，并不是所有字體支持的 Features 都是一樣的，比如 iOS 上支持 sups 上標(biāo)顯示和 subs 下標(biāo)顯示，但是 Android 上的 Roboto 并不支持，甚至很多第三方字體其實(shí)并不支持 Features 。
有趣的是，在 Flutter Web 有一個(gè)渲染文本時(shí)會(huì)變模糊的問(wèn)題 #58159 ，這個(gè)問(wèn)題目前官方還沒(méi)有修復(fù)，但是你可以通過(guò)給 Text 設(shè)置任意 FontFeatures 來(lái)解決這個(gè)問(wèn)題。
最后，如果對(duì) FontFeature 還感興趣的朋友，可以通過(guò)一下資料深入了解，如果你還有什么關(guān)于字體上的問(wèn)題，歡迎留言討論。
基于網(wǎng)友的問(wèn)題再補(bǔ)充一下拓展知識(shí)，畢竟這方面內(nèi)容也不多 。
事實(shí)上在 dart 里就可以看到對(duì)應(yīng) FontWeight 約定俗稱(chēng)用的是字體集里的什么字體：
所以如果對(duì)于默認(rèn)字體有疑問(wèn)，可以在你的手機(jī)字體找找是否有對(duì)應(yīng)的字體， 比如雖然我們說(shuō) roboto 沒(méi)有 600 ，但是如果是 roboto mono 字體集是有 600 的 fontweight ，甚至還有 600 斜體： 。
另外注意這是 Flutter 而不是原生，具體實(shí)現(xiàn)調(diào)用是在 Engine 的 paragraph_skia.cc 和 paragraph_builder_skia.cc 下對(duì)應(yīng)的 setFontFamilies 相關(guān)邏輯，當(dāng)然默認(rèn)字體庫(kù)指定在 typography.dart 下就看到，例如 'Roboto' 、 '.SF UI Display' 、 '.SF UI Text' 、 '.AppleSystemUIFont' 、 'Segoe UI' ：
另外如果你在 Mac 的 Web 上使用 Flutter Web，可以看到指定的是 .AppleSystemUIFont ，而對(duì)于 .AppleSystemUIFont 它其實(shí)不算是一種字體，而是蘋(píng)果上字體的一種集合別稱(chēng)：
[圖片上傳失敗...(image-40f5ce-1648368234737)]
還有，如果你去看 Flutter 默認(rèn)自帶的 cupertino/context_menu_action.dart ，就可以看到一個(gè)有趣的情況：
當(dāng)然，前面我們說(shuō)了那么多，主要是針對(duì)英文的情況下，而在中文下還是有差異的 ，之前的文章也介紹過(guò)：
例如，在蘋(píng)果上的簡(jiǎn)體中文其實(shí)會(huì)是 PingFang SC 字體，對(duì)應(yīng)還有 PingFang TC 和 PingFang HK 的繁體集，而關(guān)于這個(gè)問(wèn)題在 Flutter 上之前還出現(xiàn)過(guò)比較有意思的 bug ：
當(dāng)然后續(xù)的 #16709 修復(fù)了這個(gè)問(wèn)題 ，而在以前的文章我也講過(guò)，當(dāng)時(shí)我遇到了 “Flutter 在 iOS 系統(tǒng)上，系統(tǒng)語(yǔ)言是韓文時(shí)，在和中文一起出現(xiàn)會(huì)導(dǎo)致字體顯示異常" 的問(wèn)題 ：
解決方法也很簡(jiǎn)單，就是給 fontFamilyFallback 配置上 ["PingFang SC" , "Heiti SC"] 就可以了，這是因?yàn)轫n文在蘋(píng)果手機(jī)上使用的應(yīng)該是 Apple SD Gothic Neo 這樣的超集字體庫(kù)，【廣】這個(gè)字符在這個(gè)字體集上是不存在的，所以就變成了中文的【廣】；
所以可以看到，字體相關(guān)是一個(gè)平時(shí)很少會(huì)深入接觸的東西，但是一旦涉及多語(yǔ)言和繪制，就很容易碰到問(wèn)題的領(lǐng)域 。
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ā)。可以預(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 ios打包 ipa
1.keychain 鑰匙串訪(fǎng)問(wèn)
2.申請(qǐng)開(kāi)發(fā)證書(shū)
3.注冊(cè)Bundle ID
4.配置開(kāi)發(fā)證書(shū) (生成.mobileprovision文件)
5.安裝證書(shū)
6.打包ipa
7.開(kāi)發(fā)團(tuán)隊(duì)如何公用證書(shū)
進(jìn)入以下程序
此文件保存到你想保存的地方，后面生成證書(shū)有用。
1.打開(kāi) 蘋(píng)果開(kāi)發(fā)者中心 （ ）
2.按照以下圖片步驟走：
上面省略的步驟，按照具體需要選擇，基本是“傻瓜式點(diǎn)擊
到這bundle id就OK了
.mobileprovision文件格式的配置文件是讓開(kāi)發(fā)者的項(xiàng)目（APP）能有真機(jī)調(diào)試，發(fā)布的權(quán)限。
配置開(kāi)發(fā)證書(shū)，就會(huì)需要你設(shè)置，在這個(gè)項(xiàng)目中添加哪些設(shè)備作為真機(jī)調(diào)試的設(shè)備
1.Xcode打開(kāi)以下文件夾
2.三個(gè)必填項(xiàng)
4.選擇發(fā)布平臺(tái)：
1.本地安裝完.cer證書(shū)文件
輸入密碼之后點(diǎn)擊好，即可生成.p12文件
Flutter快速實(shí)現(xiàn)蘋(píng)果賬號(hào)登錄
為了提升用戶(hù)體驗(yàn)，使用三方登錄APP的功能怎么能少呢，但是蘋(píng)果的AppStore有一個(gè)很變態(tài)的要求，接入其他三方登錄的話(huà)，要求必須也要接入蘋(píng)果登錄。面對(duì)這么變態(tài)的要求，作為一個(gè)有實(shí)力的碼農(nóng)怎么能拒絕呢！
下面為大家介紹一個(gè)好用的Flutter插件 Sign in With Apple ，可以幫助我們快速的接入蘋(píng)果賬號(hào)功能，插件的英文文檔講的比較詳細(xì)了，英文好的同學(xué)可以直接參閱英文文檔集成。
在項(xiàng)目的 pubspec.yaml 文件中添加sign_in_with_apple插件的依賴(lài)，如果您使用的Flutter SDK 1.x版本請(qǐng)?zhí)砑右蕾?lài)版本 2.5.4 ：
如果您使用的Flutter SDK為2.x，請(qǐng)使用最新版本，當(dāng)前最新版本 3.0.0
使用XCode打開(kāi)項(xiàng)目后，按照以下圖片上的步驟添加 Sign in With Apple Capabilities：
成功添加 Sign in With Apple能力后，可以在下面的列表中就代表添加成功了，如下圖：
Flutter iOS 蘋(píng)果IAP(內(nèi)購(gòu))實(shí)現(xiàn)步驟及問(wèn)題總結(jié)(全網(wǎng)最全)
點(diǎn)擊 “協(xié)議、稅務(wù)和銀行業(yè)務(wù)”
內(nèi)購(gòu)用的是付費(fèi)應(yīng)用程序，先簽署《付費(fèi)應(yīng)用程序協(xié)議》，同意后狀態(tài)變更為“用戶(hù)信息待處理”，等待審核。
狀態(tài)更改完畢后，點(diǎn)擊“開(kāi)始設(shè)置稅務(wù)、銀行業(yè)務(wù)和聯(lián)系信息”。
（1）添加銀行賬戶(hù),按照要求填寫(xiě)相關(guān)內(nèi)容即可。
（2）選擇報(bào)稅表，并填寫(xiě)。所有與 Apple 有商業(yè)合作者必選都是美國(guó)，若有其他需求，可以多選。
繼續(xù)填寫(xiě)，首先認(rèn)證公司基本信息，選擇所有人類(lèi)型，確認(rèn)無(wú)誤后認(rèn)證條款處打?qū)?/p>
Part I 部分，繼續(xù)核對(duì)公司相關(guān)信息，選填內(nèi)容可不填。
Part III 部分，簽署稅務(wù)條約，設(shè)置利益限制條款的種類(lèi)，選填內(nèi)容可不填。此部分如果需要可勾選上下圖勾選框，不需要可不勾選，我們這個(gè)項(xiàng)目沒(méi)有用到part III 部分,所以沒(méi)有勾選。
Part XXX 部分，確認(rèn)之前填寫(xiě)的信息，勾選完畢后，提交
（3）填寫(xiě)聯(lián)系信息，共5個(gè)。高級(jí)管理、財(cái)務(wù)、技術(shù)、法務(wù)、營(yíng)銷(xiāo)。只需要提供5個(gè)人的基本信息即可。
只可使用一次的產(chǎn)品，使用之后即失效，必須再次購(gòu)買(mǎi)。
示例： 釣魚(yú) App 中的魚(yú)食。
只需購(gòu)買(mǎi)一次，不會(huì)過(guò)期或隨著使用而減少的產(chǎn)品。
示例： 游戲 App 的賽道。
允許用戶(hù)在固定時(shí)間段內(nèi)購(gòu)買(mǎi)動(dòng)態(tài)內(nèi)容的產(chǎn)品。除非用戶(hù)選擇取消，否則此類(lèi)訂閱會(huì)自動(dòng)續(xù)期。
示例： 每月訂閱提供流媒體服務(wù)的 App。
允許用戶(hù)購(gòu)買(mǎi)有時(shí)限性服務(wù)的產(chǎn)品。此 App 內(nèi)購(gòu)買(mǎi)項(xiàng)目的內(nèi)容可以是靜態(tài)的。此類(lèi)訂閱不會(huì)自動(dòng)續(xù)期。
示例： 為期一年的已歸檔文章目錄訂閱。
App 內(nèi)購(gòu)買(mǎi)項(xiàng)目的截屏，即所售項(xiàng)目的示意圖。例如，如果 App 內(nèi)購(gòu)買(mǎi)項(xiàng)目是一本圖書(shū)，您可以提交圖書(shū)的截屏。您也可以提交購(gòu)買(mǎi)頁(yè)的截屏。該截屏僅用于 Apple 審核，不會(huì)在 App Store 中顯示。
截屏要求如下：
iOS 至少需要 640 x 920 像素
Apple tvOS 需要 1920 x 1080 像素
macOS 需要 1280 x 800 像素
App 審核圖像上傳后，可以替換，但無(wú)法移除。當(dāng)您的 App 內(nèi)購(gòu)買(mǎi)項(xiàng)目處于審核中時(shí)，您無(wú)法更新截屏。
沙箱賬號(hào)是不能直接在App Store進(jìn)行登錄的，只能在點(diǎn)擊了購(gòu)買(mǎi)商品之后，在彈出的登錄框進(jìn)行登錄 。
驗(yàn)證是否已登錄沙箱測(cè)試賬號(hào)：
設(shè)置--iTunes Store與App Store，頁(yè)面拉到最底部，會(huì)看到沙箱賬戶(hù)項(xiàng)會(huì)列出你已登錄的沙箱測(cè)試賬號(hào)！
操作方法一：打開(kāi)App Store應(yīng)用首頁(yè)滑到最下方--選中AppleID--注銷(xiāo)
操作方法二：設(shè)置--iTunes Store與App Store--選中AppleID--注銷(xiāo)
checks if the client can make payments(檢測(cè)App是否能支付)
getAvailablePurchases
Get all non-consumed purchases 獲取未消費(fèi)的商品
打印信息查詢(xún)；
原因：
沒(méi)有先執(zhí)行g(shù)etProducts，直接執(zhí)行requestPurchase方法,要先拉取商品列表，再執(zhí)行購(gòu)買(mǎi)操作.
問(wèn)題描述；
1.漏單必須要處理，玩家花RMB購(gòu)買(mǎi)的東西卻丟失了，是絕對(duì)不能容忍的。所謂的漏單就是玩家已經(jīng)正常付費(fèi)，卻沒(méi)有拿到該拿的道具。
解決：只要購(gòu)買(mǎi)成功，便將購(gòu)買(mǎi)記錄(receipt等賬單信息)保存下來(lái)，然后將賬單信息傳送給我們游戲服務(wù)器，游戲服務(wù)器獲得賬單后，和蘋(píng)果服務(wù)器驗(yàn)證，賬單有效的話(huà)，回饋給游戲服務(wù)器處理，游戲服務(wù)器處理后，返回給游戲客戶(hù)端處理，處理完畢，將本地保存的購(gòu)買(mǎi)記錄刪除。
官方文檔：向蘋(píng)果校驗(yàn)支付憑證
21000 App Store無(wú)法讀取你提供的JSON數(shù)據(jù)
21002 收據(jù)數(shù)據(jù)不符合格式
21003 收據(jù)無(wú)法被驗(yàn)證
21004 你提供的共享密鑰和賬戶(hù)的共享密鑰不一致
21005 收據(jù)服務(wù)器當(dāng)前不可用
21006 收據(jù)是有效的，但訂閱服務(wù)已經(jīng)過(guò)期。當(dāng)收到這個(gè)信息時(shí)，解碼后的收據(jù)信息也包含在返回內(nèi)容中
21007 收據(jù)信息是測(cè)試用（sandbox），但卻被發(fā)送到產(chǎn)品環(huán)境中驗(yàn)證 【請(qǐng)求sandbox校驗(yàn)支付憑證】
21008 收據(jù)信息是產(chǎn)品環(huán)境中使用，但卻被發(fā)送到測(cè)試環(huán)境中驗(yàn)證
消耗類(lèi)型： 例如：金幣、道具等。
非續(xù)訂訂閱： non-renewable subscription 例如：VIP
您的首個(gè) App 內(nèi)購(gòu)買(mǎi)項(xiàng)目必須以新的 App 版本提交。請(qǐng)創(chuàng)建您的 App 內(nèi)購(gòu)買(mǎi)項(xiàng)目，然后前往 App 的“App Store”頁(yè)，從“App 內(nèi)購(gòu)買(mǎi)項(xiàng)目”中進(jìn)行選擇，點(diǎn)按“提交”。 了解更多
在上傳二進(jìn)制文件并提交首個(gè) App 內(nèi)購(gòu)買(mǎi)項(xiàng)目以供審核后，您可以使用下表提交其他 App 內(nèi)購(gòu)買(mǎi)項(xiàng)目。
唐巧-iOS應(yīng)用內(nèi)付費(fèi)(IAP)開(kāi)發(fā)步驟列表
未完~待續(xù)
當(dāng)使用內(nèi)購(gòu)購(gòu)買(mǎi)過(guò)商品之后沒(méi)有把這個(gè)交易關(guān)閉，所以再次去購(gòu)買(mǎi)商品后就會(huì)調(diào)用以前已經(jīng)購(gòu)買(mǎi)成功的交易去購(gòu)買(mǎi)因?yàn)橐呀?jīng)購(gòu)買(mǎi)過(guò)，才會(huì)有這個(gè)提示
原因：添加內(nèi)購(gòu)項(xiàng)目時(shí)，信息填寫(xiě)不完整，app審核圖像未上傳
處理方法：上傳app審核圖片( 合適的尺寸 )，點(diǎn)擊提交，狀態(tài)改為正在準(zhǔn)備審核中。
這個(gè)是內(nèi)購(gòu)選擇類(lèi)型不匹配原因?qū)е隆?/p>
購(gòu)買(mǎi)成功之后，Apple會(huì)返回以下四個(gè)數(shù)據(jù)給應(yīng)用
Reference
Review the updated Paid Applications Schedule.
游客身份解決方案：即不登錄也要能購(gòu)買(mǎi)
1）服務(wù)器端做一個(gè)蘋(píng)果審核機(jī)制，審核期間游客身份可以進(jìn)行一切行為，一旦審核通過(guò)，修改服務(wù)端即可達(dá)到強(qiáng)制用戶(hù)登錄進(jìn)行內(nèi)購(gòu)買(mǎi)的目的（這個(gè)有點(diǎn)。。。）
2）游客可以進(jìn)行內(nèi)購(gòu)買(mǎi)，購(gòu)買(mǎi)時(shí)以設(shè)備UUID為準(zhǔn)，生成一個(gè)游客賬號(hào)，將購(gòu)買(mǎi)信息保存在服務(wù)器和本地，當(dāng)用戶(hù)登錄正式賬戶(hù)后判斷此設(shè)備是否進(jìn)行過(guò)內(nèi)購(gòu)，有的話(huà)提示用戶(hù)將游客身份購(gòu)買(mǎi)的權(quán)益與現(xiàn)有賬號(hào)綁定，如果綁定，游客權(quán)益則遷移到正式賬戶(hù)，如果不遷移，則游客身份和正是賬戶(hù)是兩個(gè)獨(dú)立賬戶(hù)，正式賬戶(hù)不享有游客身份的權(quán)益（我用的這個(gè)）
內(nèi)購(gòu)游客模式解決方案
iOS內(nèi)購(gòu)規(guī)則
網(wǎng)站題目：蘋(píng)果flutter,蘋(píng)果電影
文章網(wǎng)址：http://www.ef60e0e.cn/article/dscdodp.html
