如何在JavaScript中使用MediaPipe静态图像人脸检测及调整检测间隔

使用MediaPipe Face Detection时，它默认逐帧检测，但我希望每10秒检测一次，能否调整检测间隔？或者能否直接使用静态图像检测？也可推荐其他JavaScript人脸检测库。

我尝试过：用setInterval调整检测间隔，但MediaPipe仍逐帧检测；传入静态图像，MediaPipe无法运行。我需要提取人脸图像作为TensorFlow.js模型的输入，请问该如何解决？

解决方案 #

一、调整MediaPipe检测间隔 #

你之前用setInterval的方式有误，faceDetection.onResults(CropFace)会立即执行函数，而非将函数传入定时器。正确做法是在相机的onFrame回调里控制检测时机，通过记录上次检测时间，仅当间隔超过10秒时调用检测接口：

let lastDetectionTime = 0;
const DETECT_INTERVAL = 10000; // 10秒

const camera = new Camera(video, {
    onFrame: async () => {
        const now = Date.now();
        // 先绘制视频帧，保持画面正常更新
        ctx.save();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        ctx.restore();
        
        // 每隔10秒执行一次人脸检测
        if (now - lastDetectionTime >= DETECT_INTERVAL) {
            await faceDetection.send({image: video});
            lastDetectionTime = now;
        }
    },
    width: 224,
    height: 224
});

二、修复MediaPipe静态图像检测 #

你之前的静态图检测代码存在拼写错误（asnyc应为async），且需确保图像加载完成后再调用send方法：

// 方式1：通过Image对象加载静态图
const image = new Image();
image.src = '你的图片路径';
image.onload = async () => {
    await faceDetection.send({image: image});
};

// 方式2：使用页面已有的img元素
const imgElement = document.getElementById('your-image-id');
if (imgElement.complete) {
    await faceDetection.send({image: imgElement});
} else {
    imgElement.onload = async () => {
        await faceDetection.send({image: imgElement});
    };
}

三、提取人脸图像作为TensorFlow.js输入 #

在CropFace函数中，根据检测到的边界框裁剪人脸，并转换为TensorFlow.js张量：

function CropFace(results) {
    document.body.classList.add('loaded');
    fpsControl.tick();
    ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(results.image, 0, 0, canvas.width, canvas.height);

    if (results.detections.length > 0) {
        const box = results.detections[0].boundingBox;
        drawRectangle(
            ctx, box,
            {color: 'white', lineWidth: 1, fillColor: '#00000000'});
        
        // 创建临时画布裁剪人脸
        const faceCanvas = document.createElement('canvas');
        const faceCtx = faceCanvas.getContext('2d');
        faceCanvas.width = box.width;
        faceCanvas.height = box.height;
        // 转换MediaPipe坐标（相对输入图像的比例）为实际像素坐标
        faceCtx.drawImage(
            results.image,
            box.xMin * results.image.width,
            box.yMin * results.image.height,
            box.width * results.image.width,
            box.height * results.image.height,
            0, 0, box.width, box.height
        );
        
        // 转换为TensorFlow.js张量
        (async () => {
            const faceTensor = await tf.browser.fromPixels(faceCanvas);
            // 此处可将faceTensor传入你的TF.js模型
            console.log('人脸张量已准备:', faceTensor.shape);
        })();
    }

    ctx.restore();
}

四、其他JavaScript人脸检测库推荐 #

• TensorFlow.js Face Detection API：官方集成的人脸检测模型，支持静态图和视频，可直接输出张量，完美适配TF.js生态，使用门槛低。
• FaceAPI.js：基于TensorFlow.js的高级人脸处理库，支持人脸检测、关键点识别、人脸识别等多种功能，文档完善，示例丰富，适合复杂场景。
• Clmtrackr：轻量级人脸关键点跟踪库，体积小巧，无需GPU加速，适合简单的人脸定位需求。

修改后的完整代码 #

function CropFace(results) {
    document.body.classList.add('loaded');
    fpsControl.tick();
    ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(results.image, 0, 0, canvas.width, canvas.height);

    if (results.detections.length > 0) {
        const box = results.detections[0].boundingBox;
        drawRectangle(
            ctx, box,
            {color: 'white', lineWidth: 1, fillColor: '#00000000'});
        
        // 裁剪人脸并转换为TF.js张量
        const faceCanvas = document.createElement('canvas');
        const faceCtx = faceCanvas.getContext('2d');
        faceCanvas.width = box.width;
        faceCanvas.height = box.height;
        faceCtx.drawImage(
            results.image,
            box.xMin * results.image.width,
            box.yMin * results.image.height,
            box.width * results.image.width,
            box.height * results.image.height,
            0, 0, box.width, box.height
        );
        
        (async () => {
            const faceTensor = await tf.browser.fromPixels(faceCanvas);
            console.log('人脸张量已准备:', faceTensor.shape);
            // 此处将faceTensor传入你的TF.js模型
        })();
    }

    ctx.restore();
}

const faceDetection = new FaceDetection(
    {locateFile: (file) => {
        return `https://cdn.jsdelivr.net/npm/@mediapipe/face_detection@0.0/${file}`;
        }
    }
);

faceDetection.onResults(CropFace)

// 控制检测间隔的相机逻辑
let lastDetectionTime = 0;
const DETECT_INTERVAL = 10000; // 10秒

const camera = new Camera(video, {
    onFrame: async () => {
        const now = Date.now();
        // 绘制当前视频帧，保持画面更新
        ctx.save();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        ctx.restore();
        
        // 每隔10秒执行一次检测
        if (now - lastDetectionTime >= DETECT_INTERVAL) {
            await faceDetection.send({image: video});
            lastDetectionTime = now;
        }
    },
    width: 224,
    height: 224
});
camera.start();

new ControlPanel(controlsElement1, {
    selfieMode: true,
    minDetectionConfidence: 0.5,
    })
    .add([
        new StaticText({title: 'MediaPipe Face Detection'}),
        fpsControl,
        new Toggle({title: 'Selfie Mode', field: 'selfieMode'}),
        new Slider({
        title: 'Min Detection Confidence',
        field: 'minDetectionConfidence',
        range: [0, 1],
        step: 0.01
        }),
    ])
    .on(options => {
        video.classList.toggle('selfie', options.selfieMode);
        faceDetection.setOptions(options);
    }
);

// 静态图像检测示例（按需启用）
// const imgElement = document.getElementById('your-static-image');
// imgElement.onload = async () => {
//     await faceDetection.send({image: imgElement});
// };

内容的提问来源于stack exchange，提问作者yeon