[selangor no.1] OpenCamScanner

Main Landing Page
List of files, sorted by most recent, with sidebar accessibility to individual folders
Uploading image(s) to be converted into a pdf file
Perfect scan with sub-optimal phone capture

Inspiration

Just the other day when we were having supper at the hawker centre, we saw that some of the stall owners typing on calculators, flipping through thick stacks of receipts and hand-written notes to tally their sales for the day. Wouldn’t it be easier if they could scan the bunch of receipts, do calculations using Excel, and organise their papers neatly?

Furthermore, as university students, we have online exams where answers were written on paper and scanned at the end of the exams to upload online. Android phone users had to download apps such as CamScanner just to do the job, and there would sometimes be annoying watermarks in our converted pdfs. Apple users might have it easier with Apple’s in-built PDF scanner in Notes (did you know?), but transferring the file from your phone to your computer to upload your answers is a hassle. Not to mention the fact that you will have to be in a place with sufficient lighting and scan the documents in a near-perfect angle to get quality scans, often taking many tries just to obtain a decent quality image into a PDF. It was a very frustrating and time-consuming experience for us too, which is why we came up with this all-in-one platform to do everything for you! :)

Seeing the abovementioned issues and given our expertise in Computer Vision (we just took CS4243) and web development, we decided to take on the challenge to build a project combining these two!

What it does

Behold OpenCamScanner, a CamScanner lite that uses modern Computer Vision techniques and libraries like OpenCV to scan and process your images into quality PDFs for you!

All you need to do is just take pictures of your documents and bulk upload them onto OpenCamScanner, and we will process these images into good quality images for your teachers or your bosses! As users, you do not need to worry about perfect lighting or angles because the platform uses robust Computer Vision techniques such as object detection, canny edge detection and adaptive thresholding to process these images into readable quality regardless of lighting, shadow or angles.

After processing, you will be able to access your processed PDFs (without watermark!) on the platform and export it anywhere you want to! Talk about convenience!

To ensure data privacy, the platform uses user authentication by Google Firebase Authentication, leveraging industry standards like OAuth 2.0 and OpenID Connect, so that only you can access and download your documents.

How we built it

We felt adventurous and built this project in a scalable manner, splitting our codebase into separate backend and frontend.

Backend: Python with OpenCV and scikit-image for image processing and computer vision

Frontend: React, TypeScript, Next.js and Tailwind CSS

And RESTful APIs for communication between the backend and the frontend!

Challenges we ran into

We ran into a lot of issues that were backbreaking and demotivating throughout these 48 hours, with the most prominent being dependency issues and Cross-Origin Resource Sharing (CORS) from the backend API.

Hosting our backend on FastAPI led to a variety of issues like credit limit. We had to be mindful of our testing and deployment usage so as to not exceed the limit even before production. There were also issues with Cross-Origin Resource Sharing (CORS) when querying data from the backend.

Accomplishments that we're proud of

We managed to build a well-designed MVP in a relatively short period of time, with a potential use case for a wide target audience, ranging from students and educators, to small businesses and large corporations.

What we learned

Each of us did take away different stuff from this hackathon, from being more familiar with the Next.js framework to learning how to build API endpoints and deploy them. Most importantly, we learnt that it is fun to come together as a group of friends to code, because it is the tough times (all the blood, sweat and tears from staring at the bugs, errors and failed builds) that create strong and lasting bonds.

What's next for OpenCamScanner

We are hoping that this does not end here, and will be introducing many more features to help make our users’ life easier!

User authentication modules
Drag-and-drop folder system
Mobile applications for ease of cross-platform transactions
Sharing of files and folders with other user accounts
More post-processing options such as sharpening, histogram equalization & noise removal