当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue+tracking.js 实现前端人脸检测功能

Vue+tracking.js 实现前端人脸检测功能

2020年06月23日  | 移动技术网IT编程  | 我要评论

黑川优花,储惠斌,我的奋斗 罗永浩

项目中需要实现人脸登陆功能，实现思路为在前端检测人脸，把人脸照片发送到后端识别，返回用户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 人脸检测内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网