Start Video on change of the attribute stopVideo in QR code reader

packages/qr-code-scanner/src/qr-code-scanner.js

@@ -70,6 +70,12 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
         });
     }
 
+    updated(changedProperties) {
+        if (changedProperties.get('stopScan') && !this.stopScan) {
+            this.qrCodeScannerInit();
+        }
+    };
+
     checkSupport() {
         const that = this;
         let devices_map = new Map();
@@ -79,8 +85,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             navigator.mediaDevices.enumerateDevices()
                 .then(function (devices) {
                     devices.forEach(function (device) {
-                        console.log(device.kind + ": " + device.label +
-                            " id = " + device.deviceId);
+                        //console.log(device.kind + ": " + device.label +  " id = " + device.deviceId);
                         // that._("#error").innerText += " | device.kind: " + device.kind + " id: " + device.deviceId + " label: " + device.label + " | ";
                         if (device.kind === 'videoinput') {
                             let id = device.deviceId;
@@ -101,13 +106,11 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                         opt.text = label;
                         that._('#videoSource').appendChild(opt);
                     }
-                    console.log(devices_map);
                     if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                         that.activeCamera = 'environment';
                     } else {
                         that.activeCamera = Array.from(devices_map)[0][0];
                     }
-                    console.log(that.activeCamera);
 
 
                 })
@@ -180,7 +183,6 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             canvas.stroke();
         }
 
-        console.log(this.activeCamera);
         let videoId = this.activeCamera;
         let constraint = { video:  { deviceId: videoId } };
 
@@ -192,7 +194,6 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             constraint =  { video: { facingMode: "user" } };
         }
 
-        console.log(constraint);
         const that = this;
 
         navigator.mediaDevices.getUserMedia(constraint).then(function(stream) {
@@ -216,7 +217,6 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             if (that.videoRunning === false) {
                 video.srcObject.getTracks().forEach(function(track) {
                     track.stop();
-                    console.log("stop early");
                     loadingMessage.hidden = false;
                     canvasElement.hidden = true;
                     outputContainer.hidden = true;
@@ -246,7 +246,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                 canvasElement.height = video.videoHeight;
                 canvasElement.width = video.videoWidth;
                 canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
-                var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
+                var imageData = canvas.getImageData(0 , 0, canvasElement.width, canvasElement.height); // TODO smaller input size and make an overlay where no scan happens
                 var code = jsQR(imageData.data, imageData.width, imageData.height, {
                     inversionAttempts: "dontInvert",
                 });