百度云实现人脸识别（React）

识别代码前两部跟上传一样，最后一步上传换成识别接口

百度云链接
上传效果

上传代码

import './ai.scss'
import { useLayoutEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { baidu } from '../../api/common.api'
import { Camera } from '@tarojs/components'

export default function Ai() {
  const [baidutoken, setbaidutoken] = useState('')

  //拍照
  const takePhoto = (e) => {
    e.stopPropagation()
    //拍照
    Taro.showToast({
      title: '开始拍照',
    })
    const ctx = Taro.createCameraContext()
    if (ctx) {
    }
    ctx.takePhoto({
      quality: 'high',
      success: res => {
        //图片base64编码
        Taro.getFileSystemManager().readFile({
          filePath: res.tempImagePath, //选择图片返回的相对路径
          encoding: 'base64', //编码格式
          success: res => {
            //成功的回调
            console.log(res, 'rers111')
            uploadPhoto(res)
          },
        })
      }, //拍照成功结束
      fail: () => {
        Taro.hideToast()
        Taro.showToast({
          title: '拍照失败',
        })
      },
    }) //调用相机结束
  }

  const getBaiduToken = () => {
    //acess_token获取,qs:需要多次尝试
    baidu()
      .then(res => {
        setbaidutoken(
          res.data.access_token //获取到token
        )
      })
      .catch(err => {
        Taro.showToast({
          title: '报错',
        })
      })
  }

  const uploadPhoto = res => {
    console.log('开始上传')
    //上传人脸进行注册-----test
    Taro.hideToast()
    Taro.showToast({
      title: '开始上传',
    })
    Taro.request({
      url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + baidutoken,
      method: 'POST',
      data: {
        liveness_control: 'HIGH',
        quality_control: 'HIGH',
        face_sort_type: '1',
        image: res.data,
        image_type: 'BASE64',
        group_id: 'yanglin', //自己建的用户组id
        user_id: 'yl', //这里获取用户昵称
      },
      header: {
        'Content-Type': 'application/json', // 默认值
      },
    })
      .then(res => {
        console.log('上传结果')
        console.log(res, 11111111111111111)
        //做成功判断
        Taro.hideToast()
        toast(res)
      })
      .catch(err => {
        console.log('上传失败')
      })
  }

  const toast = res => {
    let message = '检测失败，请重新上传'
    const code = res.data.error_msg
    switch (code) {
      case 'SUCCESS':
        message = '上传成功'
        break
      case 'pic not has face':
        message = '未捕获到人脸'
        break
      case 'liveness check fail':
        message = '活体检测失败'
        break
      case 'incomplete face':
        message = '人脸不完整'
        break
      case 'face light is not good':
        message = '人脸光照不好'
        break
      case 'pic not has face':
        message = '未捕获到人脸'
        break
      case 'face is fuzzy':
        message = '人脸模糊'
        break
      case 'face is covered':
        message = '人脸有被遮挡'
        break
      case 'mouth is occlusion':
        message = '嘴巴遮挡程度过高'
        break
      case 'right cheek isocclusion':
        message = '右脸遮挡程度过高'
        break
      case 'nose is occlusion':
        message = '右脸遮挡程度过高'
        break
      case 'left cheek is occlusion':
        message = '左脸遮挡程度过高'
        break
      case 'right eye is occlusion':
        message = '右眼遮挡程度过高'
        break
      case 'left eye is occlusion':
        message = '左眼遮挡程度过高'
        break
      case 'left eye is occlusion':
        message = '左眼遮挡程度过高'
        break
      default:
        break
    }

    Taro.showToast({
      title: message,
    })
  }
  useLayoutEffect(() => {
    getBaiduToken()
  }, [])

  return (
    <view className="camera-box">
      <Camera
        devicePosition="front"
        flash="off"
        className="camera"
        onError={() => {
          Taro.showToast({
            title: '拒绝授权',
            icon: 'none',
          })
          Taro.navigateBack()
        }}
      ></Camera>
      <view className="face-box" onClick={takePhoto}>
        <view className="face" type="primary">
          {' '}
          人脸录入{' '}
        </view>
      </view>
    </view>
  )
}

API请求

export async function  baidu (data) {
  return $post(`https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_secret=xxxxxxxxxxx&client_id=xxxxxxxxxxxxxxxxxxxxxxx`, {
    data
  })
}

识别代码

<view class="camera-box">
  <camera device-position="front" flash="off" binderror="error" class="camera"></camera>
  <view class="face-box">
    <button class="face" type="primary" bindtap="takePhoto"> 人脸识别 </button>
  </view>
</view>

 validPhoto() {
    var that = this;
    //上传人脸进行 比对
    Taro.request({
      url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + baidutoken,
      method: 'POST',
      data: {
        image: base64,
        image_type: 'BASE64',
        group_id_list: 'yanglin', //自己建的用户组id
      },
      header: {
        'Content-Type': 'application/json' // 默认值
      },
      success(res) {
        //做成功判断
        if (.data.msg == "pic not has face") {
          Taro.showToast({
            title: '未捕获到人脸',
            icon: 'error',
          })
        }
        if (res.data.msg == 'SUCCESS') {
          if(res.data.result.user_list[0].score>80){
            Taro.showToast({
              title: '人脸识别成功',
              icon: 'success',
            })
          }else{
            Taro.showToast({
              title: '人脸识别失败',
              icon: 'error',
            })
          }
        }
      }
    });
  }