Parker is an open-source web application designed to monitor and detect parking spots in real time. Unlike traditional computer vision apps that rely on heavy server-side processing, Parker runs on the edge, performing all computations directly on the device using TensorFlow.js, but there is more of tail to that...

Getting Started

My journey with Parker began in late 2022. I was searching for the ultimate project to build before officially going on my first job hunt, while on a quest for inspiration I stumbled upon a blog post about creating a parking monitor using a webcam, Python and OpenCV. The concept was cool, it inspired me to build a better experience in the web browser.

I started by building the frontend as a index.html, app.js files with a basic Node Express server for object detection compute. I went deep in the trenches: wrestling with multiple OpenCV installations on my system(s), Unit8Arrays over WebSocket and OpenCV JS bindings (opencv4nodejs) to run.

(hurray! 🥳) It's works!

Great! But the whole DX of the ported version was quite old and just felt off at that time, I decided to shake things up. I migrated to a similar setup but with Python Flask as well as experimenting with NextJS. WIP Migrating Vue3!

The Python switch was a upgrade, it granted me access to entire Python ecosystem for computer vision and online knowledge via articles & discussions also I decided to ditch WebSockets in favor of sending image data via POST. Although not ideal, parking monitoring does not require real-time latency; evaluating the state every second was more than sufficient, so I stuck with that approach. Initially, this worked well locally. I even deployed the service to a DigitalOcean VPS, which was a valuable learning experience configuring Nginx via nano, pm2, managing ports, DNS, WAF, and generally working with a cloud "bare metal" environment and this served as a functional demo but I was aware that server would be overwhelmed with a large amount of requests. The Image processing was being computed via CPU and I was not prepared to host a public server equipped with a GPU in the days beginning of AI... Luckily enough I discovered TensorFlow.js, a machine learning library capable of running directly in the browser.

This discovery led me to pivot toward a system that runs entirely client-side, eliminating the need to serve users a REST API. This approach allowed us to still achieve the original goal of simply visiting a website and using the program without complex setup, accessible to non-technical users. It sounded ideal on paper but the path forward for me was unclear.

Eager on a mission, I began studying the code of existing open-source projects and engaging with the community in the TFJS Discord, a few days later I had the system up and running with an even more advanced model printing the bounding box outputs directly in the browser console. This transition was particularly rewarding because it allowed me to define all my logic within a single project context, keeping it one process, the browser. I was no longer context-switching between Python syntax and JavaScript libraries or managing a pet VPS.

With the core functionality established—sending images every N milliseconds and receiving bounding boxes with labels and confidence levels I turned my attention to the business logic required for a monitoring system. Since tracking requires state and the model is stateless, I had to bridge that gap, I implemented a global state machine in a centralized store on the frontend. Storing this information globally proved useful, as many system components required direct access to the Region of Interest (ROI) state object for displaying state.

I implemented the ROI logic in pure JavaScript. In a birds eye view, the system maintains an array of selected regions (2D coordinates) with properties to track state. Each time the computer vision model produces an output, the system calculates the overlap between these defined regions and the bounding boxes generated by the model. If an overlap of approximately 70% occurs for more than 10 seconds, the region is marked as occupied. Conversely, if a region remains unoccupied for 10 seconds, it is marked as free.

Once the core logic was stable, I implemented a peer-to-peer video communication protocol (WebRTC) to allow users to stream video from external devices, such as phones or secondary computers. This was particularly exciting because the system utilized public STUN and TURN servers peerjs, allowing me to keep the application completely server-free.

I did my best to create a visually appealing and user-friendly interface. After polishing the design, I published my creation on the /r/webdev subreddit. It gained significant attention and tons of UI roasting, eventually reaching the front page with 2000 Upvotes and 150K Views. The website attracted 25,000 visitors in roughly a week. I was fortunate to receive my first PR from an a developer who refined the buttons and color choices. It's a wrap! Parker received it's claim to fame it deserved, it helped me get interviews and now people can monitor their parking vicinities.

Three Years Later

Parker has been live for nearly three years now without any issues, and I'm still proud of its existence. In the past, I had an ambitious roadmap because it's not perfect, but my current focus has vastly shifted. The code was written too long ago for me to easily dive back in manually. However, I might set up a "Ralph Wiggum loop" to let AI agents go wild on the codebase while I sleep—but currently, I have other irons in the fire.

Happy parking!

Random Roadmap & Ideas dump

• Handle multi-stream video directly in the browser.
• Integrate IP cameras easily.
• Implement a screen sharing API for quick setup.
• Offer a choice between cloud-based and local machine processing.
• Upgrade YOLO models.
• Add specific detection modes: Hard Hats, Smoke/Fire, License Plates, and Faces.
• Implement Object Counting, People Counting, and Crowd Monitoring.
• Improve Parking Detection accuracy.
• Add Queue Detection.
• Create a dedicated statistics page for real-time analytics.
• Enable real-time alerts and notifications.
• Configure rules to automatically capture key moments.
• Provide secure remote access for monitoring.
• Allow custom model uploads via File System API (.bin and .json).