-
Notifications
You must be signed in to change notification settings - Fork 153
/
Copy pathindex_jquery.html
117 lines (117 loc) · 6.61 KB
/
index_jquery.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebCodeCamJQuery</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="page-header text-center">
<h1 style="color: cadetblue;">WebCodeCamJQuery V 1.7.0<br>
<small>Download from:
<a href="https://github.com/andrastoth/WebCodeCamJS" target="_blank"> GitHub </a>
</small>
</h1>
<p style="font-style: italic;">
<span class="glyphicon glyphicon-info-sign"></span>
News in this version: Optimized for all modern browsers
<span class="glyphicon glyphicon-info-sign"></span>
</p>
</div>
<div class="container text-center">
<h2>Compatibility Table</h2>
<p>Current state of browser compatibility 2015-08-06</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Functions</th>
<th><a>IE11</a><img src="css/Internet_Explorer_9.png"></th>
<th><a>MS Spartan</a><img src="css/949320192f43b9d8.png"></th>
<th><a>Chrome 44</a><img src="css/google-chrome.png"></th>
<th><a>Chrome Canary</a><img src="css/Chrome_Canary_Icon.png"></th>
<th><a>Firefox 39.0.0</a><img src="css/mozilla_firefox.png"></th>
<th><a>Firefox Nightly</a><img src="css/firefox-dev.png"></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong><a>Media stream capture & decode</a></strong></td>
<td class="danger">No</td>
<td class="success">Yes</td>
<td class="success">Yes</td>
<td class="success">Yes</td>
<td class="success">Yes</td>
<td class="success">Yes</td>
</tr>
<tr>
<td><strong><a>Build select menu</a></strong></td>
<td class="danger">No</td>
<td class="warning">Partial</td>
<td class="success">Yes</td>
<td class="success">Yes</td>
<td class="warning">Partial but selectable<br> on built in pop up window</td>
<td class="warning">Partial but selectable<br> on built in pop up window</td>
</tr>
</tbody>
</table>
</div>
<div class="container" id="QR-Code">
<div class="panel panel-info">
<div class="panel-heading">
<h4>WebCodeCamJS.js Demonstration</h4>
<div style="float:right;text-align: right;">
<select class="form-control" id="camera-select"></select>
<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 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">
</div>
</div>
<div class="col-md-6">
<div class="thumbnail" id="result">
<div class="well">
<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 class="panel-footer">
<h3>Required HTML & Javascript example</h3>
</div>
</div>
</div>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/qrcodelib.js" type="text/javascript"></script>
<script src="js/webcodecamjquery.js" type="text/javascript"></script>
<script src="js/mainjquery.js" type="text/javascript"></script>
</body>
</html>