added support for qrcode scanner

bower.json

@@ -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",
+    "sjcl": "1.0.0",
-    "file-saver": "*"
+    "file-saver": "*",
+    "qrcode-decoder-js": "*"
   }
 }

css/main.css

@@ -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;
+}

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
+                  <div class="row collapse">
-                    <small ng-hide="!sendForm.address.$pristine">required</small>
+                    <label for="address">To address
-                    <small class="is-valid" ng-show="!sendForm.address.$invalid && !sendForm.address.$pristine">valid!</small>
+                      <small ng-hide="!sendForm.address.$pristine">required</small>
-                    <small class="has-error" ng-show="sendForm.address.$invalid && !sendForm.address.$pristine">
+                      <small class="is-valid" ng-show="!sendForm.address.$invalid && !sendForm.address.$pristine">valid!</small>
-                    not valid</small>
+                      <small class="has-error" ng-show="sendForm.address.$invalid && !sendForm.address.$pristine">
-                  </label>
+                      not valid</small>
-                  <input type="text" id="address" name="address" placeholder="Send to" ng-model="address" valid-address required>
+                    </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>

js/controllers/send.js

@@ -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);
     };
   });