Recommend this page to a friend! |
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]
<img src = "demo.png"/>
This plugin is no longer supported. Please check out the new version : * [WebCodeCamJS]
1.0.0
2015-05-17
0.1.0
0.0.6
0.0.1
barcode decoder ([DecoderWorker.js])
qr-decoder ([qrcodelib.js])
<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>
MIT
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 | > | ![]() |
> | ![]() |
> | ![]() |
> | ![]() ![]() |
|
|
Groups | ![]() |
![]() |
Applications | ![]() |
Groups |
![]() |
Components that extend the jQuery framework | View top rated classes |
![]() |
Colors, images, charts and picture formats | View top rated classes |
![]() |
|
Innovation Award |
![]() 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 |
Ratings | Utility | Consistency | Documentation | Examples | Tests | Videos | Overall | Rank |
---|---|---|---|---|---|---|---|---|
All time: | Good (83%) | Perfect (100%) | Good (83%) | Perfect (100%) | - | - | Sufficient (69%) | 14 |
Month: | Not yet rated by the users |
Applications that use this package |
homepage homepage |
If you know an application of this package, send a message to the author to add a link here.
![]() |
File | Role | Description | ||
---|---|---|---|---|
![]() |
||||
![]() ![]() |
Data | Documentation | ||
![]() ![]() |
Icon | Icon image | ||
![]() ![]() |
Example | Documentation | ||
![]() ![]() |
Lic. | Documentation | ||
![]() ![]() |
Doc. | Auxiliary data |
![]() |
/ | js |
File | Role | Description |
---|---|---|
![]() ![]() |
Aux. | Application script |
![]() ![]() |
Example | Example script |
![]() |
Class | Application script |
![]() |
Class | Class source |
![]() |
Class | Class source |
![]() ![]() NOTICE: if you are using a download manager program like 'GetRight', please Login before trying to download this archive.
|