vue使用face-api进行人脸捕获

安装依赖

npm install face-api.js

下载模型文件到项目中

模型文件在文章下面

vue页面中的代码，你们自己使用核心的方法即可。

<template>
  <div>
    <el-dialog
      title="录入人脸"
      :visible.sync="showVideo"
      width="50%"
      :before-close="befClose"
    >
      <div style="position: relative">
        <video
          ref="videoRef"
          id="video"
          width="720"
          height="540"
          style="position: relative"
          autoplay
          muted
        ></video>
        <canvas class="can" ref="overlayRef" width="720" height="540"></canvas>
      </div>
      <div ref="snapshots" width="720" height="540"></div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import * as faceapi from "face-api.js";
export default {
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      showVideo: false,
      time: null,
    };
  },
  mounted() {
    // //人脸检测模型
    faceapi.nets.ssdMobilenetv1.loadFromUri("models");

    // 加载模型
    // faceapi.nets.tinyFaceDetector.loadFromUri("/models"),
    //   faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
    //   faceapi.nets.faceRecognitionNet.loadFromUri("/models");
  },
  //方法集合
  methods: {
    show() {
      this.showVideo = true;
      // faceapi.nets.ssdMobilenetv1.loadFromUri("models");
      this.$nextTick(() => {
        const canvas = document.createElement("canvas");
        canvas.width = 720;
        canvas.height=540;
        // const canvas = this.$refs.overlayRef;
        // 设置画布上下文
        const ctx = canvas.getContext("2d");
        navigator.mediaDevices
          .getUserMedia({
            video: true,
          // video: { facingMode: { exact: "user" } },
          })
          .then((stream) => {
            video.srcObject = stream;
            //每一秒抓一张照片进行捕获人脸
            this.time = setInterval(() => {
              ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
              const img = new Image(canvas.width, canvas.height);
              img.src = canvas.toDataURL("image/png"); // 可以改为image/png或其他格式
              console.log(img);
              // this.$refs.snapshots.appendChild(img);
              // setInterval(() => {
              //   //照片检测人脸
              faceapi
                .detectSingleFace(
                  img,
                  new faceapi.SsdMobilenetv1Options({ minConfidence: 0.8 })
                )
                .then((result) => {
                  console.log(result);
                  const canvas = this.$refs.overlayRef;
                  const canvasCtx = canvas.getContext("2d");
                  if (result) {
                    //识别的边框画到视频上
                    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
                    const box = result.box;
                    const drawBox = new faceapi.draw.DrawBox(box, {
                      color: [255, 0, 0],
                      label: "face",
                    });
                    drawBox.draw(canvasCtx);
                    //保存图片
                    
                  }else{
                    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
                  }
                });
            }, 10);
          });
        // });
      });
    },

    afterShow() {},

    stopFaceDetection() {
      const stream = this.$refs.videoRef.srcObject;
      const tracks = stream.getTracks();
      tracks.forEach((track) => track.stop());
      this.$refs.videoRef.srcObject = null;
    },

    befClose() {
      this.showVideo = false;
      clearInterval(this.time);
      // this.stopFaceDetection();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>
<style lang='less' scoped>
.can {
  position: absolute;
  top: 0;
  left: 0;
}
</style>

最后实现的效果