一、技术架构与核心原理

本系统采用前后端分离架构，前端基于Vue 3框架构建，通过浏览器MediaDevices API调用摄像头设备，捕获视频流后进行人脸检测与情绪分析。后端通过百度AI开放平台的人脸识别服务实现情绪识别，核心流程包括：

1. 摄像头调用：利用navigator.mediaDevices.getUserMedia()获取视频流
2. 人脸检测：通过Canvas API提取视频帧中的人脸区域
3. API调用：将人脸图像上传至百度AI人脸识别接口
4. 结果解析：处理返回的JSON数据，提取情绪识别结果

百度AI人脸识别服务支持8种基础情绪识别（高兴、悲伤、愤怒、惊讶、恐惧、厌恶、中性、无表情），准确率达95%以上。开发者需在百度智能云控制台创建应用，获取API Key和Secret Key。

二、前端实现步骤

1. 环境准备

npm install axios vue-canvas-face-detection

创建.env文件存储环境变量：

VUE_APP_BAIDU_API_KEY=your_api_key
VUE_APP_BAIDU_SECRET_KEY=your_secret_key
VUE_APP_ACCESS_TOKEN_URL=https://aip.baidubce.com/oauth/2.0/token
VUE_APP_FACE_DETECT_URL=https://aip.baidubce.com/rest/2.0/face/v1/detect

2. 摄像头组件实现

<template>
  <div class="camera-container">
    <video ref="video" autoplay playsinline></video>
    <canvas ref="canvas" style="display:none"></canvas>
    <div v-if="emotion" class="emotion-result">
      检测到情绪：{{ emotionMap[emotion] }} ({{ confidence }}%)
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      emotion: null,
      confidence: 0,
      emotionMap: {
        'happy': '高兴',
        'sad': '悲伤',
        'angry': '愤怒',
        'surprise': '惊讶',
        'fear': '恐惧',
        'disgust': '厌恶',
        'neutral': '中性',
        'none': '无表情'
      },
      stream: null,
      interval: null
    };
  },
  mounted() {
    this.initCamera();
    this.startDetection();
  },
  beforeUnmount() {
    this.stopDetection();
    if (this.stream) {
      this.stream.getTracks().forEach(track => track.stop());
    }
  },
  methods: {
    async initCamera() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({
          video: { width: 640, height: 480, facingMode: 'user' }
        });
        this.$refs.video.srcObject = this.stream;
      } catch (err) {
        console.error('摄像头访问失败:', err);
      }
    },
    async startDetection() {
      this.interval = setInterval(async () => {
        const video = this.$refs.video;
        const canvas = this.$refs.canvas;
        const ctx = canvas.getContext('2d');
        // 设置canvas尺寸与视频帧一致
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        // 绘制当前帧到canvas
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        // 获取人脸检测所需的base64图像
        const imageData = canvas.toDataURL('image/jpeg', 0.8);
        await this.detectEmotion(imageData);
      }, 1000); // 每秒检测一次
    },
    stopDetection() {
      clearInterval(this.interval);
    },
    async detectEmotion(imageBase64) {
      try {
        // 1. 获取Access Token
        const tokenRes = await axios.post(
          process.env.VUE_APP_ACCESS_TOKEN_URL,
          new URLSearchParams({
            grant_type: 'client_credentials',
            client_id: process.env.VUE_APP_BAIDU_API_KEY,
            client_secret: process.env.VUE_APP_BAIDU_SECRET_KEY
          })
        );
        const accessToken = tokenRes.data.access_token;
        // 2. 调用人脸检测API
        const detectRes = await axios.post(
          `${process.env.VUE_APP_FACE_DETECT_URL}?access_token=${accessToken}`,
          {
            image: imageBase64.split(',')[1], // 移除dataURL前缀
            image_type: 'BASE64',
            face_field: 'emotion'
          },
          {
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
          }
        );
        // 3. 处理识别结果
        if (detectRes.data.result && detectRes.data.result.length > 0) {
          const emotionInfo = detectRes.data.result[0].emotion;
          const maxEmotion = Object.entries(emotionInfo).reduce(
            (max, [key, value]) => value > (max[1] || -Infinity) ? [key, value] : max,
            []
          );
          this.emotion = maxEmotion[0];
          this.confidence = Math.round(maxEmotion[1] * 100);
        }
      } catch (err) {
        console.error('情绪识别失败:', err);
      }
    }
  }
};
</script>

三、关键技术要点

1. 摄像头优化策略

• 分辨率适配：通过video.videoWidth/Height获取实际分辨率，避免硬编码
• 帧率控制：使用setInterval而非requestAnimationFrame平衡性能与实时性
• 错误处理：添加摄像头访问失败的重试机制（最多3次）

2. 百度AI API调用规范

• 认证流程：

  // 生成签名（后端实现示例）
  const crypto = require('crypto');
  function getAuthSign(secretKey, timestamp) {
    const signStr = `/rest/2.0/face/v1/detect?access_token=${accessToken}&timestamp=${timestamp}`;
    return crypto.createHmac('sha256', secretKey)
                 .update(signStr)
                 .digest('hex');
  }

• 请求限制：
  • QPS限制：默认5次/秒，可通过申请提升
  • 图像大小：不超过5MB，建议压缩至300KB以下
  • 并发控制：使用令牌桶算法限制请求速率

3. 性能优化方案

• Web Worker处理：将图像处理任务移至Worker线程
• 缓存策略：对重复帧进行哈希比对，避免重复请求
• 降级方案：当API不可用时显示本地缓存结果

四、部署与安全注意事项

1. HTTPS强制：浏览器要求摄像头访问必须在安全上下文中进行
2. 敏感信息保护：
   • 使用dotenv管理API密钥
   • 部署时通过环境变量注入，避免代码硬编码
3. CORS配置：

   // 开发服务器代理配置（vue.config.js）
   module.exports = {
     devServer: {
       proxy: {
         '/baidu-api': {
           target: 'https://aip.baidubce.com',
           changeOrigin: true,
           pathRewrite: { '^/baidu-api': '' }
         }
       }
     }
   };

五、扩展应用场景

1. 心理健康监测：长期情绪趋势分析
2. 教育互动系统：实时反馈学生参与度
3. 零售体验优化：分析顾客购物情绪
4. 安全预警系统：异常情绪识别报警

六、常见问题解决方案

问题现象	可能原因	解决方案
摄像头无法启动	权限被拒绝	检查浏览器设置，确保允许摄像头访问
API返回403错误	Token过期	实现Token自动刷新机制
识别结果延迟	网络拥塞	添加请求队列，限制并发数
情绪识别不准	光照不足	添加前置预处理（直方图均衡化）

本实现方案通过模块化设计，将摄像头控制、图像处理、API调用分离，便于后续维护和功能扩展。实际开发中建议添加单元测试（使用Jest）和E2E测试（使用Cypress），确保系统稳定性。根据百度AI官方文档，开发者每月可享受1000次免费调用额度，适合中小型项目原型验证。