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'); // 文件流并转 base64console.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.主要页面

<template><div class="box"><div class="aut"><h2>请将脸部对准识别框</h2><div class="user-icon"><videowidth="320"height="240"ref="videoDom"id="video"preloadautoplayloopmuted></video><canvas width="630" height="490" ref="canvasDOM"></canvas></div><div>{{ loding }}</div><el-button class="button" type="warning" @click="initTracker">去考试</el-button><el-button type="primary" class="button1" @click="fan">返回登录</el-button><div class="shenfen"><!-- <img src="require('@')" alt=""> --><p>姓名：{{ Routerdata.username }}<br /></p><p>电话：{{ Routerdata.phone }}<br /></p><p>班级：{{ Routerdata.ClassA }}<br /></p><p>考生号：{{ Routerdata.candidate }}</p></div></div><div class="soild_text_one"><fieldset><legend>注意事项</legend><p>1.不允许切屏、刷新页面,数量达到3次将会强制提交试卷</p><p>2.不允许交头接耳</p><p>3.遵守考场纪律</p></fieldset></div><!-- <Alert /> --></div>
</template><script>
import("tracking/build/tracking-min.js");
import("tracking/build/data/face-min.js");
import { getTopics, getToken, checkFace } from "../../api/gxf";
import { getApp, getTestListA } from "../../api/hjr";
import Alert from "./alert.vue";
import { timeToNum } from "../../utils/timechange";
// 嘴巴等特征,后期可添加
// import('tracking/build/data/mouth-min.js')
// import('tracking/build/data/eye-min.js')
// import('tracking/examples/assets/stats.min.js')
// var objects = new tracking.ObjectTracker(['face', 'eye', 'mouth']);
// console.log(objects)export default {components: {// Alert,},name: "testTracking",data() {return {// 记录拍照到了几次count: 0,isdetected: "请您保持脸部在画面中央",loding: "",access_token: "",dialogVisible: false,fullscreenLoading: false,Routerdata: [],datalist: [],TestResultData:[],AppData:[]};},methods: {// 初始化rackerinitTracker() {// alert('进来了')// alert(navigator.mediaDevices)// 启用摄像头,这一个是原生调用摄像头的功能,不写的话有时候谷歌浏览器调用摄像头会失败navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(this.getMediaStreamSuccess).catch(this.getMediaStreamError);this.context = this.canvas.getContext("2d");// 初始化tracking参数this.tracker = new tracking.ObjectTracker("face");this.tracker.setInitialScale(4);this.tracker.setStepSize(2);this.tracker.setEdgesDensity(0.1);this.tracker.on("track", (event) => {this.onTracked(event);});// tracking启用摄像头,这里我选择调用原生的摄像头// tracking.track(this.video, this.tracker, { camera: true });// 如果是读取视频，可以用trackerTask.stop trackerTask.run来暂停、开始视频this.trackerTask = tracking.track(this.video, this.tracker);},// 监听中onTracked(event) {// 判断终止条件, stop是异步的，不返回的话，还会一直截图if (this.count >= 21) {this.onStopTracking();return;}// 画框框this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);event.data.forEach((rect) => {this.context.lineWidth = 1;this.context.strokeStyle = "#a64ceb";//'#a64ceb';this.context.strokeRect(rect.x, rect.y, rect.width, rect.height);this.context.font = "11px Helvetica";this.context.fillStyle = "#fff";// 截图if (event.data.length > 0 && this.count <= 20) {if (this.count < 0) {this.count = 0;}this.count += 1;if (this.count > 20) {this.isdetected = "已检测到人脸，正在识别";this.getPhoto();}} else {this.count -= 1;if (this.count < 0) {this.isdetected = "请您保持脸部在画面中央";}}});// 视频中心展示文字this.context.fillText(this.isdetected, 100, 30);},// 停止监听onStopTracking() {this.trackerTask.stop();this.video.pause();// 关闭摄像头this.video.srcObject = null;window.stream.getTracks().forEach((track) => track.stop());},// 获取人脸照片getPhoto() {console.log(this.isdetected);this.isdetected = "";this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);let video = document.getElementById("video");this.context.drawImage(video,0,0,this.canvas.width,this.canvas.height);let dataUrl = this.canvas.toDataURL("image/jpeg", 1);// console.log(dataUrl)this.imgbase64 = dataUrl.replace(/^data:image\/\w+;base64,/, "");// 开始人脸识别this.postFace();},// 初始化调用TokengetToken() {getToken().then((res) => {this.access_token = res.access_token;console.log(res);console.log(this.access_token);});},// 人脸验证postFace() {const loading = this.$loading({lock: true,text: "正在识别中,请稍后................",spinner: "el-icon-loading",background: "rgba(0, 0, 0, 0.7)",});setTimeout(() => {loading.close();}, 2000);checkFace({access_token: this.access_token,img: this.imgbase64,urls: this.datalist,}).then((res) => {console.log(res);this.loding = "";if (res.error_code !== 0) {if (res.error_code == 223120) {this.video.srcObject = null;window.stream.getTracks().forEach((track) => track.stop());this.$message({message: "检测失败，请从新检测",type: "warning",});this.count = 0;this.onStopTracking();}} else {if (res.result.score > 80) {this.$message({message: "人脸识别成功,3秒后跳转",type: "success",});setTimeout(() => {localStorage.setItem("wxToken", "1");this.$router.push({path: "/",query: this.Routerdata,});}, 3000);} else {this.$message({message: "人脸识别失败，未找到",type: "warning",});this.count = 0;this.onStopTracking();}}});// this.$axios//   .post("http://192.168.50.35:3000/checkFace", {})//   .then((res) => {//   });},// openFullScreen2() {// },// 视频流启动getMediaStreamSuccess(stream) {window.stream = stream;this.video.srcObject = stream;},// 视频媒体流失败getMediaStreamError(error) {alert("视频媒体流获取错误" + error);},fan() {this.$router.push("/login");},},mounted() {this.dialogVisible = true;this.video = this.$refs.videoDom;this.canvas = this.$refs.canvasDOM;window.addEventListener("beforeunload", localStorage.setItem('leaves',0), false);//初始化获取tonkenthis.getToken();let url = this.$route.fullPath;// const {username,classA,phone,candidate} = this.$route.query;this.Routerdata = this.$route.query;getApp({ a: 1, b: 2 }).then((res) => {let a = res.filter((item, index) => {return this.Routerdata.phone === item.phone;});// console.log(a);this.datalist = a;});getTestListA().then((TestResult) => {this.TestResultData = TestResult});getApp().then((AppResult)=>{this.AppData = AppResult})},destroyed() {},
};
</script><style scoped>
.soild_text_one {width: 100%;margin: 0 auto;
}fieldset {height: 500px;border-left: none;border-right: none;border-bottom: none;color: gray;border-color: #e7f8f7f8;height: 20px;margin-top: 60px;
}
legend {text-align: center;padding: 0 10px;font-size: 18px;
}
.aut {width: 70%;height: 651px;margin: 0 auto;
}
.box {width: 100%;height: 850px;
}
h2 {font-family: "宋体";font-weight: bold;text-align: center;
}
.shenfen {width: 300px;height: 300px;border: 1px solid rgb(235, 223, 223);padding: 20px;margin-left: 57px;margin-top: 30px;
}
.user-icon {position: relative;margin: 0 auto;margin-top: 10px;width: 890px;height: 489px;background: #000;float: right;
}
.button1 {width: 300px;height: 50px;line-height: 50px;margin: 0 auto;float: left;font-size: 16px;position: absolute;position: absolute;left: 70%;top: 630px; /*参照物是父容器*/transform: translate(-50%, -50%); /*百分比的参照物是自身*/
}
.button {width: 300px;height: 50px;line-height: 50px;margin: 0 auto;float: left;font-size: 16px;position: absolute;position: absolute;left: 50%;top: 630px; /*参照物是父容器*/transform: translate(-50%, -50%); /*百分比的参照物是自身*/
}
video,
canvas {width: 630px;height: 100%;position: absolute;left: 50%;top: 50%; /*参照物是父容器*/transform: translate(-50%, -50%); /*百分比的参照物是自身*/
}
</style>

2.提示页面

<template><div class="divAlert"></div><!-- <el-button type="text" @click="">Click to open the Message Box</el-button> -->
</template><script lang="ts">
import {onMounted} from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import type { Action } from 'element-plus'
export default {props: {},setup(props) {const open = () => {ElMessageBox.alert("即将进行人脸识别", "提示", {confirmButtonText: "OK",callback: (action: Action) => {},});};onMounted(()=>{open()}) return {open};},
};
</script><style>
</style>

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

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

koa+vue+百度云实现人脸识别相关推荐

安卓Android基于百度云平台人脸识别学生考勤签到系统设计
开发软件:Idea + Mysql + AndroidStudio + 雷电模拟器基于安卓开发一个人脸识别签到系统,服务器采用springboot框架开发,管理员登录后可以添加和维护人脸信息,添加的 ...
使用百度云的人脸识别API实现两张照片是否为同一人的判断
今天是小编第一次使用百度云的人脸识别API,小编是个小白,一路坎坷,经过一天的学习与研究,终于实现了这个功能. 1.下面是在这个过程中使用的所有的工具: IntelliJ IDEA(Java的开发工具 ...
借助百度云平台人脸识别sdk完成网页人脸识别登录demo
最近在浏览百度云平台人工智能相关产品时,萌生了做一个网页人脸识别登录的demo. 以下是前端代码: 实现在浏览器调用摄像头,捕捉图片后上传到服务器验证. <!DOCTYPE html> & ...
C#窗口调用百度云实现人脸识别。（注意代码中添加的控件以及部分传值给函数，亲测百分百可用。）
调用的dll库文件代码模块首先是连接开启电脑摄像头,拍照后保存照片到本地. 然后是调用百度云: 1.获取百度云access_token与百度云连接: 2.建立控制太应用:人脸识别: 3.人脸库的人 ...
基于百度云的人脸识别打卡系统设计
***QT人脸识别打卡系统设计*** 系统设计需求计划做一个基于人脸识别的打卡系统,软件开发平台借助QT软件,人脸识别的模型直接调用百度人脸识别算法,使用在线API的调用,完成人脸识别分析.人脸库是 ...
树莓派+百度云打造人脸识别门禁系统
先注册一个百度云账号: 然后点击左上角的百度云进入首页: 在首页中选择产品,人工智能,人脸识别,点击进入: 选择立即使用: 在以下页面中由于没用应用,因此点击创建应用,然后直接写上应用名和应用描述就行 ...
百度云android人脸识别sdk,android 集成百度人脸识别sdk 实现考勤
主要sdk 离线人脸采集sdk 具体实现官网已经写的很详细,这边就说一下移动端集成sdk 所碰到的坑. 第一坑 sdk下载要下载sdk必须要认证,不过现在有了个人认证,可以先认证一下下载下来sdk ...
Linux下基于百度智能云平台人脸识别
Linux下基于百度智能云平台人脸识别 1.百度智能云接口及简介 https://cloud.baidu.com/product/face 接口技术文档: 2.人脸检测属性分析项目示例硬件平台 ...
基于百度智能云的人脸识别登陆系统
基于百度智能云的人脸识别登陆系统设计说明后端项目结构前端页面项目版本1下载使用说明项目版本1的Gitee链接项目版本2--基于人脸对比的登陆系统项目2下载链接版本2的Gitee链接 ...

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

百度智能云

前端部分

koa+vue+百度云实现人脸识别相关推荐

最新文章

热门文章