WebCodeCamJS : Scan barcodes and qrcodes with a Webcam

Recommend this page to a friend!
  Info   View files Documentation   Demos   View files View files (33)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 1,036 This week: 2All time: 7 This week: 2Up
Version License JavaScript version Categories
webcodecamjs 1.7.6MIT/X Consortium ...3.0jQuery, Graphics, Video
Description Author

This package can scan barcodes and qrcodes with a Webcam.

This is an non-backwards compatible enhancement of another package for the same purpose that can decode an image of barcode or qrcode scanned using a Webcam. This version provides:

- Built in camera selector menu creation
- Faster operation
- Lower CPU and Memory usage
- More configurable options

Recommendations

Latest WebcodeCam JS
Accuracy lagging in webcodecam js 1.0.0

Picture of Andras Toth
  Performance   Level  
Name: Andras Toth <contact>
Classes: 22 packages by
Country: Hungary Hungary
Age: 49
All time rank: 31 in Hungary Hungary
Week rank: 1 Up
Innovation award
Innovation award
Nominee: 15x

Winner: 9x

Details

WebCodeCamJS & WebCodeCamJQuery

New versions of popular WebCodeCam jQuery plugin<br>

- Very simple usage
- Some option for optimal result
- Quick implementation
- Optimized for all modern browsers

Advantages compared to the previous version:<br>

- Built in camera selector menu creation
- Faster
- Lower CPU and Memory usage
- More configurable

  • [Homepage] - Home page, demonstration

<img src = "compatibility.jpg" width="100%"/> <img src = "demo.jpg" width="100%"/>

Version

2.7.0

- Extend Browser compatibility

Version

2.1.0

- Extend BuildSelectMenu function

Version

2.0.5

- Add parameter tryVertical to options
- Some minor modification

Version

2.0.1

- Add parameter successTimeout to options
- Add parameter codeRepetition to options

Version

2.0.0

- Add UPC-A, UPC-E support, result function return value changed!

Version

1.9.1

- Add default cameraindex parameter to buildSelectMenu, optional

Version

1.9.0

- Add function: decode image from url

Version

1.8.0

- Add function: decode local image

Version

1.7.0

- Add jquery version (WebCodeCamJQuery)

Version

1.5.0

- Optimized for all modern browsers
- Refactor functions

Version

1.0.0

- Very simple usage
- Some option for optimal result
- Quick implementation

Included decoders

barcode decoder ([DecoderWorker.js])

qr-decoder ([qrcodelib.js])

Required HTML & Javascript example

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
    </head>
    <body>
        <h3>Simple initialization with default settings</h3>
        <hr>
        <canvas></canvas>
        <hr>
        <ul></ul>
        <script type="text/javascript" src="js/qrcodelib.js"></script>
        <script type="text/javascript" src="js/webcodecamjs.js"></script>
        <!-- 
            Using jquery version:
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/qrcodelib.js"></script>
            <script type="text/javascript" src="js/webcodecamjquery.js"></script>
        -->
        <script type="text/javascript">
            var txt = "innerText" in HTMLElement.prototype ? "innerText" : "textContent";
            var arg = {
                resultFunction: function(result) {
                    /*
                        result.format: code format,
                        result.code: decoded string,
                        result.imgData: decoded image data
                    */
                    var aChild = document.createElement('li');
                    aChild[txt] = result.format + ': ' + result.code;
                    document.querySelector('body').appendChild(aChild);
                }
            };
    /-------------------------------------- Available parameters --------------------------------------/
    var options = {
        DecodeQRCodeRate: 5,                    // null to disable OR int > 0 !
        DecodeBarCodeRate: 5,                   // null to disable OR int > 0 !
        successTimeout: 500,                    // delay time when decoding is succeed
        codeRepetition: true,                   // accept code repetition true or false
        tryVertical: true,                      // try decoding vertically positioned barcode true or false
        frameRate: 15,                          // 1 - 25
        width: 320,                             // canvas width
        height: 240,                            // canvas height
        constraints: {                          // default constraints
            video: {
                mandatory: {
                    maxWidth: 1280,
                    maxHeight: 720
                },
                optional: [{
                    sourceId: true
                }]
            },
            audio: false
        },
        flipVertical: false,                    // boolean
        flipHorizontal: false,                  // boolean
        zoom: -1,                               // if zoom = -1, auto zoom for optimal resolution else int
        beep: 'audio/beep.mp3',                 // string, audio file location
        decoderWorker: 'js/DecoderWorker.js',   // string, DecoderWorker file location
        brightness: 0,                          // int
        autoBrightnessValue: false,             // functional when value autoBrightnessValue is int
        grayScale: false,                       // boolean
        contrast: 0,                            // int
        threshold: 0,                           // int 
        sharpness: [],      // to On declare matrix, example for sharpness ->  [0, -1, 0, -1, 5, -1, 0, -1, 0]
        resultFunction: function(result) {
            /*
                result.format: code format,
                result.code: decoded string,
                result.imgData: decoded image data
            */
            alert(result.code);
        },
        cameraSuccess: function(stream) {           //callback funtion to camera success
            console.log('cameraSuccess');
        },
        canPlayFunction: function() {               //callback funtion to can play
            console.log('canPlayFunction');
        },
        getDevicesError: function(error) {          //callback funtion to get Devices error
            console.log(error);
        },
        getUserMediaError: function(error) {        //callback funtion to get usermedia error
            console.log(error);
        },
        cameraError: function(error) {              //callback funtion to camera error  
            console.log(error);
        }
    };

    /---------------------------- Example initializations Javascript version ----------------------------/
    new WebCodeCamJS("canvas").init(arg);
    /OR/
    var canvas = document.querySelector('#webcodecam-canvas');
    new WebCodeCamJS(canvas).init();
    /OR/
    new WebCodeCamJS('#webcodecam-canvas').init();

    /------------------------ Example initializations jquery & Javascript version ------------------------/
    var decoder = new WebCodeCamJS('#webcodecam-canvas');

    var decoder = $("#webcodecam-canvas").WebCodeCamJQuery(args).data().plugin_WebCodeCamJQuery;

    decoder.buildSelectMenu('#camera-select', sel); //sel : default camera optional
    /* Chrome & MS Edge: build select menu
    *  Firefox: the default camera initializes, return decoder object 
    */
    //simple initialization
    decoder.init();
    /Select environment camera if available/
    decoder.buildSelectMenu('#camera-select', 'environment|back').init(args);
    /Select user camera if available/
    decoder.buildSelectMenu('#camera-select', 'user|front').init(args);
    /Select camera by name/
    decoder.buildSelectMenu('#camera-select', 'facecam').init(args);
    /Select first camera/
    decoder.buildSelectMenu('#camera-select', 0).init(args);
    /Select environment camera if available, without visible select menu/
    decoder.buildSelectMenu(document.createElement('select'), 'environment|back').init().play();   

    /--------------------------------------- Available Functions: ----------------------------------------/
    /camera stop & delete stream/
    decoder.stop();
    /camera play, restore process/
    decoder.play();
    /get current image from camera/
    decoder.getLastImageSrc();
    /decode local image/
    /if url is defined download image before staring open process/
    decoder.decodeLocalImage(url);
    /get optimal zoom/
    decoder.getOptimalZoom();
    /Configurable options/
    decoder.options['parameter'];
    /* Example: 
     decoder.options.brightness = 20;         - set brightness to 20
     decoder.options.DecodeQRCodeRate = null; - disable qrcode decoder
    */
        </script>
    </body>
</html>

License

MIT

Author: Tóth András

http://atandrastoth.co.uk/

2015-06-10

[Homepage]:http://atandrastoth.co.uk/main/pages/plugins/webcodecamjs/ [WebCodeCamJS]:https://andrastoth.github.io/webcodecamjs/ [DecoderWorker.js]:https://github.com/EddieLa/BarcodeReader [qrcodelib.js]:https://github.com/LazarSoft/jsqrcode

  github-demoExternal page   webcodecamjsExternal page  

Open in a separate window

  Files folder image Files  
File Role Description
Files folder imagecss (11 files)
Files folder imagefonts (1 file)
Files folder imagejs (8 files)
Accessible without login Plain text file AUTHORS.txt Doc. Documentation
Accessible without login Image file barcode.png Icon v1.8.0
Accessible without login Image file compatibility.jpg Data Auxiliary data
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Image file demo.jpg Data Auxiliary data
Accessible without login HTML file index.html Doc. Documentation
Accessible without login Plain text file MIT-License.txt Doc. Documentation
Accessible without login Plain text file README.md Data Auxiliary data
Accessible without login HTML file simple.html Doc. Documentation
Accessible without login HTML file simple_buildselect.html Doc. Documentation
Accessible without login HTML file simple_buildselect_jquery.html Doc. Documentation
Accessible without login HTML file simple_jquery.html Doc. Documentation
Accessible without login HTML file simple_localimage.html Doc. v1.8.0

  Files folder image Files  /  css  
File Role Description
  Accessible without login Image file 949320192f43b9d8.png Icon Icon image
  Accessible without login Plain text file bootstrap.css.map Data Auxiliary data
  Accessible without login Plain text file bootstrap.min.css Data Auxiliary data
  Accessible without login Image file Chrome_Canary_Icon.png Icon Icon image
  Accessible without login Image file firefox-dev.png Icon Icon image
  Accessible without login Image file google-chrome.png Icon Icon image
  Accessible without login Image file Internet_Explorer_9.png Icon Icon image
  Accessible without login Image file mozilla_firefox.png Icon Icon image
  Accessible without login Image file opera.png Icon Icon image
  Accessible without login Image file safari-icon.png Icon Icon image
  Accessible without login Plain text file style.css Data Auxiliary data

  Files folder image Files  /  fonts  
File Role Description
  Accessible without login Plain text file glyphicons-halflings-regular.svg Data Auxiliary data

  Files folder image Files  /  js  
File Role Description
  Plain text file DecoderWorker.js Class Class source
  Plain text file filereader.js Class v1.8.0
  Plain text file jquery.js Class Class source
  Plain text file main.js Class Class source
  Plain text file mainjquery.js Class Class source
  Plain text file qrcodelib.js Class Class source
  Plain text file webcodecamjquery.js Class Class source
  Plain text file webcodecamjs.js Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:1,036
This week:2
All time:7
This week:2Up