perf: reduce scan frequency when not tracking

When visual tracking is disabled it's not necessary to scan so
frequently thus reducing expensive computation.

See #39

Author: gruhn

README.md

@@ -74,9 +74,9 @@ methods: {
 ```
 ### `track` prop
 
-By default detected QR codes are visually highlighted. A transparent canvas overlays the camera stream. When a QR code is detected, its location is painted to the canvas. You can enable/disable this feature by passing `true`/`false` via the `track` prop.
+By default detected QR codes are visually highlighted. A transparent canvas overlays the camera stream. When a QR code is detected, its location is painted to the canvas. You can enable/disable this feature by passing `true`/`false` via the `track` prop. If tracking is disabled the camera stream is scanned much less frequently. So if you encounter performance problems on your target device, this might help.
 
-You can also pass a function to customize the way the location is painted. This function is called to produce each frame. It receives the location object as the first argument and a `CanvasRenderingContext2D` instance as the second argument.
+You can also pass a function with `track` to customize the way the location is painted. This function is called to produce each frame. It receives the location object as the first argument and a `CanvasRenderingContext2D` instance as the second argument.
 
 :point_right: Avoid access to reactive properties in this function (like stuff in `data`, `computed` or your Vuex store). The function is called several times a second and might cause memory leaks. If you want to be save don't access `this` at all.
 
@@ -155,6 +155,7 @@ This component uses [getUserMedia](https://developer.mozilla.org/en-US/docs/Web/
     facingMode: { ideal: 'environment' }, // use rear camera if available
     width: { min: 360, ideal: 680, max: 1920 }, // constrain video width resolution
     height: { min: 240, ideal: 480, max: 1080 }, // constrain video height resolution
+    frameRate: { min: 10, ideal: 25 }
   }
 }
 ```

src/components/QrcodeReader.vue

@@ -58,6 +58,18 @@ export default {
         this.readyAfterPause
     },
 
+    /**
+     * Minimum delay in milliseconds between frames to be scanned. Don't scan
+     * so often when visual tracking is disabled to improve performance.
+     */
+    scanInterval () {
+      if (this.track === false) {
+        return 500
+      } else {
+        return 40 // ~ 25fps
+      }
+    },
+
     /**
      * Full constraints object which is passed to `getUserMedia` to request a
      * camera stream. Properties define if a certain camera is adequate or not.
@@ -179,6 +191,7 @@ export default {
         decodeHandler: this.onDecode,
         locateHandler: this.onLocate,
         shouldContinue: () => this.shouldScan,
+        minDelay: this.scanInterval,
       })
     },
 

src/misc/Scanner.js

@@ -27,31 +27,38 @@ export function keepScanning (camera, options) {
     decodeHandler,
     locateHandler,
     shouldContinue,
-    scanInterval = 16, // milliseconds
+    minDelay,
   } = options
 
-  const recur = (contentBefore, locationBefore) => {
-    return () => {
-      const imageData = camera.captureFrame()
-      const { content, location } = scan(imageData)
+  let contentBefore = null
+  let locationBefore = null
+  let lastScanned = performance.now()
 
-      if (content !== null && content !== contentBefore) {
-        decodeHandler(content)
-      }
+  const processFrame = () => {
+    if (shouldContinue()) {
+      window.requestAnimationFrame(processFrame)
 
-      if (location !== locationBefore) {
-        locateHandler(location)
-      }
+      const timeNow = performance.now()
+
+      if (timeNow - lastScanned >= minDelay) {
+        lastScanned = timeNow
+
+        const imageData = camera.captureFrame()
+        const { content, location } = scan(imageData)
+
+        if (content !== null && content !== contentBefore) {
+          decodeHandler(content)
+        }
+
+        if (location !== locationBefore) {
+          locateHandler(location)
+        }
 
-      if (shouldContinue()) {
-        window.setTimeout(() => {
-          window.requestAnimationFrame(
-            recur(content || contentBefore, location)
-          )
-        }, scanInterval)
+        contentBefore = content || contentBefore
+        locationBefore = location
       }
     }
   }
 
-  window.requestAnimationFrame(recur(null, null))
+  processFrame()
 }