如何从 face-api.js 中提取检测到的人脸

Posted 2023-03-16

【中文标题】如何从 face-api.js 中提取检测到的人脸

【英文标题】：How to extract the detected faces from face-api.js

【发布时间】：2020-10-15 23:03:27

【问题描述】：

我正在使用一个名为 face-api.js 的 javascript 库。

当 face-api 检测到人脸时，我需要从视频帧中提取人脸。谁能帮我做那部分？

const video = document.getElementById('video');

Promise.all([
    faceapi.nets.tinyFaceDetector.loadFromUri('/models')
]).then(startVideo)

function startVideo() 
    navigator.getUserMedia(
        video: ,
        stream => video.srcObject = stream,
        err => console.error(err)
    )


video.addEventListener('play', () => 
    const canvas = faceapi.createCanvasFromMedia(video);
    document.body.append(canvas);
    const displaySize = width: video.width, height: video.height;
    faceapi.matchDimensions(canvas, displaySize);
    setInterval(async () => 
        const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())

        console.log('Box: ', detections[0].detection._box);

        const resizedDetections = faceapi.resizeResults(detections, displaySize)

        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
        faceapi.draw.drawDetections(canvas, resizedDetections)
    , 5000)
)

【参考方案1】：

在您的代码中添加 extractFaceFromBox 函数，它可以从视频帧中提取人脸并给出边界框并将结果显示到输出图像中。 试试这个代码并享受吧

// This is your code
video.addEventListener('play', () => 
    const canvas = faceapi.createCanvasFromMedia(video);
    document.body.append(canvas);
    const displaySize = width: video.width, height: video.height;
    faceapi.matchDimensions(canvas, displaySize);
    setInterval(async () => 
        const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
        
        //Call this function to extract and display face
        extractFaceFromBox(video, detections[0].detection.box)
        
        const resizedDetections = faceapi.resizeResults(detections, displaySize)

        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
        faceapi.draw.drawDetections(canvas, resizedDetections)
    , 5000)
)

let outputImage = document.getElementById('outputImage')

// This function extract a face from video frame with giving bounding box and display result into outputimage
async function extractFaceFromBox(inputImage, box) 
    const regionsToExtract = [
        new faceapi.Rect( box.x, box.y , box.width , box.height)
    ]
                        
    let faceImages = await faceapi.extractFaces(inputImage, regionsToExtract)
    
    if(faceImages.length == 0)
        console.log('Face not found')
    
    else
    
        faceImages.forEach(cnv =>      
            outputImage.src = cnv.toDataURL();      
        )
       
                       
                
                
                

【讨论】：

嗨，请考虑为您在答案中编写的代码添加一些解释:)

【参考方案2】：

检查detection.length是否大于0，表示检测到前面有东西。

【讨论】：

检查检测到的人脸数量无助于从视频中提取图像

欢迎来到 ***！这个回复作为评论会更好，因为它没有回答问题。