基于React-Native0.55.4的語(yǔ)音識(shí)別項(xiàng)目全棧方案

一. 移動(dòng)端直接訪問(wèn)Web應(yīng)用？

PC端基于Web API的語(yǔ)音識(shí)別方案可參考《【Recorder.js+百度語(yǔ)音識(shí)別】全棧方案技術(shù)細(xì)節(jié)》一文。

1. 調(diào)用Web API的多媒體采集接口需要特定的域

Web API的多媒體接口是WebRTC技術(shù)在PC端的實(shí)現(xiàn)，由于多媒體采集涉及到用戶隱私，所以在瀏覽器端調(diào)用這個(gè)接口需要在安全的域下才能被調(diào)起，安全的域是指以下三類：

• file:///本地域
• http://localhost本地web服務(wù)器
• https://安全域

前兩類一般用于桌面應(yīng)用和本地調(diào)試，實(shí)際網(wǎng)站上線部署需要以https方式部署，如何部署https及申請(qǐng)免費(fèi)的CA證書等網(wǎng)上有很多文章講解，本文不再贅述。

2. 手機(jī)瀏覽器幾乎都不直接支持WebRTC 接口

將PC端的Web應(yīng)用以https方式部署好之后，從手機(jī)瀏覽器直接訪問(wèn)時(shí)無(wú)法喚起錄音接口權(quán)限認(rèn)證，navigator.getUserMedia( )方法一只返回permissionDenied錯(cuò)誤，無(wú)論是在Android6.0以下通過(guò)編輯manifest.xml添加還是Android6.0以上通過(guò)動(dòng)態(tài)獲取的方式取得RECORD_AUDIO權(quán)限，網(wǎng)站都可以正常訪問(wèn)，相關(guān)的Web API接口也都存在，但即使獲得用戶授權(quán)后也無(wú)法調(diào)起錄音功能。筆者測(cè)試了UC瀏覽器，百度移動(dòng)瀏覽器和Android6.0(API23)自帶的瀏覽器，Android8.0(API26)自帶的瀏覽器,結(jié)果是都不支持。

二. 方案調(diào)研和新的坑

o(￣▽￣)d 既然從移動(dòng)端直接訪問(wèn)Web應(yīng)用時(shí)無(wú)法調(diào)起錄音接口，至少是無(wú)法兼容很多系統(tǒng)和機(jī)型，如果不考慮直接原生開發(fā)Android的話，只有寄希望于Hybrid的方案了。

2.1 WebView

• 方案：

  在一個(gè)app中單頁(yè)面全屏放置一個(gè)WebView組件，然后加載https方式部署的web應(yīng)用。

• 理由：

  手機(jī)瀏覽器無(wú)法支持的情況下，只能寄希望于WebView。WebView是Android底層用于加載網(wǎng)頁(yè)的組件，Android4.4版本以后已將內(nèi)置的瀏覽器引擎更換為chromium，也就是chrome的內(nèi)核，從Can I Use上查詢的支持度是Android5.0以上的版本的WebView都是支持WebRTC接口的getUserMedia( )方法的。

• 測(cè)試結(jié)果：

  應(yīng)用編譯目標(biāo)版本為API23，在支持API23（Android6.0）的虛擬機(jī)和真機(jī)中測(cè)試，均無(wú)法通過(guò)WebAPI接口調(diào)起麥克風(fēng)進(jìn)行錄音。在支持API26（Android8.0）版本的虛擬機(jī)中，功能均可實(shí)現(xiàn)。最終在Can I Use中對(duì)于getUserMedia( )方法支持度的統(tǒng)計(jì)信息的備注中，發(fā)現(xiàn)已知問(wèn)題中在寫明了：

簡(jiǎn)單地說(shuō)就是這個(gè)方法在Android webview，iOS和PWA 基本都用不了。建議以后開發(fā)中可能用到一些不常用的API時(shí)完整地看一下相關(guān)信息。

• 結(jié)論：

  Android8.0支持，Android支持度不佳，不建議使用。

2.2 crosswalk

• 方案：

  官方網(wǎng)址：https://crosswalk-project.org/

  利用crosswalk，在進(jìn)行app打包時(shí)，將webview內(nèi)核替換為xwalk(crosswalk開發(fā)的基于chromium的瀏覽器內(nèi)核)，以擴(kuò)展原生webview的能力。

• 理由：

  既然原生webview功能被閹割，那么可以利用這個(gè)小型黑科技來(lái)把一個(gè)功能更強(qiáng)大的瀏覽器內(nèi)核跟自己的應(yīng)用打包在一起，筆者3年前在cordova2.0-3.0版本流行的年代使用過(guò)這個(gè)技術(shù)，好處是的確可以擴(kuò)展webview的能力無(wú)疑，不好的地方在于app項(xiàng)目會(huì)直接增大80-90Mb的體積，當(dāng)然通過(guò)幾個(gè)版本的迭代，現(xiàn)在crosswalk可以針對(duì)手機(jī)內(nèi)核類型生成不同的包，app體積增量大約在20Mb，基本屬于可接受范圍。

• 測(cè)試結(jié)果：

  遺憾地是這個(gè)項(xiàng)目一年前已經(jīng)停止維護(hù)了，最后一版的官方腳手架工具也無(wú)法初始化新的工程，間接使用的方式分為兩種，第一，下載crosswalk的包，手動(dòng)在android工程中替換原生WebView，對(duì)Hybrid開發(fā)者來(lái)說(shuō)難度較大且與hybrid技術(shù)兼容性不可控；另一種方案在下一小節(jié)說(shuō)明。

• 結(jié)論：

  不建議使用，有那個(gè)精力真不如去研究一下可靠的hybrid方案。

2.3 Cordova/ionic

• 方案：

  官方網(wǎng)址：https://cordova.apache.org

  codova是一個(gè)很流行的hybrid方案，現(xiàn)在已經(jīng)升級(jí)到8.0.0版本，它本身就是一個(gè)將web應(yīng)用打包為app的解決方案。cordova的基本原理是將一般UI層操作和功能放在WebView里實(shí)現(xiàn)，需要調(diào)用移動(dòng)設(shè)備硬件或原生接口時(shí)，均通過(guò)添加cordova插件的形式來(lái)實(shí)現(xiàn)，每一個(gè)cordova版本都會(huì)橫跨支持若干個(gè)Android版本，例如新的cordova7.0.0在官方文檔的說(shuō)明中是支持android從4.4到8.1版本的，筆者認(rèn)為非常適合小型hybrid開發(fā)團(tuán)隊(duì)使用。

• 理由：

  值得一提的是cordova擁有一個(gè)非常流行的移動(dòng)端開發(fā)×××ionic,現(xiàn)在已經(jīng)迭代至4.0階段，這個(gè)技術(shù)筆者是有特殊感情的，當(dāng)年ionic還在alpha版本的時(shí)候，筆者就在使用了，它是基于cordova+angular這個(gè)技術(shù)組合的，擁有清新且設(shè)計(jì)感極強(qiáng)的UI組件，非常值得嘗試。另外，cordova是擁有crosswalk插件的，可以直接以插件的形式，在cordova項(xiàng)目打包時(shí)加入crosswalk，有相關(guān)需求的讀者可以以一試，尤其是團(tuán)隊(duì)里沒(méi)有Android開發(fā)人員也沒(méi)有專門的設(shè)計(jì)人員的時(shí)候，ionic出品的應(yīng)用一定會(huì)讓別人對(duì)你另眼相看。

• 測(cè)試結(jié)果：

  筆者曾在使用cordova3.3的時(shí)候就融入過(guò)crosswalk，也通過(guò)cordova插件成功調(diào)用過(guò)底層的GPS，攝像頭及其他一些原生組件，當(dāng)時(shí)是為了適配Android4.4版本。cordova7.0.0的腳手架經(jīng)測(cè)試在國(guó)內(nèi)是可以使用的，新建的工程無(wú)論是通過(guò)自帶命令行還是import進(jìn)Android Studio來(lái)進(jìn)行開發(fā)都可以打包為對(duì)應(yīng)的工程，官方文檔有很詳細(xì)的調(diào)用各種底層接口的說(shuō)明，網(wǎng)上也有cordova7.0.0+crosswalk方案對(duì)應(yīng)的技術(shù)貼。

  筆者由于技術(shù)協(xié)議中指定技術(shù)棧的緣故，無(wú)法中途替換解決方案，故本次未進(jìn)行測(cè)試。

• 結(jié)論：

  可考慮作為整體解決方案進(jìn)行嘗試。

2.4 React-Native

• 方案：

  官方網(wǎng)址：https://reactnative.cn

  這是筆者本次使用的方案，由于web端采用React技術(shù)棧完成的緣故，為了不增加團(tuán)隊(duì)小伙伴的學(xué)習(xí)成本，移動(dòng)端就選用了React-Native的方案。這個(gè)方案既可以按照混合開發(fā)的方式來(lái)進(jìn)行，也可以按照單個(gè)WebView的方式來(lái)進(jìn)行(已驗(yàn)證這種方案無(wú)法支持WebRTC)。

  可能很多人已經(jīng)聽(tīng)說(shuō)去年Airbnb公開宣布不再繼續(xù)使用React-Native作為移動(dòng)端解決方案并做了詳細(xì)的解釋，當(dāng)時(shí)也是很多人鼓吹說(shuō)React-Native要涼涼了。實(shí)際上Airbnb在聲明中說(shuō)的很清楚，React-Native是非常好的hybrid解決方案，他們所遇到的問(wèn)題是當(dāng)性能和用戶體驗(yàn)優(yōu)化到一定程度時(shí)，在hybrid技術(shù)的維護(hù)和開發(fā)上投入的人力過(guò)多了，整個(gè)項(xiàng)目的前端人員不僅有Web前端，還有高級(jí)的Android和IOS人員來(lái)保障hybrid項(xiàng)目的推進(jìn)，他們認(rèn)為這樣的人力成本相比于原生開發(fā)而言要高很多，所以更換了方案。聽(tīng)明白了嗎？所以作為軟件技術(shù)比國(guó)外落后不知道多少年的天朝碼農(nóng)，考慮實(shí)際的項(xiàng)目需求，盡管放心大膽地用就好了，跟風(fēng)真的沒(méi)什么價(jià)值。

• 理由：

  熱門的hybrid解決方案，和Web前端三駕馬車之一的React屬同門，語(yǔ)法和組件結(jié)構(gòu)相似度高，社區(qū)活躍且周邊生態(tài)較好。

• 測(cè)試結(jié)果：

  React-native已經(jīng)發(fā)布0.57.3版本，但經(jīng)測(cè)試0.55.4在國(guó)內(nèi)屬于可正常新建工程的版本(使用react-native init XXX命令創(chuàng)建的工程)，0.56大版本中發(fā)布的兩個(gè)小版本均在初始打包時(shí)報(bào)錯(cuò)，命令行的提示鏈接到一個(gè)已知issue，但可惜照做以后也未能打包成功，0.57默認(rèn)的Android-SDK是API27，也就是Android8.1，對(duì)于經(jīng)驗(yàn)不足的開發(fā)者來(lái)說(shuō)（比如我自己），太新的版本也不建議使用，除非你的項(xiàng)目是在指定機(jī)器上運(yùn)行的。

  React-native也封裝了WebView組件，但很遺憾，直接加載web應(yīng)用的方式經(jīng)測(cè)試也無(wú)法調(diào)起getUserMedia( )這個(gè)方法，所以最終只能通過(guò)混合開發(fā)的方案來(lái)實(shí)現(xiàn)（但回過(guò)頭來(lái)想，跟通過(guò)WebView來(lái)調(diào)用硬件接口相比，其實(shí)這種實(shí)現(xiàn)方式反而更符合邏輯）。

• 結(jié)論：

  建議未掌握多語(yǔ)言混合開發(fā)能力的hybrid開發(fā)者盡可能選用熱門方案，理由很簡(jiǎn)單，所有的前端項(xiàng)目都有坑，但熱門項(xiàng)目出了問(wèn)題可以找大牛咨詢。

WebRTC技術(shù)錄音相關(guān)的navigator.getUserMedia,navigator.mediaDevices.getUserMedia,AudioContext這上面這幾個(gè)方案中都是存在的，但事實(shí)是都沒(méi)能在webview中調(diào)起麥克風(fēng)進(jìn)行錄音。

當(dāng)然WebRTC作為獨(dú)立的標(biāo)準(zhǔn)和技術(shù)，也是可以融入Android工程的，但從前端開發(fā)者的角度來(lái)說(shuō)這條路就有點(diǎn)跑偏了，執(zhí)著于WebRTC或者團(tuán)隊(duì)里有原生開發(fā)者的小伙伴可以研究一下。

三. React-Native方案的整體架構(gòu)

基本上只要多復(fù)用現(xiàn)成的組件，加上適量的定制，盡可能不使用一些奇技淫巧，產(chǎn)品的流暢度基本區(qū)分不出來(lái)是否是Hybrid開發(fā)還是Native開發(fā)，當(dāng)然跟筆者的項(xiàng)目體量不是很大也有一定關(guān)系。

四. 使用插件清單

• react-native-audio

  地址：https://github.com/jsierles/react-native-audio

  調(diào)用麥克風(fēng)采集音頻。

• rn-fetch-blob

  地址：https://github.com/joltup/rn-fetch-blob

  在RN中從native層通過(guò)原生線程直接發(fā)送大體積二進(jìn)制數(shù)據(jù)或文件，通過(guò)Bridge對(duì)象從Web發(fā)請(qǐng)求會(huì)造成性能問(wèn)題。

• Multer模塊

  地址：https://github.com/expressjs/multer

  Express服務(wù)端中間件，用于接收客戶端發(fā)送的大體積二進(jìn)制數(shù)據(jù)或文件。

• FFmpeg工具

  地址：http://ffmpeg.org/

  多媒體格式轉(zhuǎn)換庫(kù)。手機(jī)端采集編碼的格式無(wú)法被百度語(yǔ)音識(shí)別接口直接識(shí)別，需要先進(jìn)行重編碼。node.js開發(fā)者通過(guò)child_process模塊直接從代碼中喚起命令行執(zhí)行即可。

• docxtemplater模塊

  地址：https://docxtemplater.readthedocs.io/en/latest/

  node.js模塊語(yǔ)音識(shí)別結(jié)果需要在后臺(tái)生成docx格式的文件（word文檔），可使用這個(gè)模塊，使用方法和模板渲染引擎基本一致。

五. RN開發(fā)細(xì)節(jié)和遇到的坑

1. 真機(jī)調(diào)試時(shí)，需要搖晃手機(jī)，在配置菜單中填寫內(nèi)網(wǎng)IP+端口號(hào)，否則會(huì)直接紅屏報(bào)錯(cuò)。
2. 真機(jī)調(diào)試時(shí)，需要在設(shè)置中開啟應(yīng)用的懸浮框權(quán)限，否則可能白屏什么都不顯示。
3. WebRTC在Android WebView兼容性不好，IOS內(nèi)置瀏覽器不支持。
4. react-native-audio進(jìn)行錄音時(shí)，每一次調(diào)用Stop之后，若要再次啟動(dòng)錄音功能，必須先調(diào)用AudioRecorder.prepareRecordingAtPath( )方法重新初始化，否則會(huì)紅屏報(bào)錯(cuò)。
5. WebView組件必須設(shè)置ref={(webview)=>{this.webview = webview}},否則onMessage屬性無(wú)法監(jiān)聽(tīng)到來(lái)自WebView加載網(wǎng)頁(yè)通過(guò)window.postMessage發(fā)來(lái)的消息。
6. TouchableHighlight組件必須先設(shè)置onPress屬性的回調(diào)函數(shù)（可以為空函數(shù)），否則觸摸變色的響應(yīng)屬性UnderlayColor無(wú)法生效。
7. Modal組件在一個(gè)自定義組件中只能有一個(gè)（如果有多個(gè)必須通過(guò)條件判斷只實(shí)例化一個(gè)），否則即使未顯示的Modal組件的Visible屬性設(shè)置為false，其實(shí)例方法也會(huì)和另一個(gè)Modal組件發(fā)生重疊覆蓋，可能出現(xiàn)的現(xiàn)象就是顯示了第一個(gè)Modal的界面，卻執(zhí)行了第二個(gè)Modal的同名方法。