hyunseunglee-travis / browser-barcodescanner

This NPM library has an organized and precise code for scanning and detecting barcodes with the best support for users and developers using this tool. It is based on the Web API Barcode Detection API.

browser-BarcodeScanner

Barcode Scanner for the Browser

Installation

npm install browser-barcodescanner
yarn add browser-barcodescanner

Usage

import { BrowserBarcodeScanner } from 'browser-barcodescanner'

const scanButton = document.querySelector('#scan')
const fileInput = document.querySelector('#file')

scanButton.addEventListener('click', () => {
  const file = fileInput.files?.[0]
  if (!file) return

  BrowserBarcodeScanner(['ean_13'], file, result => {
    // Do something with result.res (The barcode value)
    // Do Something with result.corner (The corner points of the barcode)
    // Do Something with result.box (The bounding box of the barcode)
  })
})

import { BrowserBarcodeScanner } from 'browser-barcodescanner'

const scanButton = document.querySelector('#scan')
const video = document.querySelector('#video')

scanButton.addEventListener('click', () => {
  navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
    video.srcObject = stream
  })

  BrowserBarcodeScanner(['ean_13'], video, result => {
    // Do something with result.res (The barcode value)
    // Do Something with result.corner (The corner points of the barcode)
    // Do Something with result.box (The bounding box of the barcode)
  })
})

See https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector/detect for more information about the result.

API

BrowserBarcodeScanner

declare global {
  interface Window {
    BarcodeDetector: any
  }
}
export declare function BrowserBarcodeScanner(
  formats: string[],
  object: File | HTMLVideoElement | HTMLImageElement | HTMLCanvasElement | null,
  callback: (result: { res: string }) => void
): Promise<void>

Contributing

Contributing is always welcome!

I cannot maintain this project alone, so please feel free to open issues and pull requests.

Testing

If you are going to contribute, follow these steps

git clone https://github.com/hslee2008/browser-barcodescanner.git
npm install
cd playground
yarn dev

In another terminal

lt --port 5173

Then, open the url in your mobile phone as the api is only supported on mobile devices.