此代码可以通过您上传的图像来检测人员（它与 vscode 中的 liveServer 配合使用） 我从 https://github.com/WebDevSimplified/Face-Recognition-JavaScript
下载了这个而且效果真的很好！ 但是...我想要别的东西
我想用我的网络摄像头视频替换输入，所以这将是一个实时识别系统...我有一个可以帮助的链接：事实上这就是我想要的结果： https://www.shorturl.at/dstHI 仅适用于此 html 文件且 不使用 Nodejs 这也可以有所帮助：https://github.com/justadudewhohacks/face-api.js#models-face-recognition
<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">
<script defer src="face-api.min.js"></script>
<script defer src="script.js"></script>
<title>Face Recognition</title>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column
}
canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<input type="file" id="imageUpload">
</body>
</html>
script.js：
const imageUpload = document.getElementById('imageUpload')
Promise.all([
faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
faceapi.nets.ssdMobilenetv1.loadFromUri('/models')
]).then(start)
async function start() {
const container = document.createElement('div')
container.style.position = 'relative'
document.body.append(container)
const labeledFaceDescriptors = await loadLabeledImages()
const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6)
let image
let canvas
document.body.append('Loaded')
imageUpload.addEventListener('change', async () => {
if (image) image.remove()
if (canvas) canvas.remove()
image = await faceapi.bufferToImage(imageUpload.files[0])
container.append(image)
canvas = faceapi.createCanvasFromMedia(image)
container.append(canvas)
const displaySize = { width: image.width, height: image.height }
faceapi.matchDimensions(canvas, displaySize)
const detections = await faceapi.detectAllFaces(image).withFaceLandmarks().withFaceDescriptors()
const resizedDetections = faceapi.resizeResults(detections, displaySize)
const results = resizedDetections.map(d => faceMatcher.findBestMatch(d.descriptor))
results.forEach((result, i) => {
const box = resizedDetections[i].detection.box
const drawBox = new faceapi.draw.DrawBox(box, { label: result.toString() })
drawBox.draw(canvas)
})
})
}
function loadLabeledImages() {
const labels = ['Black Widow', 'Captain America', 'Captain Marvel', 'Hawkeye', 'Jim Rhodes', 'Thor', 'Tony Stark']
return Promise.all(
labels.map(async label => {
const descriptions = []
for (let i = 1; i <= 2; i++) {
const img = await faceapi.fetchImage(`https://raw.githubusercontent.com/WebDevSimplified/Face-Recognition-JavaScript/master/labeled_images/${label}/${i}.jpg`)
const detections = await faceapi.detectSingleFace(img).withFaceLandmarks().withFaceDescriptor()
descriptions.push(detections.descriptor)
}
return new faceapi.LabeledFaceDescriptors(label, descriptions)
})
)
}
const video = document.getElementById("inputVideo");
// getUsermedia parameters to force video but not audio.
const constraints = {
video: true
};
// Activate the webcam stream.
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
video.srcObject = stream;
video.addEventListener('loadeddata', detectFace);
});
const fullFaceDescriptions = await faceapi
.detectAllFaces(video)
.withFaceLandmarks()
.withFaceDescriptors();