WebCodeCam: Barcode and qr code scanner jQuery plugin

Recommend this page to a friend!
     
  Info   Demos   Screenshots   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStarStar 69%Total: 764 This week: 1All time: 16 This week: 3Up
Version License JavaScript version Categories
webcodecam 0.0.13MIT/X Consortium ...1.9jQuery, Graphics
Description 

Author

Andras Toth

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..

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
Picture of Andras Toth
  Performance   Level  
Name: Andras Toth <contact>
Classes: 22 packages by
Country: Hungary Hungary
Age: 51
All time rank: 31 in Hungary Hungary
Week rank: 1 Up

Level 4 StarStarStarStar

 Innovation award
Innovation award
Nominee: 15x

Winner: 9x

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


  demoExternal page  
Screenshots (4)  
  • Capture.JPG
  • demo
  • demo2
  • demo4
  Files folder image Files (14)  
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 (14)  /  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

Downloadwebcodecam-2021-11-28.zip 323KB
Downloadwebcodecam-2021-11-28.tar.gz 324KB
 Version Control Unique User Downloads Download Rankings  
 71%
Total:764
This week:1
All time:16
This week:3Up
 User Ratings  
 
 All time
Utility:83%StarStarStarStarStar
Consistency:100%StarStarStarStarStarStar
Documentation:83%StarStarStarStarStar
Examples:100%StarStarStarStarStarStar
Tests:-
Videos:-
Overall:69%StarStarStarStar
Rank:15
  

  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.