返回

使用Face-API.js在浏览器实现人脸识别功能

2024-04-30 Face-API.js js 浏览器 人脸识别 854 0

什么是 face-api.js

JavaScript API for face detection and face recognition in the browser and nodejs with tensorflow.js

face-api.js 是在 tensorflow.js 核心(tensorflow/tfjs-core)之上实现的浏览器和 nodejs 的 JavaScript 人脸识别 API。

目前 face-api.js 在 Github 通过 MIT 协议开源,有超过 16.1k 的 star、3.6k 的 fork、8.7k 的项目依赖量、是一个妥妥的前端优质开源项目。

使用Face-API.js在浏览器实现人脸识别功能

如何使用 face-api.js

开发者可以通过 Polyfill 一些浏览器细节,例如: HTMLImageElement、HTMLCanvasElement 和 ImageData 等在 Nodejs 环境中使用等效的 API,最简单的方法是安装 node-canvas 包。

使用Face-API.js在浏览器实现人脸识别功能

或者,可以简单地从图像数据构造自己的张量,并将张量作为输入传递给 API。此外,强烈推荐安装 @tensorflow/tfjs-node(不是必需的,但强烈推荐),其通过编译和绑定到本机 Tensorflow C++ 库来大大加快速度。下面是引用face-api.js的代码示例:

// 将 NodeJS 绑定导入到本机 Tensorflow,
// 不是必需的,但会大大加快速度(需要 python)
import '@tensorflow/tfjs-node';

// 实现 HTMLCanvasElement、HTMLImageElement、ImageData 的 Nodejs 包装器
import * as canvas from 'canvas';

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

// patch nodejs 环境, 提供 HTMLCanvasElement and HTMLImageElement 实现
const {Canvas, Image, ImageData} = canvas
faceapi.env.monkeyPatch({Canvas, Image, ImageData})

如果要加载模型可以通过下面的方法:

await faceapi.nets.ssdMobilenetv1.loadFromDisk('./models')
// 从磁盘加载
await faceapi.nets.ssdMobilenetv1.loadFromWeightMap(weightMap)
// 从 tf.NamedTensorMap 加载模型
const net = new faceapi.SsdMobilenetv1()
await net.loadFromUri('/models')
// 创建自己的神经网络实例
net.load(await faceapi.fetchNetWeights('/models/face_detection_model.weights'))
// 将权重作为 Float32Array 加载(如果想使用未压缩的模型)

加载模型后,可以通过下面的方法来识别人脸:

const detections = await faceapi.detectAllFaces(input)
// 检测图像中的所有面部
const detection = await faceapi.detectSingleFace(input)
// 检测图像中置信度得分最高的人脸
const detections1 = await faceapi.detectAllFaces(input, new faceapi.SsdMobilenetv1Options())
const detections2 = await faceapi.detectAllFaces(input, new faceapi.TinyFaceDetectorOptions())
// DetectAllFaces 和 detectorSingleFace 使用 SSD Mobilenet V1 人脸检测器
// 开发者还可以通过传递相应的选项对象来指定面部检测器

人脸检测后还可以进一步预测每个检测到的人脸的面部标志,如下所示:

const detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks()

以上代码检测图像中的所有面部 + 为每个检测到的面部计算 68 点面部标志。如果只需要监测单张脸,可以通过下面的代码完成:

const detectionWithLandmarks = await faceapi.detectSingleFace(input).withFaceLandmarks()

开发者还可以调整模型,比如:使用微型模型而不是默认模型:

const useTinyModel = true
const detectionsWithLandmarks = await faceapi.detectAllFaces(input).withFaceLandmarks(useTinyModel)

face-api.js 的高级用法和示例

https://github.com/justadudewhohacks/face-api.js/

https://www.youtube.com/watch?app=desktop&v=CVClHLwv-4I

您可能感兴趣:

阿里云 云服务器 99元1年 2核2G 3M固定带宽 续费与新购同价

领取 通义灵码 免费使用资格 兼容 Visual Studio Code、Visual Studio、JetBrains IDEs 等主流编程工具, 为你提供高效、流畅、舒心的智能编码体验!

DOVE 网络加速器 梯子 免费 试用

顶部