fix(paused): prevent scanning frozen stream

Formally this was solved by setting `decodeResult` to `null` when the stream start playing again. This property has been removed. Now solved again by having a dedicated property `readyAfterPause`.
gruhn · Jun 9, 2018 · c01f301 · c01f301
1 parent 4835330
commit c01f301
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 27 deletions.
diff --git a/src/components/QrcodeReader.vue b/src/components/QrcodeReader.vue
@@ -37,13 +37,17 @@ export default {
     return {
       camera: null,
       destroyed: false,
+      readyAfterPause: true,
     }
   },
 
   computed: {
 
     shouldScan () {
-      return !this.paused && this.camera !== null && !this.destroyed
+      return this.paused === false &&
+        this.camera !== null &&
+        this.destroyed === false &&
+        this.readyAfterPause
     },
 
     /**
@@ -74,36 +78,29 @@ export default {
 
   watch: {
     /**
-     * Automatically freezes the video stream when conditions for the scanning
-     * process are not fullfilled anymore.
-     *
      * Starts continuous scanning process as soon as conditions for that are
      * fullfilled. The process stops itself automatically when the conditions
      * are not fullfilled anymore.
      */
     shouldScan (shouldScan) {
       if (shouldScan) {
-        this.$refs.video.play()
         this.startScanning()
-      } else {
-        this.$refs.video.pause()
       }
     },
 
-    /**
-     * Resets decodeResult when component is un-paused. This way one QR code
-     * can be decoded twice in a row (see #8). Waits though until video is
-     * actually not frozen anymore. Otherwise the last frame from before
-     * pausing would be rescanned.
-     */
-    paused (newValue) {
-      if (newValue === false) {
-        const resetDecodeResult = () => { this.decodeResult = null }
-        const video = this.$refs.video
+    paused (paused) {
+      const video = this.$refs.video
+
+      if (paused) {
+        video.pause()
+
+        this.readyAfterPause = false
+      } else {
+        video.play()
 
         video.addEventListener(
           'timeupdate',
-          resetDecodeResult,
+          () => { this.readyAfterPause = true },
           { once: true }
         )
       }

diff --git a/src/misc/Scanner.js b/src/misc/Scanner.js
@@ -31,18 +31,18 @@ export function keepScanning (camera, options) {
 
   const recur = (contentBefore, locationBefore) => {
     return () => {
-      const imageData = camera.captureFrame()
-      const { content, location } = scan(imageData)
+      if (shouldContinue()) {
+        const imageData = camera.captureFrame()
+        const { content, location } = scan(imageData)
 
-      if (content !== null && content !== contentBefore) {
-        decodeHandler(content)
-      }
+        if (content !== null && content !== contentBefore) {
+          decodeHandler(content)
+        }
 
-      if (location !== locationBefore) {
-        locateHandler(location)
-      }
+        if (location !== locationBefore) {
+          locateHandler(location)
+        }
 
-      if (shouldContinue()) {
         window.setTimeout(() => {
           window.requestAnimationFrame(
             recur(content || contentBefore, location)