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 Bayak pengaturan untuk menampilkan hasil scan
- Penggunaannya yang mudah
- Suport dengan banyak browser
Alat alat yang diperlukan
- Download Library WebcodeCamJs
- Editor Untuk Menulis syntak, contoh : notepad atau Visual Studio Code
Implementasi Penggunaannya
- Buat Folder project baru misal latihan
- Buat folder assets didalam folder latihan, masukan library webcodecamjs yang sudah sobat download,reneme menjadi webcodecamjs
- buat file index.html didalam folder latihan
- Jalankan dibrowser, url: https://localhost/latihan
- persiapkan contoh qrcodenya untuk keperluan testing
Code file index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebCodeCamJS</title>
<link href="assets/webcodecamjs/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/webcodecamjs/css/style.css" rel="stylesheet">
</head>
<body>
<div class="container" id="QR-Code">
<div class="panel panel-info">
<div class="panel-heading">
<div class="navbar-form navbar-left">
<h4>WebCodeCamJS.js Demonstration</h4>
</div>
<div class="navbar-form navbar-right">
<select class="form-control" id="camera-select"></select>
<div class="form-group">
<input id="image-url" type="text" class="form-control" placeholder="Image url">
<button title="Decode Image" class="btn btn-default btn-sm" id="decode-img" type="button" data-toggle="tooltip"><span class="glyphicon glyphicon-upload"></span></button>
<button title="Image shoot" class="btn btn-info btn-sm disabled" id="grab-img" type="button" data-toggle="tooltip"><span class="glyphicon glyphicon-picture"></span></button>
<button title="Play" class="btn btn-success btn-sm" id="play" type="button" data-toggle="tooltip"><span class="glyphicon glyphicon-play"></span></button>
<button title="Pause" class="btn btn-warning btn-sm" id="pause" type="button" data-toggle="tooltip"><span class="glyphicon glyphicon-pause"></span></button>
<button title="Stop streams" class="btn btn-danger btn-sm" id="stop" type="button" data-toggle="tooltip"><span class="glyphicon glyphicon-stop"></span></button>
</div>
</div>
</div>
<div class="panel-body text-center">
<div class="col-md-6">
<div class="well" style="position: relative;display: inline-block;">
<canvas width="320" height="240" id="webcodecam-canvas"></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>
<div class="col-md-6">
<div class="thumbnail" id="result">
<div class="well" style="overflow: hidden;">
<img width="320" height="240" id="scanned-img" src="">
</div>
<div class="caption">
<h3>Scanned result</h3>
<p id="scanned-QR"></p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="assets/webcodecamjs/js/filereader.js"></script>
<script type="text/javascript" src="assets/webcodecamjs/js/qrcodelib.js"></script>
<script type="text/javascript" src="assets/webcodecamjs/js/webcodecamjs.js"></script>
<script type="text/javascript" src="assets/webcodecamjs/js/main.js"></script>
</body>
</html>
Hasil Dari Code Diatas
Untuk menjalankan scan klik tombol play di pojok kiri atas
Semoga Bermanfaat
kalau hasilnya bisa masuk ke input type text gimana ya
BalasHapus