Beberapa waktu lalu kami mengulas bagaimana membuat QRCode dengan PHP. Sekarang kita mencoba untuk membaca kode tersebut, tetapi dengan javascript. Ada sebuah library javascript yang dengan memanfaatkan jQuery dapat kita pakai untuk membaca QRCode dan Barcode. Library tersebut adalah Webcodecamjs. Dari namanya, ada tulisan cam berarti memang library ini bisa menangkap gambar dari camera pengguna yaitu webcam.
Mari langsung saja kita praktikkan ya...
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>WebCodeCamJS</title> | |
| <link href="webcodecamjs-master/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="webcodecamjs-master/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 class="well" style="width: 100%;"> | |
| <label id="zoom-value" width="100">Zoom: 2</label> | |
| <input id="zoom" onchange="Page.changeZoom();" type="range" min="10" max="30" value="20"> | |
| <label id="brightness-value" width="100">Brightness: 0</label> | |
| <input id="brightness" onchange="Page.changeBrightness();" type="range" min="0" max="128" value="0"> | |
| <label id="contrast-value" width="100">Contrast: 0</label> | |
| <input id="contrast" onchange="Page.changeContrast();" type="range" min="0" max="64" value="0"> | |
| <label id="threshold-value" width="100">Threshold: 0</label> | |
| <input id="threshold" onchange="Page.changeThreshold();" type="range" min="0" max="512" value="0"> | |
| <label id="sharpness-value" width="100">Sharpness: off</label> | |
| <input id="sharpness" onchange="Page.changeSharpness();" type="checkbox"> | |
| <label id="grayscale-value" width="100">grayscale: off</label> | |
| <input id="grayscale" onchange="Page.changeGrayscale();" type="checkbox"> | |
| <br> | |
| <label id="flipVertical-value" width="100">Flip Vertical: off</label> | |
| <input id="flipVertical" onchange="Page.changeVertical();" type="checkbox"> | |
| <label id="flipHorizontal-value" width="100">Flip Horizontal: off</label> | |
| <input id="flipHorizontal" onchange="Page.changeHorizontal();" type="checkbox"> | |
| </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> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="webcodecamjs-master/js/filereader.js"></script> | |
| <!-- Using jquery version: --> | |
| <!-- | |
| <script type="text/javascript" src="js/jquery.js"></script> | |
| <script type="text/javascript" src="js/qrcodelib.js"></script> | |
| <script type="text/javascript" src="js/webcodecamjquery.js"></script> | |
| <script type="text/javascript" src="js/mainjquery.js"></script> | |
| --> | |
| <script type="text/javascript" src="webcodecamjs-master/js/qrcodelib.js"></script> | |
| <script type="text/javascript" src="webcodecamjs-master/js/webcodecamjs.js"></script> | |
| <script type="text/javascript" src="webcodecamjs-master/js/main.js"></script> | |
| </body> | |
| </html> |
Hasilnya:
Tidak ada komentar:
Posting Komentar