当前位置：首页 > VUE

vue实现人脸拍照

2026-02-19 17:48:39VUE

Vue 实现人脸拍照功能

人脸拍照功能通常需要结合浏览器 API 和第三方库来实现。以下是实现步骤和代码示例：

获取摄像头权限并显示视频流

在 Vue 组件中，通过 navigator.mediaDevices.getUserMedia API 获取摄像头权限：

<template>
  <div>
    <video ref="video" autoplay></video>
    <button @click="capture">拍照</button>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  methods: {
    async startCamera() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true
        });
        this.$refs.video.srcObject = stream;
      } catch (err) {
        console.error("摄像头访问失败:", err);
      }
    }
  },
  mounted() {
    this.startCamera();
  }
};
</script>

实现拍照功能

使用 Canvas 捕获视频帧作为照片：

methods: {
  capture() {
    const video = this.$refs.video;
    const canvas = this.$refs.canvas;
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

    // 获取图片数据
    const imageData = canvas.toDataURL('image/png');
    this.$emit('captured', imageData);
  }
}

添加人脸检测功能（可选）

使用 TensorFlow.js 或 tracking.js 等库实现人脸检测：

import * as faceapi from 'face-api.js';

async loadModels() {
  await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
}

async detectFaces() {
  const detections = await faceapi.detectAllFaces(
    this.$refs.video,
    new faceapi.TinyFaceDetectorOptions()
  );

  if(detections.length > 0) {
    this.capture();
  }
}

优化用户体验

添加拍照倒计时和闪光效果：

methods: {
  async takePhotoWithCountdown() {
    this.countdown = 3;
    const timer = setInterval(() => {
      this.countdown--;
      if(this.countdown === 0) {
        clearInterval(timer);
        this.flashEffect();
        this.capture();
      }
    }, 1000);
  },

  flashEffect() {
    this.isFlashing = true;
    setTimeout(() => {
      this.isFlashing = false;
    }, 200);
  }
}

处理移动端兼容性

针对移动设备添加全屏和方向处理：

vue实现人脸拍照

mounted() {
  if(/Android|iPhone/i.test(navigator.userAgent)) {
    this.$refs.video.style.width = '100%';
    this.$refs.video.style.height = 'auto';
  }
}