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

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

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

示例效果:

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

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

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

HTML 示例代码

<template><div><div class="video-box"><video id="video" width="320" height="240" preload autoplay loop muted></video><canvas id="canvas" width="320" height="240"></canvas></div><canvas id="screenshotCanvas" width="320" height="240"></canvas></div>
</template>

JS 示例代码

<script>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;}}}
</script>

CSS 示例代码

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

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

示例项目代码

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

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

vue 使用tracking.js开发人脸识别功能相关推荐

vue基于face-api.js实现人脸识别
一.face-api.js Face-api.js 是一个 JavaScript API,是基于 tensorflow.js 核心 API 的人脸检测和人脸识别的浏览器实现.它实现了一系列的卷积神经网 ...
NDK开发前奏 - 实现支付宝人脸识别功能
1. 基于 Android Studio 的 opencv 配置与使用先推荐一本书<计算机视觉 - 算法与应用>,相信用过 OpenCV 的哥们都知道这是用来干啥的,这里我就不再啰嗦.只 ...
vue项目中使用trackingjs人脸识别
vue项目中使用trackingjs人脸识别前言一.下载trackingjs库二.trackingjs引用三.检测过程 1.初始化设置.创建实例 2.检测视频中人脸 3.判断上传 4.上传人脸 ...
用Python-opencv快速实现人脸识别功能（从零开始教你）（复制粘贴即可用）
用Python快速实现人脸识别功能首先: 一.开发环境: 1.你需要个Python,下载好后设置环境变量(CSDN上面有很多这里不做过多介绍)可以参考 Python下载教程 2.下载pip-参考博主 ...
人脸识别手机端APK分享 | 极速体验人脸识别功能创建一个简单的人脸识别手机APP程序
1.前言虹软公司提供免费离线人脸识别,对于开发者提供了比较友好.完整的可配置demo.但是如需直接体验功能,还是要花一点时间去完成项目编译.配置等一系列工作,对于初学者.不怎么熟悉整个项目的人来说可 ...
微信小程序【人脸识别功能】
前几天偶然看见一个人脸识别的小程序demo,觉得很有趣下载下来想玩玩,结果只是一个框架而已用不了的,花了点时间完善一下吐槽一下wx.uploadFile这个接口,真是个大坑,最开始调用时候,我以为它 ...
OpenCV+ Qt Designer 开发人脸识别考勤系统
文章目录 1. 系统介绍 2. 系统架构 3. 开发步骤 3.1 安装必要的库 3.2 设计用户界面 3.3 编写代码 3.3.1 导入库 3.3.2 连接数据库 3.3.3 定义主窗口类 3.3.4 ...
一个网址，需要生成一个带有人脸识别功能的APP如何做？
问题:一个官网地址,需要生成一个带有人脸识别功能的APP如何做? 操作步骤: 第一步:进入中控易动平台,创建一个应用,创建完成进入应用注意:首页网址输入的是:自己的官网地址第二步:添加人脸识别插 ...
vue3 基于faceapi.js实现人脸识别
vue3 基于faceapi.js实现人脸识别先贴代码 <template><div class="app-container"><div>{ ...
java人脸识别教程_用 Java 实现人脸识别功能（附源码）
> 整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取更多优选引言远程在家办公的第N天,快要闲出屁了,今 ...

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

示例项目代码

vue 使用tracking.js开发人脸识别功能相关推荐

最新文章

热门文章