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

在人工智能与前端技术深度融合的今天，浏览器端实现复杂AI功能已不再是幻想。本文将围绕“Vue 3”与“TensorFlow.js”两大核心技术，详细阐述如何在28天内完成一个具备实时人脸识别能力的Web应用。无论你是前端开发者还是AI爱好者，都能通过本文获得从零到一的完整指导。

一、技术选型与架构设计

1.1 Vue 3的优势

Vue 3的Composition API与TypeScript支持，为复杂逻辑的模块化组织提供了极大便利。其响应式系统与虚拟DOM的高效更新机制，确保了人脸识别过程中UI的流畅交互。例如，通过ref和reactive可以轻松管理摄像头流、检测结果等动态数据。

1.2 TensorFlow.js的定位

作为浏览器端的机器学习框架，TensorFlow.js无需后端支持即可运行预训练模型。其提供的tfjs-core（核心运算）、tfjs-backend-webgl（GPU加速）和tfjs-converter（模型转换）模块，共同构成了在浏览器中执行人脸检测的基础设施。

1.3 系统架构

应用采用三层架构：

• 数据层：通过getUserMedia获取摄像头视频流
• 逻辑层：TensorFlow.js处理视频帧，执行人脸检测
• 展示层：Vue 3渲染检测结果（边界框、关键点）

二、环境搭建与依赖安装

2.1 项目初始化

npm init vue@latest face-recognition-app
cd face-recognition-app
npm install

2.2 核心依赖安装

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

• @tensorflow/tfjs：TensorFlow.js核心库
• @tensorflow-models/face-landmarks-detection：预训练的人脸检测模型

2.3 开发环境配置

在vite.config.ts中添加TensorFlow.js的CDN引用（可选）：

export default defineConfig({
  // ...其他配置
  resolve: {
    alias: {
      '@tensorflow/tfjs-backend-webgl': 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl@3.18.0/dist/tf-backend-webgl.min.js'
    }
  }
})

三、核心功能实现

3.1 摄像头接入与视频流处理

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

关键点：

• 使用playsinline属性确保iOS设备正常显示
• 错误处理需涵盖用户拒绝权限、设备不存在等场景

3.2 模型加载与初始化

import * as faceLandmarksDetection from '@tensorflow-models/face-landmarks-detection';
import { drawFace } from './utils/draw'; // 自定义绘制函数
const model = ref(null);
const loadModel = async () => {
  try {
    const detectorConfig = {
      runtime: 'tfjs', // 或 'wasm' 用于更复杂的模型
      maxFaces: 5,     // 最大检测人脸数
      scoreThreshold: 0.7
    };
    model.value = await faceLandmarksDetection.load(
      faceLandmarksDetection.SupportedPackages.mediaPipeFaceMesh,
      detectorConfig
    );
  } catch (err) {
    console.error('模型加载失败:', err);
  }
};

模型选择：

• mediaPipeFaceMesh：提供468个关键点的高精度检测
• tinyFaceDetector：轻量级模型，适合移动端

3.3 实时检测与渲染

const detectFaces = async () => {
  if (!model.value || !videoRef.value) return;
  const canvas = canvasRef.value;
  const ctx = canvas.getContext('2d');
  const video = videoRef.value;
  // 设置canvas尺寸与视频一致
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  // 清除上一帧
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  try {
    // 执行检测
    const predictions = await model.value.estimateFaces({
      input: video,
      returnTensors: false,
      predictIrises: true // 是否检测虹膜
    });
    // 绘制结果
    predictions.forEach(pred => {
      drawFace(ctx, pred); // 自定义绘制函数
    });
    // 循环检测（约30fps）
    setTimeout(detectFaces, 33);
  } catch (err) {
    console.error('检测失败:', err);
  }
};

性能优化：

• 使用requestAnimationFrame替代setTimeout实现更流畅的动画
• 对低性能设备，可降低检测频率（如每两帧检测一次）

四、高级功能扩展

4.1 表情识别

通过关键点坐标计算欧式距离，判断微笑、皱眉等表情：

const detectExpression = (landmarks) => {
  const mouthWidth = Math.hypot(
    landmarks[61].x - landmarks[67].x,
    landmarks[61].y - landmarks[67].y
  );
  const mouthHeight = Math.hypot(
    landmarks[62].x - landmarks[66].x,
    landmarks[62].y - landmarks[66].y
  );
  return mouthHeight / mouthWidth > 0.3 ? '微笑' : '中性';
};

4.2 性能监控

const stats = new Stats(); // 使用stats.js库
stats.showPanel(0); // 显示FPS面板
document.body.appendChild(stats.dom);
// 在检测循环中更新
const detectFaces = async () => {
  stats.begin();
  // ...检测逻辑
  stats.end();
};

五、部署与优化

5.1 模型量化

使用TensorFlow.js Converter将模型转换为量化版本：

tensorflowjs_converter --input_format=tf_saved_model \
  --output_format=tfjs_graph_model \
  --quantize_uint8 \
  ./saved_model ./web_model

量化后模型体积可减少75%，推理速度提升2-3倍。

5.2 代码分割

在Vite配置中启用按需加载：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          tfjs: ['@tensorflow/tfjs'],
          model: ['@tensorflow-models/face-landmarks-detection']
        }
      }
    }
  }
})

六、常见问题解决方案

6.1 模型加载失败

• 现象：控制台报错Failed to fetch
• 原因：跨域问题或CDN不可用
• 解决：
  • 使用本地模型：npm install @tensorflow-models/face-landmarks-detection/dist/facemesh.wasm
  • 配置CORS代理

6.2 检测延迟过高

• 现象：FPS低于15
• 优化：
  • 降低视频分辨率：video.width = 320; video.height = 240;
  • 使用tinyFaceDetector模型
  • 启用WebWorker进行后台处理

七、完整代码示例

[GitHub完整项目链接]（示例链接，实际需替换）包含以下核心文件：

• src/components/FaceDetector.vue：主检测组件
• src/utils/draw.ts：人脸绘制工具函数
• src/composables/useModel.ts：模型加载逻辑
• public/models/：本地化模型文件

八、总结与展望

通过Vue 3与TensorFlow.js的结合，我们成功实现了浏览器端的人脸识别应用。这一技术组合的优势在于：

1. 零后端依赖：完全在客户端运行
2. 快速迭代：Vue 3的响应式系统简化状态管理
3. 跨平台：一次开发，适配PC/移动端

未来可探索的方向包括：

• 集成AR滤镜（基于关键点变形）
• 添加身份识别功能（需后端支持）
• 优化移动端性能（使用WebAssembly）

开发者可通过调整模型参数、优化绘制逻辑，进一步提升应用的实用性与用户体验。这一实践不仅展示了前端技术的潜力，也为AI民主化提供了可行路径。