vue2+tracking实现PC端的人脸识别

发布网友发布时间：2024-10-01 22:31

我来回答

共1个回答

热心网友时间：2024-11-20 20:31

总是会有一些奇奇怪怪的需求无法避免。记录一下曾经项目遇到的一个需求。

需求

上传患者真实头像，可以有两种选择，一种是通过常规的文件选择方式上传，第二种方式就是医生可以调用电脑的摄像头拍一张然后上传。

分析

常规的就不用分析了，只分析第二种：

调用本地摄像头

然后可以进行拍照

因为是患者的真实头像，方便辨认，要求要拍到患者脸部

检测到患者脸部，自动截图，医生只需要点击上传即可

实现思路

首先看有不有能识别到患者脸部的前端第三方库，如果没有，这个需求就相对来说就麻烦一点，就是在拍照的时候需要医生辨别能否达到上传的要求，然后再拍照上传也行。

基于上面的思路，开始寻找，最后确定使用tracking.js它的github地址

使用tracking.js

安装：yarnaddtracking

使用，用一个测试demo来展示：

src/components/TestFace.vue

<template><div><div><p>请将摄像头对准患者脸部</p><videoid="video"style="transform:rotateY(180deg)"autoplay></video></div><div><p>检测人脸结果</p><canvasid="canvas"width="200"height="200"style="transform:rotateY(180deg)"></canvas></div></div></template><script>import{userMedia}from'../utils/utils'require('tracking/build/tracking-min.js')require('tracking/build/data/face-min.js')exportdefault{data(){return{videoObj:null,trackerTask:null}},mounted(){this.openCamera()},methods:{openCamera(){//有可能触发一些其他的按钮会重新获取this.$nextTick(()=>{constcanvas=document.getElementById('canvas')constcontext=canvas.getContext('2d')this.videoObj=document.getElementById('video')//eslint-disable-next-lineno-undefconsttracker=newtracking.ObjectTracker('face')//检测人脸tracker.setInitialScale(4)tracker.setStepSize(2)tracker.setEdgesDensity(0.1)//eslint-disable-next-lineno-undefthis.trackerTask=tracking.track('#video',tracker,{camera:true})constconstraints={video:{width:200,height:200},audio:false}userMedia(constraints,this.success,this.error)tracker.on('track',(event)=>{event.data.forEach((rect)=>{//绘制到canvascontext.drawImage(this.videoObj,0,0,canvas.width,canvas.height)context.font='16pxHelvetica'context.strokeStyle='#1890ff'context.strokeRect(rect.x,rect.y,rect.width,rect.height)})if(event.data.length!==0){//说明检测到人脸了，此时就可以截取图片传递给后端//canvas调用toDataURL}})})},handleCancel(){this.videoObj.srcObject.getTracks()[0].stop()this.trackerTask.stop()},//成功显示success(stream){this.videoObj.srcObject=streamthis.videoObj.play()},//失败抛出错误，可能用户电脑没有摄像头，或者摄像头权限没有打开error(error){//可以在这里面提示用户console.log(`访问用户媒体设备失败${error.name},${error.message}`)}},beforeDestroy(){this.handleCancel()}}</script>

src/utils/utils.js

exportletuserMedia=function(constraints,success,error){if(navigator.mediaDevices.getUserMedia){userMedia=function(constraints,success,error){navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error)}}elseif(navigator.webkitGetUserMedia){userMedia=function(constraints,success,error){navigator.webkitGetUserMedia(constraints,success,error)}}elseif(navigator.mozGetUserMedia){userMedia=function(constraints,success,error){navigator.mozGetUserMedia(constraints,success,error)}}elseif(navigator.getUserMedia){userMedia=function(constraints,success,error){navigator.getUserMedia(constraints,success,error)}}userMedia(constraints,success,error)}

最终的效果如下：

最后

首先确保有摄像头

有时候本地调试无法打开摄像头，可以在浏览器上输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure

然后会出现如下页面，再操作即可：

原文：https://juejin.cn/post/7099356681515040805