Vue3 H5调用相机扫描二维码

1. 使用第三方库
   目前比较流行的扫描二维码库有zxing-js、quaggaJS、Html5Qrcode等，可以在Vue3项目中安装并使用这些库来实现扫描二维码功能。

npm install zxing-js

import { BrowserQRCodeReader } from '@zxing/library';

const codeReader = new BrowserQRCodeReader();
codeReader.decodeFromInputVideoDevice(undefined, 'video').then((result) => {
  console.log(result.text);
}).catch((err) => {
  console.error(err);
});

2. 使用浏览器原生API
   现代浏览器提供了WebRTC API，可以使用getUserMedia方法获取摄像头视频流，再使用Canvas API将视频流渲染到画布上，最后使用jsQR库解析二维码。

npm install jsqr

import jsQR from 'jsqr';

const video = document.createElement('video');
navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
  video.srcObject = stream;
  video.play();
}).catch((err) => {
  console.error(err);
});

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
function scanQRCode() {
  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) {
    console.log(code.data);
  } else {
    setTimeout(scanQRCode, 100);
  }
}
scanQRCode();

需要注意的是，getUserMedia方法需要在https或localhost环境下才能正常使用，否则会报错。