Integration: Scan & Collect - Cross-Platform MTG Collection Scanner App
What I built
I'm Greg. I have a collection of Magic apps on my site MTG Deck Tools. which has all sorts of whacky stuff I've been building over time with AI tooling. I really wanted a cross-platform collector app that suited my own collection needs, so I put together Scan & Collect: a free browser-based MTG card scanner and collection app. Open it on your phone or desktop, scan cards with your camera, build collections, see Scryfall prices. No app store, no ads.
It's not close to parity with something like ManaBox, but it does a pretty good job for what I wanted. I plan to keep iterating on it as I get feedback, feature requests, or just find new things I want it to do.
The camera scanning is built on CollectorVision. I honestly wouldn't have attempted this without it. Thank you for the project.
How I'm using it
- Vendored runtime from
examples/web_scanner/ (worker + applet + ONNX assets from HanClinto/milo)
- Same pipeline as upstream: detect → dewarp → embed → catalog search
- I wrapped it in a React UI that handles collections, local storage, optional cloud sync, and card details
- Recognition runs entirely in the browser
- After a card is identified, I enrich it through my own self-hosted Scryfall proxy (SQLite mirror of Scryfall bulk data) rather than hitting
api.scryfall.com directly for every lookup and price refresh
- I don't use the vendored
enricher.worker.mjs
Modifications I made
I publish source for my patched runtime on each deploy:
https://www.mtgdecktools.com/scan-and-collect/collectorvision-source.tar.gz
This is also linked from the in-app Account page along with credits. The archive includes my patched .mjs files and catalog build scripts. Not my whole repo. The main MTG Deck Tools codebase is not currently public, but I'm open to adding contributors if anyone is interested in working on the project. Feel free to reach out.
Fixed-corner / static scan slot
I added a pretty nice change that really improved my results that I thought I'd mention here with optional fixed-corner scanning:
staticScanEnabled / staticCorners on the applet. I calibrate a fixed region on screen so I can drop a card into a box instead of chasing live corner detection. Especially helpful on mobile.- In
scanner.worker.mjs, when a valid normalized quad is passed in, the worker skips the detector and dewarps straight from those corners via staticDetection()
restartCamera() when switching between webcam devices
That fixed-slot mode made phone scanning feel genuinely usable for quick sessions.
Catalog ahead of Hugging Face
I also built an incremental catalog pipeline for when the HF milo gallery lags behind Scryfall. I wanted Marvel Super Heroes (MSH) scannable before the HF catalog caught up and it worked better than I expected.
Rough flow:
- Diff the HF/base catalog against current Scryfall bulk data
- Embed only missing printings with Milo
- Export browser assets for deploy
My scannable rules intentionally include pre-release sets. I don't filter on format legality or released_at, which is how MSH got in early. When HF later passes my pin, deploys pick up the upstream catalog automatically again.
Happy to share more detail on any of this if it's useful for other integrators.
Links
Integration: Scan & Collect - Cross-Platform MTG Collection Scanner App
What I built
I'm Greg. I have a collection of Magic apps on my site MTG Deck Tools. which has all sorts of whacky stuff I've been building over time with AI tooling. I really wanted a cross-platform collector app that suited my own collection needs, so I put together Scan & Collect: a free browser-based MTG card scanner and collection app. Open it on your phone or desktop, scan cards with your camera, build collections, see Scryfall prices. No app store, no ads.
It's not close to parity with something like ManaBox, but it does a pretty good job for what I wanted. I plan to keep iterating on it as I get feedback, feature requests, or just find new things I want it to do.
The camera scanning is built on CollectorVision. I honestly wouldn't have attempted this without it. Thank you for the project.
How I'm using it
examples/web_scanner/(worker + applet + ONNX assets fromHanClinto/milo)api.scryfall.comdirectly for every lookup and price refreshenricher.worker.mjsModifications I made
I publish source for my patched runtime on each deploy:
https://www.mtgdecktools.com/scan-and-collect/collectorvision-source.tar.gz
This is also linked from the in-app Account page along with credits. The archive includes my patched
.mjsfiles and catalog build scripts. Not my whole repo. The main MTG Deck Tools codebase is not currently public, but I'm open to adding contributors if anyone is interested in working on the project. Feel free to reach out.Fixed-corner / static scan slot
I added a pretty nice change that really improved my results that I thought I'd mention here with optional fixed-corner scanning:
staticScanEnabled/staticCornerson the applet. I calibrate a fixed region on screen so I can drop a card into a box instead of chasing live corner detection. Especially helpful on mobile.scanner.worker.mjs, when a valid normalized quad is passed in, the worker skips the detector and dewarps straight from those corners viastaticDetection()restartCamera()when switching between webcam devicesThat fixed-slot mode made phone scanning feel genuinely usable for quick sessions.
Catalog ahead of Hugging Face
I also built an incremental catalog pipeline for when the HF
milogallery lags behind Scryfall. I wanted Marvel Super Heroes (MSH) scannable before the HF catalog caught up and it worked better than I expected.Rough flow:
My scannable rules intentionally include pre-release sets. I don't filter on format legality or
released_at, which is how MSH got in early. When HF later passes my pin, deploys pick up the upstream catalog automatically again.Happy to share more detail on any of this if it's useful for other integrators.
Links