Camera Capture — Scope & Build

Full scope, feature list, and downloadable source ZIP for the in-browser camera capture module.

Camera Capture Source (ZIP)

18 files · ~50 KB · page, components, libs, backend functions, entities

Camera Capture — Scope & Feature Spec

Overview

A mobile-first, in-browser camera capture flow that lets auction staff photograph items directly into the AuctionSnap Media Library. Each snapshot is auto-squared, optionally watermarked with the lot number and auction name, saved to a library record tagged with the current lot, and then processed in the background (AI grouping, analysis, and pricing) — all without leaving the capture screen.

Primary Goal

Replace flatbed scanning for fast, on-the-floor cataloging: snap a photo → it's lot-tagged, watermarked, and AI-processed in seconds. Designed for phones and tablets, but works on any device with a camera (or upload fallback).

Pages & Routes

  • CameraCapture — /CameraCapture — the main capture screen (viewfinder + lot controls + live session tray).
  • Reachable from the Media Library home via the "Camera" entry.

Source Files (included in the ZIP)

Frontend

  • src/pages/CameraCapture.jsx — page orchestrator: lot numbering, upload, watermark, session wiring.
  • src/components/capture/CameraView.jsx — live viewfinder, frame crop, grid overlay, capture button, lot controls.
  • src/components/capture/AuctionPicker.jsx — dropdown of Auction records to tag captures.
  • src/components/capture/ScanReviewPanel.jsx — review panel for captured shots.
  • src/components/capture/ScanCamera.jsx — alternate scan-camera component.
  • src/components/capture/PhotoCapture.jsx — photo capture helper.
  • src/components/capture/ManualLotForm.jsx — manual lot entry form.
  • src/lib/captureSession.js — singleton background session processor (survives navigation).
  • src/lib/watermark.js — canvas-based watermark burner (domain + lot + auction).
  • src/lib/backgroundProcessor.js — generic background job runner used by the session.
  • src/lib/batchOperations.js — aiProcessAllBatch — analyze + group + price pipeline.

Backend

  • base44/functions/centerImage/entry.ts — squares/centers the captured frame server-side.
  • base44/functions/onMediaLibraryCreate/entry.ts — entity-create trigger that kicks off AI processing.
  • base44/functions/autoProcessLotImage/entry.ts — auto center/straighten a lot image.
  • base44/functions/aiProcessAllServer/entry.ts — server-side batch AI analysis.
  • base44/shared/imageUtils.ts — shared image decoding/encoding utilities.

Entities

  • base44/entities/MediaLibrary.jsonc — stored capture records (image_url, lot_number, auction_name, source, ai_analyzed, etc.).
  • base44/entities/Auction.jsonc — auction records used by the AuctionPicker.

Features

1. Live Camera Viewfinder

  • getUserMedia stream with rear-camera (environment) default, front/back switch.
  • Power on/off — camera starts dark to save battery; user taps to start.
  • Status handling — idle / ready / denied / error with retry button and clear messages.
  • Frame crop — adjustable square capture frame (40%–100% slider); everything outside the frame is cropped away at capture time.
  • Centering overlay — rule-of-thirds grid (toggle), center crosshair, and corner brackets for precise framing.
  • High-res capture — requests 1920×1080 video, grabs a square JPEG at 92% quality.

2. Lot Numbering

  • Auto-resume — on mount, looks up the most recently uploaded lot in the library and starts at the next number (never reuses an existing lot).
  • Card Mode (default ON) — auto-advances to the next lot after 2 captures (front + back of one card). OFF = stays on the same lot until manually advanced.
  • Manual controls — Prev Lot, Next Lot, and a type-to-jump lot input.
  • Blank-box revert — clearing the lot box and submitting jumps back to the last uploaded lot.
  • Non-numeric safety — non-numeric lot labels (e.g. "LOT2018") are ignored by the counter so they don't skew sequencing.
  • Live counter — shows "LOT #N – IMAGE #M" for the current lot.

3. Auction Tagging

  • AuctionPicker — dropdown of all Auction records (sorted by date).
  • "No auction" option — captures are saved plain (no watermark) when no auction is selected.
  • Auction selected — the auction name is burned into the watermark and stored on the record.

4. Capture Pipeline (per snapshot)

  1. Upload raw frame to file storage.
  2. Auto-square via the centerImage backend function (squareCrop: true) — guarantees a square image.
  3. Watermark (only if an auction is selected) — burns "www.awinrauction.com Lot #N" + auction name into the bottom of the image, proportional to image height, with white fill + dark outline for legibility on any background.
  4. Create MediaLibrary record — image_url, previous_image_url (pre-watermark), lot_number, auction_name, source="mobile_capture", ai_analyzed=false.
  5. Invalidate the mediaLibrary query so the library refreshes.

5. Background AI Session

  • Singleton session (captureSession.js) — survives navigation; processing continues even if the user leaves the page.
  • Quiet-period debounce — waits for a 5-second quiet period (or up to 6 items / 20s) so front+back shots of the same item land in the same analyze+group run.
  • Pipeline per batch — refetches fresh records → aiProcessAllBatch (convert-safe analyze, AI group into lots, price).
  • Live stage badges — each thumbnail shows its stage: Queued → Centering → Centered → AI Analyze → Done (or Error).
  • Auto-finish — session ends after 90s of no new captures.
  • Thumbnail tray — horizontal scroll of captured items with live stage labels and lot numbers.
  • Pipeline legend — Center · Convert · AI Group · Analyze · Price.

6. Watermark Engine

  • Proportional sizing — font ~3% of image height; readable from 200px thumbnails to 4000px scans.
  • Two-line layout — auction name (smaller, above) + domain + lot (main line).
  • Legibility — white fill, dark stroke outline, soft shadow → visible on light and dark backgrounds.
  • CORS-safe — fetches image bytes first and loads from a same-origin object URL so the canvas is never tainted.

Data Flow

Camera frame
  → getUserMedia capture → square JPEG File
  → UploadFile (raw URL)
  → centerImage(squareCrop) → squared URL
  → [if auction] watermarkImageToBlob → UploadFile (watermarked URL)
  → MediaLibrary.create({ image_url, lot_number, auction_name, source: 'mobile_capture' })
  → addToCaptureSession(record)
  → onMediaLibraryCreate trigger (server) + captureSession background job
  → aiProcessAllBatch → AI analyze + group + price
  → Media Library refresh (invalidated query)

Known Behaviors / Decisions

  • Lots start at 10 and increment by 1.
  • The capture frame crop is always square; centerImage is a safety net on top.
  • Watermark is only burned when an auction is selected — no auction = plain photo.
  • The session is a module singleton (not tied to the page component) so background work survives navigation.
  • Card Mode auto-advance resets the per-lot capture counter when toggled.

Dependencies

  • Entities: MediaLibrary, Auction
  • Backend functions: centerImage, onMediaLibraryCreate, autoProcessLotImage, aiProcessAllServer
  • Integrations: Core.UploadFile
  • Libs: captureSession, watermark, backgroundProcessor, batchOperations
  • UI: shadcn Button, Input, Switch, Label, Select; lucide-react icons