Fix a race when starting the scanner multiple times

We would get two scanning loops both scanning for qr codes. This makes
sure only one loop is active at all times.

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

@@ -86,6 +86,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
 
         this.clipMask = false;
         this._devices = new Map();
+        this._requestID = null;
     }
 
     static get scopedElements() {
@@ -192,13 +193,20 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
             video.play();
             that.videoRunning = true;
             qrContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
-            requestAnimationFrame(tick);
+            if (that._requestID !== null) {
+                cancelAnimationFrame(that._requestID);
+                that._requestID = null;
+            }
+            console.assert(that._requestID === null);
+            that._requestID = requestAnimationFrame(tick);
         }).catch((e) => { console.log(e); that.askPermission = true;});
 
         let lastVideoTime = -1;
         let lastCode = null;
 
         function tick() {
+           that._requestID = null;
+
            if (that.sourceChanged) {
                 video.srcObject.getTracks().forEach(function(track) {
                     track.stop();
@@ -340,7 +348,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
                 qrContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
                 scroll = true;
             }
-            requestAnimationFrame(tick);
+            console.assert(that._requestID === null);
+            that._requestID = requestAnimationFrame(tick);
         }
     }