scanner.js•4.42 kB
'use strict';
angular.module('insight.system').controller('ScannerController',
function($scope, $rootScope, $modalInstance, Global) {
$scope.global = Global;
// Detect mobile devices
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
$scope.isMobile = isMobile.any();
$scope.scannerLoading = false;
var $searchInput = angular.element(document.getElementById('search')),
cameraInput,
video,
canvas,
$video,
context,
localMediaStream;
var _scan = function(evt) {
if ($scope.isMobile) {
$scope.scannerLoading = true;
var files = evt.target.files;
if (files.length === 1 && files[0].type.indexOf('image/') === 0) {
var file = files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var mpImg = new MegaPixImage(file);
mpImg.render(canvas, { maxWidth: 200, maxHeight: 200, orientation: 6 });
setTimeout(function() {
qrcode.width = canvas.width;
qrcode.height = canvas.height;
qrcode.imagedata = context.getImageData(0, 0, qrcode.width, qrcode.height);
try {
//alert(JSON.stringify(qrcode.process(context)));
qrcode.decode();
} catch (e) {
alert(e);
}
}, 1500);
};
})(file);
// Read in the file as a data URL
reader.readAsDataURL(file);
}
} else {
if (localMediaStream) {
context.drawImage(video, 0, 0, 300, 225);
try {
qrcode.decode();
} catch(e) {
//qrcodeError(e);
}
}
setTimeout(_scan, 500);
}
};
var _successCallback = function(stream) {
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
localMediaStream = stream;
video.play();
setTimeout(_scan, 1000);
};
var _scanStop = function() {
$scope.scannerLoading = false;
$modalInstance.close();
if (!$scope.isMobile) {
if (localMediaStream.stop) localMediaStream.stop();
localMediaStream = null;
video.src = '';
}
};
var _videoError = function(err) {
console.log('Video Error: ' + JSON.stringify(err));
_scanStop();
};
qrcode.callback = function(data) {
_scanStop();
var str = (data.indexOf('Smileycoin:') === 0) ? data.substring(8) : data;
console.log('QR code detected: ' + str);
$searchInput
.val(str)
.triggerHandler('change')
.triggerHandler('submit');
};
$scope.cancel = function() {
_scanStop();
};
$modalInstance.opened.then(function() {
$rootScope.isCollapsed = true;
// Start the scanner
setTimeout(function() {
canvas = document.getElementById('qr-canvas');
context = canvas.getContext('2d');
if ($scope.isMobile) {
cameraInput = document.getElementById('qrcode-camera');
cameraInput.addEventListener('change', _scan, false);
} else {
video = document.getElementById('qrcode-scanner-video');
$video = angular.element(video);
canvas.width = 300;
canvas.height = 225;
context.clearRect(0, 0, 300, 225);
navigator.getUserMedia({video: true}, _successCallback, _videoError);
}
}, 500);
});
});