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

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

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

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

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

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

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

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

登陸界面:

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

攝像頭檢測(cè)人臉界面:

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

前端代碼如下:

<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 = ’已檢測(cè)到人臉,正在登錄’ //context.$router.push({ name: ’pwdlogin’ }) } } else { context.count -= 1 if (context.count < 0) context.isdetected = ’請(qǐng)您保持臉部在畫面中央’ //this.isdetected = ’已檢測(cè)到人臉,正在登錄’ } }) }, 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)前端人臉檢測(cè)功能的文章就介紹到這了,更多相關(guān)vue tracking.js 人臉檢測(cè)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 档案密集架_电动密集架_移动密集架_辽宁档案密集架-盛隆柜业厂家现货批发销售价格公道 | 冷藏车厂家|冷藏车价格|小型冷藏车|散装饲料车厂家|程力专用汽车股份有限公司销售十二分公司 | 氢氧化钙设备_厂家-淄博工贸有限公司| 无纺布包装机|径向缠绕包装机|缠绕膜打包机-上海晏陵智能设备有限公司 | 铝镁锰板厂家_进口钛锌板_铝镁锰波浪板_铝镁锰墙面板_铝镁锰屋面-杭州军晟金属建筑材料 | 5nd音乐网|最新流行歌曲|MP3歌曲免费下载|好听的歌|音乐下载 免费听mp3音乐 | WF2户外三防照明配电箱-BXD8050防爆防腐配电箱-浙江沃川防爆电气有限公司 | 汽车水泵_汽车水泵厂家-瑞安市骏迪汽车配件有限公司 | NMRV减速机|铝合金减速机|蜗轮蜗杆减速机|NMRV减速机厂家-东莞市台机减速机有限公司 | 黄石东方妇产医院_黄石妇科医院哪家好_黄石无痛人流医院 | 成都网站建设制作_高端网站设计公司「做网站送优化推广」 | 半自动预灌装机,卡式瓶灌装机,注射器灌装机,给药器灌装机,大输液灌装机,西林瓶灌装机-长沙一星制药机械有限公司 | 飞扬动力官网-广告公司管理软件,广告公司管理系统,喷绘写真条幅制作管理软件,广告公司ERP系统 | 共享雨伞_共享童车_共享轮椅_共享陪护床-共享产品的领先者_有伞科技 | 武汉高低温试验机-现货恒温恒湿试验箱-高低温湿热交变箱价格-湖北高天试验设备 | 臭氧灭菌箱-油桶加热箱-原料桶加热融化烘箱-南京腾阳干燥设备厂 臭氧发生器_臭氧消毒机 - 【同林品牌 实力厂家】 | 新疆散热器,新疆暖气片,新疆电锅炉,光耀暖通公司 | 根系分析仪,大米外观品质检测仪,考种仪,藻类鉴定计数仪,叶面积仪,菌落计数仪,抑菌圈测量仪,抗生素效价测定仪,植物表型仪,冠层分析仪-杭州万深检测仪器网 | 南溪在线-南溪招聘找工作、找房子、找对象,南溪综合生活信息门户! | 土壤水分自动监测站-SM150便携式土壤水分仪-铭奥仪器 | 江门流水线|江门工作台|江门市伟涛行工业设备有限公司 | 塑胶跑道_学校塑胶跑道_塑胶球场_运动场材料厂家_中国塑胶跑道十大生产厂家_混合型塑胶跑道_透气型塑胶跑道-广东绿晨体育设施有限公司 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | 东莞工厂厂房装修_无尘车间施工_钢结构工程安装-广东集景建筑装饰设计工程有限公司 | 自动检重秤-动态称重机-重量分选秤-苏州金钻称重设备系统开发有限公司 | SOUNDWELL 编码器|电位器|旋转编码器|可调电位器|编码开关厂家-广东升威电子制品有限公司 | 济南玻璃安装_济南玻璃门_济南感应门_济南玻璃隔断_济南玻璃门维修_济南镜片安装_济南肯德基门_济南高隔间-济南凯轩鹏宇玻璃有限公司 | PU树脂_水性聚氨酯树脂_聚氨酯固化剂_聚氨酯树脂厂家_宝景化工 | 家德利门业,家居安全门,别墅大门 - 安徽家德利门业有限公司 | 缠膜机|缠绕包装机|无纺布包装机-济南达伦特机械设备有限公司 | 铁盒_铁罐_马口铁盒_马口铁罐_铁盒生产厂家-广州博新制罐 | 磨煤机配件-高铬辊套-高铬衬板-立磨辊套-盐山县宏润电力设备有限公司 | 黑田精工电磁阀-CAMMOZI气缸-ROSS电磁-上海茂硕机械设备有限公司 | 高温热泵烘干机,高温烘干热泵,热水设备机组_正旭热泵 | 楼承板-开闭口楼承板-无锡海逵楼承板| 防腐木批发价格_深圳_惠州_东莞防腐木厂家_森源(深圳)防腐木有限公司 | AGV无人叉车_激光叉车AGV_仓储AGV小车_AGV无人搬运车-南昌IKV机器人有限公司[官网] | 奥运星-汽车性能网评-提供个性化汽车资讯 | 环球周刊网| 水厂污泥地磅|污泥处理地磅厂家|地磅无人值守称重系统升级改造|地磅自动称重系统维修-河南成辉电子科技有限公司 | 岩石钻裂机-液压凿岩机-劈裂机-挖改钻_湖南烈岩科技有限公司 |