vue 使用tracking.js开发人脸识别功能

2024-07-13 11:39| 来源: 网络整理| 查看: 265

PS1: tracking.js 处理器开销比较大。

PS2: 本地调试只能使用locahost访问上线需要使用有https的域名否则无法吊起摄像头

示例效果:

开发思路: 前端只负责检测摄像头内是否存在人脸，如果存在人脸截图当前帧调用接口后台进行人脸对比校验，通过接口返回来确认是否识别成功。

前端使用人脸识别类库 trackingjs 可以直接在github上直接下载，npm安装感觉有问题。 github下载地址。

下载完毕以后放入到 src/assets 目录下文件夹更名为 tracking 方便引入

HTML 示例代码

JS 示例代码

import tracking from '@/assets/tracking/build/tracking-min.js'; import '@/assets/tracking/build/data/face-min.js'; export default { data() { return { video: null, screenshotCanvas: null, uploadLock: true // 上传锁 } }, mounted() { this.init(); }, methods: { // 初始化设置 init() { this.video = document.getElementById('video'); this.screenshotCanvas = document.getElementById('screenshotCanvas'); let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); // 固定写法 let tracker = new window.tracking.ObjectTracker('face'); tracker.setInitialScale(4); tracker.setStepSize(2); tracker.setEdgesDensity(0.1); window.tracking.track('#video', tracker, { camera: true }); let _this = this; tracker.on('track', function(event) { // 检测出人脸绘画人脸位置 context.clearRect(0, 0, canvas.width, canvas.height); event.data.forEach(function(rect) { context.strokeStyle = '#0764B7'; context.strokeRect(rect.x, rect.y, rect.width, rect.height); // 上传图片 _this.uploadLock && _this.screenshotAndUpload(); }); }); }, // 上传图片 screenshotAndUpload() { // 上锁避免重复发送请求 this.uploadLock = false; // 绘制当前帧图片转换为base64格式 let canvas = this.screenshotCanvas; let video = this.video; let ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); let base64Img = canvas.toDataURL('image/jpeg'); // 使用 base64Img 请求接口即可 console.log('base64Img:',base64Img) // 请求接口成功以后打开锁 // this.uploadLock = true; } } }

CSS 示例代码

/* 绘图canvas 不需显示隐藏即可 */ #screenshotCanvas{ display: none; } .video-box{ position: relative; width: 320px; height: 240px; } video,canvas{ position: absolute; top: 0; left: 0; border: #000000 5px solid; }

示例代码中都有注释可以直接参考注释查看，加了一个锁避免请求还没回复就再次请求，总的来说就是前端先检测出人脸之后再由后端来验证，避免过多无效的请求。

示例项目代码

https://wws.lanzoui.com/i14fXohavif 密码:fhzh

区域内滑动元素功能参考 https://blog.csdn.net/weixin_30684743/article/details/102142674

【本文地址】

公司简介

联系我们