Vue 3与TensorFlow.js实战：28天打造人脸识别Web应用

一、技术选型与前期准备

在开发人脸识别Web应用前，需明确技术栈的合理性。Vue 3作为前端框架，凭借Composition API和响应式系统的优化，能高效管理组件状态；TensorFlow.js作为机器学习库，支持在浏览器中直接运行预训练模型，无需后端支持。两者结合可实现轻量级、跨平台的人脸识别解决方案。

关键步骤：

1. 环境搭建：安装Node.js（建议LTS版本），通过npm init vue@latest创建Vue 3项目，选择TypeScript模板以增强代码可维护性。
2. 依赖安装：运行npm install @tensorflow/tfjs @tensorflow-models/face-landmark-detection，引入TensorFlow.js核心库及人脸关键点检测模型。
3. 模型选择：推荐使用face-landmark-detection模型，该模型可检测68个人脸关键点，兼顾精度与性能。

二、模型加载与初始化

TensorFlow.js的模型加载需异步处理，避免阻塞主线程。Vue 3的onMounted生命周期钩子可完美适配此场景。

代码示例：

import { onMounted, ref } from 'vue';
import * as faceLandmarks from '@tensorflow-models/face-landmark-detection';
const model = ref<faceLandmarks.FaceLandmarkDetector | null>(null);
onMounted(async () => {
  try {
    model.value = await faceLandmarks.load();
    console.log('模型加载成功');
  } catch (error) {
    console.error('模型加载失败:', error);
  }
});

优化建议：

• 使用try-catch捕获模型加载异常，避免应用崩溃。
• 在生产环境中，可通过CDN加速模型下载，或使用Service Worker缓存模型文件。

三、实时视频流处理

人脸识别需通过摄像头获取实时视频流。Vue 3可通过<video>元素与navigator.mediaDevices.getUserMedia实现。

实现步骤：

1. 权限申请：在onMounted中调用摄像头API。
   ```typescript
   const videoRef = ref(null);

onMounted(async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
if (videoRef.value) {
videoRef.value.srcObject = stream;
}
} catch (error) {
console.error(‘摄像头访问失败:’, error);
}
});

2. **画布绘制**：创建`<canvas>`元素，将视频帧与检测结果同步渲染。
```typescript
const canvasRef = ref<HTMLCanvasElement | null>(null);
const detectFaces = async () => {
  if (!model.value || !videoRef.value || !canvasRef.value) return;
  const predictions = await model.value.estimateFaces(videoRef.value);
  const ctx = canvasRef.value.getContext('2d');
  if (ctx) {
    ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
    predictions.forEach(face => {
      // 绘制人脸框与关键点
      ctx.strokeStyle = 'red';
      ctx.strokeRect(face.boundingBox.topLeft.x, face.boundingBox.topLeft.y, 
                    face.boundingBox.width, face.boundingBox.height);
      face.landmarks.forEach(landmark => {
        ctx.beginPath();
        ctx.arc(landmark.x, landmark.y, 2, 0, 2 * Math.PI);
        ctx.fillStyle = 'green';
        ctx.fill();
      });
    });
  }
  requestAnimationFrame(detectFaces); // 循环检测
};

四、性能优化策略

浏览器端的人脸识别需平衡精度与性能，以下优化可显著提升用户体验：

1. 降低分辨率：通过<video>的width/height属性或CSS缩放，减少输入图像尺寸。

   <video ref="videoRef" width="320" height="240" autoplay playsinline></video>

2. 节流处理：使用lodash.throttle限制检测频率（如每秒10帧）。
   ```typescript
   import { throttle } from ‘lodash-es’;

const throttledDetect = throttle(detectFaces, 100);
onMounted(() => {
throttledDetect(); // 初始调用
});

3. **Web Worker**：将模型推理移至Web Worker，避免UI线程卡顿。需通过`postMessage`传递图像数据。
### 五、完整组件实现
将上述逻辑封装为Vue 3组件，提升代码复用性。
**FaceDetector.vue示例**：
```vue
<template>
  <div class="detector-container">
    <video ref="videoRef" width="320" height="240" autoplay playsinline></video>
    <canvas ref="canvasRef" width="320" height="240"></canvas>
    <div v-if="error" class="error-message">{{ error }}</div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as faceLandmarks from '@tensorflow-models/face-landmark-detection';
import { throttle } from 'lodash-es';
const videoRef = ref<HTMLVideoElement | null>(null);
const canvasRef = ref<HTMLCanvasElement | null>(null);
const model = ref<faceLandmarks.FaceLandmarkDetector | null>(null);
const error = ref<string | null>(null);
const initCamera = async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    if (videoRef.value) videoRef.value.srcObject = stream;
  } catch (err) {
    error.value = '无法访问摄像头: ' + (err as Error).message;
  }
};
const detectFaces = throttle(async () => {
  if (!model.value || !videoRef.value || !canvasRef.value) return;
  const predictions = await model.value.estimateFaces(videoRef.value);
  const ctx = canvasRef.value.getContext('2d');
  if (ctx) {
    ctx.clearRect(0, 0, 320, 240);
    predictions.forEach(face => {
      ctx.strokeStyle = 'red';
      ctx.strokeRect(
        face.boundingBox.topLeft.x, 
        face.boundingBox.topLeft.y, 
        face.boundingBox.width, 
        face.boundingBox.height
      );
      face.landmarks.forEach(landmark => {
        ctx.beginPath();
        ctx.arc(landmark.x, landmark.y, 2, 0, 2 * Math.PI);
        ctx.fillStyle = 'green';
        ctx.fill();
      });
    });
  }
  requestAnimationFrame(detectFaces);
}, 100);
onMounted(async () => {
  try {
    model.value = await faceLandmarks.load();
    await initCamera();
    detectFaces();
  } catch (err) {
    error.value = '模型加载失败: ' + (err as Error).message;
  }
});
onBeforeUnmount(() => {
  if (videoRef.value?.srcObject) {
    (videoRef.value.srcObject as MediaStream).getTracks().forEach(track => track.stop());
  }
});
</script>

六、部署与扩展建议

1. PWA支持：通过vite-pwa插件将应用转为离线可用的PWA。
2. 模型量化：使用TensorFlow.js的quantizeBytes参数减少模型体积。
3. 多模型切换：根据设备性能动态加载tiny或full版本的模型。

七、总结与展望

本文通过Vue 3与TensorFlow.js的结合，实现了浏览器端的人脸识别功能。核心优势在于无需后端支持、跨平台兼容性强。未来可扩展方向包括：

• 集成活体检测算法，提升安全性；
• 结合WebSocket实现多人实时协作；
• 使用TensorFlow.js的迁移学习功能，支持自定义人脸识别。

开发者可通过调整模型参数、优化渲染逻辑，进一步平衡精度与性能，满足不同场景需求。