diff --git a/src/components/QrcodeReader.vue b/src/components/QrcodeReader.vue index 36909206..53f64cb0 100644 --- 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 index f1577b69..4a50b861 100644 --- 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)