roy mathew
roy mathew

Reputation: 7800

Issue with QR code reader using HTML 5

I am trying to develop an online QR code scanner just like this:

http://webqr.com/

What I am trying to do is that, I want to activate the camera from the web page and must be able to scan the QR code from there. (Same thing which happens when we click on the camera image on the above mentioned site).

They have provided the code for the above site:

https://github.com/LazarSoft/jsqrcode

But when I tried to run the "test.html" file from the downloaded files, I am not able to view the output from camera. All I can see is a button named "capture" on that web page. I pressed on this button and nothing is happening. I do not have much experience with java script and HTML 5. If possible please help me to modify the downloaded codes and help me to get the result I need.

Upvotes: 1

Views: 6414

Answers (1)

Dan Fox
Dan Fox

Reputation: 1723

The README says "For webcam qrcode decoding (included in the test.html) you will need the camcanvas.swf from http://www.taboca.com/p/camcanvas/", so their test.html file won't work with your webcam out of the box.

However, as a halfway step, you can decode pictures of QR files really easily:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>QR Decoder Demo</title>
<!-- Include scripts as instructed in README -->
<script type="text/javascript" src="grid.js"></script>
<script type="text/javascript" src="version.js"></script>
<script type="text/javascript" src="detector.js"></script>
<script type="text/javascript" src="formatinf.js"></script>
<script type="text/javascript" src="errorlevel.js"></script>
<script type="text/javascript" src="bitmat.js"></script>
<script type="text/javascript" src="datablock.js"></script>
<script type="text/javascript" src="bmparser.js"></script>
<script type="text/javascript" src="datamask.js"></script>
<script type="text/javascript" src="rsdecoder.js"></script>
<script type="text/javascript" src="gf256poly.js"></script>
<script type="text/javascript" src="gf256.js"></script>
<script type="text/javascript" src="decoder.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<script type="text/javascript" src="findpat.js"></script>
<script type="text/javascript" src="alignpat.js"></script>
<script type="text/javascript" src="databr.js"></script>

<script type="text/javascript">
/*<![CDATA[*/

// tell application what to do when a QR code is decoded 
qrcode.callback = function(data){
  alert("Decoded URL: "+data);
}

// decode a QR code for http://bbc.co.uk/programmes
qrcode.decode("http://2d-code.co.uk/images/bbc-logo-in-qr-code.gif");

/*]]>*/
</script>

</head>
<body></body>
</html>

BBC QR code

Upvotes: 2

Related Questions