truescene-face-id-capture-sdk 1.0.0

package/dist/components/FaceAndIdCapture.js

@@ -0,0 +1,628 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { FaceLandmarker, FilesetResolver, } from '@mediapipe/tasks-vision';
+import { captureFrameToCanvas, computeBlurLaplacianVariance, computeFaceBox, computeMeanLuminance, computeOverexposureRatio, } from '../utils/faceAnalysis';
+import { DEFAULT_CAPTURE_CONFIG } from '../utils/config';
+import { evaluateFace } from '../utils/faceChecks';
+import { updateIdRect } from '../utils/idPlacement';
+import { drawOverlay } from '../utils/overlayDraw';
+const TASKS_VISION_URL = 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.21/wasm';
+const FACE_LANDMARKER_MODEL_URL = 'https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task';
+const LEFT_EYE_INDEX = 33;
+const RIGHT_EYE_INDEX = 263;
+const formatMediaError = (error) => {
+    if (error instanceof DOMException) {
+        if (error.name === 'NotAllowedError') {
+            return 'Camera permission is blocked';
+        }
+        if (error.name === 'NotFoundError') {
+            return 'No camera found';
+        }
+    }
+    return 'Unable to access the camera';
+};
+const isMobileViewport = () => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    return window.matchMedia?.('(max-width: 640px)')?.matches ?? window.innerWidth <= 640;
+};
+const getFaceOverlayConfig = () => {
+    if (!isMobileViewport()) {
+        return DEFAULT_CAPTURE_CONFIG.face;
+    }
+    return {
+        ...DEFAULT_CAPTURE_CONFIG.face,
+        ovalRxRatio: 0.38,
+        ovalRyRatio: 0.25,
+    };
+};
+const getIdPlacementConfig = () => {
+    if (!isMobileViewport()) {
+        return DEFAULT_CAPTURE_CONFIG.id.placement;
+    }
+    return {
+        ...DEFAULT_CAPTURE_CONFIG.id.placement,
+        rectAspect: 3.172,
+        rectWidthScale: 1.3,
+        rectWidthMin: 0.6,
+        rectWidthMax: 0.95,
+    };
+};
+const getLargestFaceBox = (faces) => {
+    let largestBox = null;
+    let largestArea = 0;
+    for (const face of faces) {
+        const box = computeFaceBox(face);
+        const area = box.w * box.h;
+        if (area > largestArea) {
+            largestArea = area;
+            largestBox = box;
+        }
+    }
+    return {
+        box: largestBox,
+        areaRatio: largestBox ? largestBox.w * largestBox.h : 0,
+        heightRatio: largestBox ? largestBox.h : 0,
+    };
+};
+const FaceAndIdCapture = ({ onReadyChange, onStepChange, onMetricsChange, onCapture, width, height, showBackButton = true, }) => {
+    const videoRef = useRef(null);
+    const overlayRef = useRef(null);
+    const analysisCanvasRef = useRef(null);
+    const roiCanvasRef = useRef(null);
+    const landmarkerRef = useRef(null);
+    const streamRef = useRef(null);
+    const stepRef = useRef('FACE_ALIGN');
+    const readyRef = useRef({ faceReady: false, idReady: false });
+    const facePassCountRef = useRef(0);
+    const idPassCountRef = useRef(0);
+    const hintRef = useRef('Requesting camera access...');
+    const statusColorRef = useRef('red');
+    const lastEyesSeenRef = useRef(0);
+    const idRectStateRef = useRef({ rect: null, lastSeenMs: 0 });
+    const idRectRef = useRef(null);
+    const lastRoiRunRef = useRef(0);
+    const lastRoiResultRef = useRef(null);
+    const captureRef = useRef({
+        faceImage: null,
+        idImage: null,
+        fullImage: null,
+    });
+    const cameraStoppedRef = useRef(false);
+    const lastFaceQualityRef = useRef({
+        meanLum: 0,
+        blurScore: 0,
+        overexposureRatio: 0,
+    });
+    const onReadyChangeRef = useRef(onReadyChange);
+    const onStepChangeRef = useRef(onStepChange);
+    const onMetricsChangeRef = useRef(onMetricsChange);
+    const onCaptureRef = useRef(onCapture);
+    const [cameraError, setCameraError] = useState(null);
+    const [detectorError, setDetectorError] = useState(null);
+    const [detectorReady, setDetectorReady] = useState(false);
+    const [step, setStep] = useState('FACE_ALIGN');
+    const [hint, setHint] = useState(hintRef.current);
+    const [ready, setReady] = useState({ faceReady: false, idReady: false });
+    useEffect(() => {
+        onReadyChangeRef.current = onReadyChange;
+    }, [onReadyChange]);
+    useEffect(() => {
+        onStepChangeRef.current = onStepChange;
+    }, [onStepChange]);
+    useEffect(() => {
+        onMetricsChangeRef.current = onMetricsChange;
+    }, [onMetricsChange]);
+    useEffect(() => {
+        onCaptureRef.current = onCapture;
+    }, [onCapture]);
+    const updateReady = (next) => {
+        if (readyRef.current.faceReady === next.faceReady &&
+            readyRef.current.idReady === next.idReady) {
+            return;
+        }
+        readyRef.current = next;
+        setReady(next);
+        onReadyChangeRef.current?.(next);
+    };
+    const transitionToStep = (next) => {
+        stepRef.current = next;
+        setStep(next);
+        onStepChangeRef.current?.(next);
+    };
+    const resetToFaceStep = () => {
+        facePassCountRef.current = 0;
+        idPassCountRef.current = 0;
+        idRectStateRef.current = { rect: null, lastSeenMs: 0 };
+        idRectRef.current = null;
+        lastRoiResultRef.current = null;
+        lastRoiRunRef.current = 0;
+        captureRef.current = { faceImage: null, idImage: null, fullImage: null };
+        cameraStoppedRef.current = false;
+        updateReady({ faceReady: false, idReady: false });
+        transitionToStep('FACE_ALIGN');
+        hintRef.current = 'Center your face in the oval';
+        setHint(hintRef.current);
+        statusColorRef.current = 'red';
+    };
+    const stopCamera = () => {
+        if (cameraStoppedRef.current) {
+            return;
+        }
+        cameraStoppedRef.current = true;
+        const stream = streamRef.current;
+        if (stream) {
+            stream.getTracks().forEach((track) => track.stop());
+            streamRef.current = null;
+        }
+        const video = videoRef.current;
+        if (video) {
+            video.pause();
+            video.srcObject = null;
+        }
+    };
+    const captureFrame = (rect) => {
+        const video = videoRef.current;
+        if (!video || video.videoWidth === 0 || video.videoHeight === 0) {
+            return null;
+        }
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return null;
+        }
+        if (rect) {
+            const x = Math.max(0, rect.x * video.videoWidth);
+            const y = Math.max(0, rect.y * video.videoHeight);
+            const w = Math.min(video.videoWidth - x, rect.w * video.videoWidth);
+            const h = Math.min(video.videoHeight - y, rect.h * video.videoHeight);
+            canvas.width = Math.max(1, Math.round(w));
+            canvas.height = Math.max(1, Math.round(h));
+            ctx.drawImage(video, x, y, w, h, 0, 0, canvas.width, canvas.height);
+        }
+        else {
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        }
+        return canvas.toDataURL('image/jpeg', 0.9);
+    };
+    useEffect(() => {
+        let isMounted = true;
+        const setupLandmarker = async () => {
+            try {
+                const vision = await FilesetResolver.forVisionTasks(TASKS_VISION_URL);
+                const createLandmarker = async (delegate) => {
+                    return FaceLandmarker.createFromOptions(vision, {
+                        baseOptions: {
+                            modelAssetPath: FACE_LANDMARKER_MODEL_URL,
+                            delegate,
+                        },
+                        runningMode: 'VIDEO',
+                        numFaces: 2,
+                    });
+                };
+                let landmarker;
+                try {
+                    landmarker = await createLandmarker('GPU');
+                }
+                catch (error) {
+                    landmarker = await createLandmarker('CPU');
+                }
+                if (!isMounted) {
+                    landmarker.close();
+                    return;
+                }
+                landmarkerRef.current = landmarker;
+                setDetectorReady(true);
+            }
+            catch (error) {
+                if (!isMounted) {
+                    return;
+                }
+                setDetectorError('Face detector unavailable, please try another browser.');
+            }
+        };
+        setupLandmarker();
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+    useEffect(() => {
+        let stream = null;
+        let isMounted = true;
+        const startCamera = async () => {
+            try {
+                stream = await navigator.mediaDevices.getUserMedia({
+                    video: {
+                        facingMode: 'user',
+                        width: { ideal: 1280 },
+                        height: { ideal: 720 },
+                    },
+                    audio: false,
+                });
+                if (!isMounted) {
+                    stream.getTracks().forEach((track) => track.stop());
+                    return;
+                }
+                streamRef.current = stream;
+                const video = videoRef.current;
+                if (!video) {
+                    return;
+                }
+                video.srcObject = stream;
+                await video.play();
+            }
+            catch (error) {
+                if (!isMounted) {
+                    return;
+                }
+                const message = formatMediaError(error);
+                setCameraError(message);
+                hintRef.current = message;
+                setHint(message);
+                statusColorRef.current = 'red';
+            }
+        };
+        startCamera();
+        return () => {
+            isMounted = false;
+            if (stream) {
+                stream.getTracks().forEach((track) => track.stop());
+            }
+        };
+    }, []);
+    useEffect(() => {
+        const video = videoRef.current;
+        const overlay = overlayRef.current;
+        if (!video || !overlay) {
+            return;
+        }
+        const handleLoadedMetadata = () => {
+            overlay.width = overlay.clientWidth;
+            overlay.height = overlay.clientHeight;
+        };
+        video.addEventListener('loadedmetadata', handleLoadedMetadata);
+        if (video.readyState >= 1) {
+            handleLoadedMetadata();
+        }
+        return () => {
+            video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+        };
+    }, []);
+    useEffect(() => {
+        const overlay = overlayRef.current;
+        if (!overlay) {
+            return;
+        }
+        const ctx = overlay.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+        let animationFrameId;
+        const draw = () => {
+            const width = overlay.clientWidth;
+            const height = overlay.clientHeight;
+            if (width > 0 && height > 0) {
+                if (overlay.width !== width) {
+                    overlay.width = width;
+                }
+                if (overlay.height !== height) {
+                    overlay.height = height;
+                }
+            }
+            if (width === 0 || height === 0) {
+                animationFrameId = requestAnimationFrame(draw);
+                return;
+            }
+            const video = videoRef.current;
+            drawOverlay(ctx, width, height, {
+                step: stepRef.current,
+                hint: hintRef.current,
+                statusColor: statusColorRef.current,
+                faceConfig: getFaceOverlayConfig(),
+                idRect: idRectRef.current,
+                videoSize: video
+                    ? { width: video.videoWidth, height: video.videoHeight }
+                    : undefined,
+            });
+            animationFrameId = requestAnimationFrame(draw);
+        };
+        animationFrameId = requestAnimationFrame(draw);
+        return () => cancelAnimationFrame(animationFrameId);
+    }, []);
+    useEffect(() => {
+        if (!detectorReady || detectorError || cameraError) {
+            return;
+        }
+        const video = videoRef.current;
+        let analysisCanvas = analysisCanvasRef.current;
+        if (!analysisCanvas) {
+            analysisCanvas = document.createElement('canvas');
+            analysisCanvas.width = DEFAULT_CAPTURE_CONFIG.face.analysisWidth;
+            analysisCanvas.height = DEFAULT_CAPTURE_CONFIG.face.analysisHeight;
+            analysisCanvasRef.current = analysisCanvas;
+        }
+        if (!video || !analysisCanvas) {
+            return;
+        }
+        const analysisCtx = analysisCanvas.getContext('2d', {
+            willReadFrequently: true,
+        });
+        if (!analysisCtx) {
+            return;
+        }
+        let intervalId;
+        const update = () => {
+            const landmarker = landmarkerRef.current;
+            if (!landmarker || video.readyState < 2) {
+                return;
+            }
+            let result;
+            try {
+                result = landmarker.detectForVideo(video, performance.now());
+            }
+            catch (error) {
+                setDetectorError('Face detector unavailable, please try another browser.');
+                return;
+            }
+            const faceLandmarks = (result.faceLandmarks ?? []);
+            const videoWidth = video.videoWidth;
+            const videoHeight = video.videoHeight;
+            const faceCount = faceLandmarks.length;
+            const faceBox = faceCount === 1 ? computeFaceBox(faceLandmarks[0]) : null;
+            let meanLum = lastFaceQualityRef.current.meanLum;
+            let overexposureRatio = lastFaceQualityRef.current.overexposureRatio;
+            let blurScore = lastFaceQualityRef.current.blurScore;
+            let faceCheck = null;
+            if (stepRef.current === 'FACE_ALIGN') {
+                captureFrameToCanvas(video, analysisCanvas, analysisCtx);
+                const imageData = analysisCtx.getImageData(0, 0, analysisCanvas.width, analysisCanvas.height);
+                meanLum = computeMeanLuminance(imageData);
+                overexposureRatio = computeOverexposureRatio(imageData);
+                blurScore = computeBlurLaplacianVariance(imageData);
+                lastFaceQualityRef.current = {
+                    meanLum,
+                    overexposureRatio,
+                    blurScore,
+                };
+                faceCheck = evaluateFace(faceLandmarks, meanLum, overexposureRatio, blurScore, DEFAULT_CAPTURE_CONFIG.face);
+            }
+            const faceMetrics = {
+                faceCount,
+                faceBoxNorm: faceBox,
+                yawDeg: faceCheck?.metrics.yawDeg ?? 0,
+                pitchDeg: faceCheck?.metrics.pitchDeg ?? 0,
+                rollDeg: faceCheck?.metrics.rollDeg ?? 0,
+                poseValid: faceCheck?.metrics.poseValid ?? false,
+            };
+            let idMetrics = {
+                rectNorm: idRectRef.current,
+                roiFaceCount: 0,
+                roiLargestFaceBoxNorm: null,
+                roiLargestFaceSizeRatio: 0,
+                meanLumROI: 0,
+                blurScoreROI: 0,
+            };
+            let hintText = hintRef.current;
+            const now = performance.now();
+            if (stepRef.current === 'FACE_ALIGN') {
+                if (!faceCheck) {
+                    return;
+                }
+                if (faceCheck.pass) {
+                    facePassCountRef.current += 1;
+                }
+                else {
+                    facePassCountRef.current = 0;
+                }
+                const faceReady = facePassCountRef.current >= DEFAULT_CAPTURE_CONFIG.stablePassCount;
+                if (faceReady && !readyRef.current.faceReady) {
+                    if (!captureRef.current.faceImage) {
+                        captureRef.current.faceImage = captureFrame(null);
+                        onCaptureRef.current?.({
+                            faceImage: captureRef.current.faceImage,
+                            idImage: captureRef.current.idImage,
+                            fullImage: captureRef.current.fullImage,
+                        });
+                    }
+                    updateReady({ faceReady: true, idReady: false });
+                    idPassCountRef.current = 0;
+                    transitionToStep('ID_ALIGN');
+                    hintText =
+                        'Now bring your ID under your nose so it covers your mouth. Keep your eyes visible.';
+                    statusColorRef.current = 'red';
+                }
+                else {
+                    hintText = faceCheck.pass ? 'Hold still for a moment' : faceCheck.hint;
+                    statusColorRef.current = faceCheck.pass ? 'yellow' : 'red';
+                }
+            }
+            else {
+                const currentLandmarks = faceLandmarks[0] ?? null;
+                const leftEye = currentLandmarks?.[LEFT_EYE_INDEX];
+                const rightEye = currentLandmarks?.[RIGHT_EYE_INDEX];
+                if (leftEye && rightEye) {
+                    lastEyesSeenRef.current = now;
+                }
+                const placementConfig = getIdPlacementConfig();
+                const update = updateIdRect(idRectStateRef.current, currentLandmarks, faceBox, now, placementConfig);
+                idRectStateRef.current = update.state;
+                idRectRef.current = update.rect;
+                idMetrics = { ...idMetrics, rectNorm: update.rect };
+                const eyesVisible = now - lastEyesSeenRef.current <=
+                    placementConfig.eyesHoldMs;
+                if (!eyesVisible || update.missingTooLong) {
+                    idPassCountRef.current = 0;
+                    lastRoiResultRef.current = null;
+                    updateReady({
+                        faceReady: readyRef.current.faceReady,
+                        idReady: false,
+                    });
+                    hintText = 'Keep your eyes visible above the ID';
+                    statusColorRef.current = 'red';
+                }
+                else if (update.rect && videoWidth > 0 && videoHeight > 0) {
+                    const roiConfig = DEFAULT_CAPTURE_CONFIG.id.roi;
+                    const shouldRunRoi = now - lastRoiRunRef.current >= 1000 / roiConfig.detectionFps;
+                    if (shouldRunRoi) {
+                        const rectPx = {
+                            x: update.rect.x * videoWidth,
+                            y: update.rect.y * videoHeight,
+                            w: update.rect.w * videoWidth,
+                            h: update.rect.h * videoHeight,
+                        };
+                        const scale = Math.min(1, roiConfig.maxRoiWidth / rectPx.w);
+                        const roiWidth = Math.max(1, Math.round(rectPx.w * scale));
+                        const roiHeight = Math.max(1, Math.round(rectPx.h * scale));
+                        let roiCanvas = roiCanvasRef.current;
+                        if (!roiCanvas) {
+                            roiCanvas = document.createElement('canvas');
+                            roiCanvasRef.current = roiCanvas;
+                        }
+                        if (roiCanvas.width !== roiWidth ||
+                            roiCanvas.height !== roiHeight) {
+                            roiCanvas.width = roiWidth;
+                            roiCanvas.height = roiHeight;
+                        }
+                        const roiCtx = roiCanvas.getContext('2d', {
+                            willReadFrequently: true,
+                        });
+                        if (roiCtx) {
+                            roiCtx.drawImage(video, rectPx.x, rectPx.y, rectPx.w, rectPx.h, 0, 0, roiCanvas.width, roiCanvas.height);
+                            const imageData = roiCtx.getImageData(0, 0, roiCanvas.width, roiCanvas.height);
+                            const meanLumROI = computeMeanLuminance(imageData);
+                            const blurScoreROI = computeBlurLaplacianVariance(imageData);
+                            let roiFaces = [];
+                            try {
+                                const roiResult = landmarker.detectForVideo(roiCanvas, performance.now());
+                                roiFaces = (roiResult.faceLandmarks ?? []);
+                            }
+                            catch (error) {
+                                roiFaces = [];
+                            }
+                            const largest = getLargestFaceBox(roiFaces);
+                            lastRoiResultRef.current = {
+                                faceCount: roiFaces.length,
+                                largestFaceBox: largest.box,
+                                largestFaceHeightRatio: largest.heightRatio,
+                                largestFaceAreaRatio: largest.areaRatio,
+                                meanLum: meanLumROI,
+                                blurScore: blurScoreROI,
+                            };
+                            lastRoiRunRef.current = now;
+                        }
+                    }
+                    const roiResult = lastRoiResultRef.current;
+                    if (roiResult) {
+                        idMetrics = {
+                            rectNorm: update.rect,
+                            roiFaceCount: roiResult.faceCount,
+                            roiLargestFaceBoxNorm: roiResult.largestFaceBox,
+                            roiLargestFaceSizeRatio: roiResult.largestFaceHeightRatio,
+                            meanLumROI: roiResult.meanLum,
+                            blurScoreROI: roiResult.blurScore,
+                        };
+                        let idFailHint = null;
+                        if (roiResult.faceCount < 1) {
+                            idFailHint = 'Move the ID into the box so the photo is visible';
+                        }
+                        else if (roiResult.largestFaceHeightRatio < roiConfig.minFaceHeightRatio &&
+                            roiResult.largestFaceAreaRatio < roiConfig.minFaceAreaRatio) {
+                            idFailHint = 'Move the ID closer';
+                        }
+                        else if (roiResult.meanLum < roiConfig.meanLum.min) {
+                            idFailHint = 'Move to a brighter place';
+                        }
+                        else if (roiResult.meanLum > roiConfig.meanLum.max) {
+                            idFailHint = 'Avoid direct light';
+                        }
+                        else if (roiResult.blurScore < roiConfig.blurScoreMin) {
+                            idFailHint = 'Hold steady';
+                        }
+                        if (idFailHint) {
+                            idPassCountRef.current = 0;
+                            hintText = idFailHint;
+                            statusColorRef.current = 'red';
+                        }
+                        else if (shouldRunRoi) {
+                            idPassCountRef.current += 1;
+                            hintText = 'Great - hold still';
+                            statusColorRef.current = 'yellow';
+                        }
+                        const idReady = idPassCountRef.current >= DEFAULT_CAPTURE_CONFIG.stablePassCount;
+                        if (idReady) {
+                            hintText = 'ID ready - you can continue';
+                            statusColorRef.current = 'green';
+                        }
+                        if (idReady && !readyRef.current.idReady) {
+                            if (!captureRef.current.idImage) {
+                                captureRef.current.idImage = captureFrame(update.rect);
+                                captureRef.current.fullImage = captureFrame(null);
+                                onCaptureRef.current?.({
+                                    faceImage: captureRef.current.faceImage,
+                                    idImage: captureRef.current.idImage,
+                                    fullImage: captureRef.current.fullImage,
+                                });
+                            }
+                            stopCamera();
+                        }
+                        if (readyRef.current.idReady !== idReady) {
+                            updateReady({
+                                faceReady: readyRef.current.faceReady,
+                                idReady,
+                            });
+                        }
+                    }
+                    else {
+                        hintText = 'Scanning the ID - hold still';
+                        statusColorRef.current = 'yellow';
+                    }
+                }
+                else {
+                    idPassCountRef.current = 0;
+                    lastRoiResultRef.current = null;
+                    updateReady({
+                        faceReady: readyRef.current.faceReady,
+                        idReady: false,
+                    });
+                    hintText = 'Keep your face visible to place the ID frame';
+                    statusColorRef.current = 'red';
+                }
+            }
+            if (hintText !== hintRef.current) {
+                hintRef.current = hintText;
+                setHint(hintText);
+            }
+            const metrics = {
+                step: stepRef.current,
+                face: faceMetrics,
+                id: idMetrics,
+                hint: hintText,
+                ready: readyRef.current,
+            };
+            onMetricsChangeRef.current?.(metrics);
+        };
+        intervalId = window.setInterval(update, 1000 / DEFAULT_CAPTURE_CONFIG.detectionFps);
+        return () => {
+            if (intervalId) {
+                window.clearInterval(intervalId);
+            }
+        };
+    }, [cameraError, detectorError, detectorReady]);
+    useEffect(() => {
+        return () => {
+            landmarkerRef.current?.close();
+        };
+    }, []);
+    const containerStyle = {};
+    if (width) {
+        containerStyle.width = `${width}px`;
+    }
+    if (height) {
+        containerStyle.height = `${height}px`;
+    }
+    return (_jsxs("div", { className: "face-aligner", style: containerStyle, "data-step": step, "data-ready": ready.idReady, children: [_jsx("video", { ref: videoRef, className: "face-aligner__video", playsInline: true, muted: true, autoPlay: true }), _jsx("canvas", { ref: overlayRef, className: "face-aligner__overlay" }), showBackButton && step === 'ID_ALIGN' && (_jsx("button", { type: "button", className: "face-aligner__back", onClick: resetToFaceStep, children: "Back" })), (cameraError || detectorError) && (_jsx("div", { className: "face-aligner__message", children: cameraError || detectorError })), _jsx("div", { className: "face-aligner__sr", "aria-live": "polite", children: hint })] }));
+};
+export default FaceAndIdCapture;