Refactoring a tad for barcode detection API.

 + moves the canvas closer to the worker.
 + in future can move canvas to offscreen canvas and save pulling out all the imagedata on ui thread.

app/scripts/main.js

@@ -27,11 +27,11 @@
     var qrCodeManager = new QRCodeManager('qrcode');
     var processingFrame = false;
 
-    cameraManager.onframe = function(imageData) {
+    cameraManager.onframe = function(canvas) {
       // There is a frame in the camera, what should we do with it?
       if(processingFrame == false) {
         processingFrame = true;
-        var detectedQRCode = qrCodeManager.detectQRCode(imageData, function(url) {
+        var detectedQRCode = qrCodeManager.detectQRCode(canvas, function(url) {
           if(url !== undefined) {
             if(ga) { ga('send', 'event', 'urlfound'); }
         
@@ -119,10 +119,10 @@
       qrcodeShare.classList.remove('hidden');
     }
 
-    this.detectQRCode = function(imageData, callback) {
+    this.detectQRCode = function(canvas, callback) {
       callback = callback || function() {};
 
-      client.decode(imageData, function(result) {
+      client.decode(canvas, function(result) {
         if(result !== undefined) {
           self.currentUrl = result;
         }
@@ -445,10 +445,7 @@
 
       drawOverlay(wWidth, wHeight);
 
-      // A frame has been captured.
-      var imageData = canvas.getImageData(0, 0, dWidth, dHeight);
-
-      if(self.onframe) self.onframe(imageData);
+      if(self.onframe) self.onframe(canvas);
 
       coordinatesHaveChanged = false;
     };

app/scripts/qrclient.js

@@ -1,15 +1,32 @@
 var QRClient = function() {
- 	var worker = new Worker('/scripts/jsqrcode/qrworker.js');
- 	var currentCallback;
- 	
- 	this.decode = function(imageData, callback) {
- 		worker.postMessage(imageData);
-    	currentCallback = callback;
- 	};
+  var worker = new Worker('/scripts/jsqrcode/qrworker.js');
+  var barcodeDetector;
+  if(BarcodeDetector)
+    barcodeDetector = new BarcodeDetector();
+    
+  var currentCallback;
 
- 	worker.onmessage = function(e) {
- 		if(currentCallback) {
- 			currentCallback(e.data);
- 		}
- 	};
+  this.decode = function(context, callback) {
+    // Temporary hack because 
+    if(barcodeDetector) {
+      barcodeDetector.detect(context.canvas)
+      .then(barcodes => {
+        // return the first barcode.
+        callback(barcodes[0].rawValue);   
+      })
+      .catch(err => console.log(err));
+    }
+    else {
+      // A frame has been captured.
+      var imageData = context.getImageData(0, 0, dWidth, dHeight);
+      worker.postMessage(imageData);
+        currentCallback = callback;
+    }
+  };
+
+  worker.onmessage = function(e) {
+    if(currentCallback) {
+      currentCallback(e.data);
+    }
+  };
  };