Read BarCode or QR Code using jQuery WebCodeCam Plugin

by Posted on

Today I am going to introduce jquery plugin to scan BarCode or QR Code . You can scan QR code or Bar Code through webcam. A callback function is invoked when the image is Barcode or QR code is decoded. The plugin can also control the captured zoom level, image brightness, contrast, sharpness, threshold, etc.




Integrate BarCode or QR Code Reader

Libraries

Include required libraries on page, Include qrcode lib to decode qr code pattern.

<script type="text/javascript" src="js/qrcodelib.js"></script>
<script type="text/javascript" src="js/webcodecamjs.js"></script>

HTML

Add simple canvas tag where qr code or bar code reader will work.

<canvas></canvas>



JS

Now finally add javascript on page to make qr code or bar code reader actionable.

<script type="text/javascript">
            var txt = "innerText" in HTMLElement.prototype ? "innerText" : "textContent";
            var arg = {
                resultFunction: function(result) {
                    
                    var aChild = document.createElement('li');
                    aChild[txt] = result.format + ': ' + result.code;
                    document.querySelector('body').appendChild(aChild);
                }
            };
    
    var options = {
        DecodeQRCodeRate: 5,                    // null to disable OR int > 0 !
        DecodeBarCodeRate: 5,                   // null to disable OR int > 0 !
        successTimeout: 500,                    
        codeRepetition: true,                   
        tryVertical: true,                      
        frameRate: 15,                          
        width: 320,                             
        height: 240,                            
        constraints: {                          
            video: {
                mandatory: {
                    maxWidth: 1280,
                    maxHeight: 720
                },
                optional: [{
                    sourceId: true
                }]
            },
            audio: false
        },
        flipVertical: false,                    
        flipHorizontal: false,                  
        zoom: -1,                               
        beep: 'audio/beep.mp3',                 
        decoderWorker: 'js/DecoderWorker.js',   
        brightness: 0,                          
        autoBrightnessValue: false,             
        grayScale: false,                       
        contrast: 0,                            
        threshold: 0,                           
        sharpness: [],      // to On declare matrix, example for sharpness ->  [0, -1, 0, -1, 5, -1, 0, -1, 0]
        resultFunction: function(result) {
            
            alert(result.code);
        },
        cameraSuccess: function(stream) {           
            console.log('cameraSuccess');
        },
        canPlayFunction: function() {               
            console.log('canPlayFunction');
        },
        getDevicesError: function(error) {          
            console.log(error);
        },
        getUserMediaError: function(error) {        
            console.log(error);
        },
        cameraError: function(error) {              
            console.log(error);
        }
    };
 
    
    new WebCodeCamJS("canvas").init(arg);
    
    var canvas = document.querySelector('#webcodecam-canvas');
    new WebCodeCamJS(canvas).init();
    
    new WebCodeCamJS('#webcodecam-canvas').init();
 
    
    var decoder = new WebCodeCamJS('#webcodecam-canvas');
 
    var decoder = $("#webcodecam-canvas").WebCodeCamJQuery(args).data().plugin_WebCodeCamJQuery;
 
    decoder.buildSelectMenu('#camera-select', sel); 
    
    
    decoder.init();
    
    decoder.buildSelectMenu('#camera-select', 'environment|back').init(args);
    
    decoder.buildSelectMenu('#camera-select', 'user|front').init(args);
    
    decoder.buildSelectMenu('#camera-select', 'facecam').init(args);
    
    decoder.buildSelectMenu('#camera-select', 0).init(args);
    
    decoder.buildSelectMenu(document.createElement('select'), 'environment|back').init().play();   
 
    
    
    decoder.stop();
    
    decoder.play();
    
    decoder.getLastImageSrc();
    
    
    decoder.decodeLocalImage(url);
    
    decoder.getOptimalZoom();
    
    decoder.options['parameter'];
    
        </script>
    </body>

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates.



Published by admin