react native 集成人脸识别 --android-阿里云开发者社区

react native 集成人脸识别 --android

2018-07-19 2140

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

看下效果图：

初始页面

原谅我的脸比较大，相框都放不下

检测成功的activity

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

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

这个是如何把libs生成jniLibs

sourceSets {
        main {
            jniLibs.srcDirs = ['libs']
        }
    }

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

demo中的activity

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

注册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同级目录，然后名字任意取，记得包名要和名字一致。

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中实例化一下。（记得导包）

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

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>
    );
  }

控制台打印如下：