Vue+tracking.js 实现前端人脸检测功能
程序员文章站
2024-01-08 17:02:04
项目中需要实现人脸登陆功能,实现思路为在前端检测人脸,把人脸照片发送到后端识别,返回用户token登陆成功前端调用摄像头使用tracking.js检测视频流中的人脸,检测到人脸后拍照上传后端。后端使用...
项目中需要实现人脸登陆功能,实现思路为在前端检测人脸,把人脸照片发送到后端识别,返回用户token登陆成功
前端调用摄像头使用tracking.js检测视频流中的人脸,检测到人脸后拍照上传后端。
后端使用face_recognition人脸识别库,使用flask提供restfulap供前端调用
实现效果如下图:
登陆界面:
摄像头检测人脸界面:
前端代码如下:
<template> <div id="facelogin"> <h1 class="title is-1">{{faceisdetected}}</h1> <!-- <p>{{faceisdetected}}</p> --> <div class="content-cam"> <div class="camera-wrp sec"> <video width="320" height="320" ref="videodom" id="video_cam" preload autoplay loop muted></video> <canvas width="320" height="320" ref="canvasdom" id="face_detect"></canvas> <div class="control-btn"></div> </div> <div class="images-wrp sec"> <!-- <p class="title is-5">image taken</p> --> <div :class="`img-item img-item-${index}`" v-for="(image, index) in images" :key="`img-wrp-${index}`" :style="`background-image: url('${image}')`" ></div> </div> </div> </div> </template> export default { name: 'facelogin', data() { return { count: 0, isdetected: '请您保持脸部在画面*', videoel: {}, canvasel: {}, images: [], trackccv: false, tracktracking: false, autocapturetracktraking: false, usermediaconstraints: { audio: false, video: { // ideal(应用最理想的) width: { min: 320, ideal: 1280, max: 1920 }, height: { min: 240, ideal: 720, max: 1080 }, // framerate受限带宽传输时,低帧率可能更适宜 framerate: { min: 15, ideal: 30, max: 60 }, // 摄像头翻转 facingmode: 'user' } } } }, computed: { faceisdetected() { return this.isdetected } }, created() { this.changeview() }, mounted() { // the getusermedia interface is used for handling camera input. // some browsers need a prefix so here we're covering all the options navigator.getmedia = navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia this.init() }, methods: { async init() { this.videoel = this.$refs.videodom this.canvasel = this.$refs.canvasdom await navigator.mediadevices .getusermedia(this.usermediaconstraints) .then(this.getmediastreamsuccess) .catch(this.getmediastreamerror) await this.onplay() }, async onplay() { debughelper.log('onplay') this.ontracktracking() }, changeview() { this.settitle('刷脸登陆') this.setbackdisabled(false) this.setbackicon('arrow_back') msgbus.vm.setbottomnavvisible(false) msgbus.vm.setbottombtnvisible(false) msgbus.vm.setmsginputvisible({ value: false }) }, ontracktracking() { const context = this const video = this.videoel const canvas = this.canvasel const canvascontext = canvas.getcontext('2d') let tracker = new tracking.objecttracker('face') video.pause() video.src = '' tracker.setinitialscale(4) tracker.setstepsize(2) tracker.setedgesdensity(0.1) tracking.track('#video_cam', tracker, { camera: true }) tracker.on('track', function(event) { const { autocapturetracktraking } = context canvascontext.clearrect(0, 0, canvas.width, canvas.height) event.data.foreach(function({ x, y, width, height }) { canvascontext.strokestyle = '#a64ceb' canvascontext.strokerect(x, y, width, height) canvascontext.font = '11px helvetica' canvascontext.fillstyle = '#fff' }) if (!isempty(event.data) && context.count <= 10) { if (context.count < 0) context.count = 0 context.count += 1 //debughelper.log(context.count) if (context.count > 10) { context.isdetected = '已检测到人脸,正在登录' //context.$router.push({ name: 'pwdlogin' }) } } else { context.count -= 1 if (context.count < 0) context.isdetected = '请您保持脸部在画面*' //this.isdetected = '已检测到人脸,正在登录' } }) }, ondownloadfile(item) { const link = document.createelement('a') link.href = item link.download = `cahyo-${new date().toisostring()}.png` link.click() link.remove() }, ontakecam() { const canvas = document.createelement('canvas') const video = this.$el.queryselector('#video_cam') const canvascontext = canvas.getcontext('2d') if (video.videowidth && video.videoheight) { const isbiggerw = video.videowidth > video.videoheight const fixvidsize = isbiggerw ? video.videoheight : video.videowidth let offsetleft = 0 let offsettop = 0 if (isbiggerw) offsetleft = (video.videowidth - fixvidsize) / 2 else offsettop = (video.videoheight - fixvidsize) / 2 // make canvas size 300px canvas.width = canvas.height = 300 const { width, height } = canvas canvascontext.drawimage( video, offsetleft, offsettop, fixvidsize, fixvidsize, 0, 0, width, height ) const image = canvas.todataurl('image/png') this.images.push(image) } }, ondetectface(param, index) { const imgitem = document.queryselector(`.img-item-${index}`) const image = new image() image.src = param const tracker = new tracking.objecttracker('face') tracker.setstepsize(1.7) tracking.track(image, tracker) tracker.on('track', function(event) { event.data.foreach(function(rect) { window.plot(rect.x, rect.y, rect.width, rect.height) }) }) window.plot = function(x, y, w, h) { const rect = document.createelement('div') document.queryselector(`.img-item-${index}`).appendchild(rect) rect.classlist.add('rect') rect.style.width = w + 'px' rect.style.height = h + 'px' rect.style.left = x + 'px' rect.style.top = y + 'px' rect.style.border = '2px solid yellow' rect.style.position = 'absolute' } }, getmediastreamsuccess(stream) { window.stream = stream // make stream available to browser console this.videoel.srcobject = stream debughelper.log('getmediastreamsuccess1') //this.$store.commit('setvideocanvasobject', this.videoel) debughelper.log('getmediastreamsuccess2') }, // 视频媒体流失败 getmediastreamerror(error) { alert('视频媒体流获取错误' + error) }, // 结束媒体流 stopmediastreamtrack() { clearinterval(this.timeinterval) if (typeof window.stream === 'object') { this.videoel.srcobject = null //this.$store.commit('setvideocanvasobject', '') window.stream.gettracks().foreach(track => track.stop()) } },
总结
到此这篇关于vue+tracking.js 实现前端人脸检测功能的文章就介绍到这了,更多相关vue tracking.js 人脸检测内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!