react-face-detection-hook/build/hooks/useFaceDetection.js

React face detection hook using @mediapipe/face_detection, @mediapipe/camera_utils and react-webcam

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
function Index({ handleOnFaceDetected, faceDetectionOptions: options, faceDetection: faceDetectionInitializer, camera }) {
    const [cameraManager, setCameraManager] = (0, react_1.useState)();
    const webcamRef = (0, react_1.useRef)(null);
    const faceDetection = (0, react_1.useRef)(faceDetectionInitializer).current;
    const handleFaceDetection = (0, react_1.useCallback)(() => {
        faceDetection.setOptions(Object.assign({}, options));
        faceDetection.onResults(handleOnFaceDetected);
    }, [handleOnFaceDetected]);
    (0, react_1.useEffect)(() => {
        if (!webcamRef.current ||
            !webcamRef.current.video ||
            !camera)
            return;
        const mediaSrc = webcamRef.current.video;
        setCameraManager(() => camera({
            mediaSrc,
            width: mediaSrc.videoWidth,
            height: mediaSrc.videoHeight,
            onFrame: async () => {
                await faceDetection.send({
                    image: mediaSrc
                });
            }
        }));
    }, []);
    (0, react_1.useEffect)(() => {
        handleFaceDetection();
    }, [
        handleFaceDetection,
        handleOnFaceDetected
    ]);
    (0, react_1.useEffect)(() => {
        cameraManager === null || cameraManager === void 0 ? void 0 : cameraManager.start();
        return () => {
            cameraManager === null || cameraManager === void 0 ? void 0 : cameraManager.stop();
        };
    }, [cameraManager]);
    return { webcamRef };
}
exports.default = Index;
//# sourceMappingURL=useFaceDetection.js.map