AprilTag Detector App

A mobile-first web application that can recognize AprilTags in images using camera capture.

• Mobile-First Design: Optimized for mobile devices with touch-friendly interface
• Camera Integration: Uses device camera (preferably back camera) for image capture
• Real-time Detection: Processes captured images and detects AprilTags using the @monumental-works/apriltag-node library
• Detailed Results: Shows detection coordinates, corners, and quality metrics
• Full-Screen Camera: Immersive camera preview experience

• Framework: Hono for HTTP handling
• Detection: Mock implementation for demonstration (see Production Notes below)
• API Endpoint: POST /api/detect - accepts image uploads and returns detection results
• Static Serving: Serves frontend files

• Camera Access: Uses getUserMedia API for camera access
• Image Capture: Captures frames from video stream to canvas
• Upload: Sends captured images to backend via FormData
• Results Display: Shows detection results in a modal overlay

Important: This demo uses a mock AprilTag detection implementation because the @monumental-works/apriltag-node package requires native binaries that aren't available in serverless environments like Val Town.

For production use, consider these alternatives:

1. Cloud Vision APIs:

   • Google Cloud Vision API
   • AWS Rekognition Custom Labels
   • Azure Computer Vision

2. WASM-based Solutions:

   • Compile AprilTag detection to WebAssembly
   • Use browser-based detection libraries

3. Dedicated Server:

   • Deploy on a server with native library support
   • Use Docker containers with pre-compiled binaries

4. Client-side Detection:

   • Use JavaScript/WASM AprilTag libraries
   • Process images directly in the browser

Accepts an image file and returns AprilTag detection results.

Request:

• Content-Type: multipart/form-data
• Body: image field with image file

Response:

{
  "success": true,
  "detections": [
    {
      "id": 42,
      "center": { "x": 320, "y": 240 },
      "corners": [
        { "x": 300, "y": 220 },
        { "x": 340, "y": 220 },
        { "x": 340, "y": 260 },
        { "x": 300, "y": 260 }
      ],
      "hamming": 0,
      "decisionMargin": 85.5
    }
  ],
  "count": 1
}

Note: The current implementation returns mock data for demonstration purposes.

1. Open the app in a mobile browser
2. Grant camera permissions when prompted
3. Point camera at AprilTags
4. Tap the camera button to capture and analyze
5. View detection results in the modal
6. Tap the X or background to close results

The detector is configured for:

• Tag Family: tag36h11 (common AprilTag family)
• Decimate: 1.0 (full resolution)
• Blur: 0.0 (no blur)
• Refine Edges: true (better accuracy)

• Requires modern browser with camera support
• Works best on mobile devices
• Requires HTTPS for camera access (automatically provided by Val Town)

The app is structured as a single-page application with:

• Full-screen camera preview
• Minimal UI for maximum camera visibility
• Touch-optimized capture button
• Responsive modal for results display