搞定摄像头人脸识别：跟着这篇文章实现Vue+faceApi.js方案！

2023-07-25 08:40:12

摄像头识别：用 Vue + faceApi.js 搞定人脸识别

在当今这个看脸的时代，摄像头识别已经渗透到生活的方方面面。如果你想在芸芸众生中脱颖而出，掌握人脸识别的黑科技就显得至关重要。本文将带你踏上人脸识别的奇妙旅程，解锁摄像头识别的超酷炫体验。

搭建 Vue 项目

1.1 创建 Vue 项目

在终端输入以下命令：

vue create camera-face-recognition

1.2 安装依赖

切换到项目目录，安装所需依赖：

cd camera-face-recognition
npm install

引入 faceApi.js

2.1 下载 faceApi.js

前往 faceApi.js 官网，下载最新版本，解压后拷贝至项目目录。

2.2 安装 CDN

在 index.html 文件中添加 CDN 链接：

<script src="https://unpkg.com/face-api.js/dist/face-api.min.js"></script>

设置摄像头

3.1 HTML 代码

在 index.html 文件中添加以下代码：

<video id="webcam" width="640" height="480"></video>

3.2 JavaScript 代码

在 main.js 文件中添加以下代码：

const webcam = document.getElementById('webcam');
const constraints = {video: true};

navigator.mediaDevices.getUserMedia(constraints)
  .then((stream) => {webcam.srcObject = stream;})
  .catch((err) => {console.error(err);});

人脸检测

4.1 异步加载模型

在 main.js 文件中添加以下代码：

Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('./models'),
]).then(startVideo);

4.2 启动摄像头识别

在 main.js 文件中添加以下代码：

function startVideo() {
  webcam.addEventListener('play', () => {
    const canvas = document.createElement('canvas');
    canvas.width = webcam.width;
    canvas.height = webcam.height;
    const context = canvas.getContext('2d');

    const render = () => {
      context.drawImage(webcam, 0, 0, webcam.width, webcam.height);
      const detections = await faceapi.detectAllFaces(webcam, new faceapi.TinyFaceDetectorOptions());
      for (const detection of detections) {
        const box = detection.box;
        context.strokeStyle = '#00FF00';
        context.lineWidth = 2;
        context.strokeRect(box.x, box.y, box.width, box.height);
      }
      requestAnimationFrame(render);
    };

    render();
  });
}