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

引言：技术选型与项目背景

在Web端实现人脸识别功能，传统方案需依赖后端API调用，存在延迟高、隐私风险等问题。随着浏览器计算能力提升，TensorFlow.js允许直接在前端运行机器学习模型，结合Vue 3的响应式特性，可构建轻量级、实时性强的Web应用。本文以28天为周期，分阶段拆解从环境搭建到功能落地的完整流程，适合有一定Vue基础且希望探索AI+Web融合的开发者。

阶段一：环境搭建与基础准备（第1-3天）

1. 项目初始化

使用Vite创建Vue 3项目，推荐选择TypeScript模板以提升代码健壮性：

npm create vite@latest vue3-face-recognition --template vue-ts

配置Vue Router与Pinia（状态管理），为后续人脸数据存储与页面跳转做准备。

2. TensorFlow.js集成

通过CDN或npm安装TensorFlow.js核心库及人脸检测扩展包：

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

在main.ts中预加载模型以减少首次运行延迟：

import * as tf from '@tensorflow/tfjs';
import { loadFaceLandmarksDetection } from '@tensorflow-models/face-landmarks-detection';
async function initModel() {
  const model = await loadFaceLandmarksDetection('mediapipe-facemesh');
  console.log('模型加载完成');
}
initModel();

阶段二：核心功能开发（第4-14天）

1. 视频流捕获与Canvas渲染

利用浏览器getUserMediaAPI获取摄像头权限，通过<video>元素显示实时画面，并使用<canvas>绘制检测结果：

<template>
  <video ref="videoRef" autoplay playsinline />
  <canvas ref="canvasRef" />
</template>
<script setup lang="ts">
const videoRef = ref<HTMLVideoElement>(null);
const canvasRef = ref<HTMLCanvasElement>(null);
onMounted(async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  videoRef.value!.srcObject = stream;
  // 每30ms执行一次检测
  setInterval(async () => {
    if (videoRef.value!.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA) {
      await detectFaces();
    }
  }, 30);
});
</script>

2. 人脸检测与关键点标记

调用TensorFlow.js的estimateFaces方法获取人脸68个关键点坐标，将其映射到Canvas画布：

async function detectFaces() {
  const predictions = await model.estimateFaces(videoRef.value!, {
    flipHorizontal: false,
    predictIrises: true
  });
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext('2d')!;
  canvas.width = videoRef.value!.videoWidth;
  canvas.height = videoRef.value!.videoHeight;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  predictions.forEach(face => {
    // 绘制人脸边界框
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 2;
    ctx.strokeRect(
      face.boundingBox.topLeft[0],
      face.boundingBox.topLeft[1],
      face.boundingBox.bottomRight[0] - face.boundingBox.topLeft[0],
      face.boundingBox.bottomRight[1] - face.boundingBox.topLeft[1]
    );
    // 绘制关键点
    ctx.fillStyle = 'red';
    face.scaledMesh.forEach(point => {
      ctx.beginPath();
      ctx.arc(point[0], point[1], 2, 0, 2 * Math.PI);
      ctx.fill();
    });
  });
}

3. 性能优化策略

• Web Workers：将模型推理过程移至Web Worker，避免阻塞UI线程。
• 模型量化：使用TensorFlow.js的quantizeToFloat16方法减少模型体积。
• 帧率控制：通过requestAnimationFrame替代setInterval实现自适应帧率。

阶段三：功能扩展与部署（第15-28天）

1. 高级功能实现

• 情绪识别：集成预训练的情绪分类模型（如FER+），通过人脸关键点计算表情特征。
• 年龄/性别预测：使用AgeNet/GenderNet模型，在检测到人脸后自动触发预测。
• 活体检测：结合眨眼检测（通过眼睛纵横比计算）与头部姿态估计，防止照片攻击。

2. 响应式UI设计

使用Vue 3的Composition API构建动态仪表盘，实时显示检测结果：

<template>
  <div class="stats-panel">
    <div>检测人数：{{ faceCount }}</div>
    <div>FPS：{{ fps }}</div>
    <button @click="toggleCamera">切换摄像头</button>
  </div>
</template>
<script setup lang="ts">
const faceCount = ref(0);
const fps = ref(0);
let lastTime = 0;
function updateStats(predictionsLength: number, currentTime: number) {
  faceCount.value = predictionsLength;
  fps.value = Math.round(1000 / (currentTime - lastTime));
  lastTime = currentTime;
}
</script>

3. 部署与兼容性处理

• PWA支持：通过vite-plugin-pwa实现离线运行能力。
• 浏览器兼容：检测getUserMedia与WebGL支持，提供降级方案。
• 模型缓存：使用Service Worker缓存模型文件，减少重复下载。

实战建议与避坑指南

1. 模型选择：

   • 实时性要求高：优先选择mediapipe-facemesh（轻量级，支持移动端）。
   • 精度优先：使用blazeface（更准确但计算量更大）。

2. 内存管理：
   在组件卸载时释放TensorFlow.js内存：

   onUnmounted(() => {
     tf.engine().dispose();
     videoRef.value!.srcObject?.getTracks().forEach(track => track.stop());
   });

3. 移动端适配：
   添加playsinline属性解决iOS全屏问题，通过orientationchange事件调整画布尺寸。

总结与未来展望

通过28天的实践，我们成功构建了一个基于Vue 3与TensorFlow.js的人脸识别Web应用，实现了从基础检测到高级分析的全流程。未来可探索的方向包括：

• 集成WebRTC实现多人视频会议中的实时标记
• 结合WebAssembly提升复杂模型推理速度
• 开发浏览器扩展实现跨网页人脸识别服务

本项目的完整代码已托管至GitHub，附带详细注释与部署文档，读者可快速上手并二次开发。