Member-only story
A Little Scanner App Made With the Web
I developed a little scanner prototype with the web during the Christmas holidays to learn and try new skills
This last Christmas break, with the exception of visiting my parents for a couple of days (after having forced myself into a sort of autolockdown period first), I didn’t have any big plans. That’s why, I took the opportunity to improve my software development knowledge.
As I better learn concepts by applying them to real applications rather than writing examples, I decided to create a little scanner progressive web app (PWA) entirely made with the web.
I called it Rebel Scan because it’s just a little scanner app, you rebel scum!
Introduction
It’s important to note that this little scanner doesn’t aim to be the most perfect scanner the world’s ever seen. I’m not even sure I’ll use it in the future. The image processing isn’t the best, there’s no text extraction, and on mobile, it can only share PNGs (see the last section in this article for more about that). It had absolutely no other goal than helping me learn new skills.
Therefore, before beginning development, I defined the following objectives — things I had never tried before but was eager to test:
- Try Next.js
- Capture and crop a video stream using the MediaDevices.getUserMedia() API
- Generate React bindings for a web component developed with Stencil
- Share files using only the Web Share API
Without revealing the ending, I can confirm it was a success — I was able to develop my little application. However, there were a couple of surprises along the way. Let’s tackle these, step by step.
Meta
The PWA, the result of this article and my experiment, is available online at rebelscan.com, and its source code is available on GitHub.
