HTML Barcode Scanner

window.addEventListener('load', function() {
    barcode.config.start = 0.1;
    barcode.config.end = 0.9;
    barcode.config.video = '#barcodevideo';
    barcode.config.canvas = '#barcodecanvas';
    barcode.config.canvasg = '#barcodecanvasg';
    barcode.setHandler(function(barcode) {
        document.getElementById('result').innerHTML = barcode;
    });
    barcode.init();
});

An HTML5 barcode scanner which scans EAN-13 barcodes using a webcam.

HTML Barcode Scanner (GitHub) → Original repo was removed. Forked repos can be found below

Did this help you out? Please consider making a donation:

Join the Conversation

8 Comments

  1. Hi Bram,

    thanks for this very useful example. Since I am just getting up to speed with developing using javascript etc., this example helped a lot. I am trying the example on a low cost Android phone with a bad camera. The image is not sharp enough if the distance between the camera and the barcode is small. Question: The getUserMedia does not seem to have the option to enable autofocus, correct? I am experimenting with some sharpening filters etc., but I am not exactly there where I want to be.
    Thanks a lot!
    Achim

  2. Can’t get any code? Did you delete your repository? Really sad, there’s no good working barcode recognition library like ZBar for JavaScript. The only one is github.com/EddieLa/BarcodeReader … but it doesn’t work very well.

    1. Hi Andre,

      The code was created by @dieterprovoost. Looks like he deleted it. Unfortunately I don’t have a fork nor clone.

      Regards,
      Bram.

Leave a comment

Leave a Reply to SunboX Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.