注册之后,进行企业认证,这项功能需要企业认证才开放的。
在这里插入图片描述 )

2、创建应用

登录之后找到人脸识别模块,然后创建应用
在这里插入图片描述
创建应用之后,会生成AppID 、API Key 等信息,这些后续在Android版本会用后
在这里插入图片描述
点击下载SDK,先点击Android
在这里插入图片描述 )

3、新建授权

3.1 iOS包名填写:

iOS包名请填写苹果开发者中心的bundle ID
在这里插入图片描述 )

3.2 安卓包名

如果不知道可以自己查看:
在这里插入图片描述

3.3 安卓签名MD5

参考图示百度AI里面的的 文档 生成即可

如果原先已经生成了.keystore 签名文件,那就直接用这个签名查看MD5 值即可。
如何查看MD5 :命令行输入 keytool –list –v –keystore <签名文件路径>

我这里是按照文档生成了一个coach.jks 签名文件
在这里插入图片描述

2、Android 的配置( 切记用Android studio 来配置!!!)

Android 的配置流程可以看百度AI的文档: 安卓-有动作活体版文档

下面的Android 配置记得一定要使用Android studio 来配置,或者配置完了用Android studio 跑一下。

部分图示我就直接从百度AI粘贴过来了(图示包名啥的对不上别纠结)

2.1、下载 license,拷贝到工程的assets目录。

2.2 、导入人脸识别封装模块

react-native-baidu-face 项目里的baiduface文件夹拖到项目包名目录下(例如: com.xxx
在这里插入图片描述 )

修改Config类,配置对应apiKey、secretKey、licenseID、licenseFileName(默认是idl-license.face-android)
apiKey、secretKey就是前面申请应用拿到的。
在这里插入图片描述
在这里插入图片描述

2.3 配置打包签名文件

新建授权的时候我生成了一个签名文件coach.jks ,并且填入了该签名文件的 MD5

由于SDK运行时会校验签名文件的MD5是否和申请时填入一样。

为了便于debug能正常使用SDK,需要配置打包签名文件。

  • keystore签名文件放到android/app根目录下
  • 在gradle.properties文件下增加常量标识

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias // 改为对应名称
MYAPP_RELEASE_STORE_PASSWORD=123456 // 改为对应密码
MYAPP_RELEASE_KEY_PASSWORD=123456 // 改为对应密码
在这里插入图片描述 )

  • android > app > build.gradle 下面添加(修改)signingConfigs相关的配置
	android {
   …………省略其他配置
       signingConfigs {
           debug {
               storeFile file(MYAPP_RELEASE_STORE_FILE)
               storePassword MYAPP_RELEASE_STORE_PASSWORD
               keyAlias MYAPP_RELEASE_KEY_ALIAS
               keyPassword MYAPP_RELEASE_KEY_PASSWORD
   	        release {
   	            storeFile file(MYAPP_RELEASE_STORE_FILE)
   	            storePassword MYAPP_RELEASE_STORE_PASSWORD
   	            keyAlias MYAPP_RELEASE_KEY_ALIAS
   	            keyPassword MYAPP_RELEASE_KEY_PASSWORD
   	    buildTypes {
   	        release {
   	            minifyEnabled enableProguardInReleaseBuilds
   	            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
   	            signingConfig signingConfigs.release
   	            debuggable false
   	            jniDebuggable false

2.4、下载安卓SDK并添加到工程

将下载下来的安卓SDK包中的faceplatform库、faceplatform-ui库Copy 到工程根目录。
(faceplatform-ui库把活体检测和人脸图像采集功能等功能进行了封装,适配了主流机型机型。)
在这里插入图片描述
faceplatform库里面的build.gradle的dependencies修改一下,不然后面会报错在这里插入图片描述

2.5 、在build.gradle使用compile project引人faceplatform-ui库工程。

2.6、Setting.gradle中include faceplatfrom-ui和facepaltfrom

2.7、在AndroidManifest.xml文件的标签下配置权限,Feature 声明:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<!-- 权限级别: dangerous -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- 权限级别: normal -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.hardware.camera.autofocus" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<!-- 需要使用Feature -->
<uses-feature
    android:name="android.hardware.camera"
    android:required="false" />
<uses-feature
    android:name="android.hardware.camera.front"
    android:required="false" />
<uses-feature
    android:name="android.hardware.camera.autofocus"
    android:required="false" />
<uses-feature
    android:name="android.hardware.camera.flash"
    android:required="false" />
<Application>标签下配置采界面:
<!-- 活体图像采集界面 -->
<activity
    android:name="com.facetest.baiduface.faceactivity.FaceLivenessExpActivity"
    android:hardwareAccelerated="true"
    android:launchMode="singleTop"
    android:screenOrientation="portrait"
    android:theme="@style/Theme_NoTitle" />
<!-- 人脸跟踪采集界面 -->
<activity
    android:name="com.facetest.baiduface.faceactivity.FaceDetectExpActivity"
    android:hardwareAccelerated="true"
    android:launchMode="singleTop"
    android:screenOrientation="portrait"
    android:theme="@style/Theme_NoTitle" />

2.8、替换xml文件

以下xml文件,从react-native-baidu-face项目或者下载下来的安装SDK工程取都可以

  • react-native-baidu-face项目里的android/app/src/main/res/values/styles.xml 文件替换自己工程的styles.xml

  • react-native-baidu-face项目里的android/app/src/main/res/layout/widget_face_dialog.xml、activity_settings.xml 复制到自己工程 layout 文件夹下

2.9、配置MainApplication.java

package com.facetest;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.facetest.baiduface.module.BaiduFacePackage;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
  private static MainApplication mainApplication;
  private static final BaiduFacePackage baiduFacePackage = new BaiduFacePackage(); // 创建package实例
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          baiduFacePackage //注册 package
    @Override
    protected String getJSMainModuleName() {
      return "index";
  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  @Override
  public void onCreate() {
    super.onCreate();
    mainApplication = this;
    SoLoader.init(this, /* native exopackage */ false);
  public static Application getApplication() {
    return mainApplication;
   * 获取人脸识别package实例
  public static BaiduFacePackage getBaiduFacePackage() {
    return baiduFacePackage;

3、 React Native 使用

1.引入平台module

const FaceCheckHelper = Platform.select({
    android: ()=> NativeModules.PushFaceViewControllerModule,
    ios: ()=> NativeModules.RNIOSExportJsToReact
})();
const NativeModule = new NativeEventEmitter(FaceCheckHelper);

2. 启动采集界面

 let obj = {
            //质量校验设置
            'quality':{
                'minFaceSize' : 200,// 设置最小检测人脸阈值 默认是200
                'cropFaceSizeWidth' : 400,// 设置截取人脸图片大小 默认是 400
                'occluThreshold' : 0.5,// 设置人脸遮挡阀值 默认是 0.5
                'illumThreshold' : 40,// 设置亮度阀值 默认是 40
                'blurThreshold' : 0.7,// 设置图像模糊阀值 默认是 0.7
                'EulurAngleThrPitch' : 10,// 设置头部姿态角度 默认是 10
                'EulurAngleThrYaw' : 10,// 设置头部姿态角度 默认是 10
                'EulurAngleThrRoll' : 10,// 设置头部姿态角度 默认是 10
                'isCheckQuality' : true,// 设置是否进行人脸图片质量检测 默认是 true
                'conditionTimeout' : 10,// 设置超时时间 默认是 10
                'notFaceThreshold' : 0.6,// 设置人脸检测精度阀值 默认是0.6
                'maxCropImageNum' : 1,// 设置照片采集张数 默认是 1
            'liveActionArray' :[
                0, //眨眨眼
                1, //张张嘴
                2, //向右摇头
                3, //向左摇头
                4, //抬头
                5, //低头
                6, //摇头
            ], //活体动作列表
            'order': true,//是否按顺序进行活体动作
            'sound': true, // 提示音,默认不开启
        // FaceCheckHelper.openPushFaceViewController( obj );
        // 如果都不设置,需要传 {} 空对象, 建议设置 liveActionArray
        FaceCheckHelper.openPushFaceViewController( {} );

3. 注册监听,接收采集结果(收集结果为base64图片格式)

componentDidMount() {
   NativeModule.addListener('FaceCheckHelper', (data) => this.faceCheckCallback(data));
* 人脸检测结果
faceCheckCallback(data) {
	this.setState({
		text: Object.keys(data)
	if (data.remindCode == 0){
	    let imagesArray = [];
	    let imagesName = Object.keys(data.images); // bestImage liveEye liveYaw liveMouth yawRight yawLeft pitchUp pitchDown
	     imagesName.map((info,index) =>{
		imagesArray.push(
		    <View key={index} style={{margin:50}}>
			<Image
			    style={{width:180, height: 320, backgroundColor:'red'}}
			    source={{uri:'data:image/jpg;base64,'+ data.images[info]}}/>
			<Text>{info}</Text>
		    </View>
	    this.setState({imagesArray})
	} else if (data.remindCode == 36) {
	    alert('采集超时');

如果遇到打开了人脸识别界面,无反应,或者Android studio log 报如下错误:

“err_msg”:“wrong match of appkey/packedge_name/signature_md5”

可以检查一下它提示的这几个信息是否填入有误。

如果确定信息无误还是不行,Android Studio > Build > Clean Project 清除一下

我就被这坑了好久

iOS版本接入请看下一篇文章

https://github.com/songxiaoliang/react-native-baidu-face业务需求场景: 利用百度AI进行活体检测1、注册百度AI开放平台账号注册地址:百度AI开放平台注册之后,进行企业认证,这项功能需要企业认证才开放的。2、创建应用登录之后找到人脸识别模块,然后创建应用创建应用之后,会生成AppID 、API Key 等信息,这些后续在An... react-native-baidu-face,先把该项目clone 下来 react native 接入百度AI活体检测人脸识别 Android版本 1、准备工作 注册百度AI账号:百度AI开放平台 注册完后进行企业认证,个人账号无法使用 2、创建应用 创建应用成功后后,会生成AppID 、API Key 等信息,这些信息后续在配置Android时会用到 3、新建授权 授权标示:自定义填写 场景类型: &lt;div&gt; &lt;div class="face"&gt; &lt;audio id="audio" ref="audioPlay" :src="videoImg ? faceStep[currentStep].voice : ''" loop autoplay&gt;
您是否是一名混合应用程序开发人员,希望将面部检测纳入您的应用程序,但您不知道从哪里开始呢? 首先,您可以阅读Android上的人脸检测简介 ,向您展示如何在Android上本地实现人脸检测。 但是,如果您像我一样,并且不想编写Java代码来创建为您执行此操作的React Native模块,那么您来对地方了。 在本教程中,我们将研究人脸检测API ,它是Microsoft Cognitive...
1、生成密钥 在cmd里面输入 keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 具体步骤如下: 生成的key在: 2、设置gradle变量: 把my-release-key.keystore文件放到你工程中的an...
by Kelsey Wang 王凯西 如何使用React Native和现成的AI创建“时尚警察” (How to create a “fashion police” with React Native and off-the-shelf AI) Imagine you’ve just stumbled into a Nordstrom at your local mall, lost in ...
网关指南: https://help.aliyun.com/document_detail/29487.html?spm=5176.doc48835.6.550.23Oqbl 网关控制台: https://apigateway.console.aliyun.com/?spm=5176.doc42740.2.2.Q4z5ws#/cn-hangzhou/apis/list 一、如何获取错误信息 所有...
微信移动应用审核通过,集成微信后调用微信分享功能,出现异常,出现 [pool-13-thread-1(2966): null:-1] - Server response error code:404, error:{"ret":-1, "msg":"invalid appkey"}。 输出type:2 errCode:-6。 原因是应用签名错误,正确的应该是填入 MD5 fingerprint...
2、把用xcode 把FaceSDK导入到iOS项目 3、确认下Bundle Identifier 是否是申请license时填报的那一个 (注意:license和Bundle Identifier是一一对应关系,填错了会导致SDK不能用) 3、把6个文件导入iOS包名
作为一个只会做前端的开发,做一些普通的开发还好说,每次react-natve碰到需要集成别的插件就非常头疼。最近公司考勤会议签到想弄点新花头,要求人脸考勤签到,下面是我在使用react-native-camera做人脸采集时候遇到的一些坑。 首先看官方文档github上面react-native-camera的官方文档部署开发环境: https://github.com/react-nativ...