face-recognition-using-javascript-33n5

最新推荐文章于 2024-08-10 08:39:32 发布

手机用户3381415902

最新推荐文章于 2024-08-10 08:39:32 发布

阅读量105

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/u011082575/article/details/133305980

版权

原始地址：https://dev.to/karkranikhil/face-recognition-using-javascript-33n5

人脸检测是人工智能最常见的应用之一。在过去的几年中，人脸检测的使用量增加了。
Face-api.js在基于tensorflow.js核心API的浏览器中实现了一个JavaScript API，用于人脸检测和人脸识别。
在本教程中，我们将构建一个可以在浏览器中工作的人脸识别应用程序。我们将从人脸中预测情绪、性别和年龄。
该应用程序的输出如下所示。

点击这里访问项目进程
项目进程

点击这里访问第一步-创建一个名为raw-facerecognition的文件夹
第一步 - 创建一个名为face-recognition的文件夹
在face-recognition文件夹下创建以下文件夹结构
除了models文件夹之外，其他所有文件夹都是自解释的。我将在后续部分介绍models文件夹。

点击这里下载raw-faceapiminjs文件
第二步 - 下载face-api.min.js文件
从以下URL下载face-api.min.js代码，并将其粘贴到js/face-api.min.js文件中。
https://raw.githubusercontent.com/karkranikhil/face-recognition-using-js/master/js/face-api.min.js

点击这里下载模型文件
第三步 - 下载模型文件
模型是我们用来检测人脸特征的训练数据。
从以下URL下载文件，并将其放置在models文件夹中。
https://github.com/karkranikhil/face-recognition-using-js/tree/master/models

点击这里构建index.html文件
第四步 - 构建index.html文件
在index.html文件中，我们引入style.css以设置样式，引入face-api.min.js以处理模型数据和提取特征，并引入main.js，其中我们将编写我们的逻辑。
在body标签中，我们创建一个video标签用于获取人脸，一个result-container用于显示情绪、性别和年龄。
将以下代码放置在index.html文件中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Face recognition App</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>Face recognition in the browser using Javascript</header>
<div class="container">
<video id="video" height="500" width="500" autoplay muted></video>
</div>
<div class="result-container">
<div id="emotion">Emotion</div>
<div id="gender">Gender</div>
<div id="age">Age</div>
</div>
<script src="./js/face-api.min.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

点击这里构建main.js文件
第五步 - 构建main.js文件
在main.js文件中，我们使用promise.all加载模型到face API。一旦promise被解析，我们才调用startVideo方法来开始流式传输。以下是用于此演示的方法：
faceapi.detectSingleFacemethod - 使用SSD Mobilenet V1人脸检测器。您可以通过传递相应的选项对象来指定人脸检测器。要检测多个人脸，请将detectSingleFace替换为detectAllFaces。
withFaceLandmarks方法 - 用于检测68个人脸标记点
withFaceExpressions方法 - 这个方法检测图像中的所有人脸，并识别每个人脸的表情，并返回数组
withAgeAndGender方法 - 这个方法检测图像中的所有人脸，估计年龄和识别每个人脸的性别，并返回数组
将以下代码替换到main.js文件中

const video = document.getElementById("video");
const isScreenSmall = window.matchMedia("(max-width: 700px)");
let predictedAges = [];
/****Loading the model ****/
Promise.all([
faceapi.nets.tinyFaceDetector.loadFromUri("/models"),
faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
faceapi.nets.faceExpressionNet.loadFromUri("/models"),
faceapi.nets.ageGenderNet.loadFromUri("/models")
]).then(startVideo);
function startVideo() {
navigator.getUserMedia(
{ video: {} },
stream => (video.srcObject = stream),
err => console.error(err)
);
}
/****Fixing the video with based on size size ****/
function screenResize(isScreenSmall) {
if (isScreenSmall.matches) {
video.style.width = "320px";
} else {
video.style.width = "500px";
}
}
screenResize(isScreenSmall);
isScreenSmall.addListener(screenResize);
/****Event Listeiner for the video****/
video.addEventListener("playing", () => {
const canvas = faceapi.createCanvasFromMedia(video);
let container = document.querySelector(".container");
container.append(canvas);
const displaySize = { width: video.width, height: video.height };
faceapi.matchDimensions(canvas, displaySize);
setInterval(async () => {
const detections = await faceapi
.detectSingleFace(video, new faceapi.TinyFaceDetectorOptions())
.withFaceLandmarks()
.withFaceExpressions()
.withAgeAndGender();
const resizedDetections = faceapi.resizeResults(detections, displaySize);
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
/****Drawing the detection box and landmarkes on canvas****/
faceapi.draw.drawDetections(canvas, resizedDetections);
faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
/****Setting values to the DOM****/
if (resizedDetections && Object.keys(resizedDetections).length > 0) {
const age = resizedDetections.age;
const interpolatedAge = interpolateAgePredictions(age);
const gender = resizedDetections.gender;
const expressions = resizedDetections.expressions;
const maxValue = Math.max(...Object.values(expressions));
const emotion = Object.keys(expressions).filter(
item => expressions[item] === maxValue
);
document.getElementById("age").innerText = `Age - ${interpolatedAge}`;
document.getElementById("gender").innerText = `Gender - ${gender}`;
document.getElementById("emotion").innerText = `Emotion - ${emotion[0]}`;
}
}, 10);
});
function interpolateAgePredictions(age) {
predictedAges = [age].concat(predictedAges).slice(0, 30);
const avgPredictedAge =
predictedAges.reduce((total, a) => total + a) / predictedAges.length;
return avgPredictedAge;
}

点击这里添加样式到应用程序
第六步 - 添加样式到应用程序
用以下代码替换style.css。

body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
background: #2f2f2f;
width: calc(100% - 33px);
}
canvas {
position: absolute;
}
.container {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
}
.result-container {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
flex-direction: column;
}
.result-container > div {
font-size: 1.3rem;
padding: 0.5rem;
margin: 5px 0;
color: white;
text-transform: capitalize;
}
#age {
background: #1e94be;
}
#emotion {
background: #8a1025;
}
#gender {
background: #62d8a5;
}
video {
width: 100%;
}
header {
background: #42a5f5;
color: white;
width: 100%;
font-size: 2rem;
padding: 1rem;
font-size: 2rem;
}

点击这里通过live server或http-server运行该应用程序
第七步 - 通过live server或http-server运行应用程序
运行应用程序后，您将看到以下输出。
您可以通过以下URL运行我部署的应用程序：
https://face-recognition.karkranikhil.now.sh/

参考资料
https://github.com/justadudewhohacks/face-api.js/
GITHUB -
https://github.com/karkranikhil/face-recognition-using-js