WebCodeCamJS 2.0.5
&
WebCodeCamJQuery 2.0.5
Download from: GitHub Or JSclasses

News in this version 2.0.5 Add parameter tryVertical to options
News in this version 2.0.1 Add successTimeout, codeRepetition parameters to options
News in this version 2.0.0: Add UPC-A, UPC-E support.
News in this version 1.9.0: Decode from url.
News in this version 1.8.0: Decode local image.

New versions of popular WebCodeCam jQuery plugin Available jquery or javascript version.

Compatibility Table

Current state of browser compatibility 2015-10-01

Functions IE11 MS Spartan Chrome 44 Chrome Canary Firefox 39.0.0 Firefox Nightly
Media stream capture & decode No Yes Yes Yes Yes Yes
Build select menu No Partial Yes Yes Partial but selectable
on built in pop up window		 Partial but selectable
on built in pop up window
Decode image(url/local) Yes Yes Yes Yes Yes Yes

WebCodeCamJS.js Demonstration


Scanned result

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(resText, lastImageSrc) { //resText as decoded code, lastImageSrc as image source
            console.log(resText);
        },
        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);
        }
    };

    /*------------------------------------ Declarations and initializing ------------------------------------*/
    new WebCodeCamJS("canvas").init(arg);
    /* OR */
    var canvas = document.querySelector('#webcodecam-canvas');
    new WebCodeCamJS(canvas).init();
    /* OR */
    new WebCodeCamJS('#webcodecam-canvas').init();
    /*--------------------------------------- Example initializations ---------------------------------------*/
    var decoder = new WebCodeCamJS('#webcodecam-canvas');
    /* Chrome & Spartan: build select menu, return decoder object
    *  Firefox: the default camera initializes, return decoder object 
    */
    decoder.buildSelectMenu('#camera-select', index); //index : default camera index optional
    //init with arguments, return decoder object
    decoder.init(args);
    /*OR with defaults*/
    var decoder = new WebCodeCamJS('#webcodecam-canvas').init();
    /*OR with arguments*/
    var decoder = new WebCodeCamJS('#webcodecam-canvas').init(args);
    /*OR with video source selector builder and initialization*/
    var decoder = new WebCodeCamJS('#webcodecam-canvas').buildSelectMenu('select').init(args);

    /*---------------------------- Example initializations using jquery version ----------------------------*/
    var decoder = $("#webcodecam-canvas").WebCodeCamJQuery(args).data().plugin_WebCodeCamJQuery;
    /* Chrome & Spartan: build select menu
    *  Firefox: the default camera initializes, return decoder object 
    */
    decoder.buildSelectMenu('#camera-select', index); //index : default camera index optional
    //simple initialization
    decoder.init();

    /* ---------------------------------------- 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>