vue zxing 实现一维码、二维码扫描可移动端h5使用代码亲测可用

<div class="v-body"><video ref="video" id="video" ></video><p v-if="videoInputDevicesArray.length==0">{{textContent}}</p><a v-else :href="textContent">{{textContent}}</a><van-button v-if="videoInputDevicesArray.length>0" @click="changeCamera" block type="info">切换摄像头</van-button></div></template><script>// eslint-disable-next-line no-unused-varsimport adapter from "webrtc-adapter";// WebRTC适配器 只需要引入就okimport { BrowserMultiFormatReader } from "@zxing/library";/*** zxing demo*/export default {data: () => ({codeReader: null,videoInputDevicesArray: [],selectedIndex: -1,textContent: undefined,}),created() {this.codeReader = new BrowserMultiFormatReader();alert(this.codeReader);setTimeout(() => {this.init();}, 500);},destroyed(){this.codeReader.reset();},methods: {changeCamera() {this.selectedIndex = this.selectedIndex + 1;if (this.selectedIndex >= this.videoInputDevicesArray.length) {this.selectedIndex = 0;}this.decodeFromInputVideo();},init() {this.codeReader.listVideoInputDevices().then((videoInputDevices) => {videoInputDevices.forEach((device) =>alert(`${device.label}, ${device.deviceId}`));this.videoInputDevicesArray = videoInputDevices;this.decodeFromInputVideo();}).catch((err) => console.error(err));},decodeFromInputVideo() {if (this.videoInputDevicesArray.length == 0) {this.textContent = "没有检测到可用的摄像头";this.$toast(this.textContent);document.getElementById("video").style.display="none"return;}if (this.selectedIndex >= this.videoInputDevicesArray.length) {this.selectedIndex = 0;}let selectedDeviceId;if (this.selectedIndex == -1) {selectedDeviceId = undefined;} else {selectedDeviceId = this.videoInputDevicesArray[this.selectedIndex].deviceId;this.codeReader.reset();}alert(`Started continous decode from camera with id ${selectedDeviceId}`);this.codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId,"video",(result, err) => {if (result) {alert(result);this.textContent = result.text;}if (err && !err) {console.error(err);}});},},};</script><style lang="less" scoped>video {width: 100%;height: calc(~"(100vh - 156px)");background-color: black;}.v-body {font-family: "Ropa Sans", sans-serif;color: #333;max-width: 640px;margin: 0 auto;position: relative;padding: 8px 16px;}#githubLink {position: absolute;right: 0;top: 12px;color: #2d99ff;}h1 {margin: 10px 0;font-size: 40px;}#loadingMessage {text-align: center;padding: 40px;background-color: #eee;}#canvas {width: 100%;}#output {margin-top: 20px;background: #eee;padding: 10px;padding-bottom: 0;}#output div {padding-bottom: 10px;word-wrap: break-word;}#noQRFound {text-align: center;}</style>