<!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>