快捷導(dǎo)航

vue2如何使用face-api.js實現(xiàn)人臉識別功能

更新時間：2024年09月27日 15:11:45 作者：劉小白plus

本文介紹了如何在Vue.js項目中利用face-api.js實現(xiàn)人臉識別功能,首先需要安裝Vue.js和face-api.js以及其依賴TensorFlow.js,接著,下載并配置必要的模型文件到項目目錄,之后,將人臉識別功能封裝成Vue組件,并在組件中通過視頻流進行人臉檢測和結(jié)果展示

1、安裝依賴

首先，確保你已經(jīng)安裝了Vue.js，并且創(chuàng)建了一個Vue項目。然后，安裝face-api.js及其相關(guān)依賴。由于face-api.js依賴于TensorFlow.js，你可能還需要安裝這個庫。可以通過npm或yarn來安裝：

npm install face-api.js

這是我安裝的版本

2、下載模型文件

face-api.js需要一些預(yù)先訓(xùn)練好的模型文件來執(zhí)行人臉檢測和識別。你需要從GitHub倉庫中下載這些文件，并放置在項目的public目錄下，或者配置一個正確的路徑指向這些文件。可以從face-api.js的GitHub頁面下載模型。

在這個頁面上，你會看到多個模型文件，例如 ssd_mobilenetv1_model-weights_manifest.json、face_landmark_68_model-weights_manifest.json 等。為了使用 face-api.js 的不同功能，如人臉檢測、特征點定位、表情識別等，你需要下載相應(yīng)的模型文件。
你可以手動下載，也可以直接克隆，你也可以私聊我一下我給你發(fā)。

git clone https://github.com/justadudewhohacks/face-api.js.git

3.克隆完之后你需要把模型文件放到 public下的models沒有models自己創(chuàng)建，你也可以自己規(guī)定路徑，只要路徑正確就行。

到此準備工作就做完了，當然你需要配置好vue框架。

3、封裝組件

為了更好地組織代碼并使其可復(fù)用，我們可以將人臉識別的功能封裝成一個Vue組件。下面是一個更完善的示例，展示了如何創(chuàng)建一個名為FaceRecognition.vue的自定義組件，該組件負責處理視頻流、人臉檢測、以及展示檢測結(jié)果。完整代碼塊在這

<template>
  <div class="face-recognition">
    <video ref="video" width="640" height="480" autoplay></video>
    <canvas ref="canvas" width="640" height="480"></canvas>
    <div>當前人流量：{{ peopleCount }}</div>
  </div>
</template>
<script>
import * as faceapi from 'face-api.js';
export default {
  name: 'FaceRecognition',
  data() {
    return {
      isLoaded: false,
      lastDetections: [], // 上一幀檢測到的人臉
      peopleCount: 0, // 當前人流量計數(shù)
    };
  },
  mounted() {
    this.loadModels();
  },
  methods: {
    async loadModels() {
      try {
        await Promise.all([
          faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
          faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
          faceapi.nets.ssdMobilenetv1.loadFromUri('/models'),
        ]);
        this.isLoaded = true;
        this.startVideo();
      } catch (error) {
        console.error('Failed to load models:', error);
      }
    },
    startVideo() {
      if (navigator.mediaDevices && this.isLoaded) {
        navigator.mediaDevices.getUserMedia({ video: true })
          .then(stream => {
            this.$refs.video.srcObject = stream;
            this.$refs.video.onloadedmetadata = () => {
              this.detectFaces();
            };
          })
          .catch(error => console.error('getUserMedia error:', error));
      }
    },
    async detectFaces() {
      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const detectionOptions = new faceapi.SsdMobilenetv1Options({ minConfidence: 0.9 });
      let recentDetections = [];
      const detectionHistoryLength = 5;
      setInterval(async () => {
        if (video.readyState === video.HAVE_ENOUGH_DATA) {
          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
          const detections = await faceapi.detectAllFaces(video, detectionOptions).withFaceLandmarks();
          // console.log('查看獲取幀',validDescriptors)
          // 確保只收集有效的面部描述符
          const validDescriptors = detections
          console.log('查看獲取幀',validDescriptors)
          recentDetections.push(...validDescriptors.map(face => face.descriptor));
          // 限制歷史長度并去重
          recentDetections = recentDetections.slice(-detectionHistoryLength);
          // console.log('查看獲取幀',recentDetections)
          const uniqueDescriptors = Array.from(new Set(recentDetections));
          this.peopleCount = uniqueDescriptors.length; // 直接使用去重后的數(shù)組長度，因已排除undefined，無需JSON.stringify和parse
          faceapi.draw.drawDetections(canvas, detections);
          faceapi.draw.drawFaceLandmarks(canvas, detections);
        }
      }, 100);
    }
  },
  beforeDestroy() {
    // 清理視頻流
    if (this.$refs.video.srcObject) {
      this.$refs.video.srcObject.getTracks().forEach(track => track.stop());
    }
  },
};
</script>
<style scoped>
.face-recognition {
  position: relative;
}
</style>

4、使用組件

創(chuàng)建文件直接引入組件然后注冊使用即可

<template>
    <div id="app">
      <FaceDetection />
    </div>
  </template>
  <script>
  import FaceDetection from '@/components/FaceDetection/FaceDetection.vue';
  export default {
    name: 'App',
    components: {
      FaceDetection,
    },
  };
  </script>

5、實現(xiàn)邏輯

在mounted()生命周期鉤子中，首先加載模型，然后啟動視頻流。
創(chuàng)建一個方法如detectFaces()來周期性地從視頻流中捕獲幀，使用faceapi.detectAllFaces()來檢測人臉，并繪制檢測結(jié)果到<canvas>上。
根據(jù)需要，你可以擴展此邏輯來實現(xiàn)更復(fù)雜的人臉識別功能，比如與已知人臉匹配等。