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

原创

搬砖狗_小强 2022-03-02 17:29:59 博主文章分类：Web前端 ©著作权

文章标签 人脸识别 react-native-camera 增强现实 react-native android 文章分类 计算机视觉人工智能

©著作权归作者所有：来自51CTO博客作者搬砖狗_小强的原创作品，请联系作者获取转载授权，否则将追究法律责任

作为一个只会做前端的开发，做一些普通的开发还好说，每次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

核心代码：

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

<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 可以识别面部特征。

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

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