// QRCODE reader Copyright 2011 Lazar Laszlo // http://www.webqr.com 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='
'+ '
drag and drop a QRCode here'+ '
or select a file'+ ''+ '
'+ '
'; var vidhtml = ''; 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/g, '>').replace(/"/g, '"'); } function read(a) { var html="
"; if(a.indexOf("http://") === 0 || a.indexOf("https://") === 0) html+=""+a+"
"; html+=""+htmlEntities(a)+"

"; document.getElementById("result").innerHTML=html; } function isCanvasSupported(){ var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d')); } function success(stream) { v.srcObject = stream; v.play(); gUM=true; setTimeout(captureToCanvas, 500); } function error(error) { gUM=false; return; } function load() { if(isCanvasSupported() && window.File && window.FileReader) { initCanvas(800, 600); qrcode.callback = read; document.getElementById("mainbody").style.display="inline"; setwebcam(); } else { document.getElementById("mainbody").style.display="inline"; document.getElementById("mainbody").innerHTML='

QR code scanner for HTML5 capable browsers


'+ '

sorry your browser is not supported



'+ '

try or or

'; } } function setwebcam() { var options = true; if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) { try{ navigator.mediaDevices.enumerateDevices() .then(function(devices) { devices.forEach(function(device) { if (device.kind === 'videoinput') { if(device.label.toLowerCase().search("back") >-1) options={'deviceId': {'exact':device.deviceId}, 'facingMode':'environment'} ; } console.log(device.kind + ": " + device.label +" id = " + device.deviceId); }); setwebcam2(options); }); } catch(e) { console.log(e); } } else{ console.log("no navigator.mediaDevices.enumerateDevices" ); setwebcam2(options); } } function setwebcam2(options) { console.log(options); document.getElementById("result").innerHTML="- scanning -"; if(stype==1) { setTimeout(captureToCanvas, 500); return; } var n=navigator; document.getElementById("outdiv").innerHTML = vidhtml; v=document.getElementById("v"); if(n.mediaDevices.getUserMedia) { n.mediaDevices.getUserMedia({video: options, audio: false}). then(function(stream){ success(stream); }).catch(function(error){ error(error) }); } else if(n.getUserMedia) { webkit=true; n.getUserMedia({video: options, audio: false}, success, error); } else if(n.webkitGetUserMedia) { webkit=true; n.webkitGetUserMedia({video:options, audio: false}, success, error); } document.getElementById("qrimg").style.opacity=0.2; document.getElementById("webcamimg").style.opacity=1.0; stype=1; setTimeout(captureToCanvas, 500); } function setimg() { document.getElementById("result").innerHTML=""; if(stype==2) return; document.getElementById("outdiv").innerHTML = imghtml; //document.getElementById("qrimg").src="qrimg.png"; //document.getElementById("webcamimg").src="webcam2.png"; document.getElementById("qrimg").style.opacity=1.0; document.getElementById("webcamimg").style.opacity=0.2; var qrfile = document.getElementById("qrfile"); qrfile.addEventListener("dragenter", dragenter, false); qrfile.addEventListener("dragover", dragover, false); qrfile.addEventListener("drop", drop, false); stype=2; }