电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

Vue+tracking.js 實(shí)現(xiàn)前端人臉檢測功能

瀏覽:5日期:2023-01-26 14:07:07

項(xiàng)目中需要實(shí)現(xiàn)人臉登陸功能,實(shí)現(xiàn)思路為在前端檢測人臉,把人臉照片發(fā)送到后端識(shí)別,返回用戶token登陸成功

前端調(diào)用攝像頭使用tracking.js檢測視頻流中的人臉,檢測到人臉后拍照上傳后端。

后端使用face_recognition人臉識(shí)別庫,使用Flask提供restfulAP供前端調(diào)用

實(shí)現(xiàn)效果如下圖:

登陸界面:

Vue+tracking.js 實(shí)現(xiàn)前端人臉檢測功能

攝像頭檢測人臉界面:

Vue+tracking.js 實(shí)現(xiàn)前端人臉檢測功能

前端代碼如下:

<template> <div id='facelogin'> <h1 class='title is-1'>{{FaceisDetected}}</h1> <!-- <p>{{FaceisDetected}}</p> --> <div class='content-cam'> <div class='camera-wrp sec'> <video ref='videoDom' preload autoplay loop muted></video> <canvas 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 : v-for='(image, index) in images' :key='`img-wrp-${index}`' : ></div> </div> </div> </div></template>export default {name: ’facelogin’,data() {return {count: 0,isdetected: ’請(qǐng)您保持臉部在畫面中央’,videoEl: {},canvasEL: {},images: [],trackCcv: false,trackTracking: false,autoCaptureTrackTraking: false,userMediaConstraints: {audio: false,video: {// ideal(應(yīng)用最理想的)width: {min: 320,ideal: 1280,max: 1920},height: {min: 240,ideal: 720,max: 1080},// frameRate受限帶寬傳輸時(shí),低幀率可能更適宜frameRate: {min: 15,ideal: 30,max: 60},// 攝像頭翻轉(zhuǎn)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 = ’請(qǐng)您保持臉部在畫面中央’ //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(’視頻媒體流獲取錯(cuò)誤’ + error) }, // 結(jié)束媒體流 stopMediaStreamTrack() { clearInterval(this.timeInterval) if (typeof window.stream === ’object’) { this.videoEl.srcObject = null //this.$store.commit(’setVideoCanvasObject’, ’’) window.stream.getTracks().forEach(track => track.stop()) } },

總結(jié)

到此這篇關(guān)于Vue+tracking.js 實(shí)現(xiàn)前端人臉檢測功能的文章就介紹到這了,更多相關(guān)vue tracking.js 人臉檢測內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 桥架-槽式电缆桥架-镀锌桥架-托盘式桥架 - 上海亮族电缆桥架制造有限公司 | 菏泽商标注册_菏泽版权登记_商标申请代理_菏泽商标注册去哪里 | 河北凯普威医疗器材有限公司,高档轮椅系列,推车系列,座厕椅系列,协步椅系列,拐扙系列,卫浴系列 | 英语词典_成语词典_日语词典_法语词典_在线词典网 | 1000帧高速摄像机|工业高速相机厂家|科天健光电技术 | 海鲜池-专注海鲜鱼缸、移动海鲜缸、饭店鱼缸设计定做-日晟水族厂家 | 西装定制/做厂家/公司_西装订做/制价格/费用-北京圣达信西装 | RFID电子标签厂家-上海尼太普电子有限公司| 涂层测厚仪_漆膜仪_光学透过率仪_十大创新厂家-果欧电子科技公司 | 致胜管家软件服务【在线免费体验】 | 数显恒温油浴-电砂浴-高温油浴振荡器-常州迈科诺仪器有限公司 | 冲击式破碎机-冲击式制砂机-移动碎石机厂家_青州市富康机械有限公司 | 广东高华家具-公寓床|学生宿舍双层铁床厂家【质保十年】 | 多功能干燥机,过滤洗涤干燥三合一设备-无锡市张华医药设备有限公司 | 证券新闻,热播美式保罗1984第二部_腾讯1080p-仁爱影院 | 陕西安玻璃自动感应门-自动重叠门-磁悬浮平开门厂家【捷申达门业】 | 东莞动力锂电池保护板_BMS智能软件保护板_锂电池主动均衡保护板-东莞市倡芯电子科技有限公司 | 定时排水阀/排气阀-仪表三通旋塞阀-直角式脉冲电磁阀-永嘉良科阀门有限公司 | 流量卡中心-流量卡套餐查询系统_移动电信联通流量卡套餐大全 | 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 碳纤维布-植筋胶-灌缝胶-固特嘉加固材料公司 | 高铝砖-高铝耐火球-高铝耐火砖生产厂家-价格【荣盛耐材】 | 对夹式止回阀_对夹式蝶形止回阀_对夹式软密封止回阀_超薄型止回阀_不锈钢底阀-温州上炬阀门科技有限公司 | 折弯机-刨槽机-数控折弯机-数控刨槽机-数控折弯机厂家-深圳豐科机械有限公司 | 升降机-高空作业车租赁-蜘蛛车-曲臂式伸缩臂剪叉式液压升降平台-脚手架-【普雷斯特公司厂家】 | AGV叉车|无人叉车|AGV智能叉车|AGV搬运车-江西丹巴赫机器人股份有限公司 | 校园文化空间设计-数字化|中医文化空间设计-党建|法治廉政主题文化空间施工-山东锐尚文化传播公司 | 杭州中策电线|中策电缆|中策电线|杭州中策电缆|杭州中策电缆永通集团有限公司 | 众能联合-提供高空车_升降机_吊车_挖机等一站工程设备租赁 | 14米地磅厂家价价格,150吨地磅厂家价格-百科 | 电加热导热油炉-空气加热器-导热油加热器-翅片电加热管-科安达机械 | 高清视频编码器,4K音视频编解码器,直播编码器,流媒体服务器,深圳海威视讯技术有限公司 | 上海噪音治理公司-专业隔音降噪公司-中广通环保 | 河南新乡德诚生产厂家主营震动筛,振动筛设备,筛机,塑料震动筛选机 | 武汉创亿电气设备有限公司_电力检测设备生产厂家 | C形臂_动态平板DR_动态平板胃肠机生产厂家制造商-普爱医疗 | WF2户外三防照明配电箱-BXD8050防爆防腐配电箱-浙江沃川防爆电气有限公司 | 上海佳武自动化科技有限公司 | 广州市哲铭油墨涂料有限公司,水性漆生产研发基地 | 加气混凝土砌块设备,轻质砖设备,蒸养砖设备,新型墙体设备-河南省杜甫机械制造有限公司 | 防渗膜厂家|养殖防渗膜|水产养殖防渗膜-泰安佳路通工程材料有限公司 |