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-vars import adapter from "webrtc-adapter"; // WebRTC適配器 只需要引入就ok import { 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>

總結

以上是生活随笔為你收集整理的vue zxing 实现一维码、二维码扫描可移动端h5使用代码亲测可用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。