WebCodeCam: Barcode and qr code scanner jQuery plugin

Recommend this page to a friend!

  Author Author  
Picture of Andras Toth
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


  Detailed description   Download Download .zip .tar.gz   Install with Composer Install with Composer  
This package is a barcode and qr code scanner jQuery plugin.

It takes a given canvas element and makes it show the image of a Webcam.

The plugin can detect and scan the value of a barcode or qr code presented in the front of the 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..

Details

WebCodeCam jQuery-plugin

WebCodeCam is a jQuery plugin for barcode and qr-code reading .

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

This plugin is no longer supported. Please check out the new version : * [WebCodeCamJS]

  • [WebCodeCam] - Online Demo

<img src = "demo.png"/>

This plugin is no longer supported. Please check out the new version : * [WebCodeCamJS]

Version

1.0.0

  • add callback for errors (issues 07)
  • add camreaStopAll function for stop all streams (pull req. Camera stop all #3)
  • refactor variables
  • some invisible modification

2015-05-17

Version

0.1.0

  • add a new option: video source selector

Version

0.0.6

  • add a new option: set the video resource maximum resolution.
  • add new demo with setting.

Version

0.0.1

Included decoders

barcode decoder ([DecoderWorker.js])

qr-decoder ([qrcodelib.js])

Required HTML & Javascript example

<html>
    <head>
        <style type="text/css">
                .scanner-laser{
                        position: absolute;
                        margin: 40px;
                        height: 30px;
                        width: 30px;
                }
                .laser-leftTop{
                        top: 0;
                        left: 0;
                        border-top: solid red 5px;
                        border-left: solid red 5px; 
                }
                .laser-leftBottom{
                        bottom: 0;
                        left: 0;
                        border-bottom: solid red 5px;
                        border-left: solid red 5px; 
                }
                .laser-rightTop{
                        top: 0;
                        right: 0;
                        border-top: solid red 5px;
                        border-right: solid red 5px;    
                }
                .laser-rightBottom{
                        bottom: 0;
                        right: 0;
                        border-bottom: solid red 5px;
                        border-right: solid red 5px;    
                }
        </style>
    </head>
    <body>
        <div style="position: relative;display: inline-block;">
            <canvas id="qr-canvas" width="320" height="240"></canvas>  // id="qr-canvas" is important!     
            <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>
    </body>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/qrcodelib.js"></script>
    <script type="text/javascript" src="js/WebCodeCam.js"></script>
    <script type="text/javascript">
    //  defalut-settings
        $('#qr-canvas').WebCodeCam({
            ReadQRCode: true, // false or true
            ReadBarecode: true, // false or true
            width: 320,
            height: 240,
            videoSource: {  
                    id: true,      //default Videosource
                    maxWidth: 640, //max Videosource resolution width
                    maxHeight: 480 //max Videosource resolution height
            },
            flipVertical: false,  // false or true
            flipHorizontal: false,  // false or true
            zoom: -1, // if zoom = -1, auto zoom for optimal resolution else int
            beep: "js/beep.mp3", // string, audio file location
            autoBrightnessValue: false, // functional when value autoBrightnessValue is int
            brightness: 0, // int 
            grayScale: false, // false or true
            contrast: 0, // int 
            threshold: 0, // int 
            sharpness: [], //or 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
                        example:
                        alert(resText);
                        */ 
            },
            getUserMediaError: function() {
                        /* callback funtion to getUserMediaError
                        example:
                        alert('Sorry, the browser you are using doesn\'t support getUserMedia');
                        */
            },
            cameraError: function(error) {
                        /* callback funtion to cameraError, 
                        example:
                        var p, message = 'Error detected with the following parameters:\n';
                        for (p in error) {
                                message += p + ': ' + error[p] + '\n';
                        }
                        alert(message);
                        */
            }
        });
    </script>
</html>

License

MIT

Author: Tóth András

http://atandrastoth.co.uk/

2014-11-01

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


  Classes of Andras Toth  >  WebCodeCam  >  Download Download .zip .tar.gz  >  Support forum Support forum (5)  >  Blog Blog  >  RSS 1.0 feed RSS 2.0 feed Latest changes  
Name: WebCodeCam
Base name: webcodecam
Description: Barcode and qr code scanner jQuery plugin
Version: 0.0.13
JavaScript version: 1.9
License: MIT/X Consortium License
All time users: 764 users
All time rank: 16
Week users: 1 user
Week rank: 3 Up
 
  Groups   Screenshots Screenshots   Rate classes User ratings   Applications   Files Files  

  Groups  
Group folder image jQuery Components that extend the jQuery framework View top rated classes
Group folder image Graphics Colors, images, charts and picture formats View top rated classes

  Files folder image Screenshots  
Capture.JPG
File Role Description
Accessible without login Image file Capture.JPG Screen lowLightMode
Accessible without login Image file demo Screen demo
Accessible without login Image file demo2 Screen demo2
Accessible without login Image file demo4 Screen demo


  Innovation Award  
JavaScript Programming Innovation award winner
November 2014
Winner


Prize: One downloadable e-book of choice by O'Reilly
Barcode and Qr code are graphic signs that are often used to represent long identification codes and text in a way that can be quickly scanned by reader devices.

This jQuery plugin can scan a barcode or qr code presented in front of a webcam.

The codes are decode and made available to a Web application, so it can be processed according to its needs.

Manuel Lemos

  User ratings  
RatingsUtility Consistency Documentation Examples Tests Videos Overall Rank
All time: Good (83%) Perfect (100%) Good (83%) Perfect (100%) - - Sufficient (69%) 15
Month: Not yet rated by the users

  Applications that use this package  
homepage

Add link image If you know an application of this package, send a message to the author to add a link here.

  Files folder image Files  
File Role Description
Files folder imagejs (5 files)
Accessible without login Plain text file AUTHORS.txt Data Documentation
Accessible without login Image file demo.png Icon Icon image
Accessible without login Plain text file index.html Example Documentation
Accessible without login Plain text file MIT-License.txt Lic. Documentation
Accessible without login Plain text file README.md Doc. Auxiliary data

  Files folder image Files  /  js  
File Role Description
  Accessible without login Plain text file DecoderWorker.js Aux. Application script
  Accessible without login Plain text file main.js Example Example script
  Plain text file qrcodelib.js Class Application script
  Plain text file WebCodeCam.js Class Class source
  Plain text file WebCodeCam.min.js Class Class source

Install with Composer Install with Composer - Download Download all files: webcodecam.tar.gz webcodecam.zip
NOTICE: if you are using a download manager program like 'GetRight', please Login before trying to download this archive.
  Files folder image Files  
File Role Description
Files folder imagejs (5 files)
Accessible without login Plain text file AUTHORS.txt Data Documentation
Accessible without login Image file demo.png Icon Icon image
Accessible without login Plain text file index.html Example Documentation
Accessible without login Plain text file MIT-License.txt Lic. Documentation
Accessible without login Plain text file README.md Doc. Auxiliary data

  Files folder image Files  /  js  
File Role Description
  Accessible without login Plain text file DecoderWorker.js Aux. Application script
  Accessible without login Plain text file main.js Example Example script
  Plain text file qrcodelib.js Class Application script
  Plain text file WebCodeCam.js Class Class source
  Plain text file WebCodeCam.min.js Class Class source

Install with Composer Install with Composer - Download Download all files: webcodecam.tar.gz webcodecam.zip
NOTICE: if you are using a download manager program like 'GetRight', please Login before trying to download this archive.