-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (143 loc) · 5.47 KB
/
index.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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!doctype html>
<!-- The DOCTYPE declaration above will set the -->
<!-- browser's rendering engine into -->
<!-- "Standards Mode". Replacing this declaration -->
<!-- with a "Quirks Mode" doctype is not supported. -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Janusz Białobrzewski" />
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<!-- <link type="text/css" rel="stylesheet" href="JsQRScanner.css"> -->
<!-- -->
<!-- Any title is fine -->
<!-- -->
<title>JsQRScanner example</title>
<!-- -->
<!-- This script loads your compiled module. -->
<script type="text/javascript" src="./js/jsqrscanner.nocache.js"></script>
</head>
<body>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<div class="row-element-set row-element-set-QRScanner">
<h1>JsQRScanner example</h1>
<div class="row-element">
<div class="FlexPanel detailsPanel QRScannerShort">
<div class="FlexPanel shortInfoPanel">
<div class="gwt-HTML">
Point the webcam to a QR code.
</div>
</div>
</div>
</div>
<br>
<div class="row-element">
<div class="qrscanner" id="scanner">
</div>
</div>
<div class="row-element">
<div class="form-field form-field-memo">
<div class="form-field-caption-panel">
<div class="gwt-Label form-field-caption">
Scanned text
</div>
</div>
<div class="FlexPanel form-field-input-panel">
<textarea id="scannedTextMemo" class="textInput form-memo form-field-input textInput-readonly" rows="3" readonly>
</textarea>
</div>
</div>
<div class="form-field form-field-memo">
<div class="form-field-caption-panel">
<div class="gwt-Label form-field-caption">
Scanned text history
</div>
</div>
<div class="FlexPanel form-field-input-panel">
<textarea id="scannedTextMemoHist" class="textInput form-memo form-field-input textInput-readonly" value="" rows="6" readonly>
</textarea>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function onQRCodeScanned(scannedText)
{
var scannedTextMemo = document.getElementById("scannedTextMemo");
if(scannedTextMemo)
{
scannedTextMemo.value = scannedText;
}
var scannedTextMemoHist = document.getElementById("scannedTextMemoHist");
if(scannedTextMemoHist)
{
scannedTextMemoHist.value = scannedTextMemoHist.value + '\n' + scannedText;
}
}
function provideVideo()
{
var n = navigator;
if (n.mediaDevices && n.mediaDevices.getUserMedia)
{
return n.mediaDevices.getUserMedia({
video: {
facingMode: "environment"
},
audio: false
});
}
return Promise.reject('Your browser does not support getUserMedia');
}
function provideVideoQQ()
{
return navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
var exCameras = [];
devices.forEach(function(device) {
if (device.kind === 'videoinput') {
exCameras.push(device.deviceId)
}
});
return Promise.resolve(exCameras);
}).then(function(ids){
if(ids.length === 0)
{
return Promise.reject('Could not find a webcam');
}
return navigator.mediaDevices.getUserMedia({
video: {
'optional': [{
'sourceId': ids.length === 1 ? ids[0] : ids[1]//this way QQ browser opens the rear camera
}]
}
});
});
}
//this function will be called when JsQRScanner is ready to use
function JsQRScannerReady()
{
//create a new scanner passing to it a callback function that will be invoked when
//the scanner succesfully scan a QR code
var jbScanner = new JsQRScanner(onQRCodeScanned);
//var jbScanner = new JsQRScanner(onQRCodeScanned, provideVideo);
//reduce the size of analyzed image to increase performance on mobile devices
jbScanner.setSnapImageMaxSize(300);
var scannerParentElement = document.getElementById("scanner");
if(scannerParentElement)
{
//append the jbScanner to an existing DOM element
jbScanner.appendTo(scannerParentElement);
}
}
</script>
</body>
</html>