web网络摄像头实时识别人脸和性别年龄

web摄像头实时识别人脸和性别年龄

上次一个项目使用了faceapi来识别一张含有人脸的头像，今天我们使用摄像头捕获实时信息来识别人脸的年龄和性别，效果图如下

一、加载模型

await  faceapi.nets.ssdMobilenetv1.loadFromUri('models');
await  faceapi.nets.faceLandmark68Net.loadFromUri('models');
await  faceapi.nets.ageGenderNet.loadFromUri('models');


// try to access users webcam and stream the images
// to the video element
const stream = await navigator.mediaDevices.getUserMedia({
video: {}
})
const videoEl = $('#inputVideo').get(0)
videoEl.srcObject = stream

二、识别并渲染图层

const videoEl = $('#inputVideo').get(0)

if (videoEl.paused || videoEl.ended)
return setTimeout(() => onPlay())

let minConfidence = 0.5
$("#status").html("模型加载完毕，识别中");
const options = new faceapi.SsdMobilenetv1Options({
minConfidence
})


const ts = Date.now()

const result = await faceapi.detectSingleFace(videoEl, options)
.withAgeAndGender()

updateTimeStats(Date.now() - ts)

if (result) {
const canvas = $('#overlay').get(0)
const dims = faceapi.matchDimensions(canvas, videoEl, true)

const resizedResult = faceapi.resizeResults(result, dims)
if (withBoxes) {
faceapi.draw.drawDetections(canvas, resizedResult)
}
const {
age,
gender,
genderProbability
} = resizedResult

// interpolate gender predictions over last 30 frames
// to make the displayed age more stable
const interpolatedAge = interpolateAgePredictions(age)
new faceapi.draw.DrawTextField(
[
`${faceapi.round(interpolatedAge, 0)} 岁`,
`${gender} (${faceapi.round(genderProbability)})`
],
result.detection.box.bottomLeft
).draw(canvas)
}

setTimeout(() => onPlay())

项目地址：http://editor.bfw.wiki/Editor/Open.html?projectid=15731252228909890037&file=webcamfaceage.html

点击左上角预览-新窗口预览或手机预览