13518219792
我是初學(xué)者小白，所以很多看法不深，理解也不夠透徹。但是很適合小白們一起從低角度往高處探索。文中有錯(cuò)誤的，感謝指正，一起進(jìn)步。
創(chuàng)新互聯(lián)致力于網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站,成都網(wǎng)站設(shè)計(jì),集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場競爭中脫穎而出。 選擇創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！
趁著假期做一個(gè)Flutter的地圖功能，因?yàn)楹蠖诉x用了百度地圖，所以前端沒得挑。找了遍插件，并沒有現(xiàn)成可用的。（不過發(fā)現(xiàn)了百度官方也自開發(fā)Flutter插件，目前功能只有一個(gè)獲取本地位置信息，后期會(huì)繼續(xù)增加吧？很期待！）
參考帖子：
這個(gè)實(shí)際上跟功能之間沒太大關(guān)系，只是我按照個(gè)人摸索的過程來寫。
當(dāng)對(duì)一個(gè)“領(lǐng)域/知識(shí)塊”完全不懂的時(shí)候，360°的方向都不確定的話。先了解基礎(chǔ)概念，有利于你確定自己的摸索方向。
參考帖子：
中間我跳過了幾十，上百個(gè)帖子的摸索過程。這個(gè)才是關(guān)鍵能夠真正做事的參考。
因?yàn)榘俣鹊膕dk還算是很完善的，所以一旦出問題，都會(huì)有對(duì)應(yīng)的報(bào)錯(cuò)提示。
我是使用flutter插件：permission_handler，來解決安卓的動(dòng)態(tài)授權(quán)問題，用法簡單而且設(shè)計(jì)合理。
這個(gè)錯(cuò)誤直接來看，就是簽名有問題。怎么查看SHA1碼和包名，這里不多說，網(wǎng)上有極其多的方法，百度Sdk開發(fā)指南里也有。沒那么復(fù)雜，也沒那么麻煩。按照流程操作就是對(duì)的。
實(shí)在不放心？跟我一樣，flutter打包后，把a(bǔ)pk反過來解SHA1碼不就行了？
參考帖子：
紅色框框基本就是帖子講解的那樣。
藍(lán)色框框見下圖：release標(biāo)簽里好像是自己設(shè)置了。所以debug標(biāo)簽里面，箭頭指向的位置，是我多設(shè)置的一個(gè)參數(shù)。
uid: -1 appid -1 msg: httpsPost failed,IOException:Unable to resolve host "api.map.baidu.com": No address associated with hostname
這一步我是哭笑不得，一開始老是和問題（2）混淆，導(dǎo)致浪費(fèi)很多時(shí)間。仔細(xì)閱讀后，發(fā)現(xiàn)是不能連接到“api.map.baidu.com”。
我打開模擬器的chrome瀏覽器，發(fā)現(xiàn)不能上網(wǎng)。查看手機(jī)的dns是10.0.2.3(默認(rèn)的)，和家里wifi不一樣，所以不能上網(wǎng)也正常，之前居然沒發(fā)現(xiàn)這個(gè)問題！！！
終端執(zhí)行：adb shell? 和? getprop，就可以查看所有的屬性參數(shù)了。（window小伙伴自行百度，這個(gè)沒多大差別。如果你有多個(gè)設(shè)備，記得自己選好設(shè)備。）
在里面找到這一項(xiàng)，就是你的dns參數(shù)。有些人是net.dns1，我的是net.eth0.dns1。這個(gè)沒關(guān)系，只是等下指令 稍微改動(dòng) 就行。
修改dns指令：setprop net.eth0.dns1 192.168.2.1
后面的192.168.2.1是我自己的dns，這個(gè)根據(jù)自己的情況來填寫。不懂的百度下怎么查看自己的dns。
雖然提示設(shè)置失敗，但是回到模擬器一看，地圖已經(jīng)顯示出來了。
嘿嘿，在flutter設(shè)定多大的區(qū)域，地圖就是多大的區(qū)域。用起來就很方便了。
過程十分痛苦，因?yàn)閷?duì)flutter不是很熟悉，對(duì)Android原生更是了解很少。所以自己就像突然不能講話，被丟到一個(gè)陌生的環(huán)境，卻要我去找一個(gè)人。所以細(xì)心很重要，一定要看清楚錯(cuò)誤提示，不要錯(cuò)過每一個(gè)細(xì)節(jié)和可能性。
幸好最后解決了問題，開心~
其實(shí)如果你仔細(xì)閱讀過百度官方的文檔，會(huì)發(fā)現(xiàn)里面有關(guān)于 地圖的生命周期管理 。然后在這里面沒有提及到，這一點(diǎn)雖然沒提，但不可或缺，小伙伴就自行思考吧。
最后還有一點(diǎn)，其實(shí)我的初衷是想實(shí)現(xiàn)一個(gè)百度地圖的plugin，但是苦于能力有限，對(duì)Android的不熟悉，最后折戟。我不得已另起項(xiàng)目，然后重新實(shí)現(xiàn)地圖sdk接入。經(jīng)過這次對(duì)于這些有更多更全面的認(rèn)知后，有空會(huì)再次研究flutter 插件的開發(fā)，共勉，奧利給！！！
這里實(shí)現(xiàn)flutter第三方地圖導(dǎo)航，選用最簡單的方式--調(diào)用第三方地圖客戶端；但各種地圖客戶端用的坐標(biāo)系不一定相同，先了解下常見的坐標(biāo)系：
地圖應(yīng)用api坐標(biāo)系：
在 pubspec.yaml 文件中添加依賴插件：
一般android和ios調(diào)起第三方應(yīng)用是通過scheme方式，這里調(diào)起第三方地圖客戶端導(dǎo)航也一樣，如高德地圖，ios scheme為iosamap，android scheme為androidamap; 所以flutter需要引用url_launcher;
未完待續(xù)~~
在flutter中使用高德地圖，突然報(bào)如標(biāo)題的錯(cuò)誤，一開始我以為是plist文件沒有加位置授權(quán)，一檢查發(fā)現(xiàn)權(quán)限都有，想著以前這定位都正常的，應(yīng)該是改了其他地方引起定位不了的，一一對(duì)比，是我permission_handler這個(gè)插件升級(jí)了，升級(jí)后ios這邊要在podfile文件下加一下權(quán)限配置
target.build_configurations.eachdo |config|
# You can remove unused permissions here
# for more infomation:
# e.g. when you don't need camera permission, just add 'PERMISSION_CAMERA=0'
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS']||= [
'$(inherited)',
## dart: PermissionGroup.calendar
? ? 'PERMISSION_EVENTS=1',
## dart: PermissionGroup.reminders
? ? 'PERMISSION_REMINDERS=1',
## dart: PermissionGroup.contacts
? ? 'PERMISSION_CONTACTS=1',
## dart: PermissionGroup.camera
? ? 'PERMISSION_CAMERA=1',
## dart: PermissionGroup.microphone
? ? 'PERMISSION_MICROPHONE=1',
## dart: PermissionGroup.speech
? ? 'PERMISSION_SPEECH_RECOGNIZER=1',
## dart: PermissionGroup.photos
? ? 'PERMISSION_PHOTOS=1',
## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]
? ? 'PERMISSION_LOCATION=1',
## dart: PermissionGroup.notification
? ? 'PERMISSION_NOTIFICATIONS=1',
## dart: PermissionGroup.mediaLibrary
? ? 'PERMISSION_MEDIA_LIBRARY=1',
## dart: PermissionGroup.sensors
? ? 'PERMISSION_SENSORS=1',
## dart: PermissionGroup.bluetooth
#? ? ? ? 'PERMISSION_BLUETOOTH=1',
## dart: PermissionGroup.appTrackingTransparency
? ? 'PERMISSION_APP_TRACKING_TRANSPARENCY=1',
## dart: PermissionGroup.criticalAlerts
? ? 'PERMISSION_CRITICAL_ALERTS=1',
]
end
APP集成百度地圖后，開發(fā)者模式直接連接真機(jī)可以打開地圖，打包成apk后安裝，應(yīng)用直接閃退
驗(yàn)證了3個(gè)環(huán)境
a、Android 6.0
b、Android 9.0
c、Android 8.1
真機(jī)USB線連接
選擇Logcat，將日志級(jí)別選擇未error，日志太多，或者用自定義的過濾規(guī)則
先清除日志，后迅速點(diǎn)擊手機(jī)上的APP，觀察日志
發(fā)現(xiàn)需要監(jiān)控的APP報(bào)出異常信息，這個(gè)很關(guān)鍵，有異常就是有線索，couldn't find "libflutter.so"
這個(gè)時(shí)候問度娘就可以了
未明白具體的原因，臨時(shí)先解決了問題，馬克一下
[img]文/陳爐軍
整理/LiveVideoStack
大家好，我是阿里巴巴閑魚事業(yè)部的陳爐軍，本次分享的主題是Flutter浪潮下的音視頻研發(fā)探索，主要內(nèi)容是針對(duì)閑魚APP在當(dāng)下流行的跨平臺(tái)框架Flutter的大規(guī)模實(shí)踐，介紹其在音視頻領(lǐng)域碰到的一些困難以及解決方案。
分享內(nèi)容主要分為四個(gè)方面，首先會(huì)對(duì)Flutter有一個(gè)簡單介紹以及選擇Flutter作為跨平臺(tái)框架的原因，其次會(huì)介紹Flutter中與音視頻關(guān)系非常大的外接紋理概念，以及對(duì)它做出的一些優(yōu)化。之后會(huì)對(duì)閑魚在音視頻實(shí)踐過程中碰到的一些Flutter問題提出了一些解決方案——TPM音視頻框架。最后是閑魚Flutter多媒體開源組件的介紹。
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)開發(fā)。可以預(yù)想的是未Flutter發(fā)展的好的話，會(huì)逐漸變?yōu)橐粋€(gè)從底層到UI層的一個(gè)全鏈路的跨平臺(tái)開發(fā)，技術(shù)人員分別負(fù)責(zé)SDK和UI層的開發(fā)。
在Flutter之前已經(jīng)有很多跨平臺(tái)UI解決方案，那為什么選擇Flutter呢？
我們主要考慮性能和跨平臺(tái)的能力。
以往的跨平臺(tái)方案比如Weex，ReactNative，Cordova等等因?yàn)榧軜?gòu)的原因無法滿足性能要求，尤其是在音視頻這種性能要求幾乎苛刻的場景。
而諸如Xamarin等，雖然性能可以和原生App一致，但是大部分邏輯還是需要分平臺(tái)實(shí)現(xiàn)。
我們可以看一下，為什么Flutter可以實(shí)現(xiàn)高性能：
原生的native組件渲染以IOS為例，蘋果的UIKit通過調(diào)用平臺(tái)自己的繪制框架QuaztCore來實(shí)現(xiàn)UI的繪制，圖形繪制也是調(diào)用底層的API,比如OpenGL、Metal等。
而Flutter也是和原生API邏輯一致，也是通過調(diào)用底層的繪制框架層SKIA實(shí)現(xiàn)UI層。這樣相當(dāng)于Flutter他自己實(shí)現(xiàn)了一套UI框架，提供了一種性能超越原生API的跨平臺(tái)可能性。
但是我們說一個(gè)框架最終性能怎樣，其實(shí)取決于設(shè)計(jì)者和開發(fā)者。至于現(xiàn)在到底是一個(gè)什么狀況：
在閑魚的實(shí)踐中，我們發(fā)現(xiàn)在正常的開發(fā)沒有特意的去優(yōu)化UI代碼的情況下，在一些低端機(jī)上，F(xiàn)lutter界面的流暢性是比Native界面要好的。
雖然現(xiàn)在閑魚某些場景下會(huì)有卡頓閃退等情況，但是這是一個(gè)新事物發(fā)展過程中的必然問題，我們相信未來性能肯定不會(huì)成為限制Flutter發(fā)展的瓶頸的。
在閑魚實(shí)踐Flutter的過程中，混合棧和音視頻是其中比較難解決的兩個(gè)問題，混合棧是指一個(gè)APP在Flutter過程中不可能一口氣將所有業(yè)務(wù)全部重寫為Flutter，所以這是一個(gè)逐步迭代的過程，這期間原生native界面與Flutter界面共存的狀態(tài)就稱之為混合棧。閑魚在混合棧上也有一些比較好的輸出，例如FlutterBoost。
外接紋理
在講音視頻之前需要簡要介紹一下外接紋理的概念，我們將它稱之為是Flutter和Frame之間的橋梁。
Flutter渲染一幀屏幕數(shù)據(jù)首先要做的是，GPU發(fā)出的VC信號(hào)在Flutter的UI線程，通過AOT編譯的機(jī)器碼結(jié)合當(dāng)前Dart Runtime，生成Layer Tree UI樹，Layer Tree上每一個(gè)葉子節(jié)點(diǎn)都代表了當(dāng)前屏幕上所需要渲染的每一個(gè)元素，包含了這些元素渲染所需要的內(nèi)容。將Layer Tree拋給GPU線程，在GPU線程內(nèi)調(diào)用Skia去完成整個(gè)UI的渲染過程。Layer Tree中有PictureLayer和TextureLayer兩個(gè)比較重要的節(jié)點(diǎn)。PictureLayer主要負(fù)責(zé)屏幕圖片的渲染，F(xiàn)lutter內(nèi)部實(shí)現(xiàn)了一套圖片解碼邏輯，在IO線程將圖片讀取或者從網(wǎng)絡(luò)上拉取之后，通過解碼能夠在IO線程上加載出紋理，交給GPU線程將圖片渲染到屏幕上。但是由于音視頻場景下系統(tǒng)API太過繁多，業(yè)務(wù)場景過于復(fù)雜。Flutter沒有一套邏輯去實(shí)現(xiàn)跨平臺(tái)的音視頻組件，所以說Flutter提出了一種讓第三方開發(fā)者來實(shí)現(xiàn)音視頻組件的方式，而這些音視頻組件的視頻渲染出口，就是TextureLayer。
在整個(gè)Layer Tree渲染的過程中，TextureLayer的數(shù)據(jù)紋理需要由外部第三方開發(fā)者來指定，可以把視頻數(shù)據(jù)和播放器數(shù)據(jù)送到TextureLayer里，由Flutter將這些數(shù)據(jù)渲染出來。
TextureLayer渲染過程：首先判斷Layer是否已經(jīng)初始化，如果沒有就創(chuàng)建一個(gè)Texture，然后將Texture Attach到一個(gè)SufaceTexture上。
這個(gè)SufaceTexture是音視頻的native代碼可以獲取到的對(duì)象，通過這個(gè)對(duì)象創(chuàng)建的Suface，我們可以將視頻數(shù)據(jù)、攝像頭數(shù)據(jù)解碼放到Suface中，然后Flutter端通過監(jiān)聽SufaceTexture的數(shù)據(jù)更新就可以順利把剛才創(chuàng)建的數(shù)據(jù)更新到它的紋理中，然后再將紋理交給SKIA渲染到屏幕上。
然而我們?nèi)绻枰肍lutter實(shí)現(xiàn)美顏，濾鏡，人臉貼圖等等功能，就需要將視頻數(shù)據(jù)讀取出來，更新到紋理中，再將GPU紋理經(jīng)過美顏濾鏡處理后生成一個(gè)處理后的紋理。按Flutter提供的現(xiàn)有能力，必須先將紋理中的數(shù)據(jù)從GPU讀出到CPU中，生成Bitmap后再寫入Surface中，這樣在Flutter中才能順利的更新到視頻數(shù)據(jù)，這樣做對(duì)系統(tǒng)性能的消耗很大。
通過對(duì)Flutter渲染過程分析，我們知道Flutter底層需要渲染的數(shù)據(jù)就是GPU紋理，而我們經(jīng)過美顏濾鏡處理完成以后的結(jié)果也是GPU紋理，如果可以將它直接交給Flutter渲染，那就可以避免GPU-CPU-GPU這樣的無用循環(huán)。這樣的方法是可行的，但是需要一個(gè)條件，就是OpenGL上下文共享。
OpenGL
在說上下文之前，得提到一個(gè)和上線文息息相關(guān)的概念：線程。
Flutter引擎啟動(dòng)后會(huì)啟動(dòng)四個(gè)線程：
第一個(gè)線程是UI線程，這是Flutter自己定義的UI線程，主要負(fù)責(zé)GPU發(fā)出的VSync信號(hào)時(shí)候用當(dāng)前Dart編譯的機(jī)器碼和當(dāng)前運(yùn)行環(huán)境創(chuàng)建出Layer Tree。
還有就是IO線程和GPU線程。和大部分OpenGL處理解決方案中一樣，F(xiàn)lutter也采取一個(gè)線程責(zé)資源加載，一部分負(fù)責(zé)資源渲染這種思路。
兩個(gè)線程之間紋理共享有兩種方式。一種是EGLImage(IOS是 CVOpenGLESTextureCache)。一種是OpenGL Share Context。Flutter通過Share Context來實(shí)現(xiàn)紋理共享，將IO線程的Context和GPU線程的Context進(jìn)行Share，放到同一個(gè)Share Group下面，這樣兩個(gè)線程下資源是互相可見可以共享的。
Platform線程是主線程，F(xiàn)lutter中有一個(gè)很奇怪的設(shè)定，GPU線程和主線程共用一個(gè)Context。并且在主線程也有很多OpenGL 操作。
這樣的設(shè)計(jì)會(huì)給音視頻開發(fā)帶來很多問題，后面會(huì)詳細(xì)說。
音視頻端美顏處理完成的OpenGL紋理能夠讓Flutter直接使用的條件就是Flutter的上下文需要和平臺(tái)音視頻相關(guān)的OpenGL上下文處在一個(gè)Share Group下面。
由于Flutter主線程的Context就是GPU的Context，所以在音視頻端主線程中有一些OpenGL操作的話，很有可能使Flutter整個(gè)OpenGL被破壞掉。所以需要將所有的OpenGL操作都限制在子線程中。
通過上述這兩個(gè)條件的處理，我們就可以在沒有增加GPU消耗的前提下實(shí)現(xiàn)美顏和濾鏡等等功能。
TPM
在經(jīng)過demo驗(yàn)證之后，我們將這個(gè)方案應(yīng)用到閑魚音視頻組件中，但改造過程中發(fā)現(xiàn)了一些問題。
上圖是攝像頭采集數(shù)據(jù)轉(zhuǎn)換為紋理的一段代碼，其中有兩個(gè)操作：首先是切進(jìn)程，將后面的OpenGL操作都切到cameraQueue中。然后是設(shè)置一次上下文。然后這種限制條件或者說是潛規(guī)則往往在開發(fā)過程中容易被忽略的。而這個(gè)條件一旦忽略后果就是出現(xiàn)一些莫名其妙的詭異問題極難排查。因此我們就希望能抽象出一套框架，由框架本身實(shí)現(xiàn)線程的切換、上下文和模塊生命周期等的管理，開發(fā)者接入框架以后只需要安心實(shí)現(xiàn)自己的算法，而不需要關(guān)心這些潛規(guī)則還有其他一些重復(fù)的邏輯操作。
在引入Flutter之前閑魚的音視頻架構(gòu)與大部分音視頻邏輯一樣采用分層架構(gòu)：
1：底層是一些獨(dú)立模塊
2：SDK層是對(duì)底層模塊的封裝
3：最上層是UI層。
引入Flutter之后，通過分析各個(gè)模塊的使用場景，我們可以得出一個(gè)假設(shè)或者說是抽象：音視頻應(yīng)用在終端上可以歸納為視頻幀解碼之后視頻數(shù)據(jù)幀在各個(gè)模塊之間流動(dòng)的過程，基于這種假設(shè)去做Flutter音視頻框架的抽象。
咸魚Flutter多媒體開源組件
整個(gè)Flutter音視頻框架抽象分為管線和數(shù)據(jù)的抽象、模塊的抽象、線程統(tǒng)一管理和上下文同一管理四部分。
管線，其實(shí)就是視頻幀流動(dòng)的管道。數(shù)據(jù)，音視頻中涉及到的數(shù)據(jù)包括紋理、Bit Map以及時(shí)間戳等。結(jié)合現(xiàn)有的應(yīng)用場景我們定義了管線流通數(shù)據(jù)以Texture為主數(shù)據(jù)，同時(shí)可以選擇性的添加Bit Map等作為輔助數(shù)據(jù)。這樣的數(shù)據(jù)定義方式，避免重復(fù)的創(chuàng)建和銷毀紋理帶來的性能開銷以及多線程訪問紋理帶來的一些問題。也滿足一些特殊模塊對(duì)特殊數(shù)據(jù)的需求。同時(shí)也設(shè)計(jì)了紋理池來管理管線中的紋理數(shù)據(jù)。
模塊：如果把管線和數(shù)據(jù)比喻成血管和血液，那框架音視頻的場景就可以比喻成器官，我們根據(jù)模塊所在管線的位置抽象出采集、處理和輸出三個(gè)基類。這三個(gè)基類里實(shí)現(xiàn)了剛才說的線程切換，上下文切換，格式轉(zhuǎn)換等等共同邏輯，各個(gè)功能模塊通過集成自這些基類，可以避免很多重復(fù)勞動(dòng)。
線程：每一個(gè)模塊初始化的時(shí)候，初始化函數(shù)就會(huì)去線程管理的模塊去獲取自己的線程，線程管理模塊可以決定給初始化函數(shù)分配新的線程或者已經(jīng)分配過其他模塊的線程。
這樣有三個(gè)好處：
一是可以根據(jù)需要去決定一個(gè)線程可以掛載多少模塊，做到線程間的負(fù)載均衡。第二，多線程并發(fā)式能夠保證模塊內(nèi)的OpenGL操作是在當(dāng)前線程內(nèi)而不會(huì)跑到主線程去，徹底避免Flutter的OpenGL 環(huán)境被破壞。第三，多線程并行可以充分利用CPU多核架構(gòu)，提升處理速度。
從Flutter端修改Flutter引擎將Context取出后，根據(jù)Context創(chuàng)建上下文的統(tǒng)一管理模塊，每一個(gè)模塊在初始化的時(shí)候會(huì)獲取它的線程，獲取之后會(huì)調(diào)用上下文管理模塊獲取自己的上下文。這樣可以保證每一個(gè)模塊的上下文都是與Flutter的上下文進(jìn)行Share的，每個(gè)模塊之間資源都是共享可見的，F(xiàn)lutter和音視頻native之間也是互相共享可見的。
基于上述框架如果要實(shí)現(xiàn)一個(gè)簡單的場景，比如畫面實(shí)時(shí)預(yù)覽和濾鏡處理功能，
1：需要選擇功能模塊，功能模塊包括攝像頭模塊、濾鏡處理模塊和Flutter畫面渲染模塊，
2：需要配置模塊參數(shù)，比如采集分辨率、濾鏡參數(shù)和前后攝像頭設(shè)置等，
3：在創(chuàng)建視頻管線后使用已配置的參數(shù)創(chuàng)建模塊
4：最后管線搭載模塊，開啟管線就可以實(shí)現(xiàn)這樣簡單的功能。
上圖為整個(gè)功能實(shí)現(xiàn)的代碼和結(jié)構(gòu)圖。
結(jié)合上述音視頻框架，閑魚實(shí)現(xiàn)了Flutter多媒體開源組件。
組要包含四個(gè)基本組件分別是：
1：視頻圖像拍攝組件
2：播放器組件
3：視頻圖像編輯組件
4：相冊選擇組件
現(xiàn)在這些組件正在走內(nèi)部開源流程。預(yù)計(jì)9月份，相冊和播放器會(huì)實(shí)現(xiàn)開源。
后續(xù)展望和規(guī)劃
1：實(shí)現(xiàn)開頭所說的從底層SDK到UI的全鏈路的跨端開發(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)容為開源共建，閑魚開源的內(nèi)容不僅包括拍攝、編輯組件，還包括了很多底層模塊，希望有開發(fā)者在基于Flutter開發(fā)音視頻應(yīng)用時(shí)可以充分利用閑魚開源出的音視頻模塊能力，搭建APP框架，開發(fā)者只要去負(fù)責(zé)實(shí)現(xiàn)特殊需求模塊就可以，盡可能的減少重復(fù)勞動(dòng)。
2017年底因公司業(yè)務(wù)組合部門調(diào)整，新的團(tuán)隊(duì)部分維護(hù)的項(xiàng)目用React Native技術(shù)混合開發(fā)。為適應(yīng)環(huán)境變化，開啟瘋狂RN學(xué)習(xí)之旅，晚上回來啃資料看視頻。可能由于本身對(duì)RN技術(shù)體驗(yàn)不感冒或者在環(huán)境之下強(qiáng)迫學(xué)習(xí)有點(diǎn)不爽。開始尋找代替方案，F(xiàn)luter像一束曙光引起了我的注意，之后一直關(guān)注并利用閑余時(shí)間開始探索。2018年一直學(xué)習(xí)到使用Flutter寫項(xiàng)目，從0.2.0開始到現(xiàn)在1.5版本的發(fā)布，終于開始慢慢的爬出坑位了，但是因?yàn)椴糠挚丶杏X還是不如原生控件好用，因而Flutter提供了PlatformView部件。近期因項(xiàng)目中嚴(yán)重使用依賴地圖，故而做了Fluterr使用原生IOS高德地圖調(diào)研。因?yàn)槲冶旧硎且幻鸻ndroid開發(fā)人員，初學(xué)IOS并記錄下來。
PlatformView是 flutter 官方提供的一個(gè)可以嵌入 Android 和 iOS 平臺(tái)原生 view 的小部件。
在我們實(shí)際開發(fā)中，我們遇到一些 flutter 官方?jīng)]有提供的插件可以自己創(chuàng)建編寫插件來實(shí)現(xiàn)部分功能，但是原生View在 flutter 中會(huì)遮擋住flutter 中的小部件，比如你想使用高德地圖sdk、視頻播放器、直播等原生控件，就無法很好的與 flutter 項(xiàng)目結(jié)合。
1、info.plist文件設(shè)置
2、 ios 端實(shí)現(xiàn)原生組件PlatformView提供原生view
3 、ios 端創(chuàng)建PlatformViewFactory用于生成PlatformView
4、 ios 端創(chuàng)建FlutterPlugin用于注冊原生組件
5 、flutter 平臺(tái)嵌入 原生view
iOS端的UiKitView目前還只是preview狀態(tài), 默認(rèn)是不支持的, 需要手動(dòng)打開開關(guān), 在info.plist文件中新增一行io.flutter.embedded_views_preview為true.
創(chuàng)建類 FlutterMapView 并實(shí)現(xiàn)FlutterPlatformView 協(xié)議
FlutterMapView.h
FlutterMapView.m
FlutterMapFactory.h
FlutterMapFactory.m
FlutterMapPlugin.h
FlutterMapPlugin.m
請前往 高德開放平臺(tái)控制臺(tái) 申請 iOS Key。
注意：Bundle Identifier需要與申請的時(shí)候填寫的一致
地圖依賴的庫列舉如下：
基礎(chǔ) SDK AMapFoundationKit.framework
第一步：將解壓后的MAMapKit.framework 文件 copy 或 拖拽 到工程文件夾中，左側(cè)目錄選中工程名，在 TARGETS-Build Phases- Link Binary With Libaries 中點(diǎn)擊“+”按鈕，在彈出的窗口中點(diǎn)擊“Add Other”按鈕，選擇工程目錄下的 MAMapKit.framework 文件添加到工程中。
千萬不要忘記將AMapFoundationKit也一起加入工程。
3D地圖正確配置應(yīng)如下圖所示：
需要引入的資源文件包括：AMap.bundle，其中：AMap.bundle 在 MAMapKit.framework 包中，AMap.bundle資源文件中存儲(chǔ)了定位、默認(rèn)大頭針標(biāo)注視圖等圖片，可利用這些資源圖片進(jìn)行開發(fā)。
左側(cè)目錄中選中工程名，在右鍵菜單中選擇Add Files to “工程名”…，從MAMapKit.framework中選擇AMap.bundle文件，并勾選“Copy items if needed”復(fù)選框，單擊“Add”按鈕，將資源文件添加到工程中。
成功跑起來 。。 。
