vue调用摄像头二维码扫描

要在Vue中调用摄像头进行二维码扫描，可以使用第三方库JSQR来实现。首先，我们需要先安装JSQR库。

在Vue项目的终端中运行以下命令来安装JSQR：

npm install jsqr --save

安装完成后，我们可以在Vue的组件中引入JSQR库，并使用它的方法来进行二维码扫描。

在需要调用摄像头进行扫描的组件中，我们可以创建一个video元素来预览摄像头捕获的图像，并创建一个canvas元素来展示扫描到的二维码。

<template>
  <div>
    <video ref="video" width="640" height="480"></video>
    <canvas ref="canvas" width="640" height="480" style="display:none"></canvas>
  </div>
</template>

<script>
import jsQR from 'jsqr';

export default {
  mounted() {
    const videoElement = this.$refs.video;
    const canvasElement = this.$refs.canvas;
    const canvasContext = canvasElement.getContext('2d');

    navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
      .then(function (stream) {
        videoElement.srcObject = stream;
        videoElement.play();
        requestAnimationFrame(tick);
      });

    function tick() {
      if (videoElement.readyState === videoElement.HAVE_ENOUGH_DATA) {
        canvasContext.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
        const imageData = canvasContext.getImageData(0, 0, canvasElement.width, canvasElement.height);
        const code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: "dontInvert" });
        
        if (code) {
          console.log(code.data); // 打印扫描到的二维码信息
        }
      }
      requestAnimationFrame(tick);
    }
  }
};
</script>

在以上代码中，我们在组件的mounted生命周期钩子中调用navigator.mediaDevices.getUserMedia函数来获取用户的媒体设备，然后将返回的流设置为video元素的srcObject，并通过调用play方法来开始预览。

在tick函数中，我们检查视频元素是否已准备好数据，并在每一帧中绘制视频帧到canvas元素上。接着，我们使用jsQR库来解析图像数据，获取扫描到的二维码信息。

最后，我们可以在控制台上打印出扫描到的二维码信息。你可以根据需要将其存储到变量中，或者进行其他操作。

这样，我们就可以在Vue中调用摄像头进行二维码扫描了。记得在使用前检查浏览器是否允许访问摄像头，并在移动设备上调用前后置摄像头。