Skip to content

Polyfill of the Barcode Detection API based on Dynamsoft Barcode Reader

License

Notifications You must be signed in to change notification settings

tony-xlh/barcode-detector-polyfill

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

barcode-detector-polyfill

Polyfill for the Barcode Detection API based on Dynamsoft Barcode Reader or ZXing.

Online demo

Include the library

  1. Via CDN:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@zxing/browser@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/barcode-detection@latest/dist/barcode-detector.umd.js"></script>
  2. Via npm:

    npm install barcode-detection
    

    Then import the package:

    import {default as BarcodeDetectorPolyfill} from "barcode-detection"    
    

Usage

let barcodeDetector;

async function init() {
  if ("BarcodeDetector" in window) {
    alert('Barcode Detector supported!');
  }else{
    alert('Barcode Detector is not supported by this browser, using the Dynamsoft Barcode Reader polyfill.');
    BarcodeDetectorPolyfill.engine = "DBR"; // options: DBR and ZXing.
    //initialize the Dynamsoft Barcode Reader with a license
    BarcodeDetectorPolyfill.setDBRLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==");
    await BarcodeDetectorPolyfill.initDBR();
    window.BarcodeDetector = BarcodeDetectorPolyfill;
    
  }
  barcodeDetector = new window.BarcodeDetector({ formats: ["qr_code"] });
}

async function decode(imgEl) {
  //decode an image element
  let barcodes = await barcodeDetector.detect(imgEl);
}

You can apply for a license of Dynamsoft Barcode Reader here.

Supported Barcode Symbologies

Dynamsoft Barcode Reader:

  • Code 11
  • Code 39
  • Code 93
  • Code 128
  • Codabar
  • EAN-8
  • EAN-13
  • UPC-A
  • UPC-E
  • Interleaved 2 of 5 (ITF)
  • Industrial 2 of 5 (Code 2 of 5 Industry, Standard 2 of 5, Code 2 of 5)
  • ITF-14
  • QRCode
  • DataMatrix
  • PDF417
  • GS1 DataBar
  • Maxicode
  • Micro PDF417
  • Micro QR
  • PatchCode
  • GS1 Composite
  • Postal Code
  • Dot Code
  • Pharmacode

ZXing:

  • Aztec
  • Code 39
  • Code 128
  • EAN-8
  • EAN-13
  • UPC-A
  • UPC-E
  • QRCode
  • DataMatrix
  • PDF417
  • Interleaved 2 of 5 (ITF)