前端实现扫一扫，扫描二维码（VUE，H5）；jsQR，zxing两种方式

文章介绍

这里使用了jsQR和zxing两种方式，分别在普通的H5和vue中使用，文章附上完整demo和一些注意事项

注意事项

这里H5也好，vue也好，如果想要部署到服务器上，需要用https协议，否则无法使用。本地启动项目的时候，很多人在vue中无法实现该效果，那是因为需要我们从localhost路径打开，否则也无法使用摄像头

vue 或 H5，使用jsQR

使用jsQR这个JS库

这里附上这个库的地址：https://s3.gendome.net/activity/js/jsQR.js

先把上面这个JS文件下载下来，比如我这里命名为jsQR.js，使用我这样的写法

H5中

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jsQR.js"></script>
</head><body><video style="display: none;" id="video"></video><canvas style="width: 100%; height: 100%;" id="canvas"></canvas><canvas style="display: none;" id="2d"></canvas>
</body>
<script type="text/javascript">var video = document.createElement("video");var canvasElement = document.getElementById("canvas");var canvas = canvasElement.getContext("2d");// 尝试打开手机上安装后置摄像头navigator.mediaDevices.getUserMedia({video: { facingMode: "environment" }}).then(function (stream) {video.srcObject = stream;// 阻止IOS视频全屏video.setAttribute("playsinline", true);video.play();requestAnimationFrame(tick);});function tick() {if (video.readyState === video.HAVE_ENOUGH_DATA) {canvasElement.hidden = false;canvasElement.height = video.videoHeight;canvasElement.width = video.videoWidth;canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);// QR码解析var code = jsQR(imageData.data,   // 图像数据imageData.width,  // 宽度imageData.height, // 高度{inversionAttempts: "dontInvert",});if (code) {console.log(code.data);}}requestAnimationFrame(tick);}
</script></html>

vue中

<template><div><video style="display: none" id="video"></video><canvas style="width: 100vw; margin-top: 13vw" id="canvas"></canvas><canvas style="display: none" id="2d"></canvas> </div>
</template>
<script setup>
import { ref, onMounted} from "vue";
import "@/utils/jsQR.js"; // 添加关闭摄像头的函数const stopMediaTracks = () => {if (streams) {streams.getTracks().forEach((track) => track.stop());}video.srcObject = null;
};
const streams = ref(null); // 初始化 stream 变量onMounted(() => {var video = document.createElement("video");var canvasElement = document.getElementById("canvas");var canvas = canvasElement.getContext("2d");console.log(navigator.mediaDevices);// 尝试打开手机上安装后置摄像头navigator.mediaDevices.getUserMedia({video: { facingMode: "environment" },}).then(function (stream) {streams.value = stream;video.srcObject = stream;// 阻止IOS视频全屏video.setAttribute("playsinline", true);video.play();requestAnimationFrame(tick);});function tick() {if (video.readyState === video.HAVE_ENOUGH_DATA) {canvasElement.hidden = false;canvasElement.height = video.videoHeight;canvasElement.width = video.videoWidth;canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);var imageData = canvas.getImageData(0,0,canvasElement.width,canvasElement.height);// QR码解析var code = jsQR(imageData.data, // 图像数据imageData.width, // 宽度imageData.height, // 高度{inversionAttempts: "dontInvert",});if (code) {console.log(code.data);alert(code.data);}}requestAnimationFrame(tick);} 
});
</script>

优点：

jsQR是一个完全独立的javascript脚本库，可以用于扫描QR码。

它不限制于任何平添，可以轻松地扫描前端网络摄像头流、用户上传的图像。

如果使用jsQR扫描网络摄像头流，则需要从视频流中提取图像数据。接着可以将其传递给jsQR。

VUE中，使用zxing库

zxing 是一款由用 Typescript 编写的一维/二维条码图像处理库，即条形码与二维码，它是由 Java 版本 ZXing 库移植而来的。

git地址：https://github.com/zxing-js/library

在线案例：ZXing TypeScript | Demo & Examples

首先安装：

npm install @zxing/library -S

vue文件中：

<template><button @click="scanner">扫码</button>&nbsp;<button @click="close">关闭</button>&nbsp;<div class="container"><video id="video"></video><div v-if="mask" class="mask"></div></div><h4>识别到的信息：<span style="color: red;">{{ message }}</span></h4>
</template><script setup>
import { onMounted, ref } from "vue";
import { BrowserMultiFormatReader } from '@zxing/library';let message = ref('');
let codeReader = null;
let selectedDeviceId = '';
let mask = ref(false);function init() {// 识别和处理多种常见的条形码和二维码格式codeReader = new BrowserMultiFormatReader();// 获取当前设备上可用的视频输入设备列表codeReader.getVideoInputDevices().then(videoInputDevices => {if (videoInputDevices.length > 1) {// 后缀摄像头（手机）selectedDeviceId = videoInputDevices[1].deviceId;}else {// 前置摄像头selectedDeviceId = videoInputDevices[0].deviceId;}})
}onMounted(() => {init();
})function scanner() {mask.value = true// 自动打开指定的视频输入设备，并实时对视频流中的每一帧图像进行条形码和二维码的解码操作，此方法不是只进行一次解码尝试，而是在视频流持续传输的过程中，不断地对每一帧图像进行解码分析codeReader.decodeFromVideoDevice(selectedDeviceId, 'video', (result, err) => {if (result) {message.value = result.text;}if (err) {}})
}
function close() {codeReader.reset();message.value = '';mask.value = false;
}
</script><style>
.container {width: 100%;height: 60vh;position: relative;margin-top: 10px;overflow: hidden;
}
.container > video {width: 100%;height: 100%;object-fit: cover;
}
.mask {position: absolute;left: 15%;top: 20%;max-width: 100%;width: 70%;height: 60%;border-radius: 2px;outline: rgba(0, 0, 0, .25) solid 20vmax;
}
</style>