oxedom/parker

Parking detection and monitoring webapp that runs entirely in the browser

Parkerr

Parkerr is a open source parking browser application that enables you monitor parking spots using a webcam, cellphone camera, or any virtual webcam. The tool uses computer vision object detection to operate and all the computation is processed inside browser utilizing TensorFlow.js. Communication between a remote cellphone and the browser is enabled through WebRTC (PeerJS uses PeerServer for session metadata and candidate signaling. as well as Google Stun servers)

licensing

Under the MIT License.

LIVE LINK

Live link

Built With

• TensorFlow.js
• Tailwind
• NextJS
• PeerJS (WebRTC)
• YOLO7 (Original Model)
• YOLO7-tfjs (Ported Model)

Can Parker be processed the on a server?

Yes, it can be processed on a server, Before refactoring the architecture of the entire project, a flask API was built using OpenCV and Yolo3. It worked well but it wasn't scalable. Utils Functions were created in previous versions of Parkerr that encode the images into blobs to the server. The JSON response need a bit of tweaking to be compatible, but implementing the server processing would not require too much of a refactor in the client project. If anyone is in need of help open a issue and I will gladly assist.

docker pull oxedom/flask_api
docker run -p 5000:5000 flask_api
Dockerhub Image

What else can parker detect?

Here's a list

Can I Contribute?

Yes sure, submit a PR!

parker's Issues

GTM to google events

Add Statistics page

Can only be done once #6 is merged.

Improve Save/Import selections Implementation

Issue: Improve save and import function for Parkerr

Problem

Currently, the save function in Parkerr only saves the state of the selectedRois to local storage, and the import function only imports from local storage. However, there is no UI for this, and the program is using alerts to communicate with user. This is inconvenient for daily use, as well as there is no option to make multiple saves.

Solution

We need to improve the save and import function so that users can save JSON/CSV files as well as import them.
As well as improve the UI for this functionality

Tasks

DONE Improve and research data structure for selectedRoiState
DONE Improve the UI for the save and import functions
DONE Remove the alerts

Add Support for CSV
Clean Data function before exporting

Open project up for open source

Improve readme
Improve all issues
add code of conduct.

Prevent Auto detecting from rerunning when minimizing tab

Problem

Auto detecting state is set to true when tab is closed.

Solution

Something likely to do with the lifecycle and a useEffect side effect setting the state to true.

Add multiple demos that can be selected

Currently parkerr only has one demo video, add multiple parking lots that a user can select and load into the app.

Implement parking history functionality in the occupation logic

Description:
Currently, our occupation logic for parking spots does not keep track of their history. We need to implement a feature that allows us to save the parking history of a certain spot. This will enable us to track the number of cars that visited the spot in a session, calculate the percentage of time it was occupied, and determine the average parking duration.

Proposed Solution:
To implement the parking history functionality, we can introduce the following changes:

Create a data structure to store the history of each parking spot. This can be achieved by using a list or an array of objects, where each object represents a session.

Each object in the history list will contain the necessary information, including the number of cars that visited the spot in that session and the parking duration for each car.

Update the occupation logic to record the history of a parking spot. When a car leaves the spot, the current session's data (number of cars and their duration's) should be added to the history list.

To calculate the percentage of time the spot was occupied, iterate over the history list and sum up the duration's of all sessions. Divide this sum by the total available time to get the occupancy percentage.

To determine the average parking duration, iterate over the history list and calculate the average duration per session.

Additional Considerations:

Ensure that the parking history is stored persistently, either in a database or a file, so that it is not lost when the system restarts.
Provide a way to access and display the parking history information, such as through a reporting feature or an API endpoint.
Acceptance Criteria:

The occupation logic should be updated to record the parking history of each spot.
The history should include the number of cars that visited the spot in a session and the parking duration for each car.
The percentage of time the spot was occupied should be calculated correctly.
The average parking duration should be calculated accurately.
The parking history should be stored persistently and accessible for reporting purposes.

Fix positioning of canvas over video

Currently, I have positioned all three canvases above each other using a hacky CSS approach. , This needs to be resolved with appropriate positioning attributes to use instead of "fixed" because if a user scrolls has overflow-y on the vision page, the rendered overlaps will travel with as they scroll.

Set up CI/CD

Currently, I am using a basic deploy.sh script (bash) to build the Next.js app, build a Docker image, push it to a DockerHub repository, and manually redeploy the image on my cloud instance.

Missing LICENSE

I see you have no LICENSE file for this project. The default is copyright.

I would suggest releasing the code under the GPL-3.0-or-later or AGPL-3.0-or-later license so that others are encouraged to contribute changes back to your project.

Prevent Desktop from shifting to vertical mode from Remote Streams

Problem

When a user streams with a remote connection with their phone on vertical mode, the UI of the desktop app updates to try and match the video dimensions. This, in turn, messes up the UI, although the object detection engine does not adjust for this size and process and returns bounding boxes with an assumption that the video is in landscape mode.

Solution

The solution is to dig into the WebRTC documentation to see what is causing this issue and how to force landscape mode.

Here is a screenshot of the problem:
Screenshot of the problem