react-native人臉識別採坑之旅--人臉採集

作爲一個只會做前端的開發，做一些普通的開發還好說，每次react-native碰到需要集成別的插件就非常頭疼。最近公司考勤會議簽到想弄點新花頭，要求人臉考勤簽到，下面是我在使用react-native-camera做人臉採集時候遇到的一些坑。

首先看官方文檔github上面react-native-camera的官方文檔部署開發環境：

https://github.com/react-native-community/react-native-camera

我配置的開發的環境如下：

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

核心代碼：

這是官方給出的示例代碼，複製上去就可以了，以下我粘貼了一小部分：

      <RNCamera
        ref={ref => {
          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'}
      >

      </RNCamera>

  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：

https://developers.google.cn/android/reference/com/google/android/gms/vision/face/package-summary

Android Google Face API 增強現實教程:

https://blog.csdn.net/kmyhy/article/details/77994011