Implement QR code scanning function through Vue

hint

This plug-in can only be accessed under the https protocol. The http protocol does not work well. It is best to use vue2, as vue3 is prone to errors! ! ! ! !

describe

Realize the code scanning function through vue

Reference document: vue-qrcode-reader go to the official website –> official document

Effect display

insert image description here

Implementation steps:

Step 1 (Install the plugin)

npm install --save vue-qrcode-reader

Step 2 (Creating Components)

Because it may be used on multiple pages, it is made into a component (1) Create qrcode.vue in components under src
(2) Code implementation

// qrcode.vue
<template>
  <div>
      <!-- <p class="error">{{ error }}</p> -->
      <!--Error message-->

      <!-- <p class="decode-result">
          Scan Results:
          {{ result }}
      </p> -->
      <!--Scan Results-->
      <!-- <p @click="openCamera">Open the camera</p>
      <div v-show="show" class="cameraMessage">
          <p @click="closeCamera">Close the camera</p>
          <p @click="openFlash">Open the flashlight</p>
          <p @click="switchCamera">Camera reverse</p>
      </div> -->

      <qrcode-stream
          v-show="qrcode"
          :camera="camera"
          :torch="torchActive"
          @decode="onDecode"
          @init="onInit"
      >
          <div>
              <div class="qr-scanner">
                  <div class="box">
                      <div class="line"></div>
                      <div class="angle"></div>
                  </div>
                  <div class="txt">
                      Put the QR code/barcode into the box to automatically scan <div class="myQrcode">My QR code</div>
                  </div>
              </div>
          </div>
      </qrcode-stream>
  </div>
</template>

<script>
// Download the plugin // cnpm install --save vue-qrcode-reader

// Import import { QrcodeStream } from 'vue-qrcode-reader';

export default {
  // Register components: { QrcodeStream },

  data() {
      return {
          result: '', // Scan result information error: '', // Error message // show: false,
          // qrcode: false,
          qrcode: true,
          torchActive: false,
          camera: 'front',
      };
  },

  methods: {
      onDecode(result) {
          console.log(result);
          this.result = result;
      },
      async onInit(promise) {
          const { capabilities } = await promise;

          const TORCH_IS_SUPPORTED = !!capabilities.torch;
          try {
              await promise;
          } catch (error) {
              if (error.name === 'NotAllowedError') {
                  this.error = 'ERROR: You need to grant camera access';
              } else if (error.name === 'NotFoundError') {
                  this.error = 'ERROR: There is no camera on this device';
              } else if (error.name === 'NotSupportedError') {
                  this.error = 'ERROR: Security context required (HTTPS, localhost)';
              } else if (error.name === 'NotReadableError') {
                  this.error = 'ERROR: The camera is occupied';
              } else if (error.name === 'OverconstrainedError') {
                  this.error = 'ERROR: Camera installation is inappropriate';
              } else if (error.name === 'StreamApiNotSupportedError') {
                  this.error = 'ERROR: This browser does not support the stream API';
              }
          }
      },
      // Open the camera // openCamera() {
      // this.camera = 'rear'
      // this.qrcode = true
      // this.show = true
      // },
      // Close the camera // closeCamera() {
      // this.camera = 'off'
      // this.qrcode = false
      // this.show = false
      // },
      // Turn on the flashlight // openFlash() {
      // switch (this.torchActive) {
      // case true:
      // this.torchActive = false
      // break
      // case false:
      // this.torchActive = true
      // break
      // }
      // },
      // Camera reverse // switchCamera() {
      // // console.log(this.camera);
      // switch (this.camera) {
      // case 'front':
      // this.camera = 'rear'
      // console.log(this.camera)
      // break
      // case 'rear':
      // this.camera = 'front'
      // console.log(this.camera)
      // break
      // }
      // }
  },
};
</script>
<style scoped>
.error {
  font-weight: bold;
  color: red;
}
.cameraMessage {
  width: 100%;
  height: 60px;
}
.qr-scanner {
  background-image: linear-gradient(
          0deg,
          transparent 24%,
          rgba(32, 255, 77, 0.1) 25%,
          rgba(32, 255, 77, 0.1) 26%,
          transparent 27%,
          transparent 74%,
          rgba(32, 255, 77, 0.1) 75%,
          rgba(32, 255, 77, 0.1) 76%,
          transparent 77%,
          transparent
      ),
      linear-gradient(
          90 degrees,
          transparent 24%,
          rgba(32, 255, 77, 0.1) 25%,
          rgba(32, 255, 77, 0.1) 26%,
          transparent 27%,
          transparent 74%,
          rgba(32, 255, 77, 0.1) 75%,
          rgba(32, 255, 77, 0.1) 76%,
          transparent 77%,
          transparent
      );
  background-size: 3rem 3rem;
  background-position: -1rem -1rem;
  width: 100%;
  /* height: 100%; */
  height: 100vh;
  /* height: 288px; */
  position: relative;
  background-color: #1110;

  /* background-color: #111; */
}
/* .qrcode-stream-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 82px;
  clear: both;
} */
/* .qrcode-stream-wrapper >>> .qrcode-stream-camera {
  width: 213px;
  height: 210px;
  clear: both;
  margin-top: 39px;
} */
.qr-scanner .box {
  width: 213px;
  height: 213px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 0.1rem solid rgba(0, 255, 51, 0.2);
  /* background: url('http://resource.beige.world/imgs/gongconghao.png') no-repeat center center; */
}
.qr-scanner .txt {
  width: 100%;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  text-align: center;
  /* color: #f9f9f9; */
  margin: 0 auto;
  position: absolute;
  top: 70%;
  left: 0;
}
.qr-scanner .myQrcode {
  text-align: center;
  color: #00ae10;
}
.qr-scanner .line {
  height: calc(100% - 2px);
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  border-bottom: 3px solid #00ff33;
  transform: translateY(-100%);
  animation: radar-beam 2s infinite alternate;
  animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  animation-delay: 1.4s;
}

.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {
  content: '';
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;

  border: 0.2rem solid transparent;
}

.qr-scanner .box:after,
.qr-scanner .box:before {
  top: 0;
  border-top-color: #00ff33;
}

.qr-scanner .angle:after,
.qr-scanner .angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}

.qr-scanner .box:before,
.qr-scanner .angle:before {
  left: 0;
  border-left-color: #00ff33;
}

.qr-scanner .box:after,
.qr-scanner .angle:after {
  right: 0;
  border-right-color: #00ff33;
}

@keyframes radar-beam {
  0% {
      transform: translateY(-100%);
  }

  100% {
      transform: translateY(0);
  }
}
</style>

(3) Introduce on the page that requires scanning code

// 
import qrcode from '@/components/qrcode.vue';

(4) Registering components

// 
components:
        'vue-qrcode': qrcode,
    },

(5) Use components

// Render where the QR code needs to be displayed <vue-qrcode />
//If the above doesn't work, you can use the following <vue-qrcode></vue-qrcode>

This is the end of this article about Vue's QR code scanning function. For more relevant Vue QR code scanning content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: