Mobile QR code reader in JavaScript, HTML5 for Mosync

Mar

zamieścił : Michał Irzykowski | komentarzy na ten temat:

W tym tutorialu pragnę przedstawić Państwu metodę na stworzenie mobilnego czytnika QR kodów do wieloplatformowego użycia dla aplikacji mobilnych.

Opracowany czytnik skierowany jest do użycia w środowisku MoSync. Czytnik działa na zasadzie wykonania zdjęcia, które następnie analizowane jest przez kod JS a następnie zwracany jest wynik w formie alertu. Czytnik z sukcesem przetestowany został na telefonie HTC Desire Z , Android 2.3.

Implementacja czytnika opiera się na pobraniu wszystkich plików JS ze strony https://github.com/LazarSoft/jsqrcode/tree/master/src następnie w kodzie strony index.html (w sekcji head) umieszczamy następujący fragment kodu, który ma za zadanie załadowanie plików JS naszego czytnika do strony.
<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>
Do poprawnego działania czytnika wymagane jest także umieszczenie biblioteki JQuery w sekcji head naszego pliku index.html, którą można pobrać tutaj http://jquery.com/download/
<script type=”text/javascript” charset=”utf-8″ src=”js/jquery.js”></script>
Ostatnim etapem umieszczenia czytnika na stronie jest dodanie to treści pliku index.html kodu JS wywołującego funkcję czytnika a następnie przycisk uruchamiający skanowanie:

<script type=”text/javascript”>

var capture = null;

var image = null;

/**

* Show camera

*/

function scanImage()

{

capture = navigator.device.capture;

capture.captureImage(getImageSuccess, getImageFailure);

}

function getImageFailure(error){

alert(‚Something went wrong…’);

}

function getImageSuccess(img){

image = img;

decodeImage();

}

function alertDecodeResult(result){

alert(result);

}

function decodeImage(){

imagePath = image[0][‚fullPath’]

qrcode.callback = alertDecodeResult;

qrcode.decode(imagePath);

}

</script>

Przycisk:

<button onclick=”scanImage()”>Skanuj</button>