vue-liveness-detection
├─ package.json                # 項(xiàng)目依賴 & 腳本配置
├─ vite.config.js              # Vite 配置
├─ README.md                   # 項(xiàng)目說明文檔
├─ public/
│   └─ favicon.ico            # 網(wǎng)站圖標(biāo)
└─ src/
    ├─ main.js                 # 入口文件，創(chuàng)建/掛載 Vue 應(yīng)用
    ├─ App.vue                 # 根組件
    ├─ assets/                 # 靜態(tài)資源目錄 (CSS / 圖片 / ...)
    │   └─ styles.css
    ├─ components/
    │   ├─ LivenessCheck.vue   # 核心的“活體檢測”組件
    │   └─ VideoCapture.vue    # 攝像頭視頻預(yù)覽組件
    ├─ store/
    │   └─ index.js            # Vuex/Pinia 等狀態(tài)管理(如需)
    ├─ utils/
    │   ├─ faceApi.js          # Face-API.js 初始化/工具方法
    │   └─ livenessUtils.js    # 活體檢測相關(guān)的通用函數(shù)
    └─ 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'
// 預(yù)加載模型
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)
  // 可選：如果需要識別表情、年齡等，還可加載其他模型
}
// 進(jìn)行人臉檢測并獲取 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('無法訪問攝像頭視頻，請檢查是否允許權(quán)限')
        return
      }
      this.detectionLoading = true
      this.detectionStatus = '檢測開始...'
      // 定時(shí)進(jìn)行人臉檢測
      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()
        // 計(jì)算眼睛上下邊緣間距：過小可能為閉眼
        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 個(gè)關(guān)鍵點(diǎn) [ [x1,y1], [x2,y2], ..., [x6,y6] ]
      // 僅做一個(gè)非常簡化的上下邊緣距離計(jì)算：如 (point[1].y - point[5].y) 的絕對值
      // 生產(chǎn)環(huán)境中應(yīng)采用更嚴(yán)謹(jǐn)?shù)膸缀畏椒?
      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