Candidate API

Scanner Playground

Try preset card handlers, edit the JavaScript, and see how the applet can fit into your own page. This playground keeps everything local in your browser: apply a handler, then scan a card. Need to disable cross-origin isolation for debugging? Open with ?coi=0.

Scan settings

Corner threshold 0.02 Current 0.00 ID Threshold Consecutive scans Scan interval 900ms Enable WebGPU (experimental) Show FPS debug overlay Group printings by secondary ID (oracle)

Waiting for cards…

Card handler JavaScript

Start with the Scryfall example, or change the rows, logs, and fetches to fit your own page.

async function onCardScanned(card, mygui) {

Card: card.cardId card.score card.detectedAt card.raw Secondary: card.secondaryId card.secondaryIdField (and card[card.secondaryIdField]) Helpers: mygui.addRow() mygui.log() mygui.fetchJson() mygui.cardImageUrl() mygui.cameraRect() Fun: mygui.bounceCard() mygui.priceBurst() mygui.addToTotal()

Try this: choose a preset, click Load preset, then scan a card. The examples are starting points—edit them freely.

card.cardId is the confirmed CollectorVision card id.
card.secondaryId is the optional grouped id.
card.secondaryIdField is auto-detected from catalog metadata (for example oracleId).
card.score is the match confidence.
mygui.bounceCard() adds one bouncing image per scan.
When cross-origin isolation is enabled for max performance, cross-origin card art may render as a local fallback tile.
The handler runs only on your device; refreshing restores your saved code.

Detected cards will appear here.