Barcode-detection NPM

barcode-detector-polyfill

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

Include the library

Via CDN:

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@9.6.20/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>

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.