H5实现调用摄像头扫二维码，识别图片中的二维码（vue篇）

在H5中调用摄像头扫描二维码，可以使用navigator.mediaDevices.getUserMedia API来访问摄像头，并使用第三方库如quaggaJS来识别图片中的二维码。以下是一个使用Vue实现的示例：

1. 安装quaggaJS：

npm install quagga

2. 在Vue组件中使用quaggaJS：

<template>
  <div>
    <video id="camera" width="640" height="480" autoplay></video>
    <button @click="scanCode">扫描二维码</button>
  </div>
</template>
 
<script>
import Quagga from 'quagga';
 
export default {
  methods: {
    scanCode() {
      const video = document.getElementById('camera');
      Quagga.decodeSingle({
        inputStream: {
          name: 'Live',
          type: 'LiveStream',
          target: video,
          constraints: {
            width: 640,
            height: 480,
            facingMode: 'environment', // 使用环境摄像头
          },
        },
        locator: {
          patchSize: 'medium',
          halfSample: false,
        },
        numOfWorkers: 0, // 使用0个worker线程进行解码，因为会导致无法访问video标签
      }, (result) => {
        if (result && result.codeResult && result.codeResult.code) {
          console.log('扫描结果：', result.codeResult.code);
        }
      });
    },
  },
  mounted() {
    this.initCamera();
  },
  beforeDestroy() {
    this.stopCamera();
  },
  methods: {
    initCamera() {
      const constraints = {
        video: {
          width: 640,
          height: 480,
          facingMode: 'environment',
        },
      };
      navigator.mediaDevices.getUserMedia(constraints)
        .then((stream) => {
          document.getElementById('camera').srcObject = stream;
        })
        .catch((error) => {
          console.error('摄像头访问错误：', error);
        });
    },
    stopCamera() {
      const stream = document.getElementById('camera').srcObject;
      if (stream) {
        stream.getTracks().forEach((track) => {
          track.stop();
        });
      }
    },
  },
};
</script>

这段代码首先尝试访问用户的环境摄像头，然后使用Quagga.decodeSingle方法来扫描视频流中的二维码。扫描结果会在控制台输出。注意，在实际应用中，你可能需要添加错误处理逻辑，确保在用户拒绝访问摄像头或发生错误时能够妥善处理。