fix(scanner): workers not always terminated

The computed property `shouldScan` in QrcodeStream is the source
of truth for the scanners state. Therefore each `keepScanning`
call receives a function enabling it to check `shouldScan`s value
outside of the components context. Since computed properties are
evaluated in an asynchronous manner, a running scanner might miss
point where `shouldScan` is actually `false`. When `keepScanning`
is called many times in a row, new web workers are spawned
endlessly without being terminated, causing a major memory leak.

Now fixed by putting the action to terminate scanners in the same
watcher where scanners are started.

Author: gruhn

src/components/QrcodeStream.vue

@@ -64,6 +64,7 @@ export default {
       cameraInstance: null,
       destroyed: false,
       constraints: {},
+      stopScanning: () => {},
     }
   },
 
@@ -118,6 +119,8 @@ export default {
         this.clearPauseFrame()
         this.clearTrackingLayer()
         this.startScanning()
+      } else {
+        this.stopScanning()
       }
     },
 
@@ -186,16 +189,17 @@ export default {
     },
 
     startScanning () {
+      // this.stopScanning()
+
       const detectHandler = result => {
         this.onDetect(
           Promise.resolve({ source: 'stream', ...result })
         )
       }
 
-      keepScanning(this.cameraInstance, {
+      this.stopScanning = keepScanning(this.cameraInstance, {
         detectHandler,
         locateHandler: this.onLocate,
-        shouldContinue: () => this.shouldScan,
         minDelay: this.scanInterval,
       })
     },

src/misc/scanner.js

@@ -23,7 +23,6 @@ export function keepScanning (camera, options) {
   const {
     detectHandler,
     locateHandler,
-    shouldContinue,
     minDelay,
   } = options
 
@@ -36,6 +35,7 @@ export function keepScanning (camera, options) {
   // If worker can't process frames fast enough, memory will quickly full up.
   // Make sure to process only one frame at a time.
   let workerBusy = false
+  let shouldContinue = true
 
   worker.onmessage = event => {
     workerBusy = false
@@ -55,7 +55,7 @@ export function keepScanning (camera, options) {
   }
 
   const processFrame = timeNow => {
-    if (shouldContinue()) {
+    if (shouldContinue) {
       window.requestAnimationFrame(processFrame)
 
       if (timeNow - lastScanned >= minDelay) {
@@ -75,4 +75,8 @@ export function keepScanning (camera, options) {
   }
 
   processFrame()
+
+  return () => {
+    shouldContinue = false
+  }
 }