A frontend-focused inspection console for viewing real-time camera streams and testing image-processing workflows in an industrial vision setting.
The application-specific console implementation was developed and maintained by Will Cheng.
This repository is a curated public version of an industrial vision engineering project. It focuses on the shareable frontend architecture and implementation patterns. Production credentials, customer data, device identifiers, internal deployment settings, and raw inspection media are not included.
The original system was developed as part of a larger camera, LiveKit, and wafer-inspection workflow. This public repository is intended to be understandable on its own and does not represent a complete copy of that production environment.
- LiveKit-based multi-camera video viewing
- Camera connection and runtime status display
- Browser-side image-processing controls
- Wafer and fork-region ROI editing in image coordinates
- Zoom, pan, fit-to-view, and grid overlays
- Camera parameter controls through a backend API boundary
- Inspection result and wafer history views
- Configuration panels for ROI, templates, thresholds, and runtime settings
- Localized user interface content
The console is designed as an operator-oriented engineering tool. It is not a cloud SaaS application and does not include a public camera publisher or wafer runtime backend.
The live workspace combines the incoming video track with ROI overlays, session state, motion indicators, and runtime diagnostics returned by the backend. Camera identifiers used for routing remain visible, while device-specific serial, network, and local-path details are covered in the public screenshot. The generic camera frame is included only to demonstrate stream and overlay behavior.
The configuration workspace stores wafer and fork regions in image coordinates and previews both shapes before they are applied by the runtime. This frame comes from a simulated wafer run; device identifiers and workstation paths are covered.
Template configuration keeps the saved crop, reference points, and annotated preview together so an operator can inspect the active alignment input before starting a run. The public screenshot shows simulated input rather than a customer recipe or production configuration.
Inspection history exposes per-pass alignment, reference-point, defect, and score fields with filtering, pagination, and spreadsheet export. The rows shown here were generated during simulated integration testing.
The defect view provides a separate record of processing status, classified result, severity, and measured area fields. It reads the runtime API rather than recomputing results in the frontend.
Final history aggregates the available inspection records into a wafer-level outcome while retaining the alignment and reference-point state used by the runtime. All history screenshots contain simulated records, not customer or production data; physical-device and workstation details remain covered.
LiveKit video tracks
|
v
React + TypeScript console
|
+-- video viewer and stream status
+-- ROI overlays and coordinate mapping
+-- browser-side image inspection controls
+-- camera and inspection API clients
+-- history and configuration views
The camera publisher and backend services are separate system components. A public demo should provide a compatible LiveKit publisher and token service outside this frontend repository. The frontend should not contain LiveKit API secrets.
- React
- TypeScript
- Vite
- Ant Design
- LiveKit Client SDK
- Zustand
- OpenCV-compatible browser processing components
npm install
npm run devThe Vite development server starts on port 5173 by default. The current development proxy expects compatible local services for camera APIs and LiveKit token requests. A standalone publisher or mock-data service is intentionally kept outside this frontend snapshot.
The viewer uses the room returned by GET /api/cameras. If no room is returned, it follows the bridge convention wafer-<camera-id>. Copy .env.example and set VITE_LIVEKIT_URL for local development. A deployment can override the same value with window.__APP_CONFIG__.VITE_LIVEKIT_URL.
The Vite development proxy forwards /api and /data to the wafer-runtime service at port 8000, and /token to the bridge token service at port 8081. These are local development defaults and can be changed in vite.config.ts.
The curated snapshot currently passes the TypeScript and production bundle build:
npm run buildnpm run lint currently reports 12 errors and 12 warnings in several editor, viewer, and configuration components. The AppLayout hook order, LiveKit token lifecycle, and viewer resource cleanup have been corrected, while the remaining findings are recorded as later quality-hardening work.
npm audit currently reports 11 dependency findings: 1 low, 1 moderate, and 9 high. No automatic audit fix has been applied because dependency upgrades require a separate compatibility review.
- A real Lucid camera source is not included in this frontend repository.
- A LiveKit deployment and token service are not included.
- A wafer-runtime backend is not included.
- Production images, wafer identifiers, recipes, camera serials, and customer configuration are not included.
- The public snapshot uses a curated history rather than the original internal development history.
- No project license is attached. Publication of the source does not grant permission for reuse, redistribution, or commercial deployment.
The console sits on the operator-facing side of a larger workflow. The related public repositories cover the services it connects to and the separate browser-side tuning path:
- Industrial Vision System Reference — component map and integration boundaries
- Lucid LiveKit Bridge — camera and replay publication through LiveKit
- Wafer Runtime Reference — inspection sessions, runtime state, and result APIs
- Industrial Vision Workbench — browser-side stream inspection and OpenCV.js tuning