vue3 pc端识别二维码

要在Vue3中实现PC端识别二维码，需要使用一个JavaScript库，例如 `jsQR` 或 `qrcode-reader`。这些库可以从图像中解码出二维码信息，然后将其用于您的应用程序。

首先，您需要安装所选库。使用 `npm` 命令进行安装：

npm install jsqr

或者

npm install qrcode-reader

然后，在Vue3组件中，可以使用 `HTML5` 的 `getUserMedia` API 获取摄像头的视频流，并将其渲染到 `canvas` 元素中。然后，使用所选库从图像中读取二维码信息。

下面是一个简单的示例代码：

<template>
  <div>
    <video ref="video" autoplay></video>
    <canvas ref="canvas"></canvas>
    <div>{{ qrcode }}</div>
  </div>
</template>

<script>
import jsQR from 'jsqr';

export default {
  data() {
    return {
      qrcode: '',
    };
  },
  mounted() {
    const video = this.$refs.video;
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    
    navigator.mediaDevices.getUserMedia({
      video: true,
    }).then((stream) => {
      video.srcObject = stream;
      video.play();
      requestAnimationFrame(tick);
    });
    
    const tick = () => {
      if (video.readyState === video.HAVE_ENOUGH_DATA) {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const code = jsQR(imageData.data, imageData.width, imageData.height);
        if (code) {
          this.qrcode = code.data;
        }
      }
      requestAnimationFrame(tick);
    };
  },
};
</script>

上述代码使用 `jsQR` 库从视频流中读取二维码信息，并将其赋值给 `qrcode` 数据属性，以便在模板中显示。您可以根据需要修改代码，以适应您的应用程序要求。