52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T2a24,"use client"; import { useEffect, useRef, useState } from "react"; import { Camera, CameraOff, LoaderCircle } from "lucide-react"; import { DrawingUtils, FilesetResolver, HandLandmarker, } from "@mediapipe/tasks-vision"; type CameraPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right"; interface HandLandmarkProps { position?: CameraPosition; SkeletonColor: string; DotColor: string; size: number; } function HandLandMark({ position = "bottom-right", SkeletonColor, DotColor, size }: HandLandmarkProps) { const videoRef = useRef(null); const canvasRef = useRef(null); const handLandmarkerRef = useRef(undefined); const runningModeRef = useRef<"IMAGE" | "VIDEO">("IMAGE"); const webcamRunningRef = useRef(false); const lastVideoTimeRef = useRef(-1); const resultsRef = useRef["detectForVideo"] > | undefined>(undefined); const streamRef = useRef(null); const animationFrameRef = useRef(null); const [isModelReady, setIsModelReady] = useState(false); const [isCameraRunning, setIsCameraRunning] = useState(false); const [isCameraStarting, setIsCameraStarting] = useState(false); const cameraPositionClasses: Record = { "top-left": "left-4 top-4 sm:left-6 sm:top-6", "top-right": "right-4 top-4 sm:right-6 sm:top-6", "bottom-left": "bottom-4 left-4 sm:bottom-6 sm:left-6", "bottom-right": "bottom-4 right-4 sm:bottom-6 sm:right-6", }; useEffect(() => { let cancelled = false; async function createHandLandmarker() { try { const vision = await FilesetResolver.forVisionTasks( "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@1.1.0/wasm", ); const handLandmarker = await HandLandmarker.createFromOptions(vision, { baseOptions: { modelAssetPath: "https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task", delegate: "GPU", }, runningMode: runningModeRef.current, numHands: 2, }); if (cancelled) { handLandmarker.close(); return; } handLandmarkerRef.current = handLandmarker; setIsModelReady(true); } catch (error) { if (!cancelled) { console.error("Failed to load the hand tracking model:", error); } } } void createHandLandmarker(); return () => { cancelled = true; webcamRunningRef.current = false; if (animationFrameRef.current !== null) { window.cancelAnimationFrame(animationFrameRef.current); } streamRef.current?.getTracks().forEach((track) => track.stop()); handLandmarkerRef.current?.close(); }; }, []); async function toggleCamera() { if (webcamRunningRef.current) { webcamRunningRef.current = false; setIsCameraRunning(false); if (animationFrameRef.current !== null) { window.cancelAnimationFrame(animationFrameRef.current); animationFrameRef.current = null; } streamRef.current?.getTracks().forEach((track) => track.stop()); streamRef.current = null; if (videoRef.current) { videoRef.current.srcObject = null; } const canvas = canvasRef.current; const context = canvas?.getContext("2d"); if (canvas && context) { context.clearRect(0, 0, canvas.width, canvas.height); } return; } setIsCameraStarting(true); try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, }); const video = videoRef.current; if (!video) { stream.getTracks().forEach((track) => track.stop()); return; } streamRef.current = stream; video.srcObject = stream; await video.play(); webcamRunningRef.current = true; setIsCameraRunning(true); animationFrameRef.current = window.requestAnimationFrame((timestamp) => { void predictWebcam(timestamp); }); } catch (error) { streamRef.current?.getTracks().forEach((track) => track.stop()); streamRef.current = null; console.error("Failed to start the camera:", error); } finally { setIsCameraStarting(false); } } async function predictWebcam(timestamp: number) { const video = videoRef.current; const canvas = canvasRef.current; const handLandmarker = handLandmarkerRef.current; if (!video || !canvas || !handLandmarker || !webcamRunningRef.current) { if (video && canvas && webcamRunningRef.current) { animationFrameRef.current = window.requestAnimationFrame((frameTime) => { void predictWebcam(frameTime); }); } return; } if (runningModeRef.current === "IMAGE") { await handLandmarker.setOptions({ runningMode: "VIDEO" }); runningModeRef.current = "VIDEO"; } const canvasContext = canvas.getContext("2d"); if (!canvasContext) return; if (canvas.width !== video.videoWidth || canvas.height !== video.videoHeight) { canvas.width = video.videoWidth; canvas.height = video.videoHeight; } if (lastVideoTimeRef.current !== video.currentTime) { lastVideoTimeRef.current = video.currentTime; resultsRef.current = handLandmarker.detectForVideo(video, timestamp); } canvasContext.clearRect(0, 0, canvas.width, canvas.height); if (resultsRef.current?.landmarks) { const drawingUtils = new DrawingUtils(canvasContext); for (const landmarks of resultsRef.current.landmarks) { drawingUtils.drawConnectors( landmarks, HandLandmarker.HAND_CONNECTIONS, { color: SkeletonColor, lineWidth: size }, ); drawingUtils.drawLandmarks(landmarks, { color: DotColor, fillColor: DotColor, lineWidth: 1, radius: size, }); } } if (webcamRunningRef.current) { animationFrameRef.current = window.requestAnimationFrame((frameTime) => { void predictWebcam(frameTime); }); } } return (

); } export default HandLandMark; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@mediapipe/tasks-vision",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40mediapipe%2Ftasks-vision","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@mediapipe/tasks-vision"}]]}]}]]}],["$","$L52",null,{"namespace":"@krave-docs","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/hand-land-mark/HandLandMark.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]