I had two primary goals for this project: to learn about the computer-vision algorithms and techniques used in document scanning, and to use that knowledge to build a program that I would actually prefer using over existing apps like CamScanner.
I wanted to be able to use my final product on iOS, macOS, Android, and Windows, but I did not want to have to maintain four separate native codebases. Flutter seemed to be a good option, but I'm not well-versed in Dart, and Flutter's supposed performance advantages over web apps are overblown according to my local tests. Therefore, I opted to use a Progressive Web App (PWA) architecture for my document scanner.
Computer vision often involves multiple expensive operations on an image, so it would be logical to use WebAssembly for the actual document detection and use JavaScript only for the UI. Although I'm quite familiar with Rust and compiling to WASM, I'm a fan of pushing JS to its limits and I wanted to see just how fast JavaScript can be for such a computationally intensive task; turns out, JS is actually fast enough for a document scanner even on low-end mobile devices. (Regardless, I am currently building a "final product" version of this app with WASM, a proper UI, and a few libraries. It should be faster and more user-friendly than the existing prototype).
With these constraints in mind, I got to work by hacking together a Parcel 2 project with TypeScript, the Parcel service worker precaching integration, and my PWA manifest generation plugin. This is my standard setup for all my new projects, but I usually throw React and Emotion in there too; unfortunately, I was already committed to the "zero dependencies" mantra at this point, so the only packages I installed were build tools. Next step: figure out how exactly document detection works so I can actually build the app.
Top comments (0)