如何對 javascript 中的 static 圖像使用 mediapipe 人臉檢測？

Question

mediapipe 的人臉檢測預測每一幀，但我想每 10 秒預測一次
我可以調整預測時間嗎？
或者我可以使用 static 圖像嗎？
或者請推薦其他人臉檢測庫

我這樣試過
為了調整預測時間，我使用 setInterval 但 mediapipe 預測每一幀
要使用 static 圖像，我使用圖像但 mediapipe 不操作
我需要面對圖像，因為它是 tensorflow js 模型的輸入
我該如何解決這個問題？
請在javascript推薦解決方案或其他人臉檢測庫

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

    if (results.detections.length > 0) {
        drawRectangle(
            ctx, results.detections[0].boundingBox,
            {color: 'white', lineWidth: 1, fillColor: '#00000000'});

        // drawLandmarks(ctx, results.detections[0].landmarks, {
        //     color: 'red',
        //     radius: 5,
        // });
    }

    ctx.drawImage(results.image, 0, 0, canvas.width, canvas.height);
}

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

// setInterval(faceDetection.onResults(CropFace), 10000);
faceDetection.onResults(CropFace)

// asnyc function input_image() {
//    await faceDetection.send({image: image});
//}
const camera = new Camera(video, {
    onFrame: async () => {
        await faceDetection.send({image: video});
    },
    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);
    }
);

Answer 1

faceDetection.send中的{ image }可以是HTMLVideoElement 、 HTMLImageElement或HTMLCanvasElement

因此，在您的情況下，創建 canvas，在其上繪制框架並根據需要使用 canvas 作為輸入手動調用faceDetection.send 。