koa+vue+百度云实现人脸识别

百度智能云

1、先去百度智能云注册一个百度智能云账号

2、创建人脸识别应用

进入页面后,在侧边栏选择人脸识别,在应用列表中创建一个新的应用,填写【应用名称】和【应用描述】,其他的使用默认值就可以了

 

3、获取秘钥

应用创建成功后,记录下自己的API Key、Secret Key

koa 后端

1.app.ts配置跨域和引入koa

import Koa from 'koa';
import Cors from 'koa2-cors';
import { corsHandler } from './middleware/cors';
import koaBody from 'koa-body';
import router from './router/packaging/index';

const app = new Koa();

// 处理静态资源
// app.use(Static(path.join(__dirname,'./public/img')));

// 跨域请求
// console.log(router);
app.use(Cors(corsHandler));

app.use(koaBody());

// 传递到 中间件里面
app.use(router.routes()).use(router.allowedMethods());

const PORT = 4001;
app.listen(PORT,()=>{
  console.log(`http://localhost:${PORT},已启动`);
});

2.获取Access Token的接口

// 人脸识别 获取Acess Token
export const getToken = async (ctx: any) => {
  console.log('----我是人脸识别接口');
  const param = qs.stringify({
    'grant_type': 'client_credentials',
    'client_id': '百度云应用id',
    'client_secret': '百度云应用秘钥'
  });
  const axs = await axios.post('https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=iZnI34PU6myzxi1sDYQrI6Fp&client_secret=uWL8ufxX8bz2Zus2r60tlQUXBsu9PtdG&', param);
  // console.log(axs);
  ctx.body = axs.data;

};

3.人脸比对

export const checkFace = async (ctx: any) => {
  // console.log(ctx.request.body);
  // 请求接口
  const url = 'https://aip.baidubce.com/rest/2.0/face/v3/match?access_token=' + ctx.request.body.access_token;
  // 请求的图片数据
  console.log('woshi');
  // 请求数据
  // const data = {
  //   image_type: 'BASE64',
  //   image: ctx.request.body.img,
  //   // group_id_list: 'test_add', // 之前注册人脸管理库的名字
  //   // liveness_control: 'HIGH'     // 活体监测
  // };
  const dir = path.join(__dirname, ctx.request.body.urls[0].urls);
  console.log(dir);
  const base64 = fs.readFileSync(dir, 'base64'); // 文件流并转 base64
  console.log();
  const data = [
    {
      "image": ctx.request.body.img,
      "image_type": "BASE64",
      "face_type": "LIVE",
      "quality_control": "LOW",
      "liveness_control": "HIGH"
    },
    {
      "image": base64,//要比对的照片
      "image_type": "BASE64",
      "face_type": "LIVE",
      "quality_control": "LOW",
      "liveness_control": "HIGH"
    },
  ];

  const sxs = await axios({
    method: "POST",
    // headers: { "Content-Type": "application/x-www-form-urlencoded" },
    url: url,
    data: data,
  });
  ctx.body = sxs.data;
  console.log(sxs.data);
};

前端部分

完整代码

1.主要页面

2.提示页面

3.axios请求封装

import axios from 'axios';
// import { message } from 'antd';

// const apiV1 = 'http://localhost:4001/';
// const apiV1 = 'http://192.168.5.104:5003/';
const apiV1='/api'
export const httpProvider = axios.create({
  // baseURL:process.env.NODE_ENV === 'production'? apiV1+'/api/v1':'/api',
  baseURL: apiV1,
  timeout: 6000
});
// 拦截 : 请求拦截
httpProvider.interceptors.request.use(
  (config: any) => {
    const token = window.localStorage.getItem('token');
    if (token) { // 有token，请求头里Authorization: Bearer "1"
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  () => {
    throw new Error('发起请求出错');
  }
);

httpProvider.interceptors.response.use(
  (res) => {
    return res.data;
  },
  (err) => {
    if (err && err.response && err.response.status) {
      const status = err.response.status;
      switch (status) {
        case 504:
        case 500:
        case 404:
          // message.error('服务器异常');
          break;
        case 401:
          // message.error('未授权');
          break;
        case 403:
          // message.error('无权访问');
          break;
        case 422:
          // message.error('参数出错');
          break;
        // case 400: // 请求出错
        //   message.error('未授权');
        //   break;
        default:
          // message.error('未知错误');
      }
    }
  }
);

4.接口

import { httpProvider } from "../utils/request";
// 人脸识别 获取Acess Token
export function getToken(data:any):any{
  console.log(data)
  return httpProvider.request({
    method:'POST',
    url:'/getToken',
    data
  });
}

// 监测人脸
export function checkFace(data:any):any{
  console.log(data)
  return httpProvider.request({
    method:'POST',
    url:'/checkFace',
    data
  });
}
export function getTestListA(data:any):any{
  return httpProvider.request({
    method:'POST', 
    url:'/getTestListA',
    data
  });
}
export function getApp(data:any):any{
  return httpProvider.request({
    method:'POST', 
    url:'/getApp',
    data
  

完整的代码中包含了,人脸识别认证后自动截图,自动关闭摄像头等功能