我一直在尝试创建一个 HTML 应用程序，可以检测相机中显示的脸部是否与您上传的另一张脸部相似。但是，我遇到了几个无法解决的问题：
错误信息：
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
我相信这些错误可能与我加载 Face API 库的方式或我如何使用其功能有关。
这是我的代码（提前致谢！）：
<!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>
是否是您自己托管该模型并尝试错误地加载模型？
尝试：
async function loadModels() {
await Promise.all([
faceapi.nets.ssdMobilenetv1.loadFromUri("/models"),
faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
]);
}
而不是：你的 loadFromUri("/models")