Cara membaca QR Code Menggunakan WebCam Dengan Jquery gratis Source Code dan Script
Artikel yang di kutip oleh Wikipedia QR Code adalah suatu jenis kode matriks atau barcode dua dimensi yang dikembangkan oleh Denso Wave, sebuah divisi Denso Corporation yang merupakan sebuah perusahaan Jepang dan dipublikasikan pada tahun 1994 dengan fungsionalitas utama yaitu dapat dengan mudah dibaca oleh pemindai. QR merupakan singkatan dari quick response atau respons cepat, yang sesuai dengan tujuannya adalah untuk menyampaikan informasi dengan cepat dan mendapatkan respons yang cepat pula.
Berbeda dengan barcode, yang hanya menyimpan informasi secara horizontal, kode QR mampu menyimpan informasi secara horizontal dan vertikal, oleh karena itu secara otomatis Kode QR dapat menampung informasi yang lebih banyak daripada kode batang.
Library WebCodeCamJS
Webcodecam adalah plugin jquery untuk membaca Barcode Dan QR Code yang dibuat oleh seorang developer asal Huangria bernama Toth Andras, library ini memiliki beberapa keunggulan di antaranya :
- Sangat mudah digunakan
- Ada beberapa opsi yang bisa digunakan untuk menampilkan hasil scan
- Impelementasinya gampang
- Compatibel dengan browser modern
Cara Menggunakan Library WebCodeCamJS
cara menggunakan nya cukup gampang, setelah mengdownload library nya maka silahkan extrack kedalam sebuah folder dengan nama latihan lalu buat sebuah file dengan dengan nama index.html lalu ketiklah script berikut :
Copykan Script dibawah ini :
<html>
<head>
<title>Barcode Scanner Dengan WebCam</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.scanner-laser{
position: absolute;
margin: 40px;
height: 30px;
width: 30px;
}
.laser-leftTop{
top: 0;
left: 0;
border-top: solid red 5px;
border-left: solid red 5px;
}
.laser-leftBottom{
bottom: 0;
left: 0;
border-bottom: solid red 5px;
border-left: solid red 5px;
}
.laser-rightTop{
top: 0;
right: 0;
border-top: solid red 5px;
border-right: solid red 5px;
}
.laser-rightBottom{
bottom: 0;
right: 0;
border-bottom: solid red 5px;
border-right: solid red 5px;
}
</style>
</head>
<body>
<div id="QR-Code" class="container" style="width:100%">
<div class="panel panel-primary">
<div class="panel-heading" style="display: inline-block;width: 100%;">
<h4 style="width:50%;float:left;">WebCodeCam.js Demonstration</h4>
<div style="width:50%;float:right;margin-top: 5px;margin-bottom: 5px;text-align: right;">
<select id="cameraId" class="form-control" style="display: inline-block;width: auto;"></select>
<button id="save" data-toggle="tooltip" title="Image shoot" type="button" class="btn btn-info btn-sm disabled"><span class="glyphicon glyphicon-picture"></span></button>
<button id="play" data-toggle="tooltip" title="Play" type="button" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-play"></span></button>
<button id="stop" data-toggle="tooltip" title="Stop" type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-stop"></span></button>
<button id="stopAll" data-toggle="tooltip" title="Stop streams" type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-stop"></span></button>
</div>
</div>
<div class="panel-body">
<div class="col-md-6" style="text-align: center;">
<div class="well" style="position: relative;display: inline-block;">
<canvas id="qr-canvas" width="320" height="240"></canvas>
<div class="scanner-laser laser-rightBottom" style="opacity: 0.5;"></div>
<div class="scanner-laser laser-rightTop" style="opacity: 0.5;"></div>
<div class="scanner-laser laser-leftBottom" style="opacity: 0.5;"></div>
<div class="scanner-laser laser-leftTop" style="opacity: 0.5;"></div>
</div>
<!--
<div class="well" style="position: relative;" >
<label id="zoom-value" width="100">Zoom: 2</label>
<input type="range" id="zoom" value="20" min="10" max="30" onchange="Page.changeZoom();"/>
<label id="brightness-value" width="100">Brightness: 0</label>
<input type="range" id="brightness" value="0" min="0" max="128" onchange="Page.changeBrightness();"/>
<label id="contrast-value" width="100">Contrast: 0</label>
<input type="range" id="contrast" value="0" min="0" max="64" onchange="Page.changeContrast();"/>
<label id="threshold-value" width="100">Threshold: 0</label>
<input type="range" id="threshold" value="0" min="0" max="512" onchange="Page.changeThreshold();"/>
<label id="sharpness-value" width="100">Sharpness: off</label>
<input type="checkbox" id="sharpness" onchange="Page.changeSharpness();"/>
<label id="grayscale-value" width="100">grayscale: off</label>
<input type="checkbox" id="grayscale" onchange="Page.changeGrayscale();"/>
</div>-->
</div>
<div class="col-md-6" style="text-align: center;">
<div id="result" class="thumbnail">
<div class="well" style="position: relative;display: inline-block;">
<img id="scanned-img" src="" width="320" height="240">
</div>
<div class="caption">
<h3>Scanned result</h3>
<p id="scanned-QR"></p>
</div>
</div>
</div>
</div>
<div class="panel-footer">
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/qrcodelib.js"></script>
<script type="text/javascript" src="js/WebCodeCam.js"></script>
<script type="text/javascript" src="js/main.js"></script>
Pengujian Library WebCodeCamJS
pada tahap ini kita akan melakukan pengujian terhadap source code tadi, saya sudah menyediakan sebuah barcode yang dibuat melalui layanan pembuat barcode online gratis, untuk bisa mengaktifkan fitur ini maka silahkan klik button start yang warna hijau lalu scan barcode tadi pada kolom sebelah kiri dan hasilnya akan muncul disebelah kanan seperti gambar dibawah ini.
selain untuk scan data barang sebenarnya sangat banyak ide lain yang bisa kita impelementasikan dengan teknik ini. misalnya login menggunakan QR Code seperti whatapps web dan lain sebagainya.
Anda Juga bisa Lihat Artikel lainnya seperti dibawah ini :
Comments
Post a Comment
-Berkomentarlah yang baik dan rapi.
-Menggunakan link aktif akan dihapus.