基于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