How can I use mediapipe face detection for static image in javascript?

Question

mediapipe's face detection predict every frame but I want to predict every 10 seconds
Can I adjust predict time?
Or Can I use static image?
Or recommend other face detection library please

I tried it like this
To adjust predict time, I use setInterval but mediapipe predict every frame
To use static image, I use image but mediapipe don't operate
I need to face-image because it is tensorflow js model's input
How can I solve this?
please recommend solution or other face detection library in 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

{ image } in faceDetection.send can be HTMLVideoElement, HTMLImageElement or HTMLCanvasElement

so in your case, create canvas, draw frame on it and call faceDetection.send manually as you want using your canvas as input.