前端人脸识别，简单的活体检测（张张嘴...），vue3使用tracking.js,face.js,face-api.js实现

实现的逻辑是先检测是否有人脸，然后再检测是否张嘴了，最后生成照片传给后端比对人脸数据。本人是在工作中的项目需要考勤，前端需要活体检测。想到了这个简单的方法，在纯前端实现这些逻辑，当然精度不高，想要更好的实现，还得靠后端使用好的检测模型。

首先下载好相关的tracking.js,face.js,face-api.js（这个可以直接npm install face-api.js），以及一些静态的资源放public/models下

html部分（提示文字、video、canvas），css部分就不展示了，样式另行设计：

<div class="content_video">           <div class="face" :class="{ borderColor: borderColor }">             <p class="tip" style="font-size: 24px; color: blue; text-align: center;">{{ tip }}</p>             <div class="face-meiti" id="container">               <video ref="video" preload autoplay loop muted playsinline :webkit-playsinline="true"></video>               <canvas ref="canvas"> </canvas>             </div>           </div>         </div>

人脸识别部分：人脸识别使用 tracking.js和face.js，检测到人脸后即可进入面部动作识别区域

const borderColor=ref(false) // import { useRouter } from "vue-router"; const show = ref(false); const isIndex = ref(true); const isPhoto = ref(false); const videoEl = ref(); const localStream = ref(); const timer = ref(); const options = ref([]); const showPicker = ref(false); const form = reactive({   workerName: "",   programName: "",   programId: "", }); const vedioOpen = ref(true) const reJiance = ref(false) const state = reactive({   options: '',   nose_x_anv: "",   nose_y_anv: "",   mouth_Y: '',   action: "张嘴",   isCheck: true, })  //人脸检测 const tip = ref("请正对摄像头"); const mediaStreamTrack = ref(); const video = ref(); //播放器实例 const trackerTask = ref(); //tracking实例 const uploadLock = true; //上传锁 const faceflag = ref(false); //是否进行拍照 const src = ref(); const getUserMedia = ref(""); const canvas = ref(); const LorR = computed(() =>   store.state.UserInfo.workerName != undefined ? true : false ); const selectPeople = computed(() => store.state.SalarySelectPeople); const store = useStore(); //人脸检测区域  const init = async () => {   toast("正在申请摄像头权限", "info")   vedioOpen.value = false;   initTracker(canvas.value); }; const initTracker = async () => {   const _this = this;   // 固定写法   let tracker = new window.tracking.ObjectTracker("face");   tracker.setInitialScale(4);   tracker.setStepSize(2);   tracker.setEdgesDensity(0.1);   //摄像头初始化   trackerTask.value = window.tracking.track(video.value, tracker, {     camera: true,   });   tracker.on("track", async (event) => {     if (event.data.length == 0) {       if (!faceflag.value) {         tip.value = "未检测到人脸";       }     } else if (event.data.length > 0) {       console.log(event.data.length);       event.data.forEach(async (rect, index) => {         if (index != 0) {           return;         }         // 防抖         if (!faceflag.value) {           faceflag.value = true;           tip.value = "请张张嘴";           //背景更改，提示作用           borderColor.value=true           //进入人脸动作检测方法           initHuoti(rect)         }       });     }   }); };

面部动作识别部分：

const jiance = ref(); const initHuoti = async (rect) => {   await faceApi.nets.tinyFaceDetector.loadFromUri('/models');   await faceApi.loadFaceLandmarkModel("/models");   state.options = new faceApi.TinyFaceDetectorOptions({     inputSize: 320,     scoreThreshold: 0.4   });    //设定定时器，重复获取当前摄像头的图片   jiance.value = setInterval(() => {     let context = canvas.value.getContext("2d", { willReadFrequently: true });     context.strokeStyle = "#a64ceb";     context.strokeRect(rect.x, rect.y, rect.width, rect.height);     canvas.value.width = video.value.videoWidth;     canvas.value.height = video.value.videoHeight;     context.drawImage(video.value, 0, 0, canvas.value.width, canvas.value.height);     let base64Img = canvas.value.toDataURL("image/jpeg");     face_test(base64Img)   }, 400) }   //使用faceapi检测人脸图片的特征值 const face_test = async (base64Img) => {   const detections1 = await faceApi.detectSingleFace(canvas.value, state.options).withFaceLandmarks();   if (detections1) {     const landmarks = detections1.landmarks     const jawOutline = landmarks.getJawOutline()     const nose = landmarks.getNose()     const mouth = landmarks.getMouth()     const leftEye = landmarks.getLeftEye()     const rightEye = landmarks.getRightEye()     const leftEyeBbrow = landmarks.getLeftEyeBrow()     const rightEyeBrow = landmarks.getRightEyeBrow()     //将特征值给这个方法检测是否张嘴了     isOpenMouth(mouth, base64Img)     const resizedDetections = faceApi.resizeResults(detections1, { width: 280, height: 280 })     faceApi.draw.drawDetections(canvas.value, resizedDetections)   } } //是否张嘴，精度取决于其中的检测方法 const isOpenMouth = (mouth, base64Img) => {   const mouth_Y_list = mouth.map((item) => {     return item.y   })   const max = Math.max(...mouth_Y_list)   const min = Math.min(...mouth_Y_list)   const _y = max - min   if (state.mouth_Y === "") {     state.mouth_Y = _y   }   if (Math.abs(state.mouth_Y - _y) > 10) {     clearTimeout(jiance.value);     toast('检测成功，正在拍照', 'info', 1000);     tip.value = "正在拍照，请勿乱动";     borderColor.value=false     //上传照片     uploadimg(base64Img);   }   state.mouth_Y = _y }

更好的获取摄像头方法，在tracking.js中做修改tracking.initUserMedia_方法，使用window.stream = MediaStream;存储相关流，方便后面页面关闭。

function getMediaDevices() {          try {         navigator.mediaDevices.enumerateDevices().then(function (devices) {             devices.forEach(function (device) {                 switch (device?.kind) {                     case 'audioinput':                         console.log('音频输入设备(麦克风|话筒)：', device);                         break;                     case 'audiooutput':                         console.log('音频输出设备(扬声器|音响)：', device);                         break;                     case 'videoinput':                         console.log('视频输入设备(摄像头|相机)：', device);                         break;                     default:                         console.log('当前可用的媒体设备: ', device);                         break;                 }             });         }).catch(function (err) {             console.error(err);         });     } catch (err) {         console.error(err);     } finally {         if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {             console.log("不支持mediaDevices.enumerateDevices(), 未识别到多媒体设备！");         }     } };    tracking.initUserMedia_ = function(element, opt_options) {     getMediaDevices();     try {       var options = {           audio: true,    // 注：这里 audio、video 默认都为false【一定要确保有麦克风或摄像头（有啥设备就开启啥设备）硬件设备的情况下才设为true 或 {...}，否则会报DOMException: Requested device not found 等错！！】           video: true,  // 获取视频 默认video: { facingMode: 'user' } }前置相机       }       if (navigator.mediaDevices.getUserMedia) {           // 访问用户媒体设备的 新标准API           navigator.mediaDevices.getUserMedia(options).then(function (MediaStream) {             element.srcObject=MediaStream             window.stream = MediaStream;           }).catch(function (err) {               console.error("访问用户媒体设备失败：权限被拒绝 或 未识别到多媒体设备！", err);            }).finally(() => {               console.log('navigator.mediaDevices.getUserMedia API')           });       }       else if (navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia) {           try {               //访问用户媒体设备的 旧标准API 兼容方法               navigator.getUserMedia(options, function (MediaStream) {                 element.srcObject=MediaStream                 window.stream = MediaStream;               }, function (err) {                   console.error("访问用户媒体设备失败：权限被拒绝 或 未识别到多媒体设备！", err);               })           } catch (error) {               console.error(err);           }           finally {               console.log('navigator.getUserMedia API')           };       } else {           if (0 > location.origin.indexOf('https://')) {               console.error("提示：请尝试在本地localhost域名 或 https协议 的Web服务器环境中重新运行！");           }       }   } catch (error) {       console.error("访问用户媒体设备失败：", error);   }    };

//在使用页面关闭摄像头的方法 const stopMediaStreamTrack = function () {   if (typeof window.stream === "object") {     window.stream.getTracks().forEach(track => track.stop());   }   clearTimeout(jiance.value); }