A QR code WebApp

A QR code WebApp

BY 12 Dec 2013 Web Application Development

Hello everyone,

I am trying to run the following example of / jsqrcode (https://github.com/LazarSoft/jsqrcode), I created a new web app, imported the necessary JS files mentioned into the project, and modified the index.html file like this:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="description" content="A Tizen Web UI FW single-page template generated by Tizen Web IDE"/>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    
    <link rel="stylesheet" href="tizen-web-ui-fw/latest/themes/tizen-white/tizen-web-ui-fw-theme.css" name="tizen-theme"/>
    <title>Tizen Web IDE - Template - Tizen - Tizen Web UI Framework - Single-Page</title>
    <!--NOTE:
        jquery.js and web-ui-fw.js must be included.
        DO NOT REMOVE below code!
    -->
    <script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
    <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
    <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
        data-framework-theme="tizen-white"></script>

    <script type="text/javascript" src="js/grid.js"></script>
<script type="text/javascript" src="js/version.js"></script>
<script type="text/javascript" src="js/detector.js"></script>
<script type="text/javascript" src="js/formatinf.js"></script>
<script type="text/javascript" src="js/errorlevel.js"></script>
<script type="text/javascript" src="js/bitmat.js"></script>
<script type="text/javascript" src="js/datablock.js"></script>
<script type="text/javascript" src="js/bmparser.js"></script>
<script type="text/javascript" src="js/datamask.js"></script>
<script type="text/javascript" src="js/rsdecoder.js"></script>
<script type="text/javascript" src="js/gf256poly.js"></script>
<script type="text/javascript" src="js/gf256.js"></script>
<script type="text/javascript" src="js/decoder.js"></script>
<script type="text/javascript" src="js/qrcode.js"></script>
<script type="text/javascript" src="js/findpat.js"></script>
<script type="text/javascript" src="js/alignpat.js"></script>
<script type="text/javascript" src="js/databr.js"></script>
    <!--NOTE:
        Additional scripts and css files are to be placed here.
        You can use jQuery namespace($) and all functionalities in jQuery
        in your script.  For example:

            <script src="main.js"></script>
            <link rel="stylesheet" href="my.css">
    -->
    <script type="text/javascript" src="./js/main.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <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)
{
	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()
{
	initCanvas(640,480);
	qrcode.callback = read;
	qrcode.decode("meqrthumb.png");
}

function initCanvas(ww,hh)
	{
		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() {
		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>

Then I tested it with the web simulator, unfortunately, I got the camcanvas.swf window but the web cam didn’t work!

I wander what’s wrong with my code?

 

Thanks in advance.

Written by
Keep Reading All Posts
Announcing the Tizen Studio 6.1 Release

BY

16 Apr 2025

Tizen Studio

Read More
Announcing the Tizen Studio 6.0 Release

BY

04 Nov 2024

Tizen Studio

Read More
Announcing the Tizen Studio 5.6 Release

BY

02 Apr 2024

Tizen Studio

Read More