uniapp人脸识别,小程序(采用百度云人脸识别)

百度人脸识别流程:api地址

1. 百度智慧云人脸识别创建应用
2. 获取百度access_token
3. 携带access_token进行人脸检测或添加人脸库
4. 检测成功后再调用后端接口

---

1.百度智慧云设置

百度智慧云网址https://cloud.baidu.com/product/face        

2.html代码

<template>
  <view class="p-30">
    <view class="flex items-center justify-center  pt-50">
      <camera class="camera-class" device-position="front" flash="off"
              @error="error"></camera>
    </view>
    <view class="flex items-center justify-center flex-col pt-50">
      <view class="pb-20">1.正对手机</view>
      <view class="pb-20">2.光线充足</view>
      <view class="pb-20">3.放慢动作</view>
    </view>
    <xxz-button text="开始检测" @ok="takePhoto"></xxz-button>
  </view>
</template>

<style lang="scss" scoped>
.camera-class {
  width: 550rpx;
  height: 650rpx;
  border-radius: 50%;
}
</style>

效果图

3.js代码

<script lang="ts" setup>
import {ref} from 'vue';
import {xxzErrorToast, xxzSuccessToast} from "@/components/xxzComponents/xxz-toast/xxzHookToast";
import {xxzUtilsImgToBase64} from "@/utils/XxzUtils";
import {postAction} from "@/utils/request";
import config from "@/config";
import userInfoStore from "@/stores/modules/userInfo";

/**
 * error
 * 用户不允许使用摄像头时触发
 */
const error = () => {
  xxzErrorToast('请打开摄像头权限')
}

/**
 * 点击拍照
 */
const base64 = ref('')
const accessToken = ref('')
const takePhoto = () => {
  const ctx = uni.createCameraContext();
  ctx.takePhoto({
    quality: 'high',
    success: (res) => {
      //将图片路径转成base64格式
      /**
       * 图片转base64工具
       * @param imgPath
       */
      // export function xxzUtilsImgToBase64(imgPath: string): any {
      //   return new Promise((resolve, reject) => {
      //     const fileSystemManager = uni.getFileSystemManager();
      //     fileSystemManager.readFile({
      //       filePath: imgPath,
      //       encoding: 'base64',
      //       success: res => resolve(res.data),
      //       fail: err => reject(err)
      //     });
      //   });
      // }
      console.log(res)
      xxzUtilsImgToBase64(res.tempImagePath).then(res1 => {
        base64.value = res1
      })
      getBaiduToken()
    }
  });
}

/**
 * 获取百度access_token
 */
const getBaiduToken = () => {
  uni.request({
    url: 'https://aip.baidubce.com/oauth/2.0/token', //是真实的接口地址
    data: {
      grant_type: 'client_credentials',
      client_id: config.bdFaceAPIKey, //用你创建的应用的API Key
      client_secret: config.bdFaceSecretKey //用你创建的应用的Secret Key
    },
    header: {
      'Content-Type': 'application/json' // 默认值
    },
    success(res) {
      accessToken.value = res.data.access_token
      uploadPhoto();
      addFaceToBaidu()
    }
  })
}

/**
 * 检测是否为人脸,真人
 */
const uploadPhoto = () => {
  uni.request({
    url: 'https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=' + accessToken.value,
    method: 'POST',
    data: {
      image: base64.value,
      image_type: 'BASE64',
      face_type: 'LIVE',
      liveness_control: 'NORMAL'
    },
    header: {
      'Content-Type': 'application/json' // 默认值
    },
    success(res) {
      console.log('是否成功', res.data.error_msg)
      if (res.data.error_msg !== 'SUCCESS') return xxzErrorToast(res.data.error_msg)
      postAction('/user/faceAuth', {
        faceStr: base64.value
      }, {
        'Content-Type': 'application/x-www-form-urlencoded'
      }).then(res1 => {
        if (res1.errCode == '0') {
          xxzSuccessToast(res1.message)
          userInfoStore().userInfo = res1.data
          setTimeout(() => {
            uni.switchTab({
              url: '/tabbar/home/index'
            })
          }, 1500)
        }
      })
    }
  })
}

/**
 * 添加人脸库
 */
const addFaceToBaidu = () => {
  uni.request({
    url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + accessToken.value,
    method: 'POST',
    data: {
      image: base64.value,
      image_type: 'BASE64',
      user_id: 'test',
      group_id: 'test_group'
    },
    header: {
      'Content-Type': 'application/json' // 默认值
    },
    success(res) {
      console.log('是否成功', res.data.error_msg)
      setTimeout(() => {
        // xxzSuccessToast('你很帅!')
      }, 1500)
    }
  })
}

</script>