写点什么

基于 React-Native0.55.4 的语音识别项目全栈方案

  • 2020-03-30
  • 本文字数:4055 字

    阅读完需:约 13 分钟

基于React-Native0.55.4的语音识别项目全栈方案

一. 移动端直接访问 Web 应用?

1. 调用 Web API 的多媒体采集接口需要特定的域

Web API 的多媒体接口是 WebRTC 技术在 PC 端的实现,由于多媒体采集涉及到用户隐私,所以在浏览器端调用这个接口需要在安全的域下才能被调起,安全的域是指以下三类:



前两类一般用于桌面应用和本地调试,实际网站上线部署需要以 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)自带的浏览器,结果是都不支持。

二. 方案调研和新的坑

既然从移动端直接访问 Web 应用时无法调起录音接口,至少是无法兼容很多系统和机型,如果不考虑直接原生开发 Android 的话,只有寄希望于 Hybrid 的方案了。


  • 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 支持度不佳,不建议使用。


  • crosswalk


方案


利用 crosswalk,在进行 app 打包时,将 webview 内核替换为 xwalk(crosswalk 开发的基于 chromium 的浏览器内核),以扩展原生 webview 的能力。


理由:


既然原生 webview 功能被阉割,那么可以利用这个小型黑科技来把一个功能更强大的浏览器内核跟自己的应用打包在一起,笔者 3 年前在 cordova2.0-3.0 版本流行的年代使用过这个技术,好处是的确可以扩展 webview 的能力无疑,不好的地方在于 app 项目会直接增大 80-90Mb 的体积,当然通过几个版本的迭代,现在 crosswalk 可以针对手机内核类型生成不同的包,app 体积增量大约在 20Mb,基本属于可接受范围。


测试结果:


遗憾地是这个项目一年前已经停止维护了,最后一版的官方脚手架工具也无法初始化新的工程,间接使用的方式分为两种,第一,下载 crosswalk 的包,手动在 android 工程中替换原生 WebView,对 Hybrid 开发者来说难度较大且与 hybrid 技术兼容性不可控;另一种方案在下一小节说明。


结论:


不建议使用,有那个精力真不如去研究一下可靠的 hybrid 方案。


  • Cordova/ionic



方案


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 出品的应用一定会让别人对你另眼相看。


测试结果:


笔者曾在使用 cordova3.3 的时候就融入过 crosswalk,也通过 cordova 插件成功调用过底层的 GPS,摄像头及其他一些原生组件,当时是为了适配 Android4.4 版本。cordova7.0.0 的脚手架经测试在国内是可以使用的,新建的工程无论是通过自带命令行还是 import 进 Android Studio 来进行开发都可以打包为对应的工程,官方文档有很详细的调用各种底层接口的说明,网上也有 cordova7.0.0+crosswalk 方案对应的技术贴。


笔者由于技术协议中指定技术栈的缘故,无法中途替换解决方案,故本次未进行测试。


结论:


可考虑作为整体解决方案进行尝试。


  • 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 开发,当然跟笔者的项目体量不是很大也有一定关系。

四. 使用插件清单


调用麦克风采集音频。



在 RN 中从 native 层通过原生线程直接发送大体积二进制数据或文件,通过 Bridge 对象从 Web 发请求会造成性能问题。



Express 服务端中间件,用于接收客户端发送的大体积二进制数据或文件。



多媒体格式转换库。手机端采集编码的格式无法被百度语音识别接口直接识别,需要先进行重编码。node.js 开发者通过 child_process 模块直接从代码中唤起命令行执行即可。



node.js 模块语音识别结果需要在后台生成 docx 格式的文件(word 文档),可使用这个模块,使用方法和模板渲染引擎基本一致。

五. RN 开发细节和遇到的坑

1.真机调试时,需要摇晃手机,在配置菜单中填写内网 IP+端口号,否则会直接红屏报错。


2.真机调试时,需要在设置中开启应用的悬浮框权限,否则可能白屏什么都不显示。


3.WebRTC 在 Android WebView 兼容性不好,IOS 内置浏览器不支持。


4.react-native-audio 进行录音时,每一次调用 Stop 之后,若要再次启动录音功能,必须先调用 AudioRecorder.prepareRecordingAtPath( )方法重新初始化,否则会红屏报错。


5.WebView 组件必须设置 ref={(webview)=>gt;{this.webview = webview}},否则 onMessage 属性无法监听到来自 WebView 加载网页通过 window.postMessage 发来的消息。


6.TouchableHighlight 组件必须先设置 onPress 属性的回调函数(可以为空函数),否则触摸变色的响应属性 UnderlayColor 无法生效。


7.Modal 组件在一个自定义组件中只能有一个(如果有多个必须通过条件判断只实例化一个),否则即使未显示的 Modal 组件的 Visible 属性设置为 false,其实例方法也会和另一个 Modal 组件发生重叠覆盖,可能出现的现象就是显示了第一个 Modal 的界面,却执行了第二个 Modal 的同名方法。


本文转载自 华为云产品与解决方案 公众号。


原文链接:https://mp.weixin.qq.com/s/Isu-XAxBZyp5Q0AxswWiDQ


2020-03-30 17:391276

评论

发布
暂无评论
发现更多内容

数据量大读写缓慢如何优化(5)【读缓存】

我爱娃哈哈😍

redis 缓存 架构设计实战 缓存设计

日记 2021年2月17日(周三)

Changing Lin

2月春节不断更

IDEA插件:快速删除Java代码中的注释

xiaoxi666

Java 代码注释 JavaParser

gradle中的增量构建

程序那些事

maven Gradle 程序那些事 构建工具

深度讲解背包问题:面试中每五道动态规划就有一道是背包模型 ...

宫水三叶的刷题日记

深度思考 面试 LeetCode 动态规划 数据结构与算法

1480. 一维数组的动态和

小马哥

算法 七日更

第一次异地过年有感

石君

思考 情感

写公号大半年,看看我都收获了些啥

架构精进之路

技术 总结 微信公众号 成长笔记

【STM32】PWM 输出 (标准库)

AXYZdong

硬件 stm32 2月春节不断更

ElasticSearch.03 - 基本原理

insight

elasticsearch 2月春节不断更

开发利器——C语言必备实用第三方库

码哥比特

c c++ Linux 后端 框架

微信红包封面,2021年为啥突然火了?

架构精进之路

春节 微信红包封面 商业洞察

【LeetCode】数组拆分Java题解

Albert

算法 LeetCode 2月春节不断更

翻译:《实用的Python编程》01_05_Lists

codists

人工智能 后端 python 爬虫 列表 数据结构与算法

今日笔记

Nydia

C语言实用第三方库Melon开箱即用之多线程模型

码哥比特

c c++ Linux 后端 框架

春节快过腻了?不妨关心下太空探索

脑极体

2.react心智模型(来来来,让大脑有react思维吧)

全栈潇晨

React React Hooks react源码

给hugo博客添加评论功能

远鹏

Hugo 静态博客 utterances

EternalWallet为您提供快速、便捷、低价的国际汇款服务

Geek_c610c0

3.Fiber(我是在内存中的dom)

全栈潇晨

React React Hooks react源码

诊所数字化:诊所老板为什么拒绝预约制?

boshi

数字化转型 医院 七日更

C语言第三方库Melon开箱即用之词法分析器使用

码哥比特

c c++ Linux 后端 框架

1.开篇(听说你还在艰难的啃react源码)

全栈潇晨

React React Hooks react源码

13. 如果自己写的 Python 程序出错了,怎么办?

梦想橡皮擦

python 爬虫 2月春节不断更

程序员成长第五篇:如何选择城市工作?

石云升

程序员 2月春节不断更 选择城市

第四章作业-编写一个用例文档

秦挺

【活动回顾】4步2小时,搭建爆火的语音聊天室

ZEGO即构

消息队列Kafka:入门基础

正向成长

kafka

揭秘登上2021春晚舞台的黑科技-XR技术

架构精进之路

黑科技 vr 春晚 XR MR

这是我的第一次JavaScript初级技巧

我是哪吒

JavaScript 学习 程序员 大前端 2月春节不断更

基于React-Native0.55.4的语音识别项目全栈方案_文化 & 方法_华为云产品与解决方案_InfoQ精选文章