Vue中实现扫描二维码和条形码_vue3 扫码识别二维码和条形码

如何使用Vue实现一个H5扫码功能？
安装 @zxing/library 依赖 npm i @zxing/library --save;
需要注意的是 一定要在https环境下使用！一定要在https环境下使用！一定要在https环境下使用！重要的事情说三遍。否则摄像头调用不出来。

<template>
  <div class="page-scan">
    <!-- 扫码区域 -->
    <video ref="video" id="video" class="scan-video" autoplay></video>
    <!-- 提示语 -->
    <div v-show="msgShow" class="scan-msg">{{ message}}</div>
  </div>
</template>
<script>
import { BrowserMultiFormatReader } from "@zxing/library";
export default {
  name: "scanRegion",
  data() {
    return {
      codeReader: null,
      scanText: "",
      message: "正在扫描",
      msgShow: false,
    };
  },
  created() {
    this.codeReader = new BrowserMultiFormatReader();
    this.openScan();

  },
  // 记得销毁，要不然返回再进去会不显示
  destroyed() {
    this.codeReader.reset();
  },
  methods: {
    openScan() {
      this.codeReader.getVideoInputDevices().then((videoInputDevices) => {
        this.tipShow = true;
        this.tipMsg = "正在调用摄像头...";
        // 因为获取的摄像头有可能是前置有可能是后置，但是一般最后一个会是后置，所以在这做一下处理
        // 默认获取第一个摄像头设备id
        let firstDeviceId = videoInputDevices[0].deviceId;
        if (videoInputDevices.length > 1) {
          // 获取后置摄像头
          let deviceLength = videoInputDevices.length;
          --deviceLength;
          firstDeviceId = videoInputDevices[deviceLength].deviceId;
        }
        this.decodeFromInputVideoFunc(firstDeviceId);
      }).catch((err) => {
          this.tipShow = false;
          console.error(err);
        });
    },
    decodeFromInputVideoFunc(firstDeviceId) {
      this.codeReader.reset(); // 重置
      this.scanText = "";
      this.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId,"video",(result, err) => {
        this.tipMsg = "正在尝试识别...";
        this.scanText = "";
        if (result) {
          // 获取到的是二维码内容，然后在这个if里面写业务逻辑即可
          this.scanText = result.text;
          if (this.scanText) {
            this.tipShow = false;
            this.codeReader.reset();
            let params = {
              scId: this.$route.query.scId,
              qrcode: this.scanText
            }
            this.$axios.post('/medapp/api/scanner/user/scanner/add',params).then(res => {
              if (res.data.code == 0) {
                this.$router.push({
                  path: '/scansuccess',
                  query: {
                    scId: this.$route.query.scId,
                    regId: res.data.data.regId,
                    regName: res.data.data.regName,
                    regPhone: res.data.data.regPhone,
                    regOrg: res.data.data.regOrg,
                  }
                })
              } else {
                this.$router.push({
                  path: '/scanerror',
                  query: {
                    scId: this.$route.query.scId,
                    msg: res.data.msg
                  }
                })
              }
            })
          }
        }
        if (err && !err) {
          this.message= "识别失败";
          setTimeout(() => {
            this.msgShow = false;
          }, 2000);
          console.error(err);
        }
      }
      );
    },
  },
};
</script>
 
<style lang="scss" scoped>
.scan-video {
  width: 100%;
  height: 80vh;
}
.scan-msg {
  width: 100vw;
  text-align: center;
  margin-bottom: 10vh;
  color: white;
  font-size: 5vw;
}
.page-scan {
  width: 100vw;
  background-color: #363636;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

以上就是实现一个扫码的基本内容，其中还会有很多可以优化的，比如扫码成功后停顿一下，做一个动态的框这些，有感兴趣的可以试试，分享一下；

PS：以上本人自己试验以及搜集网上内容实现的，如有不足请指出