face-api.js 学习笔记
参考
Build Real Time Face Detection With JavaScript (youtube get started)
face-api.js — JavaScript API for Face Recognition in the Browser with tensorflow.js
教程 | face-api.js:在浏览器中进行人脸识别的JavaScript接口 (有提到相似度)
注意事项:
由于 face-api.js 作者从 2020 Apr 之后就没有维护了, 以至于在 node.js 的时候无法使用最新的 @tensorflow/tfjs-node (issue 在这里)
后来有个好心人 folk 出来改. 所以推荐大家使用新的版本 @vladmandic/face-api
Get started
Build Real Time Face Detection With JavaScript (youtube get started)
这篇主要是叫一些 basic 入门.
流程:
加载需要的 models
开启 webcam
把 webcam 源放入 video 做显示
通过 faceapi 扫描 video
做一个定位 canvas 画布
通过 faceapi draw 人脸位置, 轮廓, 表情.
代码:
import * as faceapi from 'face-api.js'; const video = document.querySelector<HTMLVideoElement>('#js-video')!; 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); // 表情 }, 100); }); setTimeout(async () => { // 加载 models await Promise.all([ faceapi.nets.tinyFaceDetector.loadFromUri('/face-api-models'), faceapi.nets.faceLandmark68Net.loadFromUri('/face-api-models'), faceapi.nets.faceRecognitionNet.loadFromUri('/face-api-models'), faceapi.nets.faceExpressionNet.loadFromUri('/face-api-models'), ]); // 开启 webcam, 把 webcam 的流引入 video 显示 navigator.getUserMedia( { video: {} }, stream => { video.srcObject = stream; }, error => console.log('error', error) ); }, 1000);
提醒: Webpack + face-api.js warning
如果使用 Webpack 可能会看见一个 warning 显示 Can't resolve 'fs'
这是因为 face-api.js 的代码是 node.js 和游览器共用的, 在 node.js 的环境下 fs 是必要的. 但是游览器是不需要的. 忽略掉这个 warning 就可以了.
github issue 看这里.
另外, webpack 5 之后就没有 build-in node 的 polyfill 了, 要用到就自己装,
npm – node-polyfill-webpack-plugin
module.exports = { plugins: [ new NodePolyfillPlugin(), ] };
还需要这个
resolve: { extensions: ['.ts', '.js'], fallback: { // vladmandic/face-api v1.5 以后就依赖 fs 了, 配上 webpack 5 就会有问题, 所以这里需要一个 false fs: false, }, },
人脸识别 + 相似度
通过获取 2 张图片的人脸信息就可以做一个相似度对比. 如果 < 0.6 就表示很可能是同一个人 (这个度没有规范, 只是一个参考值)
这里顺便补上了一个 detect age 的功能.
// import * as faceapi from 'face-api.js'; import * as faceapi from '@vladmandic/face-api'; (async () => { await Promise.all([ faceapi.nets.tinyFaceDetector.loadFromUri('/face-api-models'), faceapi.nets.faceLandmark68Net.loadFromUri('/face-api-models'), faceapi.nets.faceRecognitionNet.loadFromUri('/face-api-models'), faceapi.nets.faceExpressionNet.loadFromUri('/face-api-models'), faceapi.nets.ageGenderNet.loadFromUri('/face-api-models'), ]); const processAsync = async (image: HTMLImageElement) => { const imageContainer = image.parentElement!; const canvas = document.createElement('canvas'); canvas.style.position = 'absolute'; canvas.style.left = '0'; canvas.style.top = '0'; imageContainer.append(canvas); const displaySize = { width: image.width, height: image.height }; faceapi.matchDimensions(canvas, displaySize); const faceDetection = ( await faceapi .detectAllFaces(image, new faceapi.TinyFaceDetectorOptions()) .withFaceLandmarks() .withFaceDescriptors() .withFaceExpressions() .withAgeAndGender() )[0]; // 假设图片只会有一张脸 // 或者用 detectSingleFace 拿最像脸的脸, 提醒: withFaceDescriptor <- 没有 s 了 // const faceDetection = await faceapi // .detectSingleFace(image, new faceapi.TinyFaceDetectorOptions()) // .withFaceLandmarks() // .withFaceDescriptor() // .withFaceExpressions() // .withAgeAndGender(); if (faceDetection === undefined) { throw new Error(`no faces detected`); } const resizedDetection = faceapi.resizeResults(faceDetection, displaySize); faceapi.draw.drawDetections(canvas, resizedDetection); faceapi.draw.drawFaceLandmarks(canvas, resizedDetection); faceapi.draw.drawFaceExpressions(canvas, resizedDetection); const box = resizedDetection.detection.box; const drawBox = new faceapi.draw.DrawBox(box, { label: Math.round(resizedDetection.age) + ' year old ' + resizedDetection.gender, }); drawBox.draw(canvas); return faceDetection; }; const [fd1, fd2] = await Promise.all([ processAsync(document.querySelector<HTMLImageElement>('#js-image1')!), processAsync(document.querySelector<HTMLImageElement>('#js-image2')!), ]); const distance = faceapi.euclideanDistance(fd1.descriptor, fd2.descriptor); if (distance < 0.6) { console.log('same person'); } else { console.log('different person'); } })();
关键就在最后几句.
Node.js 运行
安装
要在 Node.js 上运行 (Windows 机) 有些事情要留意, 我也不确定是不是要装到完
npm install -g --production windows-build-tools (Local machine PowerShell administrator 安装, 在 windows server 我是用 cmd without admin 安装的, 它大概装了 10 分钟, 虽然看上去没有什么跑,但其实 CPU 是有跑的, 要留意哦)
安装 Python (我是通过 visual studio installer 安装的 3.x 版本, windows server 的话通过 installer 安装 2.x 版本 (可能 3.x 也是 ok), 在配置的时候记得选要 setup path)
set environment variables path
代码
参考: face-api.js docs
yarn add @tensorflow/tfjs-node @vladmandic/face-api canvas
这里用的是 CommonJS, 因为我目前还没有 migration 到 es module
require('@tensorflow/tfjs-node'); const canvas = require('canvas'); const faceapi = require('@vladmandic/face-api'); // 这个是官方推荐做法 monkeyPatch const { Canvas, Image, ImageData } = canvas; faceapi.env.monkeyPatch({ Canvas, Image, ImageData }); (async () => { await Promise.all([ // 换成了 from disk faceapi.nets.tinyFaceDetector.loadFromDisk('face-api-models'), faceapi.nets.faceLandmark68Net.loadFromDisk('face-api-models'), faceapi.nets.faceRecognitionNet.loadFromDisk('face-api-models'), faceapi.nets.faceExpressionNet.loadFromDisk('face-api-models'), ]); // 通过 canvas.loadImage 读取图片 const image1 = await canvas.loadImage('klc-face/1.jpg'); const image2 = await canvas.loadImage('klc-face/2.jpg'); const fd1 = await faceapi .detectSingleFace(image1, new faceapi.TinyFaceDetectorOptions()) .withFaceLandmarks() .withFaceDescriptor(); const fd2 = await faceapi .detectSingleFace(image2, new faceapi.TinyFaceDetectorOptions()) .withFaceLandmarks() .withFaceDescriptor(); const distance = faceapi.euclideanDistance(fd1.descriptor, fd2.descriptor); console.log('distance', distance); })();
如果要用 es module 的话, 到 package.json 加 { "type": "module" }, 下面这个是 es module 版本

import '@tensorflow/tfjs-node'; import canvas from 'canvas'; import faceapi from '@vladmandic/face-api'; // 这个是官方推荐做法 monkeyPatch const { Canvas, Image, ImageData } = canvas; faceapi.env.monkeyPatch({ Canvas, Image, ImageData }); (async () => { await Promise.all([ // 换成了 from disk faceapi.nets.tinyFaceDetector.loadFromDisk('face-api-models'), faceapi.nets.faceLandmark68Net.loadFromDisk('face-api-models'), faceapi.nets.faceRecognitionNet.loadFromDisk('face-api-models'), faceapi.nets.faceExpressionNet.loadFromDisk('face-api-models'), ]); // 通过 canvas.loadImage 读取图片 const image1 = await canvas.loadImage('klc-face/1.jpg'); const image2 = await canvas.loadImage('klc-face/2.jpg'); const fd1 = await faceapi .detectSingleFace(image1, new faceapi.TinyFaceDetectorOptions()) .withFaceLandmarks() .withFaceDescriptor(); const fd2 = await faceapi .detectSingleFace(image2, new faceapi.TinyFaceDetectorOptions()) .withFaceLandmarks() .withFaceDescriptor(); const distance = faceapi.euclideanDistance(fd1.descriptor, fd2.descriptor); console.log('distance', distance); })();
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2018-08-05 Asp.net core 学习笔记 (Excel 读写)