前言

新需求要做一个前端人脸登录，最终选用了trackingjs库实现识别的前端部分，在前端进行识数据采集，并把信息保存后发送给后端进行处理。

一、下载trackingjs库

进入官网下载之后，将文件保存在assets文件夹下

二、trackingjs引用

  import tracking from '@/assets/tracking/build/tracking-min.js';import '@/assets/tracking/build/data/face-min.js';

三、检测过程

1.初始化设置、创建实例

        // 获取实例this.video = this.mediaStreamTrack = 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);// 摄像头初始化this.trackerTask = window.tracking.track('#video', tracker, {camera: true});tracker.on('track', function(event) {});

2.检测视频中人脸

        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);});// 上传人脸信息});

3.判断上传

          // event.data.length长度为多少代表检测几张人脸// 人脸数为1且无锁才可以上传if(_this.uploadLock && event.data.length){//上传图片_this.screenshotAndUpload();}

4.上传人脸

      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');// 打印出 base64Imgconsole.log('base64Img:',base64Img)// 请求接口成功以后打开锁// this.uploadLock = true;},

5.关闭摄像头

      destroyed(){if(!this.mediaStreamTrack){return}this.mediaStreamTrack.srcObject.getTracks()[0].stop();this.trackerTask.stop()}

四、源代码

直接粘贴就可以，代码如下：

<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 class="switch-button"><el-row><el-button type="primary" @click="destroyed">关闭摄像头</el-button><el-button type="primary" @click="init">开始识别</el-button></el-row></div></div>
</template><script>import tracking from '@/assets/tracking/build/tracking-min.js';import '@/assets/tracking/build/data/face-min.js';export default {data() {return {trackerTask: null,mediaStreamTrack: null,video: null,screenshotCanvas: null,uploadLock: true // 上传锁}},mounted() {this.init();},methods: {// 初始化设置init() {this.video = this.mediaStreamTrack = 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);//摄像头初始化this.trackerTask = 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);});// event.data.length长度为多少代表检测几张人脸if(_this.uploadLock && event.data.length){//上传图片_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');// 打印出 base64Imgconsole.log('base64Img:',base64Img)// 请求接口成功以后打开锁// this.uploadLock = true;},//关闭摄像头destroyed(){if(!this.mediaStreamTrack){return}this.mediaStreamTrack.srcObject.getTracks()[0].stop();this.trackerTask.stop()}}}
</script><style scoped>/* 绘图canvas 不需显示隐藏即可 */#screenshotCanvas{display: none;}.video-box{position: relative;margin-left: 30px;width: 320px;height: 240px;}.switch-button{margin-top: 30px;margin-left: 30px;}video,canvas{position: absolute;top: 0;left: 0;border: #000000 5px solid;}
</style>

五、效果图

总结

新需求要做一个前端人脸登录，最终选用了trackingjs库实现识别的前端部分，在前端进行识数据采集，并把信息保存后发送给后端进行处理。

vue项目中使用trackingjs人脸识别相关推荐

vue项目中根据银行账号识别开户银行
前言:由于项目中输入银行卡号又要填写开户银行体验不好,也不利于验证.因此就在网上找到了bankcardinfo插件.废话不多说下面介绍用法: 步骤一:下载插件. npm install bankcar ...
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...
Typescript在Vue项目中的使用
最近尝试了一下Typescript在Vue项目中的使用,中间遇到了一些问题,把遇到的问题记录一下,以防被忘. 如何让Typescript识别Vue.JSON文件因为Typescript默认不能识别. ...
opencv 训练人脸对比_【项目案例python与人脸识别】基于OpenCV开源计算机视觉库的人脸识别之python实现...
" 本项目是一个基于OpenCV开源库使用python语言程序实现人脸检测的项目,该项目将从[项目基础知识](即人脸识别的基本原理).[项目实践](人脸识别所需要的具体步骤及其python程 ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
vue项目中通过WebSocket实现实时消息提示及遇到的问题
vue项目中通过WebSocket实现实时消息提示(前端代码) 需求说明后台有新增消息通知,并实时推送给用户端,用websocket可以很方便的解决这个问题,但是websocket有个弊端不兼容IE ...
vue 项目中自动生成二维码
vue 项目中自动生成二维码最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRc ...
Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
保姆级教程：js前端接入科大讯飞语音评测，实现朗读打分，vue对接科大讯飞语音评测，还可以实现句子逐词分析对错以及打分，将demo接入vue项目中
需求说明:实现一个点击录制英文句子朗读,然后调用科大讯飞接口分析朗读准确度,并逐词分析朗读正确性. 步骤一.下载运行demo 首先附上科大讯飞语音评测流式版的文档链接:链接在此然后在文档里找到dem ...

vue项目中使用trackingjs人脸识别

vue项目中使用trackingjs人脸识别

前言

一、下载trackingjs库

二、trackingjs引用

三、检测过程

1.初始化设置、创建实例

2.检测视频中人脸

3.判断上传

4.上传人脸

5.关闭摄像头

四、源代码

五、效果图

总结

vue项目中使用trackingjs人脸识别相关推荐

最新文章

热门文章