第二十八天 如何用Vue 3和TensorFlow.js实现人脸识别Web应用？

一、技术选型与前期准备

人脸识别Web应用的实现需要结合前端框架与机器学习库。Vue 3凭借其组合式API和响应式系统，成为构建交互式应用的理想选择；TensorFlow.js则提供了在浏览器中运行机器学习模型的能力，无需依赖后端服务。

1.1 环境搭建

• Node.js与npm：确保安装最新LTS版本（如18.x），用于项目依赖管理。
• Vue CLI或Vite：推荐使用Vite创建Vue 3项目，因其更快的启动速度和HMR（热模块替换）支持。

  npm create vite@latest vue3-face-recognition --template vue
  cd vue3-face-recognition
  npm install

• TensorFlow.js安装：通过npm添加核心库和人脸检测模型。

  npm install @tensorflow/tfjs @tensorflow-models/face-detection

1.2 开发工具链

• VS Code：安装Vue 3 Snippets和ESLint插件，提升开发效率。
• 浏览器开发者工具：用于调试模型加载和摄像头权限。

二、核心功能实现

2.1 摄像头数据采集

通过浏览器navigator.mediaDevices.getUserMedia API获取视频流，并在Vue组件中渲染。

<template>
  <video ref="videoRef" autoplay playsinline></video>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const videoRef = ref(null);
onMounted(async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    videoRef.value.srcObject = stream;
  } catch (err) {
    console.error('摄像头访问失败:', err);
  }
});
</script>

2.2 加载人脸检测模型

TensorFlow.js提供了预训练的face-detection模型，支持SSD和Tiny两种变体。Tiny模型体积更小，适合移动端。

import * as faceDetection from '@tensorflow-models/face-detection';
const loadModel = async () => {
  const model = await faceDetection.load(faceDetection.SupportedPackages.mediapipeFaceDetection, {
    maxFaces: 5, // 最大检测人脸数
    scoreThreshold: 0.5 // 置信度阈值
  });
  return model;
};

2.3 实时人脸检测

将视频帧传递给模型进行检测，并在画布上绘制检测结果。

<canvas ref="canvasRef"></canvas>
<script setup>
import { ref, onMounted } from 'vue';
const canvasRef = ref(null);
let model = null;
const detectFaces = async () => {
  if (!model || !videoRef.value) return;
  const predictions = await model.estimateFaces(videoRef.value, false);
  const canvas = canvasRef.value;
  const ctx = canvas.getContext('2d');
  const video = videoRef.value;
  // 设置画布尺寸与视频一致
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制检测框
  predictions.forEach(pred => {
    const [x, y, width, height] = pred.boundingBox;
    ctx.strokeStyle = '#00FF00';
    ctx.lineWidth = 2;
    ctx.strokeRect(x, y, width, height);
  });
  requestAnimationFrame(detectFaces);
};
onMounted(async () => {
  model = await loadModel();
  detectFaces();
});
</script>

三、性能优化与用户体验

3.1 模型加载优化

• 分块加载：使用TensorFlow.js的tf.loadLayersModel异步加载模型权重。
• Web Worker：将模型推理过程放在Web Worker中，避免阻塞UI线程。

3.2 响应式设计

• 画布适配：监听窗口变化，动态调整画布尺寸。
  ```javascript
  const handleResize = () => {
  const video = videoRef.value;
  const canvas = canvasRef.value;
  if (video && canvas) {
  const scale = Math.min(

  window.innerWidth / video.videoWidth,
  window.innerHeight / video.videoHeight

  );
  canvas.style.transform = scale(${scale});
  }
  };

onMounted(() => {
window.addEventListener(‘resize’, handleResize);
});

### 3.3 错误处理与回退
- **模型加载失败**：提供备用UI或提示用户重试。
- **摄像头权限拒绝**：捕获异常并显示友好提示。
## 四、扩展功能与进阶方向
### 4.1 人脸特征分析
结合`face-landmarks-detection`模型，实现眼睛、嘴巴等关键点的检测。
```javascript
import * as faceLandmarks from '@tensorflow-models/face-landmarks-detection';
const loadLandmarksModel = async () => {
  return await faceLandmarks.load(faceLandmarks.SupportedPackages.mediapipeFacemesh);
};

4.2 本地存储与历史记录

使用IndexedDB存储检测结果，支持历史记录查看。

const storeDetection = async (data) => {
  const db = await openDB('faceDetectionDB', 1, {
    upgrade(db) {
      db.createObjectStore('detections', { keyPath: 'id', autoIncrement: true });
    }
  });
  await db.add('detections', data);
};

4.3 部署与PWA支持

通过Vite的PWA插件将应用打包为渐进式Web应用，支持离线使用。

npm install vite-plugin-pwa --save-dev

五、完整项目结构

src/
├── assets/          # 静态资源
├── components/      # Vue组件
│   ├── Camera.vue   # 摄像头组件
│   └── Canvas.vue   # 画布渲染组件
├── composables/     # 组合式函数
│   └── useFaceDetection.js
├── App.vue          # 根组件
└── main.js          # 应用入口

六、总结与学习建议

1. 分阶段开发：先实现基础功能，再逐步添加高级特性。
2. 模型选择：根据设备性能选择合适的模型变体。
3. 测试覆盖：在不同浏览器和设备上测试兼容性。
4. 性能监控：使用Chrome DevTools的Performance面板分析帧率。

通过28天的系统学习与实践，开发者可以掌握Vue 3与TensorFlow.js的核心技术，构建出具备实用价值的人脸识别Web应用。