Vue implements the browser-side code scanning function

navigator.mediaDevices.getUserMedia(constraints)
  .then(function(stream) {
    // Use this stream
  })
  .catch(function(err) {
    // Handle error
  })

const code = jsQR(imageData, width, height, options);
if (code) {
  console.log('Found the QR code!', code);
}

<template>
  <div class="scaner" ref="scaner">
    <!-- Prompt box: used to display prompts in incompatible browsers-->
    <div class="banner" v-if="showBanner">
      <i class="close_icon" @click="() => showBanner = false"></i>
      <p class="text">If the current browser cannot scan the code, please switch to another browser and try</p>
    </div>
    <!-- Scan code box: display the scan code animation-->
    <div class="cover">
      <p class="line"></p>
      <span class="square top left"></span>
      <span class="square top right"></span>
      <span class="square bottom right"></span>
      <span class="square bottom left"></span>
      <p class="tips">Put the QR code in the box and it will be scanned automatically</p>
    </div>
    <!-- Video stream display -->
    <video
      v-show="showPlay"
      class="source"
      ref="video"
      :width="videoWH.width"
      :height="videoWH.height"
      Controls
    ></video>
    <canvas v-show="!showPlay" ref="canvas" />
    <button v-show="showPlay" @click="run">Start</button>
  </div>
</template>

// Draw a line drawLine (begin, end) {
  this.canvas.beginPath();
  this.canvas.moveTo(begin.x, begin.y);
  this.canvas.lineTo(end.x, end.y);
  this.canvas.lineWidth = this.lineWidth;
  this.canvas.strokeStyle = this.lineColor;
  this.canvas.stroke();
},
// drawBox (location) {
  if (this.drawOnfound) {
    this.drawLine(location.topLeftCorner, location.topRightCorner);
    this.drawLine(location.topRightCorner, location.bottomRightCorner);
    this.drawLine(location.bottomRightCorner, location.bottomLeftCorner);
    this.drawLine(location.bottomLeftCorner, location.topLeftCorner);
  }
},

// Initialization setup () {
  // Determine whether the browser supports the method mounted on MediaDevices.getUserMedia() if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    this.previousCode = null;
    this.parity = 0;
    this.active = true;
    this.canvas = this.$refs.canvas.getContext("2d");
    // Get the camera mode. The default setting is the back camera const facingMode = this.useBackCamera ? { exact: 'environment' } : 'user';
    // Camera video processing const handleSuccess = stream => {
       if (this.$refs.video.srcObject !== undefined) {
        this.$refs.video.srcObject = stream;
      } else if (window.videoEl.mozSrcObject !== undefined) {
        this.$refs.video.mozSrcObject = stream;
      } else if (window.URL.createObjectURL) {
        this.$refs.video.src = window.URL.createObjectURL(stream);
      } else if (window.webkitURL) {
        this.$refs.video.src = window.webkitURL.createObjectURL(stream);
      } else {
        this.$refs.video.src = stream;
      }
      // If you don't want the user to drag the progress bar, you can directly use the playsinline attribute, webkit-playsinline attribute this.$refs.video.playsInline = true;
      const playPromise = this.$refs.video.play();
      playPromise.catch(() => (this.showPlay = true));
      //Periodically scan the code for identification when the video starts playingplayPromise.then(this.run);
    };
    // Capture video stream navigator.mediaDevices
      .getUserMedia({ video: { facingMode } })
      .then(handleSuccess)
      .catch(() => {
        navigator.mediaDevices
          .getUserMedia({ video: true })
          .then(handleSuccess)
          .catch(error => {
            this.$emit("error-captured", error);
          });
      });
  }
},

run () {
  if (this.active) {
    // The browser calls the scan method requestAnimationFrame(this.tick) in a loop before the next redraw;
  }
},

// QR code recognition success event processing found (code) {
  if (this.previousCode !== code) {
    this.previousCode = code;
  } else if (this.previousCode === code) {
    this.parity += 1;
  }
  if (this.parity > 2) {
    this.active = this.stopOnScanned ? false : true;
    this.parity = 0;
    this.$emit("code-scanned", code);
  }
},

// Full stop fullStop () {
  if (this.$refs.video && this.$refs.video.srcObject) {
    // Stop the video stream sequence track this.$refs.video.srcObject.getTracks().forEach(t => t.stop());
  }
}

// Periodic code scanning and recognition tick () {
  // The video is in the preparation stage and has loaded enough data if (this.$refs.video && this.$refs.video.readyState === this.$refs.video.HAVE_ENOUGH_DATA) {
    // Start drawing the video on the canvas this.$refs.canvas.height = this.videoWH.height;
    this.$refs.canvas.width = this.videoWH.width;
    this.canvas.drawImage(this.$refs.video, 0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
    // getImageData() copies the pixel data of the specified rectangle on the canvas const imageData = this.canvas.getImageData(0, 0, this.$refs.canvas.width, this.$refs.canvas.height);
    let code = false;
    try {
      // Recognize QR code code = jsQR(imageData.data, imageData.width, imageData.height);
    } catch (e) {
      console.error(e);
    }
    // If the QR code is recognized, draw a rectangular box if (code) {
      this.drawBox(code.location);
      // Identify successful event processing this.found(code.data);
    }
  }
  this.run();
},

<template>
  <div class="scan">
    <!-- Page navigation bar-->
    <div class="nav">
      <a class="close" @click="() => $router.go(-1)"></a>
      <p class="title">Scan QR code</p>
    </div>
    <div class="scroll-container">
      <!-- Scan code subcomponent-->
      <Scanner
        v-on:code-scanned="codeScanned"
        v-on:error-captured="errorCaptured"
        :stop-on-scanned="true"
        :draw-on-found="true"
        :responsive="false"
      />
    </div>
  </div>
</template>

import Scaner from '../components/Scaner';

export default {
  name: 'Scan',
  components:
    Scanner
  },
  data () {
    return {
      errorMessage: "",
      scanned: ""
    }
  },
  methods: {
    codeScanned(code) {
      this.scanned = code;
      setTimeout(() => {
        alert(`Scan code and parse successfully: $[code]`);
      }, 200)
    },
    errorCaptured(error) {
      switch (error.name) {
        case "NotAllowedError":
          this.errorMessage = "Camera permission denied.";
          break;
        case "NotFoundError":
          this.errorMessage = "There is no connected camera.";
          break;
        case "NotSupportedError":
          this.errorMessage =
            "Seems like this page is served in non-secure context.";
          break;
        case "NotReadableError":
          this.errorMessage =
            "Couldn't access your camera. Is it already in use?";
          break;
        case "OverconstrainedError":
          this.errorMessage = "Constraints don't match any installed camera.";
          break;
        default:
          this.errorMessage = "UNKNOWN ERROR: " + error.message;
      }
      console.error(this.errorMessage);
     alert('Camera call failed');
    }
  },
  mounted () {
    var str = navigator.userAgent.toLowerCase();
    var ver = str.match(/cpu iphone os (.*?) like mac os/);
    // After testing, the camera cannot be successfully called on systems below iOS 10.3.3 if (ver && ver[1].replace(/_/g,".") < '10.3.3') {
     alert('Camera call failed');
    }
  }