ObjectTrackr

Real-Time, In-Browser Object Detection. Raw. Fast. Customizable.

▶ LAUNCH APP

What is ObjectTrackr?

ObjectTrackr is a testament to the power of modern web technologies. It's a single HTML file that bundles a powerful AI model, a responsive camera interface, and a fully customizable UI. It runs entirely in your browser, meaning **your privacy is paramount**. Your camera feed is processed locally and never leaves your device.

Feature Description
🚀 Real-Time Performance Leverages your device's GPU to track multiple objects with a smooth, high frame rate.
🎨 Highly Customizable Change every visual aspect: box colors, line thickness, confidence thresholds, and more.
📱 Responsive by Design A dedicated UI for PC users and a thumb-friendly bottom-bar UI for mobile users.
🔐 Privacy First All AI processing happens on your device. Your camera data is never uploaded or stored.
🧩 Zero Dependencies It's a single HTML file that runs anywhere with a modern browser. No installs needed.
📖 Fully Open Source The code is yours to inspect, modify, and build upon. Contributions are welcome!

For Developers: How to Customize

ObjectTrackr was built to be tinkered with. Because it's a single HTML file, getting started is incredibly simple.

Step 1: Get the Code

Download the index.html file directly from the GitHub repository.

Step 2: Customize the Theme

Open index.html in a code editor. The entire Neo-Brutalism theme can be changed by editing the CSS variables in the :root block inside the <style> tag.

:root {
    --bg-color: #F0F0F0;
    --main-color: #111111;
    --accent-color: #FF00FF;
    --border-width: 3px;
    --shadow-offset: 6px;
    --font-family: 'Space Mono', monospace;
}

Step 3: Modify the AI Model

You can swap the default AI model for a different one. Find the createObjectDetector function in the script and change the modelAssetPath. (Note: Ensure the model is compatible with MediaPipe's ObjectDetector task.)

objectDetector = await window.MP_ObjectDetector.createFromOptions(filesetResolver, {
    baseOptions: {
        // Find other compatible models from sources like TensorFlow Hub.
        modelAssetPath: `https://storage.googleapis.com/mediapipe-models/object_detector/efficientdet_lite0/float16/1/efficientdet_lite0.tflite`,
        delegate: "GPU"
    },
    // ...
});

The Philosophy: Neo-Brutalism

This app's visual style is a deliberate choice. Neo-Brutalism in web design focuses on raw honesty, functionality, and boldness. It features strong outlines, high-contrast colors, and functional typography to create a striking, memorable, and unapologetically digital user experience.

Read More About Neo-Brutalism