Scan Same QR Code More Than Once

You might have noticed that scanning the same QR code again doesn't work. The thing is when a QR code is in the view of your the camera it's decoded multiple times a second. You don't want to be flooded with detect events that often though. That's why the last decoded QR code is "cached" and an event is only emitted, when the decoded content changes.

However this cache is reset when you change the paused prop. We can exploit that to scan same QR codes multiple times in a row.

Source

<template>
  <div>
    <p class="decode-result">
      Last result: <b>{{ result }}</b>
    </p>

    <qrcode-stream
      :paused="paused"
      @detect="onDetect"
      @camera-on="onCameraOn"
      @camera-off="onCameraOff"
      @error="onError"
    >
      <div
        v-show="showScanConfirmation"
        class="scan-confirmation"
      >
        <img
          :src="withBase('/checkmark.svg')"
          alt="Checkmark"
          width="128"
        />
      </div>
    </qrcode-stream>
  </div>
</template>

<script>
import { withBase } from 'vitepress'

import { QrcodeStream } from '../../../../src'

export default {
  components: { QrcodeStream },

  data() {
    return {
      paused: false,
      result: '',
      showScanConfirmation: false
    }
  },

  methods: {
    onCameraOn() {
      this.showScanConfirmation = false
    },

    onCameraOff() {
      this.showScanConfirmation = true
    },

    onError: console.error,

    async onDetect(detectedCodes) {
      this.result = JSON.stringify(detectedCodes.map((code) => code.rawValue))

      this.paused = true
      await this.timeout(500)
      this.paused = false
    },

    timeout(ms) {
      return new Promise((resolve) => {
        window.setTimeout(resolve, ms)
      })
    },

    withBase
  }
}
</script>

<style scoped>
.scan-confirmation {
  position: absolute;
  width: 100%;
  height: 100%;

  background-color: rgba(255, 255, 255, 0.8);

  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
</style>