I am looking at trying to scan barcodes from a mobile device.

I been doing some research and I having hard time finding JavaScript libraries that can do this.

I see these projects

zxing

This seems to be no longer in development and just bugs fixes are done?

QuaggaJS

This one, I am not sure if it is development either anymore as changelog is from 2017

quagga2

This seems to be a fork of the one above? So this might be the better choice to go with vs the 2?

What I am trying to achieve is this. I want to go on an andriod device (think phone, maybe tablet), load up chrome or firefox, go to my site click a button and load up the devices camera and scan a bar code (mostly EAN-8/13).

I want to do the same thing on apple devices (iphone and ipad), load up safari (not sure if they got chrome and Firefox on these devices. I don't own apple), click a button and load up their devices cameras and scan a bar code.

I think this is possible in all the libraries I listed above, but I am still unclear if this is possible on apple devices? I read somewhere that before ios 14 it would not be possible?

I am open to other libaries, I can use Jquery, vanilla javascript and I think angular (but I think it is version 3).

I am looking at trying to scan barcodes from a mobile device.

I been doing some research and I having hard time finding JavaScript libraries that can do this.

I see these projects

zxing

This seems to be no longer in development and just bugs fixes are done?

QuaggaJS

This one, I am not sure if it is development either anymore as changelog is from 2017

quagga2

This seems to be a fork of the one above? So this might be the better choice to go with vs the 2?

What I am trying to achieve is this. I want to go on an andriod device (think phone, maybe tablet), load up chrome or firefox, go to my site click a button and load up the devices camera and scan a bar code (mostly EAN-8/13).

I want to do the same thing on apple devices (iphone and ipad), load up safari (not sure if they got chrome and Firefox on these devices. I don't own apple), click a button and load up their devices cameras and scan a bar code.

I think this is possible in all the libraries I listed above, but I am still unclear if this is possible on apple devices? I read somewhere that before ios 14 it would not be possible?

I am open to other libaries, I can use Jquery, vanilla javascript and I think angular (but I think it is version 3).

• javascript
• android
• ios
• barcode-scanner

• 2 FYI github.com/mebjas/html5-qrcode (based on zxing-js) – m7913d Commented Apr 11, 2023 at 14:04

3 Answers 3

There's an experimental barcode scanner API now, that doesn't require any external library: https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API

Chrome Web View on Android supports it, and iOS should be able to use a WebAssembly polyfill.

Example using the rear camera:

<!-- WebAssembly polyfill for some browsers -->
<script src="https://cdn.jsdelivr.net/npm/@undecaf/[email protected]/dist/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@undecaf/[email protected]/dist/index.js"></script>

<!-- Show the camera feed to help the user capture the barcode -->
<video autoplay></video>

<!-- Let's simply display the barcode data and have "Waiting..." as placeholder. -->
<p id="barcode">Waiting...</p>

//WebAssembly polyfill for some browsers
try { window['BarcodeDetector'].getSupportedFormats() }
catch { window['BarcodeDetector'] = barcodeDetectorPolyfill.BarcodeDetectorPolyfill }

// Define video as the video element. You can pass the element to the barcode detector.
const video = document.querySelector('video');

// Get a stream for the rear camera, else the front (or side?) camera.
video.srcObject = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });

// Create a BarcodeDetector for simple retail operations.
const barcodeDetector = new BarcodeDetector({ formats: "ean_13", "ean_8", "upc_a", "upc_e"] });

// Let's scan barcodes forever
while(true) {
    try {
        // Try to detect barcodes in the current video frame.
        let barcodes = await barcodeDetector.detect(video);

        // Continue loop if no barcode was found.
        if (barcodes.length == 0)
        {
            // Scan interval 50 ms like in other barcode scanner demos.
            // The higher the interval the longer the battery lasts.
            await new Promise(r => setTimeout(r, 50));
            continue;
        }

        // We expect a single barcode.
        // It's possible to compare X/Y coordinates to get the center-most one.
        // One can also do "preferred symbology" logic here.
        document.getElementById("barcode").innerText = barcodes[0].rawValue;

        // Notify user that a barcode has been found.
        navigator.vibrate(200);

        // Give the user time to find another product to scan
        await new Promise(r => setTimeout(r, 1000));
    }
    catch {
        //Wait till video is ready
        //barcodeDetector.detect(video) might fail the first time
        await new Promise(r => setTimeout(r, 200));
    }
}

To expand on David's answer, I would like to add STRICH to the list of candidates. It is a JavaScript library that scan the same types of barcodes that Quagga can, but it also supports 2D matrix codes, so it's comparable to zxing-js. In addition to Quagga and zxing-js it also brings its own scanning UI for things like camera selection, turning flashlight on/off, etc. JavaScript is obviously required, also WebGL and WebAssembly which are widely supported today. It has zero dependencies so it's really easy to integrate, there's sample code for plain JS as well as popular web frameworks like React, Angular and Vue.

To better understand how it compares to QuaggaJS and zxing-js I've created a detailed comparison, focused on scanning performance.

Disclaimer: I am the author of STRICH.

Just been doing this same research myself. All of those open-source ones you listed seem to be either dead or have performance/reliability issues. Looks like only the commercial versions are viable at the moment:

• Dynamsoft - https://www.dynamsoft.com/store/dynamsoft-barcode-reader/
• Scanbot - https://scanbot.io/barcode-scanner-sdk/web-barcode-scanner/

Two different mobile apps are viable. These are web apps that just display a browser view and make a barcode scanning function from the app itself available on the page:

• https://berrywing.com/scan-to-web-app/
• https://www.mochasoft.dk/iphone_barcode2.htm

The second one has a more capable JS API of the two.

UPDATE: I went with that last option from Mochasoft. Turned out quite well.