Guides

Document scanning

A second, independent scanner mode: point the camera at a paper document, get a straightened, multi-page PDF back in your own code. A self-contained edge detector (no external CV library) tracks the document in the frame and auto-captures once it's held steady, with a manual shutter and an adjustable crop step always available as a fallback.

Separate from the barcode scanner. This mode doesn't touch the barcode/QR decoder at all, and it lazy-loads as its own small module only the first time it's opened — pages that only use barcode scanning never download it.

The PDF never reaches our servers. Capture, perspective correction and PDF assembly all happen in the browser; the finished file is handed only to your own page, below. Nothing about this flow — not the images, not the PDF, not even that it ran — is sent to the Scanify dashboard.

Quick start

Add a second trigger button next to (or instead of) the barcode one. Same script tag, no extra include:

<button type="button" data-jsscanner-document-trigger>
  Scan Document
</button>
<script src="https://your-app.test/embed/YOUR_TOKEN.js"></script>

How it works

Camera opens fullpage; a live outline tracks the largest document-shaped edge it finds in the frame.
Once that outline holds still for about a second, the page captures itself automatically — or tap the shutter any time to capture manually.
An adjustment screen shows the 4 detected corners as draggable handles, so you can correct the crop before accepting.
A quick sharpness check flags likely-blurry captures with a retake prompt (you can still use them anyway).
Repeat for more pages, or tap Done — every accepted page is perspective-corrected and combined into one PDF, built entirely client-side.

Customization

Attribute	Default	Effect
`data-document-accent`	`#fb476a`	Highlight color for the live tracking outline and primary buttons.
`data-jsscanner-ondocument`	—	Name of a global function to call with the finished PDF (see below).

<button type="button" data-jsscanner-document-trigger
        data-document-accent="#00c2a8">
  Scan Document
</button>

Getting the PDF

Same three capture methods as scan data, all firing with the same payload:

DOM event

document.addEventListener("jsscanner:document", (event) => {
  const { pdf, pageCount } = event.detail; // pdf is a Blob, type "application/pdf"
  const url = URL.createObjectURL(pdf);
  window.open(url, "_blank");
});

Global function name

<button type="button" data-jsscanner-document-trigger
        data-jsscanner-ondocument="handleDocument">
  Scan Document
</button>

<script>
  function handleDocument(pdfBlob, meta) {
    const form = new FormData();
    form.append("file", pdfBlob, "scan.pdf");
    fetch("/my-api/upload", { method: "POST", body: form });
  }
</script>

JavaScript callback

document.addEventListener("jsscanner:ready", () => {
  document.getElementById("my-button").addEventListener("click", () => {
    JSScannerEmbed.openDocumentScanner({
      accentColor: "#00c2a8",
      onDocument(pdfBlob, meta) {
        console.log(meta.pageCount + " pages, " + pdfBlob.size + " bytes");
      },
    });
  });
});

Good to know

The live outline is a best-effort edge detector, not a guarantee — low contrast between the document and the surface it's on, or heavy clutter in the background, can make it slower to lock on. The manual shutter plus the adjustable crop screen cover that case.
Perspective correction runs entirely in the browser via a canvas transform (no server round-trip), so a very sharp viewing angle can leave a faint seam along the diagonal of the corrected image — usually not noticeable on a real document photo.
Not currently tied to the usage/session tracking shown on your dashboard — that's barcode-scan specific for now.