QR Code Reader

<template>
  <v-card>
    <v-alert :value="!!camera.error" type="error" transition="slide-y-transition">
      {{ camera.error }}
    </v-alert>
    <v-progress-circular v-if="camera.loading" :size="30" :width="3" color="primary" indeterminate/>
    <v-responsive class="qr-scanner-container" height="280px" v-if="!camera.loading">
      <div v-if="camera.active">
        <qrcode-reader :paused="camera.paused" @decode="onDecode" @init="onInit"></qrcode-reader>
      </div>
      <div class="qr-scanner">
        <v-btn color="blue darken-2" class="white--text" @click="toggleCamera">
          <v-icon dark v-if="!camera.active">fingerprint</v-icon>
          <v-icon dark v-else>stop</v-icon>
        </v-btn>
        <v-btn color="blue darken-2" class="white--text" @click="togglePause" v-if="camera.active">
          <v-icon dark v-if="!camera.paused">replay</v-icon>
          <v-icon dark v-else>pause</v-icon>
        </v-btn>
      </div>
    </v-responsive>
  </v-card>
</template>

<script>
import { mapGetters } from 'vuex'
import QrcodeReader from 'vue-qrcode-reader'

export default {
  name: 'point-records',
  components: { QrcodeReader },
  data () {
    return {
      camera: {
        active: false,
        paused: false,
        loading: false,
        error: null
      }
    }
  }
  methods: {
    toggleCamera () {
      this.camera.active = !this.camera.active
    },
    togglePause () {
      this.camera.paused = !this.camera.paused
    },
    onDecode (content) {
      this.camera.paused = true
      this.form.registration = content
    },
    async onInit (promise) {
      // show loading indicator
      this.camera.loading = true

      try {
        await promise

        // successfully initialized
      } catch (error) {
        if (error.name === 'NotAllowedError') {
          // user denied camera access permisson
          this.camera.error = 'Você precisa permitir o acesso à câmera para efetuar o registro de pontos.'
        } else if (error.name === 'NotFoundError') {
          // no suitable camera device installed
          this.camera.error = 'Sua câmera não foi detectada. Por favor, certifique se sua câmera está funcionando corretamente e tente novamente.'
        } else if (error.name === 'NotSupportedError') {
          // page is not served over HTTPS (or localhost)
          this.camera.error = 'Para que consigamos acessar sua câmera, é preciso estar conectado em uma conexão segura (HTTPS).'
        } else if (error.name === 'NotReadableError') {
          // maybe camera is already in use
          this.camera.error = 'Não conseguimos conectar à sua câmera. Certifique se ela não está em uso por outro programa/aplicativo.'
        } else if (error.name === 'OverconstrainedError') {
          // passed constraints don't match any camera.
          // Did you requested the front camera although there is none?
          this.camera.error = 'Sua câmera frontal não está presente. Por favor, mude para a câmera traseira e tente novamente.'
        } else {
          // browser might be lacking features (WebRTC, ...)
          this.camera.error = 'Parece que seu navegador não suporta a tecnologia WebRTC. Por favor, tente atualizá-lo ou baixe um navegador mais recente.'
        }
      } finally {
        // hide loading indicator
        this.camera.loading = false
      }
    }
  }
}
</script>