docs(scanner): explain scanning delay better

See: #374

src/misc/scanner.ts

@@ -34,11 +34,30 @@ export const keepScanning = async (
       if (videoElement.readyState > 1) {
         const { lastScanned, contentBefore, lastScanHadContent } = state
 
+        // Scanning is expensive and we don't need to scan camera frames with
+        // the maximum possible frequency. In particular when visual tracking
+        // is disabled. So we skip scanning a frame if `minDelay` has not passed
+        // yet. Notice that this approach is different from doing a `setTimeout`
+        // after each scan. With `setTimeout`, delay and scanning are sequential: 
+        //
+        //    |-- scan --|---- minDelay ----|-- scan --|---- minDelay ----|
+        // 
+        // Instead we do it concurrently:
+        //
+        //    |---- minDelay ----|---- minDelay ----|---- minDelay ----|
+        //    |-- scan --|       |-- scan --|       |-- scan --|
+        //
+        // Let's say `minDelay` is 40ms, then we scan every 40ms as long as 
+        // scanning itself does not take more than 40ms. In particular when 
+        // visual tracking is enabled, that means we can repaint the tracking 
+        // canvas every 40ms. So we paint 
+        //
+        //     1000ms / 40ms = 25fps (frames per second)
+        //
+        // 24fps is the minimum frame-rate that is perceived as a continuous 
+        // animation. We target 25fps just because 24 doesn't divide 1000ms
+        // evenly.
         if (timeNow - lastScanned < minDelay) {
-          // Scanning is expensive and we don't need to scan camera frames with
-          // the maximum possible frequency. In particular when visual tracking
-          // is disabled. So we skip scanning a frame if `minDelay` has not passed
-          // yet.
           window.requestAnimationFrame(processFrame(state))
         } else {
           const detectedCodes = await barcodeDetector.detect(videoElement)