您现在的位置是:首页 > 文章详情

react native 集成人脸识别 --android

日期:2018-07-18点击:420

最近的项目中要做身份认证,其中就包括人脸识别,用的第三方sdk是同盾的,这个是企业谈好的,咱们也只能去按照文档,一步一步去集成,其实也不难,总结起来就是: 在原生中写个方法给RN调用,这个方法就是跳转官网写好的activity,然后识别成功在回调里,把获取的base64图片发消息给RN,RN这边通过监听获得,原生发来的消息。 emmm ,很简单吧。

看下效果图:


img_201ac69b4aff075c95fcc6e717effe5a.png
初始页面
img_c8181e72c79d861d57ff76c116db8880.png
原谅我的脸比较大,相框都放不下

img_9cc56d0bbaab452850953b2a329aab08.png
检测成功的activity

总体分两部分:
第一部分 :sdk的集成
第二部分:Android 和RN 的交互

第一部分:
在工程中导入libs
把demo中的libs文件拷贝到工程APP 目录下
切换到 project可查看到 libs目录,
然后配置libs 生成so文件:


img_ab6ba1d0023264baa9289b867fdfad6d.png
这个是如何把libs生成jniLibs
sourceSets { main { jniLibs.srcDirs = ['libs'] } } 

包导入成功之后
拷贝res文件到 src的main下 这里主要是用人脸识别的图片等资源。
res 目录,覆盖到工程项目的同名目录上,一般情况下这两个目录在 project/app/src/main/
然后新建 第三方页面 把sdk的demo的activity拷贝到工程中。
目录如下:


img_10ecf723dc648eb6c8489c939710e1ef.png
demo中的activity

这里拷贝之后,然后配置 manifests下的 AndroidManifest.xml文件 这里主要是注册 前面的三个activity 还有就是开启 相应的权限


img_fc801673a6fca0d0bf5559abcaec2170.png
注册activity以及加权限
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> <!--同盾添加权限--> <uses-permission android:name="android.permission.READ_PHONE_STATE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.VIBRATE"/> <uses-feature android:name="android.hardware.camera"/> <uses-feature android:name="android.hardware.camera.autofocus"/> <!--开始检测页面--> <activity android:name="com.tongduntest.cn.tongdun.android.liveness.SampleStartActivity" /> <!--检测页面--> <activity android:name="com.tongduntest.cn.tongdun.android.liveness.LivenessDetectActivity" /> <!--检测结果页面--> <activity android:name="com.tongduntest.cn.tongdun.android.liveness.SampleResultActivity" /> 

这里要注意的是 :注册activity的时候 一定要写在 application 里
然后更改 proguard 混淆

 -dontwarn com.oliveapp.** -keepattributes InnerClasses -keep class **.R$* {*;} 

到这里 sdk算是集成了,然后我们开始写 android 和RN的交互

第二部分:Android 和RN 的交互

新建一个文件夹 这个文件夹 和MainApplication同级目录,然后名字任意取,记得包名要和名字一致。


img_000d7b0ac87e5ae3d0c12e3e0b9583db.png
image.png

module代码:

package com.tongduntest.tongdun; /** * Created by Sean on 2017/3/29. */ import android.app.Activity; import android.content.Context; import android.content.Intent; import android.net.Uri; import android.os.Build; import android.provider.Settings; import com.facebook.react.bridge.ActivityEventListener; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; import com.oliveapp.face.livenessdetectorsdk.livenessdetector.datatype.LivenessDetectionFrames; import com.tongduntest.MainActivity; import com.tongduntest.cn.tongdun.android.liveness.LivenessDetectActivity; import com.tongduntest.cn.tongdun.android.liveness.SampleResultActivity; import com.tongduntest.cn.tongdun.android.liveness.view_controller.LivenessDetectionMainActivity; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.widget.Toast; import android.os.Handler; import android.os.Bundle; import com.oliveapp.face.livenessdetectorsdk.livenessdetector.datatype.LivenessDetectionFrames; import com.tongduntest.cn.tongdun.android.liveness.view_controller.LivenessDetectionMainActivity; public class TongdunModule extends ReactContextBaseJavaModule { public TongdunModule(ReactApplicationContext reactContext) { super(reactContext); } ReactContextBaseJavaModule getCurrentActivity ; @Override public String getName() { return "tongdun"; //暴露给RN 的模块调用 } @ReactMethod public void startTongdun(){ //跳转人脸识别activity //这里 我们跳转activity的时候 要这样写 注意路径不要错 Activity currentActivity = getCurrentActivity(); Intent intent = new Intent(currentActivity, com.tongduntest.cn.tongdun.android.liveness.SampleStartActivity.class); currentActivity.startActivity(intent); } } 

ReactPackage代码:

package com.tongduntest.tongdun; /** * Created by Sean on 2017/3/29. */ import com.facebook.react.ReactPackage; import com.facebook.react.bridge.JavaScriptModule; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; import com.tongduntest.tongdun.TongdunModule; import java.util.ArrayList; import java.util.Collections; import java.util.List; public class TongdunReactPackage implements ReactPackage { public List<Class<? extends JavaScriptModule>> createJSModules() { return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } @Override public List<NativeModule> createNativeModules( ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); modules.add(new TongdunModule(reactContext)); return modules; } } 

到这里之后 然后就是到 MainApplication中实例化一下。(记得导包)


img_46e404a69fb6b0685ca607f2c8a62768.png
image.png

然后测试了下 RN 这边已经能够打开 人脸识别:不过进入的时候会出现闪退,这时候要改下 build.gradle文件

dependencies { compile fileTree(dir: "libs", include: ["*.jar"]) testCompile 'junit:junit:4.12' compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules } buildTypes { release { minifyEnabled false //minifyEnabled主要用来控制是否运行混淆的。 proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" } } 

更改过之后 重新rebuild 跑起来了
最后就是 写成功后的回调 把 抓取到的图片给 RN ,告诉RN 成功或失败了
在回调方法里写:
新建一个交互类:

/** * @param reactContext * @param eventName 事件名 * @param params 传惨 */ public void senMsgToRN(ReactContext reactContext, String eventName, @Nullable WritableMap params) { reactContext .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class) .emit(eventName, params); } 

然后发消息给RN

//发消息给RN 成功 //定义上下文对象 MainApplication mainApplication = (MainApplication)getApplication(); ReactContext reactContext = mainApplication.mReactNativeHost.getReactInstanceManager().getCurrentReactContext(); WritableMap writableMap = new WritableNativeMap(); writableMap.putString("key", "success"); writableMap.putString("base64Data", base64Data); senMsgToRN(reactContext, "EventName", writableMap); 

注意: 如果这个 mReactNativeHost 方法报红的话 把 MainApplication中的这个私有的方法改成public

img_802c16ea46d4700fc2c478091713244d.png
image.png

很简单吧,到这里
Android 端集成 给RN发消息也写好了,接下来就是js这边的监听,

 componentWillMount() { Platform.OS === "android" ? DeviceEventEmitter.addListener('EventName', function (msg) { console.log("androidmsg:" + JSON.stringify(msg)); }) : null } 

调用原生模块

 render() { return ( <View style={styles.container}> <TouchableOpacity onPress={() => { NativeModules.tongdun.startTongdun() }}> <Text style={styles.welcome}> go to tongdun </Text> </TouchableOpacity> <Text style={styles.instructions}> To get started, edit index.android.js </Text> <Text style={styles.instructions}> Double tap R on your keyboard to reload,{'\n'} Shake or press menu button for dev menu </Text> </View> ); } 

控制台打印如下:


img_3fac94e346d4ccd7818ac5d6c41555dd.png
image.png

img_2d5216c3af7e2cf0ea0d5ecbc6566ade.png
image.png

这样获得base64图片字符串后 接下来的事情就交给RN 进行https post请求 进行人像对比了。
最后成功之后不要忘记销毁activity 方法: finish() 关闭当前页面。

ios集成请参考react native 集成人脸识别 --ios

原文链接:https://yq.aliyun.com/articles/639135
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章