webcodecamjs

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebCodeCamJS</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div class="page-header text-center"> <h1 style="color: cadetblue;">WebCodeCamJS 2.0.5 & WebCodeCamJQuery 2.0.5 Download from: <a href="https://github.com/andrastoth/WebCodeCamJS" target="_blank"> GitHub </a> Or <a href="http://www.jsclasses.org/package/446-JavaScript-Qr-and-barcode-decoder.html" target="_blank"> JSclasses </a> </h1> 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. <ul style="display:inline-block;">Advantages compared to the previous version: <li>Built in camera selector menu creation</li> <li>Faster</li> <li>Lower CPU and Memory usage</li> <li>More configurable</li> </ul> </div> <div class="container text-center"> <h2>Compatibility Table</h2> Current state of browser compatibility 2015-10-01 <table class="table table-bordered"> <thead> <tr> <th>Functions</th> <th><a>IE11</a><img src="css/Internet_Explorer_9.png"></th> <th><a>MS Spartan</a><img src="css/949320192f43b9d8.png"></th> <th><a>Chrome 44</a><img src="css/google-chrome.png"></th> <th><a>Chrome Canary</a><img src="css/Chrome_Canary_Icon.png"></th> <th><a>Firefox 39.0.0</a><img src="css/mozilla_firefox.png"></th> <th><a>Firefox Nightly</a><img src="css/firefox-dev.png"></th> </tr> </thead> <tbody> <tr> <td><a>Media stream capture & decode</a></td> <td class="danger">No</td> <td class="success">Yes</td> <td class="success">Yes</td> <td class="success">Yes</td> <td class="success">Yes</td> <td class="success">Yes</td> </tr> <tr> <td><a>Build select menu</a></td> <td class="danger">No</td> <td class="warning">Partial</td> <td class="success">Yes</td> <td class="success">Yes</td> <td class="warning">Partial but selectable on built in pop up window</td> <td class="warning">Partial but selectable on built in pop up window</td> </tr> <tr> <td><a>Decode image(url/local)</a></td> <td class="success">Yes</td> <td class="success">Yes</td> <td class="success">Yes</td> <td class="success">Yes</td> <td class="success">Yes</td> <td class="success">Yes</td> </tr> </tbody> </table> </div> <div class="container" id="QR-Code"> <div class="panel panel-info"> <div class="panel-heading"> <div class="navbar-form navbar-left"> <h4>WebCodeCamJS.js Demonstration</h4> </div> <div class="navbar-form navbar-right"> <select class="form-control" id="camera-select"></select> <div class="form-group"> <input id="image-url" type="text" class="form-control" placeholder="Image url"> <button title="Decode Image" class="btn btn-default btn-sm" id="decode-img" type="button" data-toggle="tooltip"></button> <button title="Image shoot" class="btn btn-info btn-sm disabled" id="grab-img" type="button" data-toggle="tooltip"></button> <button title="Play" class="btn btn-success btn-sm" id="play" type="button" data-toggle="tooltip"></button> <button title="Pause" class="btn btn-warning btn-sm" id="pause" type="button" data-toggle="tooltip"></button> <button title="Stop streams" class="btn btn-danger btn-sm" id="stop" type="button" data-toggle="tooltip"></button> </div> </div> </div> <div class="panel-body text-center"> <div class="col-md-6"> <div class="well" style="position: relative;display: inline-block;"> <canvas width="320" height="240" id="webcodecam-canvas"></canvas> <div class="scanner-laser laser-rightBottom" style="opacity: 0.5;"></div> <div class="scanner-laser laser-rightTop" style="opacity: 0.5;"></div> <div class="scanner-laser laser-leftBottom" style="opacity: 0.5;"></div> <div class="scanner-laser laser-leftTop" style="opacity: 0.5;"></div> </div> <div class="well" style="width: 100%;"> <label id="zoom-value" width="100">Zoom: 2</label> <input id="zoom" onchange="Page.changeZoom();" type="range" min="10" max="30" value="20"> <label id="brightness-value" width="100">Brightness: 0</label> <input id="brightness" onchange="Page.changeBrightness();" type="range" min="0" max="128" value="0"> <label id="contrast-value" width="100">Contrast: 0</label> <input id="contrast" onchange="Page.changeContrast();" type="range" min="0" max="64" value="0"> <label id="threshold-value" width="100">Threshold: 0</label> <input id="threshold" onchange="Page.changeThreshold();" type="range" min="0" max="512" value="0"> <label id="sharpness-value" width="100">Sharpness: off</label> <input id="sharpness" onchange="Page.changeSharpness();" type="checkbox"> <label id="grayscale-value" width="100">grayscale: off</label> <input id="grayscale" onchange="Page.changeGrayscale();" type="checkbox"> <label id="flipVertical-value" width="100">Flip Vertical: off</label> <input id="flipVertical" onchange="Page.changeVertical();" type="checkbox"> <label id="flipHorizontal-value" width="100">Flip Horizontal: off</label> <input id="flipHorizontal" onchange="Page.changeHorizontal();" type="checkbox"> </div> </div> <div class="col-md-6"> <div class="thumbnail" id="result"> <div class="well"> <img width="320" height="240" id="scanned-img" src=""> </div> <div class="caption"> <h3>Scanned result</h3> </div> </div> </div> </div> <div class="panel-footer"> <h3>Required HTML & Javascript example</h3> <div style="background: #272822; overflow:auto;width:auto;padding:0;height:400px;"><pre style="margin: 0; line-height: 125%"><!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>  <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> </pre></div> </div> </div> </div> <script type="text/javascript" src="js/filereader.js"></script>   <script type="text/javascript" src="js/qrcodelib.js"></script> <script type="text/javascript" src="js/webcodecamjs.js"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html>