vue 使用rem（vue项目中使用trackingjs人脸识别）
导读：前言 新需求要做一个前端人脸登录，最终选用了trackingjs库实现识别的前端部分，在前端进行识数据采集，并把信息保存后发送给后端进行处理。...
前言
新需求要做一个前端人脸登录 ，最终选用了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); // 打印出 base64Img console.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); // 打印出 base64Img console.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库实现识别的前端部分 ，在前端进行识数据采集 ，并把信息保存后发送给后端进行处理 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！