基于React-Native0.55.4的语音识别项目全栈方案
移动端的
API
能力验证方案与PC端不一样!不一样!!不一样!!!即使需要使用的
API
都存在,也不一定能用,这一点和PC端是有很大区别的,国内的手机系统虽然都是基于Android
,但几乎都会经过各大厂商的定制,功能与原版Android
系统并不是完全一致的,在考察技术方案的时候一定要确认用demo
把功能跑起来才可以,别问我怎么知道的。
一. 移动端直接访问Web应用?
PC端基于Web API
的语音识别方案可参考《【Recorder.js+百度语音识别】全栈方案技术细节》一文。
1. 调用Web API
的多媒体采集接口需要特定的域
Web API
的多媒体接口是WebRTC技术在PC端的实现,由于多媒体采集涉及到用户隐私,所以在浏览器端调用这个接口需要在安全的域下才能被调起,安全的域是指以下三类:
file:///
本地域http://localhost
本地web服务器https://
安全域
前两类一般用于桌面应用和本地调试,实际网站上线部署需要以https
方式部署,如何部署https
及申请免费的CA证书等网上有很多文章讲解,本文不再赘述。
2. 手机浏览器几乎都不直接支持WebRTC
接口
将PC端的Web应用以https
方式部署好之后,从手机浏览器直接访问时无法唤起录音接口权限认证,navigator.getUserMedia( )
方法一只返回permissionDenied
错误,无论是在Android6.0以下通过编辑manifest.xml
添加还是Android6.0以上通过动态获取的方式取得RECORD_AUDIO
权限,网站都可以正常访问,相关的Web API
接口也都存在,但即使获得用户授权后也无法调起录音功能。笔者测试了UC浏览器,百度移动浏览器和Android6.0(API23)自带的浏览器,Android8.0(API26)自带的浏览器,结果是都不支持。
二. 方案调研和新的坑
o( ̄▽ ̄)d 既然从移动端直接访问Web应用时无法调起录音接口,至少是无法兼容很多系统和机型,如果不考虑直接原生开发Android的话,只有寄希望于Hybrid的方案了。
2.1 WebView
方案:
在一个app中单页面全屏放置一个WebView组件,然后加载https方式部署的web应用。
理由:
手机浏览器无法支持的情况下,只能寄希望于
WebView
。WebView
是Android底层用于加载网页的组件,Android4.4版本以后已将内置的浏览器引擎更换为chromium,也就是chrome的内核,从Can I Use上查询的支持度是Android5.0以上的版本的WebView
都是支持WebRTC
接口的getUserMedia( )
方法的。测试结果:
应用编译目标版本为
API23
,在支持API23
(Android6.0)的虚拟机和真机中测试,均无法通过WebAPI
接口调起麦克风进行录音。在支持API26
(Android8.0)版本的虚拟机中,功能均可实现。最终在Can I Use中对于getUserMedia( )
方法支持度的统计信息的备注中,发现已知问题中在写明了:
简单地说就是这个方法在Android webview
,iOS
和PWA
基本都用不了。建议以后开发中可能用到一些不常用的API时完整地看一下相关信息。
结论:
Android8.0支持,Android支持度不佳,不建议使用。
2.2 crosswalk
方案:
官方网址:https://crosswalk-project.org/
利用
crosswalk
,在进行app打包时,将webview
内核替换为xwalk
(crosswalk开发的基于chromium的浏览器内核),以扩展原生webview
的能力。理由:
既然原生
webview
功能被阉割,那么可以利用这个小型黑科技来把一个功能更强大的浏览器内核跟自己的应用打包在一起,笔者3年前在cordova
2.0-3.0版本流行的年代使用过这个技术,好处是的确可以扩展webview
的能力无疑,不好的地方在于app项目会直接增大80-90Mb的体积,当然通过几个版本的迭代,现在crosswalk可以针对手机内核类型生成不同的包,app体积增量大约在20Mb,基本属于可接受范围。测试结果:
遗憾地是这个项目一年前已经停止维护了,最后一版的官方脚手架工具也无法初始化新的工程,间接使用的方式分为两种,第一,下载
crosswalk
的包,手动在android
工程中替换原生WebView
,对Hybrid开发者来说难度较大且与hybrid技术兼容性不可控;另一种方案在下一小节说明。结论:
不建议使用,有那个精力真不如去研究一下可靠的hybrid方案。
2.3 Cordova/ionic
方案:
官方网址:https://cordova.apache.org
codova
是一个很流行的hybrid方案,现在已经升级到8.0.0版本,它本身就是一个将web应用打包为app的解决方案。cordova
的基本原理是将一般UI
层操作和功能放在WebView
里实现,需要调用移动设备硬件或原生接口时,均通过添加cordova
插件的形式来实现,每一个cordova
版本都会横跨支持若干个Android
版本,例如新的cordova7.0.0
在官方文档的说明中是支持android从4.4到8.1版本的,笔者认为非常适合小型hybrid开发团队使用。理由:
值得一提的是
cordova
拥有一个非常流行的移动端开发×××ionic
,现在已经迭代至4.0
阶段,这个技术笔者是有特殊感情的,当年ionic
还在alpha
版本的时候,笔者就在使用了,它是基于cordova+angular这个技术组合的,拥有清新且设计感极强的UI组件,非常值得尝试。另外,cordova
是拥有crosswalk
插件的,可以直接以插件的形式,在cordova
项目打包时加入crosswalk
,有相关需求的读者可以以一试,尤其是团队里没有Android开发人员也没有专门的设计人员的时候,ionic
出品的应用一定会让别人对你另眼相看。测试结果:
笔者曾在使用
cordova
3.3的时候就融入过crosswalk
,也通过cordova
插件成功调用过底层的GPS
,摄像头
及其他一些原生组件,当时是为了适配Android4.4版本。cordova7.0.0
的脚手架经测试在国内是可以使用的,新建的工程无论是通过自带命令行还是import进Android Studio来进行开发都可以打包为对应的工程,官方文档有很详细的调用各种底层接口的说明,网上也有cordova7.0.0+crosswalk
方案对应的技术贴。笔者由于技术协议中指定技术栈的缘故,无法中途替换解决方案,故本次未进行测试。
结论:
可考虑作为整体解决方案进行尝试。
2.4 React-Native
方案:
这是笔者本次使用的方案,由于web端采用
React
技术栈完成的缘故,为了不增加团队小伙伴的学习成本,移动端就选用了React-Native
的方案。这个方案既可以按照混合开发的方式来进行,也可以按照单个WebView
的方式来进行(已验证这种方案无法支持WebRTC
)。可能很多人已经听说去年
Airbnb
公开宣布不再继续使用React-Native
作为移动端解决方案并做了详细的解释,当时也是很多人鼓吹说React-Native
要凉凉了。实际上Airbnb
在声明中说的很清楚,React-Native
是非常好的hybrid解决方案,他们所遇到的问题是当性能和用户体验优化到一定程度时,在hybrid技术的维护和开发上投入的人力过多了,整个项目的前端人员不仅有Web前端,还有高级的Android
和IOS
人员来保障hybrid项目的推进,他们认为这样的人力成本相比于原生开发而言要高很多,所以更换了方案。听明白了吗?所以作为软件技术比国外落后不知道多少年的天朝码农,考虑实际的项目需求,尽管放心大胆地用就好了,跟风真的没什么价值。理由:
热门的hybrid解决方案,和Web前端三驾马车之一的
React
属同门,语法和组件结构相似度高,社区活跃且周边生态较好。测试结果:
React-native
已经发布0.57.3
版本,但经测试0.55.4
在国内属于可正常新建工程的版本(使用react-native init XXX
命令创建的工程),0.56
大版本中发布的两个小版本均在初始打包时报错,命令行的提示链接到一个已知issue,但可惜照做以后也未能打包成功,0.57
默认的Android-SDK是API27
,也就是Android8.1,对于经验不足的开发者来说(比如我自己),太新的版本也不建议使用,除非你的项目是在指定机器上运行的。React-native
也封装了WebView
组件,但很遗憾,直接加载web应用的方式经测试也无法调起getUserMedia( )
这个方法,所以最终只能通过混合开发的方案来实现(但回过头来想,跟通过WebView
来调用硬件接口相比,其实这种实现方式反而更符合逻辑)。结论:
建议未掌握多语言混合开发能力的hybrid开发者尽可能选用热门方案,理由很简单,所有的前端项目都有坑,但热门项目出了问题可以找大牛咨询。
WebRTC
技术录音相关的navigator.getUserMedia
,navigator.mediaDevices.getUserMedia
,AudioContext
这上面这几个方案中都是存在的,但事实是都没能在webview
中调起麦克风进行录音。当然
WebRTC
作为独立的标准和技术,也是可以融入Android工程的,但从前端开发者的角度来说这条路就有点跑偏了,执着于WebRTC
或者团队里有原生开发者的小伙伴可以研究一下。
三. React-Native方案的整体架构
基本上只要多复用现成的组件,加上适量的定制,尽可能不使用一些奇技淫巧,产品的流畅度基本区分不出来是否是Hybrid开发还是Native开发,当然跟笔者的项目体量不是很大也有一定关系。
四. 使用插件清单
react-native-audio
地址:https://github.com/jsierles/react-native-audio
调用麦克风采集音频。
rn-fetch-blob
地址:https://github.com/joltup/rn-fetch-blob
在RN中从native层通过原生线程直接发送大体积二进制数据或文件,通过Bridge对象从Web发请求会造成性能问题。
Multer
模块地址:https://github.com/expressjs/multer
Express
服务端中间件,用于接收客户端发送的大体积二进制数据或文件。FFmpeg
工具多媒体格式转换库。手机端采集编码的格式无法被百度语音识别接口直接识别,需要先进行重编码。
node.js
开发者通过child_process
模块直接从代码中唤起命令行执行即可。docxtemplater
模块地址:https://docxtemplater.readthedocs.io/en/latest/
node.js
模块语音识别结果需要在后台生成docx
格式的文件(word文档),可使用这个模块,使用方法和模板渲染引擎基本一致。
五. RN开发细节和遇到的坑
- 真机调试时,需要摇晃手机,在配置菜单中填写内网IP+端口号,否则会直接红屏报错。
- 真机调试时,需要在设置中开启应用的
悬浮框
权限,否则可能白屏什么都不显示。 WebRTC
在Android WebView
兼容性不好,IOS
内置浏览器不支持。react-native-audio
进行录音时,每一次调用Stop
之后,若要再次启动录音功能,必须先调用AudioRecorder.prepareRecordingAtPath( )
方法重新初始化,否则会红屏报错。WebView
组件必须设置ref={(webview)=>{this.webview = webview}}
,否则onMessage
属性无法监听到来自WebView
加载网页通过window.postMessage
发来的消息。TouchableHighlight
组件必须先设置onPress
属性的回调函数(可以为空函数),否则触摸变色的响应属性UnderlayColor
无法生效。Modal
组件在一个自定义组件中只能有一个(如果有多个必须通过条件判断只实例化一个),否则即使未显示的Modal
组件的Visible
属性设置为false
,其实例方法也会和另一个Modal
组件发生重叠覆盖,可能出现的现象就是显示了第一个Modal
的界面,却执行了第二个Modal
的同名方法。
基于React-Native0.55.4的语音识别项目全栈方案的更多相关文章
- 【Recorder.js+百度语音识别】全栈方案技术细节
项目中需要利用百度语音接口在Web端实现语音识别功能,采用了这样的技术方案,但实现时遇到了很多问题,发现网上大部分文章都只是在详解官方提供的example示例,对实际开发没有提供什么有价值的建议,而r ...
- 基于LeanCloud云引擎的Web全栈方案
LeanEngine-Full-Stack The FULL STACK DEVELOPER 复杂的项目, 协作分工, 自动化流程,代码组织结构,框架选择,国际化方案等 Generator 或者See ...
- 基于 Serverless Component 全栈解决方案
什么是 Serverless Component Serverless Component 是 Serverless Framework 的,支持多个云资源编排和组织的场景化解决方案. Serverl ...
- 基于 React + Webpack 的音乐相册项目(下)
上一篇我们完成了音乐相册里面的播放图片的功能,这一篇主要完成的是音乐相册里面的音乐播放器功能.最终让我们基于 React 的音乐相册图文并茂.有声有色. 我们主要从以下几个部分来展开: 数据准备 进度 ...
- 快速搭建一个基于react的项目
最近在学习react,快速搭建一个基于react的项目 1.创建一个放项目文件夹,用编辑器打开 2.打开集成终端输入命令: npm install -g create-react-app 3. cre ...
- 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。
react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...
- react基于webpack和babel以及es6的项目搭建
项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...
- 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)
一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...
- RSuite 一个基于 React.js 的 Web 组件库
RSuite http://rsuite.github.io RSuite 是一个基于 React.js 开发的 Web 组件库,参考 Bootstrap 设计,提供其中常用组件,支持响应式布局. 我 ...
随机推荐
- Error: Unable to access xxx.jar
在cmd中运行java -jar xxx.jar出现如下错误: Error: Unable to access xxx.jar 解决方法: 使用绝对路径:java -jar D:\Program Fi ...
- HDP Hive StorageHandler 下推优化的坑
关键词:hdp , hive , StorageHandler 了解Hive StorageHandler的同学都知道,StorageHandler作为Hive适配不同存储的拓展类,同时肩负着Hive ...
- 初始化git库并配置自动部署
1.初始化库 git init --bare wap.git 2.配置wap.git/config文件 [core] repositoryformatversion = 0 filemode = tr ...
- 有关promise的技巧
其实promise的作用是将异步的代码转化为同步,这里的异步指的是request1,request2.
- Luogu P1894 [USACO4.2]The Perfect Stall
传送门 是道绿题???二分图(网络流)不应该是蓝打底??? 这题浏览一遍就知道是二分图(网络流)算法喽,二分图代码太短,不想写(←这人???),所以就拿网络流练练手. 设源点S=0,汇点T=n+m+1 ...
- IOS - 上APPSTORE为何因IPv6被拒?
http://blog.csdn.net/wanglixin1999/article/details/52182001
- 百度地图API 自定义标注图标
通过Icon类可实现自定义标注的图标,下面示例通过参数MarkerOptions的icon属性进行设置, 也可以使用marker.setIcon()方法. <script type=" ...
- Java接口实现传参
package com.gezhi.interfaces;/** * 新建一个dog类实现接口livingable(狗吃和上厕所都是与生俱来的不应该写成接口) * @author square 凉 * ...
- iOS学习—— UISearchBar的使用
转载自:http://blog.sina.com.cn/s/blog_7b9d64af0101dfg8.html 最近用到搜索功能.于是,经过不断的研究,终于,有点懂了. 那就来总结一下吧,好记性不如 ...
- Linux 遭入侵,挖矿进程被隐藏排查记录
今天来给大家分享下这两天遇到的一个问题,服务器被挖矿了,把我的排查记录分享下,希望能帮到有需要的同学. 问题原因 多台服务器持续告警CPU过高,服务器为K8s的应用节点,正常情况下CPU使用率都挺低的 ...