Read qrcode from a web page using web cam

Question

I'm trying to implement a QR Code reader using user web cam, I trying out the "jsqrcode" lib.

I tried the online link it's working but when i tried the example in the git code base it's not capturing any QR ode. just showing the camera preview.

I created a "camcanvas.swf" because it's not in the git code base.

Can some one help me to figure it out why it's not capturing any QR code. Or any other JS lib i can use, I can't use the HTML 5 for this because i need to support for old browsers.

<!DOCTYPE html>
<html>
<head>
<title>QRCODE</title>

<style type="text/css">
</style>


<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">
    var gCtx = null;
    var gCanvas = null;

    var imageData = null;
    var ii=0;
    var jj=0;
    var c=0;


function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}

function handleFiles(f)
{
    console.log('handleFiles');
    var o=[];
    for(var i =0;i<f.length;i++)
    {
      var reader = new FileReader();

      reader.onload = (function(theFile) {
        return function(e) {
          qrcode.decode(e.target.result);
        };
      })(f[i]);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f[i]);   }
}

function read(a)
{
    alert(a);
}   

function load()
{
    console.log('load');
    initCanvas(640,480);
    qrcode.callback = read;
    qrcode.decode("meqrthumb.png");
}

function initCanvas(ww,hh)
    {
    console.log('initCanvas');
        gCanvas = document.getElementById("qr-canvas");
        gCanvas.addEventListener("dragenter", dragenter, false);  
        gCanvas.addEventListener("dragover", dragover, false);  
        gCanvas.addEventListener("drop", drop, false);
        var w = ww;
        var h = hh;
        gCanvas.style.width = w + "px";
        gCanvas.style.height = h + "px";
        gCanvas.width = w;
        gCanvas.height = h;
        gCtx = gCanvas.getContext("2d");
        gCtx.clearRect(0, 0, w, h);
        imageData = gCtx.getImageData( 0,0,320,240);
    }

    function passLine(stringPixels) { 
        //a = (intVal >> 24) & 0xff;

        var coll = stringPixels.split("-");

        for(var i=0;i<320;i++) { 
            var intVal = parseInt(coll[i]);
            r = (intVal >> 16) & 0xff;
            g = (intVal >> 8) & 0xff;
            b = (intVal ) & 0xff;
            imageData.data[c+0]=r;
            imageData.data[c+1]=g;
            imageData.data[c+2]=b;
            imageData.data[c+3]=255;
            c+=4;
        } 

        if(c>=320*240*4) { 
            c=0;
                gCtx.putImageData(imageData, 0,0);
        } 
    } 

    function captureToCanvas() {
        console.log('captureToCanvas');
        flash = document.getElementById("embedflash");
        flash.ccCapture();
        qrcode.decode();
     }
</script>

</head>

<body onload="load()">
    <div class="container">

    <object  id="iembedflash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="320" height="240">
        <param name="movie" value="camcanvas.swf" />
        <param name="quality" value="high" />
        <param name="allowScriptAccess" value="always" />
        <embed  allowScriptAccess="always"  id="embedflash" src="camcanvas.swf" quality="high" width="320" height="240" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" mayscript="true"  />
    </object>


    </div>
<button onclick="captureToCanvas()">Capture</button><br>
<canvas id="qr-canvas" width="640" height="480"></canvas>
</body>

</html>

!Error Getting on the browser]1

I believe you cannot just create a `camcanvas.swf` by yourself and use it. Try this - https://github.com/MitosEHR/MitosEHR-Official/blob/master/lib/jsqrcode/src/camcanvas.swf — Praveen Puglia, Apr 24 '14 at 06:09
@pjp thanks for helping me i tried replacing my swf file with the above one but camera preview even load then i replace the whole jsqrcode base with "/MitosEHR-Official/blob/master/lib/jsqrcode/" now im getting the "TypeError: flash.ccCapture is not a function flash.ccCapture();" and camera preview is even not loading — Sam, Apr 24 '14 at 07:12
jsqrcode uses this http://www.taboca.com/p/camcanvas/ I am not sure as to what's going wrong. But give this a try. Also this might help - http://stackoverflow.com/questions/17652017/read-qrcode-from-a-web-page-with-camera — Praveen Puglia, Apr 24 '14 at 07:24
and looks like they have moved from `flash` to `video` element of HTML5 — Praveen Puglia, Apr 24 '14 at 07:26

Read qrcode from a web page using web cam

0 Answers0