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:

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

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. Cant get this to work out of the box.
    What do i miss?
    Are there any requirements need?

  3. 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

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.