added support for qrcode scanner
This commit is contained in:
Mario Colque
parent
9209940c8b
commit
159ceee88b
4 changed files with 190 additions and 10 deletions
|
|
@ -15,7 +15,8 @@
|
|||
"mocha": "~1.18.2",
|
||||
"chai": "~1.9.1",
|
||||
"crypto-js": "http://crypto-js.googlecode.com/files/CryptoJS%20v3.1.2.zip",
|
||||
"sjcl":"1.0.0",
|
||||
"file-saver": "*"
|
||||
"sjcl": "1.0.0",
|
||||
"file-saver": "*",
|
||||
"qrcode-decoder-js": "*"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ html, body {height: 100%;}
|
|||
padding: 5px 2rem;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.bottom-copay {
|
||||
|
|
@ -427,3 +428,8 @@ a.loading {
|
|||
background: #fff;
|
||||
}
|
||||
|
||||
#qr-canvas { display: none; }
|
||||
#qrcode-scanner-video {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
|
|||
43
index.html
43
index.html
|
|
@ -453,13 +453,40 @@
|
|||
<form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
|
||||
<div class="row">
|
||||
<div class="large-12 columns">
|
||||
<label for="address">To address
|
||||
<small ng-hide="!sendForm.address.$pristine">required</small>
|
||||
<small class="is-valid" ng-show="!sendForm.address.$invalid && !sendForm.address.$pristine">valid!</small>
|
||||
<small class="has-error" ng-show="sendForm.address.$invalid && !sendForm.address.$pristine">
|
||||
not valid</small>
|
||||
</label>
|
||||
<input type="text" id="address" name="address" placeholder="Send to" ng-model="address" valid-address required>
|
||||
<div class="row collapse">
|
||||
<label for="address">To address
|
||||
<small ng-hide="!sendForm.address.$pristine">required</small>
|
||||
<small class="is-valid" ng-show="!sendForm.address.$invalid && !sendForm.address.$pristine">valid!</small>
|
||||
<small class="has-error" ng-show="sendForm.address.$invalid && !sendForm.address.$pristine">
|
||||
not valid</small>
|
||||
</label>
|
||||
<div class="small-10 columns">
|
||||
<input type="text" id="address" name="address" placeholder="Send to" ng-model="address" valid-address required>
|
||||
</div>
|
||||
<div class="small-2 columns" ng-hide="showScanner">
|
||||
<a class="postfix button" ng-click="openScanner()"><i class="fi-camera"></i></a>
|
||||
</div>
|
||||
<div class="small-2 columns" ng-show="showScanner">
|
||||
<a class="postfix button alert" ng-click="cancelScanner()">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="scanner" class="row" ng-if="showScanner">
|
||||
<div class="text-centered">
|
||||
<canvas id="qr-canvas" width="200" height="150"></canvas>
|
||||
<div ng-show="isMobile">
|
||||
<div id="file-input-wrapper" class="btn btn-primary">
|
||||
<span class="pull-left text-centered">
|
||||
<i class="glyphicon glyphicon-refresh icon-rotate"></i>
|
||||
Get QR code
|
||||
</span>
|
||||
<input id="qrcode-camera" type="file" capture="camera" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
<div ng-hide="isMobile">
|
||||
<video id="qrcode-scanner-video" width="300" height="225" ng-hide="isMobile"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -547,6 +574,8 @@
|
|||
<script src="lib/file-saver/FileSaver.js"></script>
|
||||
<script src="lib/socket.io.js"></script>
|
||||
<script src="lib/sjcl.js"></script>
|
||||
<script src="lib/ios-imagefile-megapixel/megapix-image.js"></script>
|
||||
<script src="lib/qrcode-decoder-js/lib/qrcode-decoder.min.js"></script>
|
||||
<script src="js/copayBundle.js"></script>
|
||||
|
||||
<script src="js/app.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,42 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('copay.send').controller('SendController',
|
||||
function($scope, $rootScope, $location) {
|
||||
function($scope, $rootScope, $window, $location, $timeout) {
|
||||
$scope.title = 'Send';
|
||||
$scope.loading = false;
|
||||
|
||||
// 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());
|
||||
}
|
||||
};
|
||||
|
||||
// Detect protocol
|
||||
$scope.isHttp = function() {
|
||||
var protocol = $window.location.protocol;
|
||||
return (protocol.indexOf('http') === 0);
|
||||
};
|
||||
|
||||
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.unitIds = ['BTC','mBTC'];
|
||||
$scope.selectedUnit = $scope.unitIds[0];
|
||||
|
||||
|
|
@ -32,6 +64,118 @@ angular.module('copay.send').controller('SendController',
|
|||
$scope.amount = null;
|
||||
form.address.$pristine = true;
|
||||
form.amount.$pristine = true;
|
||||
};
|
||||
|
||||
// QR code Scanner
|
||||
var cameraInput;
|
||||
var video;
|
||||
var canvas;
|
||||
var $video;
|
||||
var context;
|
||||
var 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 });
|
||||
|
||||
$timeout(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);
|
||||
}
|
||||
}
|
||||
|
||||
$timeout(_scan, 500);
|
||||
}
|
||||
};
|
||||
|
||||
var _successCallback = function(stream) {
|
||||
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
|
||||
localMediaStream = stream;
|
||||
video.play();
|
||||
$timeout(_scan, 1000);
|
||||
};
|
||||
|
||||
var _scanStop = function() {
|
||||
$scope.scannerLoading = false;
|
||||
$scope.showScanner = false;
|
||||
if (!$scope.isMobile) {
|
||||
if (localMediaStream && 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('bitcoin:') === 0) ? data.substring(8) : data;
|
||||
console.log('QR code detected: ' + str);
|
||||
$scope.address = str;
|
||||
$scope.$digest();
|
||||
};
|
||||
|
||||
$scope.cancelScanner = function() {
|
||||
_scanStop();
|
||||
};
|
||||
|
||||
$scope.openScanner = function() {
|
||||
$scope.showScanner = true;
|
||||
|
||||
// Wait a moment until the canvas shows
|
||||
$timeout(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);
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue