<template>
  <div>
    <input type="text" v-model="text" />
    <div ref="qrcode"></div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      text: "Hello World"
    };
  },
  mounted() {
    new QRCode(this.$refs.qrcode, this.text);
  }
};
</script>

<template>
  <div>
    <div v-if="!hasCamera">
      沒有檢測(cè)到攝像頭，請(qǐng)?jiān)谥С諻ebRTC的瀏覽器中打開。
    </div>
    <div v-else>
      <video ref="video" :width="videoWidth" :height="videoHeight"></video>
      <canvas ref="canvas" :width="videoWidth" :height="videoHeight"></canvas>
      <button @click="startScan">開始掃描</button>
      <div v-if="result">{{ result }}</div>
    </div>
  </div>
</template>
<script>
import QrcodeReader from "vue-qrcode-reader";
export default {
  components: {
    QrcodeReader
  },
  data() {
    return {
      hasCamera: true,
      videoWidth: 640,
      videoHeight: 480,
      result: ""
    };
  },
  methods: {
    startScan() {
      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      const context = canvas.getContext("2d");
      navigator.mediaDevices
        .getUserMedia({
          video: { width: this.videoWidth, height: this.videoHeight }
        })
        .then(stream => {
          video.srcObject = stream;
          video.play();
          const tick = () => {
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
              context.drawImage(video, 0, 0, this.videoWidth, this.videoHeight);
              const imageData = context.getImageData(0, 0, this.videoWidth, this.videoHeight);
              const code = QrcodeReader(imageData);
              if (code) {
                this.result = code.data;
                stream.getTracks().forEach(track => track.stop());
              }
              requestAnimationFrame(tick);
            }
          };
          requestAnimationFrame(tick);
        })
        .catch(error => {
          console.error(error);
          this.hasCamera = false;
        });
    }
  }
};
</script>