Cara membaca QR Code Menggunakan WebCam Dengan Jquery gratis Source Code dan Script - Hallo sahabat Teknologi Terbaru, Pada Artikel yang anda baca kali ini dengan judul Cara membaca QR Code Menggunakan WebCam Dengan Jquery gratis Source Code dan Script, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Script PHP HTML JAVASCRIPT, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Cara membaca QR Code Menggunakan WebCam Dengan Jquery gratis Source Code dan Script
link : Cara membaca QR Code Menggunakan WebCam Dengan Jquery gratis Source Code dan Script
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 :
Demikianlah Artikel Cara membaca QR Code Menggunakan WebCam Dengan Jquery gratis Source Code dan Script
Sekianlah artikel Cara membaca QR Code Menggunakan WebCam Dengan Jquery gratis Source Code dan Script kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
0 Response to "Cara membaca QR Code Menggunakan WebCam Dengan Jquery gratis Source Code dan Script"
Post a Comment