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

在这里插入图片描述

部分代码

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", () => {// 制作定位 canvasconst 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);