react-native人脸识别采坑之旅--人脸采集

作为一个只会做前端的开发，做一些普通的开发还好说，每次react-native碰到需要集成别的插件就非常头疼。最近公司考勤会议签到想弄点新花头，要求人脸考勤签到，下面是我在使用react-native-camera做人脸采集时候遇到的一些坑。

首先看官方文档github上面react-native-camera的官方文档部署开发环境：

GitHub - react-native-camera/react-native-camera: A Camera component for React Native. Also supports barcode scanning!

我配置的开发的环境如下：

1.Android Studio 3.0.1
2.react-native 0.57.4
3.react-native-camera 1.4.1
4.模拟器采用Genymotion Google Pixel2- 8.0 -API26

核心代码：

这是官方给出的示例代码，复制上去就可以了，以下我粘贴了一小部分：

       {
          this.camera = ref;
        }}
        style={{
          flex: 1,
        }}
        type={this.state.type}
        flashMode={this.state.flash}
        autoFocus={this.state.autoFocus}
        zoom={this.state.zoom}
        whiteBalance={this.state.whiteBalance}
        ratio={this.state.ratio}
        faceDetectionLandmarks={RNCamera.Constants.FaceDetection.Landmarks.all}
        onFacesDetected={this.onFacesDetected}
        onFaceDetectionError={this.onFaceDetectionError}
        onTextRecognized={(d) => {
           console.log('onTextRecognized', d.textBlocks.map(e => e.value));
        }}
        //focusDepth={this.state.depth}
        permissionDialogTitle={'Permission to use camera'}
        permissionDialogMessage={'We need your permission to use your camera phone'}
      >

      

  onFacesDetected = ({ faces }) => this.setState({ faces });
  onFaceDetectionError = state => console.warn('Faces detection error:', state);

Landmarks 

Face API 可以识别面部特征。

onFacesDetected方法返回的faces包含以下信息：

{
"bottomMouthPosition":{"y":476.8552943638393,"x":229.5662841796875},
"leftEyePosition":{"y":265.12337085178916,"x":284.55173165457586},
"rollAngle":356.2725713253021,
"rightCheekPosition":{"y":356.14336922055196,"x":147.53715297154017},
"yawAngle":0,
"rightEyePosition":{"y":274.54270371936616,"x":162.43976702008928},
"noseBasePosition":{"y":367.66914994376043,"x":222.42982700892856},
"bounds":{"size":{"height":526.1763158525739,"width":355.5161917550223},
"origin":{"y":-2.451317832583473,"x":47.15720476422991}},
"leftCheekPosition":{"y":350.428562436785,"x":300.59786551339283},
"leftMouthPosition":{"y":436.3958052680606,"x":284.8529401506696},
"faceID":0,
"rightMouthPosition":{"y":442.1544989631289,"x":172.94622802734375}
}

效果图

根据faces坐标点信息绘制的相框，相框中的红色点是对应的人脸的眼睛，鼻子，嘴巴的位置，可以根据自己喜好绘制一些别的图案上去

角度

Face API 提供另一个数据：欧拉角。

“欧拉”一词及发音来自于数学家 Leonhard Euler，它用于描述侦测的脸的方向。这个 API 使用 x、y、z 坐标系：

并报告每张脸的下列欧拉角。

1.欧拉 y 角，沿 y 轴进行旋转的角度。当你摇头表示说 no 的时候，你让你的头沿 y 轴来回旋转。只有 face detector 被设置为 ACCURATE_MODE 的时候才能检测出这个角度。

2.欧拉 z 角，沿 z 轴进行旋转的角度。当你将头从一边歪到另一边的时候，你的头就在沿 z 轴来回旋转。

错误预防

模拟器如果你没有装Google Play 那人脸识别会一直报错Faces detection error:可以按照下面文章操作：

https://docs.genymotion.com/latest/Content/03_Virtual_Devices/Emulating_sensors_and_features/OpenGApps.htm?Highlight=google%20play

参考文献

com.google.android.gms.vision.face：

com.google.android.gms.vision.face  |  Google Play services  |  Google Developers

Android Google Face API 增强现实教程:

Android Google Face API 增强现实教程_kmyhy的专栏-CSDN博客