I have been trying to create an HTML application that can detect if the face shown in the camera is similar to another one that you upload. However, I encountered several issues that I couldn’t resolve:
Error Messages:
fr-index.html:52 Uncaught (in promise) ReferenceError: faceapi is not defined at loadModels (fr-index.html:52:13) at fr-index.html:83:5 loadModels @ fr-index.html:52 (anonymous) @ fr-index.html:83 Promise.then (anonymous) @ fr-index.html:83 Understand this error index.js:2 Uncaught ReferenceError: exports is not defined at index.js:2:23
I believe these errors might be related to the way I am loading the Face API library or how I am using its functions.
Here is my code (thanks in advance!):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Camera Comparison</title>
<style>
video,
canvas,
img {
max-width: 45%;
}
canvas {
position: absolute;
}
</style>
</head>
<body>
<h2>Camera</h2>
<video id="video" autoplay playsinline></video>
<canvas id="canvas"></canvas>
<h2>Upload Image</h2>
<input type="file" id="imageUpload" accept="image/*" />
<img id="uploadedImage" />
<button id="compareButton">Compare Images</button>
<script defer src="https://cdn.jsdelivr.net/npm/face-api.js"></script>
<script>
const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const imageUpload = document.getElementById("imageUpload");
const uploadedImage = document.getElementById("uploadedImage");
const compareButton = document.getElementById("compareButton");
let uploadedFaceData;
function startVideo() {
navigator.mediaDevices
.getUserMedia({ video: true })
.then((stream) => {
video.srcObject = stream;
})
.catch((err) => {
console.error("Error accessing the camera: ", err);
alert("Could not access the camera.");
});
}
async function loadModels() {
await Promise.all([
faceapi.nets.ssdMobilenetv1.loadFromUri("/models"),
faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
]);
}
imageUpload.addEventListener("change", async (e) => {
const file = e.target.files[0];
if (file) {
const img = await faceapi.bufferToImage(file);
uploadedImage.src = img.src;
uploadedFaceData = await faceapi
.detectSingleFace(img)
.withFaceLandmarks()
.withFaceDescriptor();
}
});
compareButton.addEventListener("click", async () => {
const capturedFaceData = await faceapi
.detectSingleFace(video)
.withFaceLandmarks()
.withFaceDescriptor();
if (!uploadedFaceData || !capturedFaceData) {
alert("No faces detected in one or both images.");
return;
}
const faceMatcher = new faceapi.FaceMatcher(uploadedFaceData);
const result = faceMatcher.findBestMatch(
capturedFaceData.descriptor
);
alert(result.toString());
});
loadModels().then(startVideo);
</script>
</body>
</html>
New contributor
T_Braun is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Could it be that you are hosting this yourself and are trying to load the models incorrectly?
try :
async function loadModels() {
await Promise.all([
faceapi.nets.ssdMobilenetv1.loadFromUri("/models"),
faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
]);
}
And not: your loadFromUri(“/models”)
Also this tutorial might help you: https://itnext.io/face-api-js-javascript-api-for-face-recognition-in-the-browser-with-tensorflow-js-bcc2a6c4cf07