vue zxing实现一维码、二维码扫描

h5方式通过驱动摄像头进行二维码、一维码识别。代码亲测可用。

感谢：
https://github.com/zxing-js/library
重点：
BrowserQRCodeReader、BrowserMultiFormatReader
做好区分。

<template>
  <div class="v-body">
    {{textContent}}    <video
      ref="video"
      id="video"
      width="300"
      height="200"
      style="border: 1px solid gray"
    ></video>
  </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: new BrowserMultiFormatReader(),    textContent: undefined
  }),  async created () {    this.codeReader.getVideoInputDevices()
      .then((videoInputDevices) => {        const selectedDeviceId = videoInputDevices[0].deviceId;        this.codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => {          if (result) {            console.log(result);            this.textContent = result.text;
          }          if (err && !(err)) {            console.error(err);
          }
        });        console.log(`Started continous decode from camera with id ${selectedDeviceId}`);
      })
      .catch((err) => {        console.error(err);
      });
  },  methods: {
  }
};</script><style lang="scss" scoped></style>