JavaScript实现人体面部活体检测的功能

vue-liveness-detection
├─ package.json                # 项目依赖 & 脚本配置
├─ vite.config.js              # Vite 配置
├─ README.md                   # 项目说明文档
├─ public/
│   └─ favicon.ico            # 网站图标
└─ src/
    ├─ main.js                 # 入口文件，创建/挂载 Vue 应用
    ├─ App.vue                 # 根组件
    ├─ assets/                 # 静态资源目录 (CSS / 图片 / ...)
    │   └─ styles.css
    ├─ components/
    │   ├─ LivenessCheck.vue   # 核心的“活体检测”组件
    │   └─ VideoCapture.vue    # 摄像头视频预览组件
    ├─ store/
    │   └─ index.js            # Vuex/Pinia 等状态管理(如需)
    ├─ utils/
    │   ├─ faceApi.js          # Face-API.js 初始化/工具方法
    │   └─ livenessUtils.js    # 活体检测相关的通用函数
    └─ router/
        └─ index.js            # Vue Router 配置

{
  "name": "vue-liveness-detection",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4",
    "vue-router": "^4.2.2",
    // 如果需要使用 face-api.js:
    "face-api.js": "^0.22.2",
    // 如果使用 pinia 或 vuex:
    // "pinia": "^2.1.3",
    // "vuex": "^4.1.0"
  },
  "devDependencies": {
    "vite": "^4.3.9"
  }
}

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

import { createApp } from 'vue'
import App from './App.vue'
// 如果需要路由或 Pinia/Vuex，可在此引入
// import router from './router'
// import store from './store'
import './assets/styles.css'  // 自定义全局样式
createApp(App)
  // .use(router)
  // .use(store)
  .mount('#app')

<template>
  <div id="app">
    <h1>Vue Liveness Detection Demo</h1>
    <!-- 在此使用我们的 LivenessCheck 组件 -->
    <LivenessCheck />
  </div>
</template>
<script>
import LivenessCheck from './components/LivenessCheck.vue'
export default {
  name: 'App',
  components: {
    LivenessCheck
  }
}
</script>
<style scoped>
#app {
  padding: 20px;
}
</style>

<template>
  <div class="video-container">
    <video
      ref="videoRef"
      autoplay
      playsinline
      width="640"
      height="480"
      @loadeddata="onVideoLoaded"
    ></video>
  </div>
</template>
<script>
export default {
  name: 'VideoCapture',
  emits: ['video-ready'],
  data() {
    return {
      stream: null,
      videoRef: null,
    }
  },
  mounted() {
    this.initCamera()
  },
  unmounted() {
    this.stopCamera()
  },
  methods: {
    async initCamera() {
      try {
        this.stream = await navigator.mediaDevices.getUserMedia({ video: true })
        this.videoRef.srcObject = this.stream
      } catch (err) {
        console.error('Error accessing camera: ', err)
      }
    },
    stopCamera() {
      if (this.stream && this.stream.getTracks) {
        this.stream.getTracks().forEach(track => track.stop())
      }
    },
    onVideoLoaded() {
      // 通知父组件，视频可以被处理
      this.$emit('video-ready', this.videoRef)
    }
  }
}
</script>
<style scoped>
.video-container {
  max-width: 640px;
  max-height: 480px;
  border: 1px solid #ccc;
  display: inline-block;
}
</style>

import * as faceapi from 'face-api.js'
// 预加载模型
export async function loadFaceApiModels() {
  const MODEL_URL = '/models' // 需要把 model 文件放到 public/models 下
  await faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL)
  await faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL)
  // 可选：如果需要识别表情、年龄等，还可加载其他模型
}
// 进行人脸检测并获取 landmarks
export async function detectFaceAndLandmarks(videoElement) {
  // 使用 tinyFaceDetector 做人脸检测
  const detection = await faceapi
    .detectSingleFace(videoElement, new faceapi.TinyFaceDetectorOptions())
    .withFaceLandmarks()
  return detection // 包含 { detection, landmarks }
}

<template>
  <div class="liveness-check">
    <VideoCapture @video-ready="handleVideoReady" />
    <div class="status">
      <p>Status: <strong>{{ detectionStatus }}</strong></p>
    </div>
    <button @click="startLivenessCheck" :disabled="detectionLoading">
      {{ detectionLoading ? '检测中...' : '开始检测' }}
    </button>
  </div>
</template>
<script>
import VideoCapture from './VideoCapture.vue'
import { loadFaceApiModels, detectFaceAndLandmarks } from '@/utils/faceApi.js'
export default {
  name: 'LivenessCheck',
  components: {
    VideoCapture
  },
  data() {
    return {
      videoElement: null,
      detectionStatus: '未检测',
      detectionLoading: false,
      checkInterval: null
    }
  },
  async mounted() {
    // 加载 faceapi 模型
    await loadFaceApiModels()
  },
  beforeUnmount() {
    if (this.checkInterval) {
      clearInterval(this.checkInterval)
    }
  },
  methods: {
    handleVideoReady(videoRef) {
      this.videoElement = videoRef
    },
    startLivenessCheck() {
      if (!this.videoElement) {
        alert('无法访问摄像头视频，请检查是否允许权限')
        return
      }
      this.detectionLoading = true
      this.detectionStatus = '检测开始...'
      // 定时进行人脸检测
      this.checkInterval = setInterval(async () => {
        const detection = await detectFaceAndLandmarks(this.videoElement)
        if (!detection) {
          this.detectionStatus = '未检测到人脸'
          return
        }
        // 获取 landmarks
        const { landmarks } = detection
        // 简易眨眼检测(阈值判定)
        const leftEye = landmarks.getLeftEye()
        const rightEye = landmarks.getRightEye()
        // 计算眼睛上下边缘间距：过小可能为闭眼
        const leftEyeOpenScore = this.getEyeOpenScore(leftEye)
        const rightEyeOpenScore = this.getEyeOpenScore(rightEye)
        if (leftEyeOpenScore < 4 || rightEyeOpenScore < 4) {
          this.detectionStatus = '检测到眨眼'
        } else {
          this.detectionStatus = '双眼睁开'
        }
      }, 1000) // 每秒检测一次
    },
    getEyeOpenScore(eyePoints) {
      // eyePoints 是 6 个关键点 [ [x1,y1], [x2,y2], ..., [x6,y6] ]
      // 仅做一个非常简化的上下边缘距离计算：如 (point[1].y - point[5].y) 的绝对值
      // 生产环境中应采用更严谨的几何方法
      if (!eyePoints || eyePoints.length < 6) return 0
      const topY = eyePoints[1].y
      const bottomY = eyePoints[4].y
      return Math.abs(topY - bottomY)
    }
  }
}
</script>
<style scoped>
.liveness-check {
  margin-top: 20px;
}
.status {
  margin: 10px 0;
}
</style>

cd vue-liveness-detection
npm install

npm run dev