Languages

Menu
Sites
Language
A QR code WebApp

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.

List

Responses

2 Replies
Lakshmi Grandhi

Hi,

There is sample article regarding scanner, please go thorugh it might helpful

https://developer.tizen.org/documentation/articles/barcode-generator-and-scanner

But the article uses QR Image for scanning.

Alexander AVSukhov

Hello,

Try to use Tizen Emulator.

Using webcam in Emulator: https://developer.tizen.org/dev-guide/2.2.1/org.tizen.gettingstarted/html/dev_env/emulator_webcam.htm