更新记录

1.0.0（2026-04-10） 下载此版本

支持人脸录入与人脸识别后调用用户自定义登录接口两种，区别在于：人脸录入后将自动关闭摄像头，人脸识别则不自动关闭摄像头，但识别到人脸后不会继续调用回调接口，用户可在服务器人脸比对失败或网络异常后再次触发人脸识别检测。

平台兼容性

uni-app

本插件为基于 face-api.js 的摄像头人脸注册与检测模块

特别注意：使用时需要把插件目录下的models文件夹拷贝到 /static 目录下，即/static/models

使用场景有以下两种：

1.人脸注册

开发者通过本插件可以直接调用浏览器的摄像头，将自动检测人脸，如果识别到人脸，将会自动关闭浏览器摄像头，并调用回调函数，传递人脸照片url和照片blob数据，此时开发者可上传人脸照片到服务器进行人脸注册。

2.人脸识别登录

开发者通过本插件可以直接调用浏览器的摄像头，将自动检测人脸，如果识别到人脸，将不会自动关闭浏览器摄像头，并持续检测人脸，但只会调用回调函数一次，传递人脸照片url和照片blob数据，此时开发者可上传人脸照片到服务器进行人脸比对和登录，比对失败或者网络异常的原因导致登录流程中断时，应调用本插件提供的 continueDetect 函数再次允许检测人脸成功后的持续回调。

可查看示例工程中的两个页面，其中:

1.index.vue 演示了人脸录入功能

import { getVideoDevices,drawImageToCanvas } from '@/uni_modules/lhio-face-recognize/deviceManager.js';
import { loadModels} from "@/uni_modules/lhio-face-recognize/faceManager.js";
import { FaceRecognitionVm } from "@/uni_modules/lhio-face-recognize/faceRecognitionVm.js";
import { ref,watch } from 'vue';

const faceVm = new FaceRecognitionVm({
  type:0,
  callbacks:{
    onFaceRecognitionComplete: faceRecognitionComplete,
  }
});
const {videoDom , canvasDom,statusMessage,recognizeFace,stopRecognition,registerHandleClose} = faceVm;

setupCamera();
loadModels();

// 获取设备列表
async function setupCamera() {
  try {
    const devices = await getVideoDevices();
  } catch (err) {
  }
}

const startCamera = ()=>{
    //等待popup内元素初始化完毕
    setTimeout(()=>{
        videoDom.value = document.querySelector('video')
        canvasDom.value = document.querySelector('canvas');
        recognizeFace();
    },600)
}

async function stopCamera(){
    await stopRecognition()
}

const imageFile = ref(null)
function faceRecognitionComplete(filePath,imageData){
  console.log('faceRecognitionComplete');
  const file = new File([imageData], 'capture.jpg', {
    type: 'image/jpeg'
  })
  imageFile.value = file;
  const img = new Image();
  img.src = filePath;
  img.onload = () => {
      drawImageToCanvas(canvasDom.value,img)
      URL.revokeObjectURL(filePath)
  };
  img.onerror = (err) => {
      URL.revokeObjectURL(filePath)
      console.error("图片加载失败", err);
  };
}

2.face_detect.vue 演示了人脸识别功能

import { getVideoDevices,drawImageToCanvas } from '@/uni_modules/lhio-face-recognize/deviceManager.js';
import { loadModels} from "@/uni_modules/lhio-face-recognize/faceManager.js";
import { FaceRecognitionVm } from "@/uni_modules/lhio-face-recognize/faceRecognitionVm.js";
import { ref,watch } from 'vue';

const faceVm = new FaceRecognitionVm({
  type:1,
  callbacks:{
    onFaceRecognitionComplete: faceRecognitionComplete,
  }
});
const {videoDom , canvasDom,statusMessage,recognizeFace,continueDetect,stopRecognition} = faceVm;
setupCamera();
loadModels();
statusMessage.value = "点击进行人脸识别登录";

// 获取设备列表
async function setupCamera() {
  try {
    const devices = await getVideoDevices();
  } catch (err) {
  }
}

const startCamera = ()=>{
    //等待popup内元素初始化完毕
    setTimeout(()=>{
        videoDom.value = document.querySelector('video')
        canvasDom.value = document.querySelector('canvas');
        recognizeFace();
    },600)
}

async function stopCamera(){
    await stopRecognition()
}

function faceRecognitionComplete(filePath,imageData){
  console.log('uploading');
  const file = new File([imageData], 'capture.jpg', {
    type: 'image/jpeg'
  })

  URL.revokeObjectURL(filePath)

  //返回的 filePath 或者 imageData 提交照片到服务器进行人脸比对，比对成功则直接登录，
  //比对失败或者网络异常则应继续检测人脸
  setTimeout(()=>{
      //检测到人脸后会自动停止调用 faceRecognitionComplete，
      //调用continueDetect将重新开始调用 faceRecognitionComplete
      console.log('重新开始检测人脸');
      continueDetect();
  },5000)
}