How ceacodesnclass-rgb/chizzuu-cyber-frame-camera works
Purpose and entry points
This is a browser-only experimental webcam camera that applies cyber-glitch rendering exclusively inside a hand-defined frame. The document entry point is index.html; application behavior is driven by app.js and presentation by style.css.
UI and camera surface
index.html defines the camera experience, controls, and canvas/video surfaces. style.css provides the visual layout and cyber-themed presentation. The app uses the browser’s WebRTC camera API, so it must run from HTTPS or localhost.
Paths: index.html, style.css
Hand-landmark detection
app.js initializes MediaPipe Tasks Vision and consumes live video frames to identify index-finger and thumb tip landmarks from two hands. Those four landmarks form the interactive frame boundary; effects are inactive or reduced when a valid two-hand frame cannot be constructed.
Path: app.js
Frame geometry boundary
The application converts detected landmark coordinates into a four-point polygon in canvas space. This polygon is the primary rendering boundary: Canvas clipping ensures the original camera feed remains visible outside the hand frame while effect layers are constrained inside it.
Path: app.js
Cyber effect render pipeline
For each animation frame, the app draws camera imagery and layered cyber treatments: color grading, cyan/magenta RGB separation, scanlines, moving scanner beam, noise blocks, horizontal glitch strips, tracking border, and initial frame-acquisition flash. Canvas 2D is the compositor and per-frame renderer.
Path: app.js
Capture/export flow
A camera-control action captures the composed canvas—not merely the raw webcam video—and exports the current result as a PNG download. This makes the detected polygon and all active visual effects part of the saved image.
Paths: index.html, app.js
Assets and external dependencies
The only repository media asset is a signature image used by the UI/rendered composition. Runtime dependencies are browser-provided Canvas API and getUserMedia, plus MediaPipe Tasks Vision loaded by the client; there is no backend, database, or persistent service in this repository.
Paths: assets/chizzuu-signature.png, app.js
Main entry points: index.html Camera UI & controls · app.js Application controller · style.css Cyber presentation
Components 13
Browser App
- Camera UI & controls · Defines video, canvas, and capture controls.
index.html - Cyber presentation
style.css - Application controller · Coordinates camera, landmarks, rendering, and capture.
app.js - Webcam stream · Requires HTTPS or localhost.
- Video surface
index.html - PNG download · Exports the composed canvas.
app.js
Hand Tracking
- MediaPipe Tasks Vision · Detects index-finger and thumb tips from two hands.
app.js - Four hand landmarks
app.js
Canvas Rendering
- Hand-frame polygon · Four-point clipping boundary in canvas space.
app.js - Composition canvas · Per-frame compositor and export source.
index.html - Camera image render · Keeps original camera feed visible outside the polygon.
app.js - Cyber effect layers · Grade, RGB split, scanlines, beam, noise, glitch, border, and flash.
app.js - Signature image
Connections 18
- Camera UI & controls → Cyber presentation: loads
- Camera UI & controls → Application controller: runs
- Camera UI & controls → Video surface: defines
- Camera UI & controls → Composition canvas: defines
- Application controller → Webcam stream: requests
- Webcam stream → Video surface: streams to
- Application controller → MediaPipe Tasks Vision: initializes
- Video surface → MediaPipe Tasks Vision: supplies frames
- MediaPipe Tasks Vision → Four hand landmarks: produces
- Four hand landmarks → Hand-frame polygon: constructs
- Video surface → Camera image render: provides imagery
- Camera image render → Composition canvas: draws
- Hand-frame polygon → Cyber effect layers: clips
- Cyber effect layers → Composition canvas: composites
- Signature image → Cyber effect layers: renders in
- Application controller → Cyber effect layers: animates
- Composition canvas → PNG download: captures as
- Camera UI & controls → PNG download: capture action