face-api实现人脸识别。-Toy模板网

这篇具有很好参考价值的文章主要介绍了face-api实现人脸识别。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

face-api的由来

访问地址

JavaScript API for face detection and face recognition in the browser implemented on top of the tensorflow.js core API 官方说明

翻译：在tensorflow.js核心API之上实现的用于浏览器中人脸检测和人脸识别的JavaScript API

tensorflow.js 是什么

访问tensorflow.js

face-api实现人脸识别。,前端,javascript

部分代码

const video = document.getElementById("video");

const startVideo = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  video.srcObject = stream;
  console.log(stream)
  video.play();
};
Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri("./models"),
  faceapi.nets.faceLandmark68Net.loadFromUri("./models"),
  faceapi.nets.faceRecognitionNet.loadFromUri("./models"),
  faceapi.nets.faceExpressionNet.loadFromUri("./models"),
]).then(startVideo());
video.addEventListener("play", () => {
  // 制作定位 canvas
  const canvas = document.createElement("canvas");
  // canvas.style.position = "absolute";
  document.body.append(canvas);

  // 配置显示尺寸
  const displaySize = { width: video.width, height: video.height };
  faceapi.matchDimensions(canvas, displaySize);

  // 每 100ms 去绘制
  setInterval(async () => {
    // 识别位置, 脸部特征, 表情
    const detections = await faceapi
      .detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
      .withFaceLandmarks()
      .withFaceExpressions();

    // 调整尺寸
    const resizedDetections = faceapi.resizeResults(detections, displaySize);

    canvas.getContext("2d")?.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    faceapi.draw.drawDetections(canvas, resizedDetections); // 位置
    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections); // 脸部特征
    faceapi.draw.drawFaceExpressions(canvas, resizedDetections); // 表情
    if (detections && detections.length > 0) {
    }
  }, 1000);