前端人脸识别，简单的活体检测（张张嘴...），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: "张嘴",