first commit
This commit is contained in:
MatMasIt
240
js/qrdecode.js
Normal file
240
js/qrdecode.js
Normal file
@@ -0,0 +1,240 @@
|
||||
var gCtx = null;
|
||||
var gCanvas = null;
|
||||
var c = 0;
|
||||
var stype = 0;
|
||||
var gUM = false;
|
||||
var webkit = false;
|
||||
var moz = false;
|
||||
var v = null;
|
||||
|
||||
var imghtml = '<div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas>' +
|
||||
'<div id="imghelp">drag and drop the QRCode here' +
|
||||
'<br>or select a file' +
|
||||
'<input type="file" onchange="handleFiles(this.files)"/>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
var vidhtml = '<video id="v" autoplay></video>';
|
||||
|
||||
function dragenter(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function dragover(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
function drop(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
var dt = e.dataTransfer;
|
||||
var files = dt.files;
|
||||
if (files.length > 0) {
|
||||
handleFiles(files);
|
||||
}
|
||||
else
|
||||
if (dt.getData('URL')) {
|
||||
qrcode.decode(dt.getData('URL'));
|
||||
}
|
||||
}
|
||||
|
||||
function handleFiles(f) {
|
||||
var o = [];
|
||||
|
||||
for (var i = 0; i < f.length; i++) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = (function (theFile) {
|
||||
return function (e) {
|
||||
gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
|
||||
|
||||
qrcode.decode(e.target.result);
|
||||
};
|
||||
})(f[i]);
|
||||
reader.readAsDataURL(f[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function initCanvas(w, h) {
|
||||
gCanvas = document.getElementById("qr-canvas");
|
||||
gCanvas.style.width = w + "px";
|
||||
gCanvas.style.height = h + "px";
|
||||
gCanvas.width = w;
|
||||
gCanvas.height = h;
|
||||
gCtx = gCanvas.getContext("2d");
|
||||
gCtx.clearRect(0, 0, w, h);
|
||||
}
|
||||
|
||||
|
||||
function captureToCanvas() {
|
||||
if (stype != 1)
|
||||
return;
|
||||
if (gUM) {
|
||||
try {
|
||||
gCtx.drawImage(v, 0, 0);
|
||||
try {
|
||||
qrcode.decode();
|
||||
setTimeout(captureToCanvas, 500);
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e);
|
||||
setTimeout(captureToCanvas, 500);
|
||||
};
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e);
|
||||
setTimeout(captureToCanvas, 500);
|
||||
};
|
||||
}
|
||||
else {
|
||||
console.log("Media not captured yet or error in capturing media");
|
||||
}
|
||||
}
|
||||
|
||||
function htmlEntities(str) {
|
||||
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
function read(a) {
|
||||
window["raw"] = a;
|
||||
check();
|
||||
}
|
||||
|
||||
function isCanvasSupported() {
|
||||
var elem = document.createElement('canvas');
|
||||
return !!(elem.getContext && elem.getContext('2d'));
|
||||
}
|
||||
|
||||
function success(stream) {
|
||||
window.stream = stream;
|
||||
if (webkit) {
|
||||
if (window.URL)
|
||||
v.src = window.URL.createObjectURL(stream);
|
||||
else if (window.webkitURL)
|
||||
v.src = window.webkitURL.createObjectURL(stream);
|
||||
|
||||
v.play();
|
||||
}
|
||||
else
|
||||
if (moz) {
|
||||
v.mozSrcObject = stream;
|
||||
v.play();
|
||||
}
|
||||
else
|
||||
v.src = stream;
|
||||
|
||||
gUM = true;
|
||||
setTimeout(captureToCanvas, 500);
|
||||
}
|
||||
|
||||
function error(error) {
|
||||
gUM = false;
|
||||
alert("Failed to access webcam");
|
||||
return;
|
||||
}
|
||||
|
||||
function gotSources(sourceInfos) {
|
||||
var videoSelect = document.querySelector('select#videoSource');
|
||||
//var audioSelect = document.querySelector('select#audioSource');
|
||||
while (videoSelect.firstChild)
|
||||
videoSelect.removeChild(videoSelect.firstChild);
|
||||
|
||||
// Run the loop in the reverse order to get rear camera first
|
||||
for (var i = sourceInfos.length - 1; i >= 0; --i) {
|
||||
var sourceInfo = sourceInfos[i];
|
||||
var option = document.createElement('option');
|
||||
option.value = sourceInfo.id;
|
||||
if (sourceInfo.kind === 'audio') {
|
||||
//option.text = sourceInfo.label || 'microphone ' + (audioSelect.length + 1);
|
||||
//audioSelect.appendChild(option);
|
||||
} else if (sourceInfo.kind === 'video') {
|
||||
option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
|
||||
videoSelect.appendChild(option);
|
||||
} else {
|
||||
console.log('Some other kind of source: ', sourceInfo);
|
||||
}
|
||||
}
|
||||
setwebcam();
|
||||
}
|
||||
|
||||
function load() {
|
||||
|
||||
if (isCanvasSupported() && window.File && window.FileReader) {
|
||||
initCanvas(800, 600);
|
||||
qrcode.callback = read;
|
||||
document.getElementById("mainbody").style.display = "inline";
|
||||
//setwebcam();
|
||||
var videoSelect = document.querySelector('select#videoSource');
|
||||
videoSelect.onchange = setwebcam;
|
||||
if (typeof MediaStreamTrack === 'undefined') {
|
||||
alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
|
||||
} else {
|
||||
MediaStreamTrack.getSources(gotSources);
|
||||
}
|
||||
}
|
||||
else {
|
||||
document.getElementById("mainbody").style.display = "inline";
|
||||
document.getElementById("mainbody").innerHTML = '<p id="mp1">QR code scanner for HTML5 capable browsers</p><br>' +
|
||||
'<br><p id="mp2">sorry your browser is not supported</p><br><br>' +
|
||||
'<p id="mp1">try <a href="http://www.mozilla.com/firefox"><img src="firefox.png"/></a> or <a href="http://chrome.google.com"><img src="chrome_logo.gif"/></a> or <a href="http://www.opera.com"><img src="Opera-logo.png"/></a></p>';
|
||||
}
|
||||
}
|
||||
|
||||
function setwebcam() {
|
||||
if (stype == 1) {
|
||||
//setTimeout(captureToCanvas, 500);
|
||||
//return;
|
||||
}
|
||||
var videoSelect = document.querySelector('select#videoSource');
|
||||
var videoSource = videoSelect.value;
|
||||
var constraints = {
|
||||
audio: false,
|
||||
video: {
|
||||
optional: [{ sourceId: videoSource }]
|
||||
}
|
||||
};
|
||||
var n = navigator;
|
||||
document.getElementById("outdiv").innerHTML = vidhtml;
|
||||
v = document.getElementById("v");
|
||||
if (!!window.stream) {
|
||||
v.src = null;
|
||||
window.stream.stop();
|
||||
}
|
||||
|
||||
if (n.getUserMedia)
|
||||
n.getUserMedia(constraints, success, error);
|
||||
else
|
||||
if (n.webkitGetUserMedia) {
|
||||
webkit = true;
|
||||
n.webkitGetUserMedia(constraints, success, error);
|
||||
}
|
||||
else
|
||||
if (n.mozGetUserMedia) {
|
||||
moz = true;
|
||||
n.mozGetUserMedia(constraints, success, error);
|
||||
}
|
||||
|
||||
//document.getElementById("qrimg").src="qrimg2.png";
|
||||
//document.getElementById("webcamimg").src="webcam.png";
|
||||
document.getElementById("qrimg").style.opacity = 0.2;
|
||||
document.getElementById("webcamimg").style.opacity = 1.0;
|
||||
|
||||
stype = 1;
|
||||
//setTimeout(captureToCanvas, 500);
|
||||
}
|
||||
|
||||
function setimg() {
|
||||
if (stype == 2)
|
||||
return;
|
||||
document.getElementById("outdiv").innerHTML = imghtml;
|
||||
//document.getElementById("qrimg").src="qrimg.png";
|
||||
//document.getElementById("webcamimg").src="webcam2.png";
|
||||
|
||||
var qrfile = document.getElementById("qrfile");
|
||||
qrfile.addEventListener("dragenter", dragenter, false);
|
||||
qrfile.addEventListener("dragover", dragover, false);
|
||||
qrfile.addEventListener("drop", drop, false);
|
||||
stype = 2;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user